@helpscout/hsds-react/components/ConditionField/ConditionField.Group.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.ConditionFieldGroup = void 0;

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

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

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 _ConditionField = _interopRequireDefault(require("./ConditionField.AddButton"));

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

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

  function ConditionFieldGroup() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = ConditionFieldGroup.prototype;

  _proto.renderFields = function renderFields() {
    var _this = this;

    var children = this.props.children;
    return _react.default.Children.map(children, function (child, index) {
      return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({}, child.props, {
        isWithConjunction: index > 0,
        conjunction: _this.props.conjunction
      }));
    });
  };

  _proto.renderAddAction = function renderAddAction() {
    var _this$props = this.props,
        isAddEnabled = _this$props.isAddEnabled,
        canChangeConjunction = _this$props.canChangeConjunction,
        onAdd = _this$props.onAdd,
        conjunction = _this$props.conjunction,
        onConjunctionChange = _this$props.onConjunctionChange;
    if (!isAddEnabled && !canChangeConjunction) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default, {
      onClick: onAdd,
      onTypeChanged: onConjunctionChange,
      type: conjunction,
      disabled: !isAddEnabled,
      selectableType: canChangeConjunction
    });
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        children = _this$props2.children,
        isAddEnabled = _this$props2.isAddEnabled,
        onAdd = _this$props2.onAdd,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["children", "isAddEnabled", "onAdd"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      children: [this.renderFields(), this.renderAddAction()]
    }));
  };

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

exports.ConditionFieldGroup = ConditionFieldGroup;

function noop() {}

ConditionFieldGroup.defaultProps = {
  'data-cy': 'ConditionFieldGroup',
  isAddEnabled: true,
  canChangeConjunction: false,
  onAdd: noop,
  onConjunctionChange: noop,
  conjunction: 'or'
};
ConditionFieldGroup.propTypes = {
  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** The className of the component. */
  className: _propTypes.default.string,

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

  /** Renders an inner Condition.AddButton */
  isAddEnabled: _propTypes.default.bool,

  /** Callback when the inner Condition.AddButton is clicked. */
  onAdd: _propTypes.default.func,

  /** Currently used conjunction */
  conjunction: _propTypes.default.oneOf(['and', 'or']),

  /** Callback when conjunction changed */
  onConjunctionChange: _propTypes.default.func,

  /** Flag indicating if conjunction can change */
  canChangeConjunction: _propTypes.default.bool
};
var _default = ConditionFieldGroup;
exports.default = _default;