@helpscout/hsds-react/components/AnimateGroup/AnimateGroup.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.AnimateGroup = exports.AnimateGroupContext = 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 _reactTransitionGroup = require("react-transition-group");

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

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

var _component = require("../../utilities/component");

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

var AnimateGroupContext = /*#__PURE__*/_react.default.createContext({});

exports.AnimateGroupContext = AnimateGroupContext;

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

  function AnimateGroup() {
    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.getAnimatePropsFromIndex = function (index) {
      var _this$props = _this.props,
          durationProp = _this$props.duration,
          delayProp = _this$props.delay,
          easing = _this$props.easing,
          sequence = _this$props.sequence,
          stagger = _this$props.stagger,
          staggerDelay = _this$props.staggerDelay,
          staggerDuration = _this$props.staggerDuration,
          staggerMax = _this$props.staggerMax;
      var duration = stagger && staggerDuration ? staggerDuration : durationProp;
      var count = index + 1;
      var countBaseValue = count > staggerMax ? staggerMax : count;
      var staggerIndexDelay = delayProp + countBaseValue * staggerDelay;
      var delay = stagger ? staggerIndexDelay : delayProp;
      return {
        duration: duration,
        delay: delay,
        easing: easing,
        sequence: sequence
      };
    };

    _this.childFactory = function (child, index) {
      var childFactory = _this.props.childFactory;

      var animateProps = _this.getAnimatePropsFromIndex(index);

      var key = (0, _component.getComponentKey)(child, index);
      return childFactory( /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimateGroupContext.Provider, {
        value: animateProps,
        children: child
      }, key), index);
    };

    return _this;
  }

  var _proto = AnimateGroup.prototype;

  _proto.render = function render() {
    var _this$props2 = this.props,
        appear = _this$props2.appear,
        className = _this$props2.className,
        children = _this$props2.children,
        delay = _this$props2.delay,
        duration = _this$props2.duration,
        enter = _this$props2.enter,
        exit = _this$props2.exit,
        easing = _this$props2.easing,
        sequence = _this$props2.sequence,
        stagger = _this$props2.stagger,
        staggerDelay = _this$props2.staggerDelay,
        staggerDuration = _this$props2.staggerDuration,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["appear", "className", "children", "delay", "duration", "enter", "exit", "easing", "sequence", "stagger", "staggerDelay", "staggerDuration"]);
    var componentClassName = (0, _classnames.default)('c-AnimateGroup', className);
    var transitionGroupProps = {
      appear: appear,
      enter: enter,
      exit: exit,
      childFactory: this.childFactory
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), transitionGroupProps, {
      className: componentClassName,
      children: children
    }));
  };

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

exports.AnimateGroup = AnimateGroup;
AnimateGroup.defaultProps = {
  childFactory: function childFactory(child) {
    return child;
  },
  'data-cy': 'AnimateGroup',
  delay: 0,
  easing: 'ease-in-out',
  stagger: false,
  staggerDelay: 200,
  staggerMax: 20
};
AnimateGroup.propTypes = {
  /** Determines the CSS easing transition function. */
  easing: _propTypes.default.string,

  /** Callback function to adjust the child component for `react-transition-group`. */
  childFactory: _propTypes.default.func,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** The duration (in `ms`) to delay the child animations. */
  delay: _propTypes.default.number,

  /** The duration (in `ms`) for the child animation sequence. */
  duration: _propTypes.default.number,

  /** Names of animation styles to apply to child `Animate`. */
  sequence: _propTypes.default.string,

  /** Adds an incremental delay between child `Animate` components. */
  stagger: _propTypes.default.bool,

  /** Amount of time (`ms`) to delay for `stagger`. */
  staggerDelay: _propTypes.default.number,

  /** Time (`ms`) to for staggering animation durations. */
  staggerDuration: _propTypes.default.number,
  appear: _propTypes.default.any,
  exit: _propTypes.default.any,
  enter: _propTypes.default.any,
  staggerMax: _propTypes.default.number,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = AnimateGroup;
exports.default = _default;