@helpscout/hsds-react/components/Choice/Choice.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Choice = _interopRequireDefault(require("./Choice.Input"));

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _HelpText = _interopRequireDefault(require("../HelpText"));

var _Text = _interopRequireDefault(require("../Text"));

var _VisuallyHidden = _interopRequireDefault(require("../VisuallyHidden"));

var _ChoiceGroup = _interopRequireDefault(require("../ChoiceGroup/ChoiceGroup.Context"));

var _classnames = _interopRequireDefault(require("classnames"));

var _id = require("../../utilities/id");

var _Choice2 = require("./Choice.css");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var uniqueID = (0, _id.createUniqueIDFactory)('Choice');

var Choice = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Choice, _React$PureComponent);

  function Choice() {
    var _this;

    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
      _args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(_args)) || this;
    _this.state = {
      checked: _this.props.checked,
      id: _this.props.id || uniqueID(_this.props.componentID)
    };

    _this.handleOnChange = function (value, checked) {
      _this.setState({
        checked: checked
      });

      _this.props.onChange(value, checked);
    };

    _this.handleOnEnter = function (value, checked) {
      _this.setState({
        checked: checked
      });

      _this.props.onEnter(value, checked);
    };

    _this.handleOnBlur = function (event) {
      _this.props.onBlur(event);
    };

    _this.handleOnFocus = function (event) {
      _this.props.onFocus(event);
    };

    _this.handleOnEnterWithContext = function (contextProps) {
      return function () {
        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
          args[_key2] = arguments[_key2];
        }

        _this.handleOnEnter.apply(null, args);

        if (contextProps.onEnter) {
          contextProps.onEnter.apply(null, args);
        }
      };
    };

    _this.handleOnBlurWithContext = function (contextProps) {
      return function () {
        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
          args[_key3] = arguments[_key3];
        }

        _this.handleOnBlur.apply(null, args);

        if (contextProps.onBlur) {
          contextProps.onBlur.apply(null, args);
        }
      };
    };

    _this.handleOnChangeWithContext = function (contextProps) {
      return function () {
        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
          args[_key4] = arguments[_key4];
        }

        if (contextProps.onChange) {
          contextProps.onChange.apply(null, args);

          _this.props.onChange.apply(null, args);
        } else {
          _this.handleOnChange.apply(null, args);
        }
      };
    };

    _this.handleOnFocusWithContext = function (contextProps) {
      return function () {
        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
          args[_key5] = arguments[_key5];
        }

        _this.handleOnFocus.apply(null, args);

        if (contextProps.onFocus) {
          contextProps.onFocus.apply(null, args);
        }
      };
    };

    _this.getLabelMarkup = function () {
      var _this$props = _this.props,
          children = _this$props.children,
          disabled = _this$props.disabled,
          hideLabel = _this$props.hideLabel,
          label = _this$props.label,
          stacked = _this$props.stacked;

      if (!children && !label) {
        return null;
      }

      var className = (0, _classnames.default)('c-Choice__label-text', stacked && 'is-stacked');
      var labelTextMarkup = children;

      if (!children) {
        labelTextMarkup = hideLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisuallyHidden.default, {
          children: label
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
          muted: disabled,
          children: label
        });
      }

      var labelMarkup = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice2.ChoiceLabelTextUI, {
        className: className,
        children: labelTextMarkup
      });

      if (stacked) {
        return labelMarkup;
      }

      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
        children: labelMarkup
      });
    };

    _this.getHelpTextMarkup = function () {
      var _this$props2 = _this.props,
          helpText = _this$props2.helpText,
          stacked = _this$props2.stacked,
          state = _this$props2.state;
      var choiceID = _this.state.id;
      var className = (0, _classnames.default)('c-Choice__help-text', stacked && 'is-stacked');
      return helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice2.ChoiceHelpTextUI, {
        className: className,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpText.default, {
          state: state,
          muted: true,
          id: choiceID + "_description",
          children: helpText
        })
      });
    };

    _this.getInputMarkup = function (contextProps) {
      var _this$props3 = _this.props,
          align = _this$props3.align,
          autoFocus = _this$props3.autoFocus,
          disabled = _this$props3.disabled,
          helpText = _this$props3.helpText,
          inputRef = _this$props3.inputRef,
          innerRef = _this$props3.innerRef,
          kind = _this$props3.kind,
          name = _this$props3.name,
          readOnly = _this$props3.readOnly,
          stacked = _this$props3.stacked,
          state = _this$props3.state,
          type = _this$props3.type,
          value = _this$props3.value,
          rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["align", "autoFocus", "disabled", "helpText", "inputRef", "innerRef", "kind", "name", "readOnly", "stacked", "state", "type", "value"]);
      var _this$state = _this.state,
          checked = _this$state.checked,
          choiceID = _this$state.id;
      var isChecked = contextProps.selectedValue && contextProps.selectedValue.includes(value) || checked || false;
      var inputProps = (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        align: align,
        autoFocus: autoFocus,
        checked: isChecked,
        disabled: disabled,
        helpText: helpText,
        id: choiceID,
        ariaDescribedBy: helpText ? choiceID + "_description" : null,
        inputRef: inputRef,
        innerRef: innerRef,
        kind: kind,
        name: contextProps.name || name,
        onBlur: _this.handleOnBlurWithContext(contextProps),
        onFocus: _this.handleOnFocusWithContext(contextProps),
        onChange: _this.handleOnChangeWithContext(contextProps),
        onEnter: _this.handleOnEnterWithContext(contextProps),
        readOnly: readOnly,
        state: state,
        type: type,
        value: value
      });

      var labelMarkup = _this.getLabelMarkup();

      var inputMarkup = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "c-Choice__control",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.default, (0, _extends2.default)({}, inputProps))
      });
      var inputLabelMarkup = stacked ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "c-Choice__stackedWrapper",
        children: [inputMarkup, labelMarkup]
      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
        just: "left",
        gap: "sm",
        align: align,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
          children: inputMarkup
        }), labelMarkup]
      });
      return inputLabelMarkup;
    };

    return _this;
  }

  var _proto = Choice.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      checked: nextProps.checked,
      id: nextProps.id || this.state.id
    });
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props4 = this.props,
        align = _this$props4.align,
        autoFocus = _this$props4.autoFocus,
        children = _this$props4.children,
        className = _this$props4.className,
        componentID = _this$props4.componentID,
        disabled = _this$props4.disabled,
        helpText = _this$props4.helpText,
        hideLabel = _this$props4.hideLabel,
        id = _this$props4.id,
        inputRef = _this$props4.inputRef,
        innerRef = _this$props4.innerRef,
        isBlock = _this$props4.isBlock,
        onBlur = _this$props4.onBlur,
        onChange = _this$props4.onChange,
        onFocus = _this$props4.onFocus,
        kind = _this$props4.kind,
        label = _this$props4.label,
        name = _this$props4.name,
        readOnly = _this$props4.readOnly,
        stacked = _this$props4.stacked,
        state = _this$props4.state,
        type = _this$props4.type,
        value = _this$props4.value,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["align", "autoFocus", "children", "className", "componentID", "disabled", "helpText", "hideLabel", "id", "inputRef", "innerRef", "isBlock", "onBlur", "onChange", "onFocus", "kind", "label", "name", "readOnly", "stacked", "state", "type", "value"]);
    var _this$state2 = this.state,
        checked = _this$state2.checked,
        choiceID = _this$state2.id;
    var componentClassName = (0, _classnames.default)('c-Choice', "is-" + type, checked && 'is-selected', disabled && 'is-disabled', isBlock && 'is-block', kind && "is-" + kind, readOnly && 'is-readonly', stacked && 'is-stacked', state && "is-" + state, className);
    var labelClassName = (0, _classnames.default)('c-Choice__label', checked && 'is-selected', disabled && 'is-disabled', isBlock && 'is-block', stacked && 'is-stacked');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChoiceGroup.default.Consumer, {
      children: function children(contextProps) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
          className: componentClassName,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Choice2.ChoiceLabelUI, {
            htmlFor: choiceID,
            className: labelClassName,
            children: [_this2.getInputMarkup(contextProps), stacked ? _this2.getHelpTextMarkup() : null]
          }), !stacked ? _this2.getHelpTextMarkup() : null]
        }));
      }
    });
  };

  return Choice;
}(_react.default.PureComponent);

Choice.defaultProps = {
  autoFocus: false,
  checked: false,
  componentID: 'Choice',
  'data-cy': 'Choice',
  disabled: false,
  hideLabel: false,
  onBlur: noop,
  onChange: noop,
  onFocus: noop,
  onEnter: noop,
  inputRef: noop,
  innerRef: noop,
  isBlock: false,
  readOnly: false,
  type: 'checkbox',
  value: ''
};
Choice.propTypes = {
  align: _propTypes.default.oneOf(['top', '']),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  checked: _propTypes.default.bool,
  isBlock: _propTypes.default.bool,
  innerRef: _propTypes.default.func,

  /** Automatically focuses the input. */
  autoFocus: _propTypes.default.bool,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Namespace for the input ID. Default is `Choice`. */
  componentID: _propTypes.default.string,

  /** Disable the input. */
  disabled: _propTypes.default.bool,

  /** Displays text underneath input. */
  helpText: _propTypes.default.string,

  /** Hides the label with VisuallyHidden */
  hideLabel: _propTypes.default.bool,

  /** ID for the input. */
  id: _propTypes.default.string,

  /** Retrieves the `input` DOM node. */
  inputRef: _propTypes.default.func,

  /** Label for the input. */
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

  /** Name for the input. */
  name: _propTypes.default.string,

  /** Callback when the input is blurred. */
  onBlur: _propTypes.default.func,

  /** Callback when the input value is changed. */
  onChange: _propTypes.default.func,

  /** Callback when the input is focused. */
  onFocus: _propTypes.default.func,

  /** Callback when pressing enter whenthe input is focused. */
  onEnter: _propTypes.default.func,

  /** Disable editing of the input. */
  readOnly: _propTypes.default.bool,

  /** Stacks the input above the label. */
  stacked: _propTypes.default.bool,

  /** Change input to state color. */
  state: _propTypes.default.oneOf(['error', 'success', 'warning']),

  /** Determines the input type. `checkbox` or `radio`. */
  type: _propTypes.default.oneOf(['checkbox', 'radio']),

  /** The value of the input. */
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),

  /** Render a customized radio or a default */
  kind: _propTypes.default.oneOf(['default', 'custom'])
};
var _default = Choice;
exports.default = _default;