m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add Checkbox id prop (#8553)

Browse Source 
This prop allows associating the checkbox with a label.
This commit is contained in:
Mark Stacey 2020-05-07 23:25:06 -03:00 committed by GitHub
parent 4a065cc8c8
commit 5e5215f907
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/components/ui/check-box/check-box.component.js
View File

@ -10,7 +10,7 @@ const CHECKBOX_STATE = {
export const { CHECKED, INDETERMINATE, UNCHECKED } = CHECKBOX_STATE export const { CHECKED, INDETERMINATE, UNCHECKED } = CHECKBOX_STATE
const CheckBox = ({ className, disabled, onClick, checked }) => { const CheckBox = ({ className, disabled, id, onClick, checked }) => {
if (typeof checked === 'boolean') { if (typeof checked === 'boolean') {
checked = checked checked = checked
? CHECKBOX_STATE.CHECKED ? CHECKBOX_STATE.CHECKED
@ -30,6 +30,7 @@ const CheckBox = ({ className, disabled, onClick, checked }) => {
'fa fa-minus-square': checked === CHECKBOX_STATE.INDETERMINATE, 'fa fa-minus-square': checked === CHECKBOX_STATE.INDETERMINATE,
})} })}
disabled={disabled} disabled={disabled}
id={id}
onClick={ onClick={
onClick onClick
? (event) => { ? (event) => {
@ -48,6 +49,7 @@ const CheckBox = ({ className, disabled, onClick, checked }) => {
CheckBox.propTypes = { CheckBox.propTypes = {
className: PropTypes.string, className: PropTypes.string,
disabled: PropTypes.bool, disabled: PropTypes.bool,
id: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
checked: PropTypes.oneOf([...Object.keys(CHECKBOX_STATE), true, false]).isRequired, checked: PropTypes.oneOf([...Object.keys(CHECKBOX_STATE), true, false]).isRequired,
} }
@ -55,6 +57,7 @@ CheckBox.propTypes = {
CheckBox.defaultProps = { CheckBox.defaultProps = {
className: undefined, className: undefined,
disabled: false, disabled: false,
id: undefined,
} }
export default CheckBox export default CheckBox

3
ui/app/components/ui/check-box/check-box.stories.js
View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import { action } from '@storybook/addon-actions' import { action } from '@storybook/addon-actions'
import CheckBox, { CHECKED, INDETERMINATE, UNCHECKED } from './check-box.component' import CheckBox, { CHECKED, INDETERMINATE, UNCHECKED } from './check-box.component'
import { boolean, select } from '@storybook/addon-knobs/react' import { boolean, select, text } from '@storybook/addon-knobs/react'
export default { export default {
title: 'Check Box', title: 'Check Box',
@ -19,6 +19,7 @@ export const primaryType = () => (
<CheckBox <CheckBox
checked={select('checked state', checkboxOptions, UNCHECKED)} checked={select('checked state', checkboxOptions, UNCHECKED)}
disabled={boolean('Disabled', false)} disabled={boolean('Disabled', false)}
id={text('ID', 'checkboxId')}
onClick={action('checkbox clicked')} onClick={action('checkbox clicked')}
/> />
) )