@massds/mayflower-react/dist/InputCheckBox/index.mjs

React versions of Mayflower design system UI components

const _excluded = ["icon", "label", "onChange", "onKeyDown", "value", "tabIndex", "role"];
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
/**
 * InputCheckBox module.
 * @module @massds/mayflower-react/InputCheckBox
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-checkbox
 * @requires module:@massds/mayflower-assets/scss/01-atoms/helper-text
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import is from "is";
import Input from "../Input/index.mjs";
import Error from "../Input/error.mjs";
import { InputContext } from "../Input/context.mjs";
const CheckBox = props => {
  const context = React.useContext(InputContext);
  const value = context.value;
  const icon = props.icon,
    label = props.label,
    disabled = props.disabled,
    required = props.required,
    id = props.id,
    defaultValue = props.defaultValue,
    onKeyDown = props.onKeyDown,
    onChange = props.onChange,
    tabIndex = props.tabIndex,
    role = props.role;
  React.useEffect(() => {
    context.updateState({
      value: defaultValue
    });
  }, [defaultValue]);
  const handleClick = e => {
    e.persist();
    context.updateState({
      value: !value ? props.value : !value
    }, () => {
      if (is.fn(onChange)) {
        onChange(e, context.getValue(), id);
      }
    });
    if (!!value && required) {
      context.updateState({
        showError: true
      });
    } else {
      context.updateState({
        showError: false
      });
    }
  };
  const checkboxClasses = classNames({
    'ma__input-checkbox': true,
    'ma__input-checkbox--disabled': disabled
  });
  const inputProps = {
    type: 'checkbox',
    id: id,
    value: props.value,
    checked: value === props.value,
    onClick: handleClick,
    tabIndex: tabIndex,
    disabled: disabled,
    role: role
  };
  if (is.fn(onKeyDown)) {
    inputProps.onKeyDown = onKeyDown;
  }
  return /*#__PURE__*/React.createElement("span", {
    className: checkboxClasses
  }, /*#__PURE__*/React.createElement("input", inputProps), icon && icon, /*#__PURE__*/React.createElement("label", {
    htmlFor: id,
    tabIndex: -1
  }, /*#__PURE__*/React.createElement("span", null, label)));
};
CheckBox.propTypes = process.env.NODE_ENV !== "production" ? {
  icon: PropTypes.shape({
    name: PropTypes.string,
    title: PropTypes.string,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    className: PropTypes.string,
    fill: PropTypes.string
  }),
  label: PropTypes.string,
  disabled: PropTypes.bool,
  required: PropTypes.bool,
  id: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  onKeyDown: PropTypes.func,
  defaultValue: PropTypes.string,
  tabIndex: PropTypes.number,
  role: PropTypes.string
} : {};
const InputCheckBox = props => {
  const icon = props.icon,
    label = props.label,
    onChange = props.onChange,
    onKeyDown = props.onKeyDown,
    value = props.value,
    tabIndex = props.tabIndex,
    role = props.role,
    inputProps = _objectWithoutPropertiesLoose(props, _excluded);
  // Input and checkBox share the props.checked, props.id values.
  const checkBoxProps = {
    icon: icon,
    label: label,
    id: props.id,
    value: value,
    required: props.required,
    onChange: onChange,
    onKeyDown: onKeyDown,
    tabIndex: tabIndex,
    disabled: props.disabled,
    defaultValue: props.defaultValue,
    role: role
  };
  return /*#__PURE__*/React.createElement(Input, inputProps, /*#__PURE__*/React.createElement(CheckBox, checkBoxProps), /*#__PURE__*/React.createElement(Error, {
    id: props.id
  }));
};
InputCheckBox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Id of the input that the label is tied to and the value is associated with in the formContext. */
  id: PropTypes.string,
  /** Value of the input that is associated with in the formContext. (required) */
  value: PropTypes.string.isRequired,
  /** Default input value. */
  defaultValue: PropTypes.string,
  /** Tab index for the checkbox input. */
  tabIndex: PropTypes.number,
  /** Label for the checkbox input. */
  label: PropTypes.string,
  /** Icon that renders after the label. */
  icon: PropTypes.shape({
    title: PropTypes.string,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    className: PropTypes.string,
    fill: PropTypes.string
  }),
  /** Custom callback function called when input checked value is changed. */
  onChange: PropTypes.func,
  /** Custom callback function called when a keyboard action is triggered. */
  onKeyDown: PropTypes.func,
  /** Whether the input is disabled. */
  disabled: PropTypes.bool,
  /** Whether checked is required. */
  required: PropTypes.bool,
  /** The label text for the input field, can be a string or a component */
  labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
  /** Pass array of classNames to input wrapper div */
  classes: PropTypes.arrayOf(PropTypes.string),
  role: PropTypes.string
} : {};
export default InputCheckBox;