@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");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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, ["icon", "label", "onChange", "onKeyDown", "value", "tabIndex", "role"]); // 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 = InputCheckBox;
exports["default"] = _default;
module.exports = exports.default;