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

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

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

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Motion = require("../Motion");

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

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

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

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

/* istanbul ignore file */
var ConditionFieldAddButton = function ConditionFieldAddButton(props) {
  var className = props.className,
      onTypeChanged = props.onTypeChanged,
      selectableType = props.selectableType,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "onTypeChanged", "selectableType"]);
  var componentClassName = (0, _classnames.default)('c-ConditionFieldAddButton', className);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    "data-cy": "ConditionFieldAddButtonWrapper",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.AddButtonContentUI, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Condition.default.AddButton, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        onTypeChanged: onTypeChanged,
        className: componentClassName,
        selectableType: selectableType
      }))
    })
  });
};

exports.ConditionFieldAddButton = ConditionFieldAddButton;

function noop() {}

ConditionFieldAddButton.defaultProps = {
  animationDuration: 250,
  animationEasing: 'linear',
  'data-cy': 'ConditionFieldAddButton',
  isBorderless: true,
  isWithMotion: true,
  type: 'or',
  onTypeChanged: noop,
  selectableType: false
};
ConditionFieldAddButton.propTypes = {
  /** Time (ms) it takes to animate on mount/unmount. */
  animationDuration: _propTypes.default.number,

  /** Time (ms) it takes to animate on mount/unmount. */
  animationEasing: _propTypes.default.string,

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

  /** Retrieve the inner DOM node. */
  ref: _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. (`and`/`or`) */
  type: _propTypes.default.string,

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

  /** Callback when type changed */
  onTypeChanged: _propTypes.default.func,

  /** Indicate if type can be changed */
  selectableType: _propTypes.default.bool
}; // @helpscout/motion prevents these animations from running within a
// test environment.
// JSDOM cannot run these animations, since the animation engine relies
// on recursive requestAnimationFrame to increment the animations.

var AnimatedComponent = (0, _Motion.withMotion)({
  isAnimateOnInitialMount: false,
  componentDidMount: function componentDidMount(_ref) {
    var animate = _ref.animate,
        node = _ref.node,
        props = _ref.props;
    if (!props.isWithMotion) return Promise.resolve();
    var height = node.clientHeight;
    node.style.height = 0;
    node.style.overflow = 'hidden';
    node.style.willChange = '';
    return animate({
      keyframes: [{
        height: [0, height],
        opacity: [0, 1]
      }],
      duration: props.animationDuration,
      easing: props.animationEasing
    }).finished.then(function () {
      node.style.willChange = '';
      node.style.overflow = 'initial';
    });
  },
  componentWillUnmount: function componentWillUnmount(_ref2) {
    var animate = _ref2.animate,
        node = _ref2.node,
        props = _ref2.props;
    if (!props.isWithMotion) return Promise.resolve();
    var height = node.clientHeight;
    node.style.height = height;
    node.style.overflow = 'hidden';
    node.style.willChange = '';
    return animate({
      keyframes: [{
        height: [height, 0],
        opacity: [1, 0]
      }],
      duration: props.animationDuration,
      easing: props.animationEasing
    }).finished;
  }
})(ConditionFieldAddButton);
var _default = AnimatedComponent;
exports.default = _default;