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