Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 8x 8x 8x 8x 8x 8x 8x 89x 89x 89x 89x 8x 8x | import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { layout, space } from 'styled-system';
import { Flex } from 'src/elements/grid';
import {
refType,
scaleFont,
typography,
flexboxProps,
} from 'src/utils/styledHelpers';
import { passThrough, removeSomeProps } from 'src/utils/componentHelpers';
import { getGlobalStyles } from 'src/global-styles';
import { CheckboxLabel } from '../CheckboxLabel';
const { grid: { gutter } } = getGlobalStyles();
const commonPropsToTrim = [
'controlId',
'controlLabelProps',
'enableAutoChecking',
'hasSelectAll',
'inputRef',
'onChangeSelectAll',
'optionSelectAll',
'plainText',
'setValue',
'wrapperProps',
];
const propsToTrimLabel = [
...commonPropsToTrim,
'name',
'onChange',
'option',
];
const propsToTrimControl = [
...commonPropsToTrim,
...Object.keys(typography.propTypes),
...Object.keys(flexboxProps.propTypes),
];
const CheckboxInputComponent = styled('input')`
${layout}
${space}
cursor: pointer;
`;
CheckboxInputComponent.defaultProps = {
m: 0,
ml: gutter,
mr: scaleFont(gutter, 0.5),
};
const CheckboxInput = props => {
const {
checkboxSize, disabled, flexContainerProps, id, inputRef, name, option,
} = props;
const propsForCheckboxLabel = removeSomeProps(passThrough(CheckboxInput, props), propsToTrimLabel);
const propsForCheckboxControl = removeSomeProps(passThrough(CheckboxInput, props), propsToTrimControl);
return (
<CheckboxLabel
key={`${option.label}-label`}
{...propsForCheckboxLabel}
>
<Flex
alignItems="baseline"
{...flexContainerProps}
>
<CheckboxInputComponent
key={option.label}
ref={inputRef}
disabled={disabled}
id={id || name}
maxHeight={checkboxSize}
maxWidth={checkboxSize}
minHeight={checkboxSize}
minWidth={checkboxSize}
type="checkbox"
{...propsForCheckboxControl}
/>
<span>
{option.label}
</span>
</Flex>
</CheckboxLabel>
);
};
CheckboxInput.propTypes = {
checkboxSize: PropTypes.any,
disabled: PropTypes.bool,
flexContainerProps: PropTypes.object,
inputRef: refType,
option: PropTypes.any.isRequired,
...typography.propTypes,
};
CheckboxInput.defaultProps = {
checkboxSize: 12,
disabled: false,
flexContainerProps: {},
inputRef: () => {},
};
export { CheckboxInput };
|