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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _is = _interopRequireDefault(require("is"));
var _index = _interopRequireDefault(require("../Input/index.js"));
var _error = _interopRequireDefault(require("../Input/error.js"));
var _context = require("../Input/context.js");
var _excluded = ["icon", "label", "onChange", "onKeyDown", "value", "tabIndex", "role"];
/**
 * 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
 */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
var CheckBox = function CheckBox(props) {
  var context = _react["default"].useContext(_context.InputContext);
  var value = context.value;
  var 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["default"].useEffect(function () {
    context.updateState({
      value: defaultValue
    });
  }, [defaultValue]);
  var handleClick = function handleClick(e) {
    e.persist();
    context.updateState({
      value: !value ? props.value : !value
    }, function () {
      if (_is["default"].fn(onChange)) {
        onChange(e, context.getValue(), id);
      }
    });
    if (!!value && required) {
      context.updateState({
        showError: true
      });
    } else {
      context.updateState({
        showError: false
      });
    }
  };
  var checkboxClasses = (0, _classnames["default"])({
    'ma__input-checkbox': true,
    'ma__input-checkbox--disabled': disabled
  });
  var inputProps = {
    type: 'checkbox',
    id: id,
    value: props.value,
    checked: value === props.value,
    onClick: handleClick,
    tabIndex: tabIndex,
    disabled: disabled,
    role: role
  };
  if (_is["default"].fn(onKeyDown)) {
    inputProps.onKeyDown = onKeyDown;
  }
  return /*#__PURE__*/_react["default"].createElement("span", {
    className: checkboxClasses
  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), icon && icon, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: id,
    tabIndex: -1
  }, /*#__PURE__*/_react["default"].createElement("span", null, label)));
};
CheckBox.propTypes = process.env.NODE_ENV !== "production" ? {
  icon: _propTypes["default"].shape({
    name: _propTypes["default"].string,
    title: _propTypes["default"].string,
    width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
    height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
    className: _propTypes["default"].string,
    fill: _propTypes["default"].string
  }),
  label: _propTypes["default"].string,
  disabled: _propTypes["default"].bool,
  required: _propTypes["default"].bool,
  id: _propTypes["default"].string,
  value: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  onKeyDown: _propTypes["default"].func,
  defaultValue: _propTypes["default"].string,
  tabIndex: _propTypes["default"].number,
  role: _propTypes["default"].string
} : {};
var InputCheckBox = function InputCheckBox(props) {
  var 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.
  var 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["default"].createElement(_index["default"], inputProps, /*#__PURE__*/_react["default"].createElement(CheckBox, checkBoxProps), /*#__PURE__*/_react["default"].createElement(_error["default"], {
    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["default"].string,
  /** Value of the input that is associated with in the formContext. (required) */
  value: _propTypes["default"].string.isRequired,
  /** Default input value. */
  defaultValue: _propTypes["default"].string,
  /** Tab index for the checkbox input. */
  tabIndex: _propTypes["default"].number,
  /** Label for the checkbox input. */
  label: _propTypes["default"].string,
  /** Icon that renders after the label. */
  icon: _propTypes["default"].shape({
    title: _propTypes["default"].string,
    width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
    height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
    className: _propTypes["default"].string,
    fill: _propTypes["default"].string
  }),
  /** Custom callback function called when input checked value is changed. */
  onChange: _propTypes["default"].func,
  /** Custom callback function called when a keyboard action is triggered. */
  onKeyDown: _propTypes["default"].func,
  /** Whether the input is disabled. */
  disabled: _propTypes["default"].bool,
  /** Whether checked is required. */
  required: _propTypes["default"].bool,
  /** The label text for the input field, can be a string or a component */
  labelText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
  /** Pass array of classNames to input wrapper div */
  classes: _propTypes["default"].arrayOf(_propTypes["default"].string),
  role: _propTypes["default"].string
} : {};
var _default = exports["default"] = InputCheckBox;
module.exports = exports.default;