All files / elements/forms/CheckboxField/CheckboxInput index.js

100% Statements 13/13
100% Branches 2/2
50% Functions 1/2
100% Lines 13/13

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 };