@atlaskit/form/dist/es2019/checkbox-field.js

A form allows people to input information.

import React, { useCallback } from 'react';
import Field from './field';
/**
 * __Checkbox field__
 *
 * A checkbox field is a form field that lets users select an item. Users can check or uncheck the checkbox.
 *
 * - [Examples] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
 * - [Code] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
 * - [Usage] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
 */
const CheckboxField = ({
  children,
  defaultIsChecked = false,
  isDisabled,
  isRequired,
  label,
  name,
  value
}) => {
  // Maintains a memoised list of the default values
  const defaultValue = useCallback((currentValue = []) => defaultIsChecked && value !== undefined ? [...currentValue, value] : currentValue, [value, defaultIsChecked]);
  return value !== undefined ? /*#__PURE__*/React.createElement(Field, {
    defaultValue: defaultValue,
    isDisabled: isDisabled,
    isRequired: isRequired,
    label: label,
    name: name,
    transform: (event, currentValue) => !Array.isArray(event) && event.currentTarget.checked && currentValue ? [...currentValue, value] : currentValue.filter(v => v !== value)
  }, ({
    fieldProps: {
      value: fieldValue,
      onChange,
      ...otherFieldProps
    },
    ...others
  }) => children({
    fieldProps: {
      ...otherFieldProps,
      // Setting to any because it's typed weirdly at the field level
      onChange: v => onChange(v),
      isChecked: !!fieldValue.find(v => v === value),
      value
    },
    ...others
  })) : /*#__PURE__*/React.createElement(Field, {
    defaultValue: defaultIsChecked,
    isDisabled: isDisabled,
    isRequired: isRequired,
    label: label,
    name: name,
    transform: event => typeof event === 'boolean' ? event : event.currentTarget.checked
  }, ({
    fieldProps: {
      value: fieldValue,
      onChange,
      ...otherFieldProps
    },
    ...others
  }) => children({
    fieldProps: {
      ...otherFieldProps,
      // Setting to any because it's typed weirdly at the field level
      onChange: v => onChange(v),
      isChecked: fieldValue,
      value
    },
    ...others
  }));
};
export default CheckboxField;