@helpscout/hsds-react/components/ConditionField/ConditionField.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.ConditionField = 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 _IconButton = _interopRequireDefault(require("../IconButton"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _ConditionField = _interopRequireDefault(require("./ConditionField.Group"));

var _ConditionField2 = _interopRequireDefault(require("./ConditionField.Or"));

var _ConditionField3 = _interopRequireDefault(require("./ConditionField.Static"));

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

var _ConditionField4 = require("./ConditionField.css");

var _ConditionField5 = _interopRequireDefault(require("./ConditionField.And"));

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

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

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

  var _proto = ConditionField.prototype;

  _proto.getClassName = function getClassName() {
    var className = this.props.className;
    return (0, _classnames.default)('c-ConditionField', className);
  };

  _proto.renderOperator = function renderOperator() {
    var _this$props = this.props,
        isWithConjunction = _this$props.isWithConjunction,
        conjunction = _this$props.conjunction;
    if (!isWithConjunction) return null;
    return conjunction === 'and' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField5.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField2.default, {});
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        children = _this$props2.children,
        closeIcon = _this$props2.closeIcon,
        innerRef = _this$props2.innerRef,
        isWithRemove = _this$props2.isWithRemove,
        onRemove = _this$props2.onRemove,
        removeTitle = _this$props2.removeTitle,
        tooltipDelay = _this$props2.tooltipDelay,
        tooltipDuration = _this$props2.tooltipDuration,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["children", "closeIcon", "innerRef", "isWithRemove", "onRemove", "removeTitle", "tooltipDelay", "tooltipDuration"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      "data-cy": "ConditionFieldWrapper",
      children: [this.renderOperator(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        innerRef: innerRef,
        className: this.getClassName(),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
          "data-cy": "ConditionFieldContentWrapper",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default, {
            align: "top",
            gap: "md",
            children: children
          })
        }), isWithRemove ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField4.FieldCloseWrapperUI, {
          "data-cy": "ConditionFieldCloseWrapper",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
            title: removeTitle,
            animationDelay: tooltipDelay,
            animationDuration: tooltipDuration,
            withTriggerWrapper: false,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
              seamless: true,
              size: "lg",
              "data-cy": "ConditionFieldRemoveButton",
              icon: closeIcon,
              onClick: onRemove,
              "aria-label": "Remove condition"
            })
          })
        }) : null]
      }))]
    });
  };

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

exports.ConditionField = ConditionField;
ConditionField.Static = _ConditionField3.default;
ConditionField.Group = _ConditionField.default;
ConditionField.Block = _Flexy.default.Block;
ConditionField.Item = _Flexy.default.Item;

function noop() {}

ConditionField.defaultProps = {
  closeIcon: 'collapse',
  'data-cy': 'ConditionField',
  innerRef: noop,
  isWithConjunction: false,
  conjunction: 'or',
  isWithRemove: true,
  onRemove: noop,
  removeTitle: 'Remove',
  tooltipDelay: 800,
  tooltipDuration: 60
};
ConditionField.propTypes = {
  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

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

  /** The [Icon](../Icon) to render. */
  closeIcon: _propTypes.default.string,

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

  /** Whether to show conjunction before Field */
  isWithConjunction: _propTypes.default.bool,

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

  /** Whether to show the remove button or not. */
  isWithRemove: _propTypes.default.bool,

  /** Callback when the remove IconButton is clicked. */
  onRemove: _propTypes.default.func,

  /** Title to show in the Tooltip on the remove IconButton. */
  removeTitle: _propTypes.default.string,

  /** Delay before the Tooltip renders, on hover. */
  tooltipDelay: _propTypes.default.number,

  /** Animation duration when the Tooltip renders, on hover. */
  tooltipDuration: _propTypes.default.number
};
var _default = ConditionField;
exports.default = _default;