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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.isNodeWithinViewport = isNodeWithinViewport;
exports.default = 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 _classnames = _interopRequireDefault(require("classnames"));

var _smoothScroll = require("../../utilities/smoothScroll");

var _node = require("../../utilities/node");

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

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

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

var dropListItem = function dropListItem(value) {
  return {
    id: value,
    value: value,
    label: value.toUpperCase()
  };
};

var dropListItems = [dropListItem('or'), dropListItem('and')];

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

  function AddButton() {
    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.node = void 0;

    _this.handleOnClick = function (event) {
      _this.props.onClick(event);

      _this.scrollIntoView();
    };

    _this.scrollIntoView = function () {
      var _this$props = _this.props,
          offset = _this$props.scrollOffset,
          duration = _this$props.scrollDuration; // Guard in case component because unmounted during the click event.

      if (!_this.node) return;
      var isVisible = isNodeWithinViewport({
        node: _this.node,
        offset: offset
      });
      var position = offset + window.scrollY; // Can't easily be tested in JSDOM due to DOM calculations.

      if (isVisible) return;
      (0, _smoothScroll.smoothScrollTo)({
        node: window,
        position: position,
        direction: 'y',
        duration: duration,
        timingFunction: _smoothScroll.linear
      });
    };

    _this.setNodeRef = function (node) {
      return _this.node = node;
    };

    return _this;
  }

  var _proto = AddButton.prototype;

  _proto.getClassName = function getClassName() {
    var _this$props2 = this.props,
        className = _this$props2.className,
        isBorderless = _this$props2.isBorderless,
        type = _this$props2.type;
    var isAnd = type.toLowerCase() === 'and';
    var label = isAnd ? 'and' : 'or';
    return (0, _classnames.default)(AddButton.className, isBorderless && 'is-borderless', "is-" + label, className);
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        className = _this$props3.className,
        isBorderless = _this$props3.isBorderless,
        type = _this$props3.type,
        onTypeChanged = _this$props3.onTypeChanged,
        selectableType = _this$props3.selectableType,
        onClick = _this$props3.onClick,
        disabled = _this$props3.disabled,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "isBorderless", "type", "onTypeChanged", "selectableType", "onClick", "disabled"]);
    var isAnd = type.toLowerCase() === 'and';
    var align = isAnd ? 'center' : 'left';
    var label = isAnd ? 'and' : 'or';
    var size = isAnd ? 'sm' : 'xxs';
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition.ButtonWrapperUI, {
      align: align,
      ref: this.setNodeRef,
      children: selectableType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList.default, {
        items: dropListItems,
        tippyOptions: {
          placement: 'bottom-start',
          offset: [0, 5]
        },
        onSelect: function onSelect(_ref) {
          var value = _ref.value;
          return onTypeChanged(value);
        },
        selection: dropListItems.find(function (item) {
          return item.id === type;
        }),
        toggler: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition.SplittedButtonUI, (0, _extends2.default)({
          theme: "green",
          outlined: true
        }, (0, _getValidProps.default)(rest), {
          text: label,
          actionButtonProps: {
            disabled: disabled
          },
          togglerButtonProps: {
            theme: disabled ? 'grey' : 'green',
            flipChevron: true
          },
          size: "xxs",
          onActionClick: this.handleOnClick
        }))
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition.ButtonUI, (0, _extends2.default)({
        theme: "green",
        outlined: true,
        size: size
      }, (0, _getValidProps.default)(rest), {
        className: this.getClassName(),
        onClick: this.handleOnClick,
        prefixIcon: "plus-small",
        children: label
      }))
    });
  };

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

AddButton.className = 'c-ConditionAddButton';

function noop() {}

AddButton.defaultProps = {
  'data-cy': 'ConditionAddButton',
  isBorderless: false,
  onClick: noop,
  onTypeChanged: noop,
  scrollDuration: 300,
  scrollOffset: 200,
  type: 'or',
  selectableType: false
};
AddButton.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

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

  /** Renders a white border. */
  isBorderless: _propTypes.default.bool,

  /** Callback when component is clicked. */
  onClick: _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,

  /** The operator. */
  type: _propTypes.default.oneOf(['and', 'or']),

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

  /** Indicate if it is possible to select type for a Button ('and' or 'or') */
  selectableType: _propTypes.default.bool,

  /** Callback when type has changed */
  onTypeChanged: _propTypes.default.func
};

function isNodeWithinViewport(options) {
  var defaultOptions = {
    offset: 0
  };
  var mergedOptions = (0, _extends2.default)({}, defaultOptions, options);
  var node = mergedOptions.node,
      offset = mergedOptions.offset;
  if (!(0, _node.isNodeElement)(node)) return false;

  var _node$getBoundingClie = node.getBoundingClientRect(),
      y = _node$getBoundingClie.y;

  var position = y + offset + window.scrollY;
  var viewportPosition = window.scrollY + window.innerHeight;
  return position < viewportPosition;
}

var _default = AddButton;
exports.default = _default;