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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.Condition = 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 _Flexy = _interopRequireDefault(require("../Flexy"));

var _Flexy2 = require("../Flexy/Flexy");

var _Condition = _interopRequireDefault(require("./Condition.And"));

var _Condition2 = _interopRequireDefault(require("./Condition.AddButton"));

var _Condition3 = _interopRequireDefault(require("./Condition.Operator"));

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

var _DropList = _interopRequireDefault(require("../DropList/DropList"));

var _DropList2 = require("../DropList/DropList.togglers");

var _Condition4 = require("./Condition.css");

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

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

  function Condition() {
    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.getSelectedLabel = function (options, value) {
      var foundOption = options.find(function (option) {
        return option.value === value;
      });
      return foundOption && foundOption.label;
    };

    _this.handleConditionSelect = function (selection) {
      return selection && _this.props.onChange(selection.value);
    };

    return _this;
  }

  var _proto = Condition.prototype;

  _proto.getClassName = function getClassName() {
    var className = this.props.className;
    return (0, _classnames.default)(Condition.className, className);
  };

  _proto.getProviderProps = function getProviderProps() {
    return {
      baseSize: 5
    };
  };

  _proto.renderOperator = function renderOperator() {
    var isWithAnd = this.props.isWithAnd;
    if (!isWithAnd) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition.default, {});
  };

  _proto.getSelectedItem = function getSelectedItem(options, value) {
    return options.find(function (option) {
      return option.value === value;
    });
  };

  _proto.render = function render() {
    var _this$props = this.props,
        children = _this$props.children,
        innerRef = _this$props.innerRef,
        options = _this$props.options,
        onChange = _this$props.onChange,
        value = _this$props.value,
        noSelect = _this$props.noSelect,
        ariaDescribedBy = _this$props.ariaDescribedBy,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["children", "innerRef", "options", "onChange", "value", "noSelect", "ariaDescribedBy"]);
    var selectedItem = this.getSelectedItem(options, value);
    var baseSelectLabel = 'conditions toggle menu';
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Condition4.ConditionUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      ref: innerRef,
      children: [this.renderOperator(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy2.FlexyContext.Provider, {
        value: this.getProviderProps(),
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Condition4.ConditionContentUI, {
          align: "top",
          className: "c-ConditionContent",
          "data-cy": "ConditionContent",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition4.OptionsWrapperUI, {
            "data-cy": "ConditionSelectWrapper",
            children: noSelect ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition4.SelectedOptionUI, {
              children: this.getSelectedLabel(options, value)
            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList.default, {
              onSelect: this.handleConditionSelect,
              items: options,
              selection: selectedItem,
              toggler: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.SelectTag, {
                a11yLabel: selectedItem ? baseSelectLabel + ", " + selectedItem.label + " currently selected" : baseSelectLabel,
                "aria-describedby": ariaDescribedBy
              })
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
            "data-cy": "ConditionInnerContentWrapper",
            children: children
          })]
        })
      })]
    }));
  };

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

exports.Condition = Condition;
Condition.className = 'c-Condition';
Condition.AddButton = _Condition2.default;
Condition.And = _Condition.default;
Condition.Operator = _Condition3.default;

function noop() {}

Condition.defaultProps = {
  'data-cy': 'Condition',
  innerRef: noop,
  isWithAnd: false,
  onChange: noop,
  options: [],
  noSelect: false
};
Condition.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

  /** Retrieve the inner DOM node. */
  innerRef: _propTypes.default.func,

  /** Renders the "And" operator (top). */
  isWithAnd: _propTypes.default.bool,

  /** Collection of condition values, rendered by a [DropList](../DropList). */
  options: _propTypes.default.arrayOf(_propTypes.default.any),

  /** Callback when the `option` [DropList](../DropList) has changed. */
  onChange: _propTypes.default.func,

  /** The value of the condition ([DropList](../DropList)). */
  value: _propTypes.default.string,

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

  /** Flag indicating if should not render Select component */
  noSelect: _propTypes.default.bool,

  /** ID of element used for aria-describedby attribute */
  ariaDescribedBy: _propTypes.default.string
};
var _default = Condition;
exports.default = _default;