@helpscout/hsds-react/components/Choice/Choice.Input.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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

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

var _Keys = require("../../constants/Keys");

var _Input = _interopRequireDefault(require("../Input/Input.BackdropV2"));

var _Icon = _interopRequireDefault(require("../Icon"));

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

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

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

function noop() {}

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

  function ChoiceInput() {
    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 = {
      isFocused: false
    };

    _this.handleOnBlur = function (event) {
      _this.setState({
        isFocused: false
      });

      _this.props.onBlur(event);
    };

    _this.handleOnChange = function (event) {
      var _this$props = _this.props,
          id = _this$props.id,
          onChange = _this$props.onChange,
          value = _this$props.value;
      onChange(value, event.target.checked, id); // Prevents duplicate firing of onChange event

      event.stopPropagation();
    };

    _this.runKeyPress = function (event) {
      event.stopPropagation();
      event.preventDefault();
      var _this$props2 = _this.props,
          id = _this$props2.id,
          onEnter = _this$props2.onEnter,
          value = _this$props2.value;

      var checked = _this.newCheckedOnKeyPress(event);

      onEnter(value, checked, id);
    };

    _this.handleOnKeyUp = function (event) {
      if (event.key === ' ') {
        _this.runKeyPress(event);
      }
    };

    _this.handleOnKeyDown = function (event) {
      if (event.key === _Keys.key.ENTER) {
        _this.runKeyPress(event);
      }
    };

    _this.handleOnFocus = function (event) {
      _this.setState({
        isFocused: true
      });

      _this.props.onFocus(event);
    };

    _this.getIconMarkup = function () {
      var _this$props3 = _this.props,
          checked = _this$props3.checked,
          kind = _this$props3.kind,
          type = _this$props3.type;
      var isRadio = type === 'radio';
      var isCustomRadio = kind === 'custom' && isRadio;
      var iconMarkup;

      if (isCustomRadio) {
        iconMarkup = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: "tick-small",
          size: "24"
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.InputPlaceholderUI, {
          className: "c-ChoiceInput__placeholder"
        });
      } else {
        var iconTypeMarkup = isRadio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.InputRadioUI, {
          className: "c-ChoiceInput__radio"
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: "tick-small",
          size: "20"
        });
        iconMarkup = checked && iconTypeMarkup;
      }

      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.InputIconUI, {
        className: "c-ChoiceInput__icon",
        children: iconMarkup
      });
    };

    _this.setRef = function (node) {
      _this.props.inputRef(node);

      if (_this.props.innerRef) {
        _this.props.innerRef(node);
      }
    };

    return _this;
  }

  var _proto = ChoiceInput.prototype;

  _proto.newCheckedOnKeyPress = function newCheckedOnKeyPress(event) {
    var type = this.props.type;

    if (type === 'checkbox') {
      return !event.target.checked;
    }

    if (type === 'radio') {
      return true;
    }

    return event.target.checked;
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        align = _this$props4.align,
        autoFocus = _this$props4.autoFocus,
        className = _this$props4.className,
        checked = _this$props4.checked,
        disabled = _this$props4.disabled,
        id = _this$props4.id,
        kind = _this$props4.kind,
        readOnly = _this$props4.readOnly,
        name = _this$props4.name,
        state = _this$props4.state,
        type = _this$props4.type,
        value = _this$props4.value,
        ariaDescribedBy = _this$props4.ariaDescribedBy,
        dataCy = _this$props4['data-cy'];
    var isFocused = this.state.isFocused;
    var componentClassName = (0, _classnames.default)('c-ChoiceInput', align && "is-" + align, disabled && 'is-disabled', isFocused && 'is-focused', kind && "is-" + kind, readOnly && 'is-readonly', state && "is-" + state, type && "is-" + type, className);
    var inputClassName = (0, _classnames.default)('c-InputField', 'c-ChoiceInput__input', type && "is-" + type);
    var isCustomRadio = kind === 'custom';
    var iconMarkup = this.getIconMarkup();
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Choice.InputUI, {
      className: componentClassName,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.InputInputUI, {
        autoFocus: autoFocus,
        "aria-describedby": ariaDescribedBy || undefined,
        "aria-invalid": state === 'error',
        checked: checked,
        className: inputClassName,
        disabled: disabled,
        id: id,
        ref: this.setRef,
        name: name || id,
        onBlur: this.handleOnBlur,
        onChange: this.handleOnChange,
        onFocus: this.handleOnFocus,
        onKeyUp: this.handleOnKeyUp,
        onKeyDown: this.handleOnKeyDown,
        readOnly: readOnly,
        type: type,
        value: value,
        "data-cy": dataCy
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
        choiceKind: type,
        disabled: disabled,
        kind: kind,
        isFilled: !disabled && checked,
        isFirst: false,
        isFocused: isFocused,
        isNotOnly: false,
        isLast: false,
        isSeamless: false,
        readOnly: readOnly,
        state: state,
        showFocus: !isCustomRadio
      }), iconMarkup]
    });
  };

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

ChoiceInput.defaultProps = {
  autoFocus: false,
  'data-cy': 'ChoiceInput',
  disabled: false,
  onBlur: noop,
  onChange: noop,
  onFocus: noop,
  onEnter: noop,
  inputRef: noop,
  innerRef: noop,
  readOnly: false,
  type: 'checkbox',
  value: ''
};
ChoiceInput.propTypes = {
  autoFocus: _propTypes.default.bool,
  align: _propTypes.default.string,
  checked: _propTypes.default.bool,

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

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  disabled: _propTypes.default.bool,
  helpText: _propTypes.default.string,

  /** ID of element that describes this input */
  ariaDescribedBy: _propTypes.default.string,
  id: _propTypes.default.string,
  inputRef: _propTypes.default.func,
  innerRef: _propTypes.default.func,

  /** Render a customized radio or a default */
  kind: _propTypes.default.oneOf(['default', 'custom']),
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onFocus: _propTypes.default.func,

  /** Callback when pressing enter whenthe input is focused. */
  onEnter: _propTypes.default.func,
  name: _propTypes.default.string,
  readOnly: _propTypes.default.bool,
  state: _propTypes.default.string,
  type: _propTypes.default.oneOf(['checkbox', 'radio']),
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
var _default = ChoiceInput;
exports.default = _default;