@mapbox/mr-ui/control-checkbox-set/control-checkbox-set.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ControlCheckboxSet;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var _icon = _interopRequireDefault(require("../icon"));
var _classnames = _interopRequireDefault(require("classnames"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ControlCheckboxSet(_ref) {
  let {
    id,
    onChange,
    value = [],
    options,
    autoFocus = false,
    icon = 'check',
    validationError,
    themeCheckboxContainer = 'txt-s block mb6 flex',
    themeCheckbox = 'mr6 inline-block checkbox--blue checkbox--s-label',
    themeControlWrapper
  } = _ref;
  const onCheckboxChange = e => {
    const current = e.target.value;
    const index = value.indexOf(current);
    const newValue = value;
    if (index === -1) {
      newValue.push(current);
    } else {
      newValue.splice(index, 1);
    }
    return onChange(newValue, id);
  };
  const groupProps = {
    id,
    'data-testid': `${id}-input`
  };
  if (validationError) {
    groupProps['aria-invalid'] = true;
  }
  const renderOptions = (_ref2, index) => {
    let {
      label,
      ...d
    } = _ref2;
    const isActive = value.includes(d.value);
    const extraProps = (0, _omit.default)(d, ['value', 'label']);
    const checkboxLabelClasses = (0, _classnames.default)(`checkbox-container ${themeCheckboxContainer}`, {
      'cursor-pointer': !d.disabled
    });
    return /*#__PURE__*/_react.default.createElement("label", {
      key: d.value,
      className: checkboxLabelClasses
    }, /*#__PURE__*/_react.default.createElement("input", _extends({
      value: d.value,
      checked: isActive,
      "aria-checked": isActive,
      autoFocus: autoFocus && isActive,
      onChange: onCheckboxChange,
      name: id,
      "data-testid": `${id}-${index}-input`,
      type: "checkbox"
    }, extraProps)), /*#__PURE__*/_react.default.createElement("div", {
      className: `${themeCheckbox} checkbox`
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      name: icon
    })), label);
  };
  return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
    themeControlWrapper: themeControlWrapper,
    id: id,
    validationError: validationError
  }, /*#__PURE__*/_react.default.createElement("div", groupProps, options.map(renderOptions)));
}
ControlCheckboxSet.propTypes = {
  /** Unique id for this control. */
  id: _propTypes.default.string.isRequired,
  /**
   * An array of object(s) that represent each option of the set.
   * Each object should contain two fields:
   *
   * - `label` which can either be a string or valid JSX
   * - `value` a unique string value
   *
   * Any additional fields added will be passed as attributes to the input
   * element.
   */
  options: _propTypes.default.arrayOf(_propTypes.default.shape({
    label: _propTypes.default.node.isRequired,
    value: _propTypes.default.string.isRequired
  })).isRequired,
  /**
   * Invoked when the control's value changes.
   * Passed two arguments:
   *
   * - The value. A string matching the `value` field of one of the `options`
   *   props passed.
   * - The `id` prop.
   */
  onChange: _propTypes.default.func.isRequired,
  /** Accepts an array of strings, where each string matches the value property of an entry in the options prop. */
  value: _propTypes.default.array,
  /** Icon to use for the checkbox active style. Must match an icon name available in Assembly. */
  icon: _propTypes.default.string,
  /** When `true`, autofocus attributes are applied to the input that matches the `value` prop passed. */
  autoFocus: _propTypes.default.bool,
  /** A validation error to display beneath the control. */
  validationError: _propTypes.default.node,
  /** Classes to apply to the checkbox container. */
  themeCheckboxContainer: _propTypes.default.string,
  /** Classes to apply to the checkbox element. */
  themeCheckbox: _propTypes.default.string,
  /** Classes to apply to the control container. */
  themeControlWrapper: _propTypes.default.string
};