@helpscout/hsds-react/components/ConditionList/ConditionList.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.ConditionList = 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 _ConditionList = _interopRequireDefault(require("./ConditionList.AddButton"));

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

var _ConditionList2 = require("./ConditionList.css");

var _Page = require("../Page/Page");

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

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

  function ConditionList() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = ConditionList.prototype;

  _proto.getClassName = function getClassName() {
    var _this$props = this.props,
        className = _this$props.className,
        isWithOffset = _this$props.isWithOffset;
    return (0, _classnames.default)(ConditionList.className, isWithOffset && 'is-withOffset', className);
  };

  _proto.renderConditions = function renderConditions() {
    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, {
        isWithAnd: index > 0
      }));
    });
  };

  _proto.renderAddAction = function renderAddAction() {
    var _this$props2 = this.props,
        isAddEnabled = _this$props2.isAddEnabled,
        onAdd = _this$props2.onAdd,
        scrollDuration = _this$props2.scrollDuration,
        scrollOffset = _this$props2.scrollOffset;
    if (!isAddEnabled) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionList.default, {
      onClick: onAdd,
      scrollDuration: scrollDuration,
      scrollOffset: scrollOffset
    });
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        children = _this$props3.children,
        innerRef = _this$props3.innerRef,
        isAddEnabled = _this$props3.isAddEnabled,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["children", "innerRef", "isAddEnabled"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConditionList2.ConditionListUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      ref: innerRef,
      children: [this.renderConditions(), this.renderAddAction()]
    }));
  };

  return ConditionList;
}(_react.default.Component);

exports.ConditionList = ConditionList;
ConditionList.className = 'c-ConditionList';
ConditionList.AddButton = _ConditionList.default;

function noop() {}

ConditionList.defaultProps = {
  'data-cy': 'ConditionList',
  innerRef: noop,
  onAdd: noop,
  isAddEnabled: true,
  isWithOffset: false,
  scrollDuration: 300,
  scrollOffset: 200
};
ConditionList.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,

  /** Renders component with negative left/right margins. */
  isWithOffset: _propTypes.default.bool,

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

  /** Time (ms) it takes to scroll into view. */
  scrollDuration: _propTypes.default.number,

  /** Amount (px) used to calculate scrolling into view. */
  scrollOffset: _propTypes.default.number
};

var ConditionListConsumer = function ConditionListConsumer(props) {
  var contextValue = _react.default.useContext(_Page.PageContext);

  if (contextValue) {
    var newProps = (0, _extends2.default)({}, props, contextValue);
    newProps.className = (0, _classnames.default)(props.className, contextValue.className);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConditionList, (0, _extends2.default)({}, newProps));
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConditionList, (0, _extends2.default)({}, props));
};

ConditionListConsumer.propTypes = ConditionList.propTypes;
var _default = ConditionListConsumer;
exports.default = _default;