@helpscout/hsds-react/components/Animate/Animate.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.Animate = 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 _classnames = _interopRequireDefault(require("classnames"));

var _reactTransitionGroup = require("react-transition-group");

var _Animate = require("./Animate.utils");

var _easing = require("../../utilities/easing");

var _Animate2 = require("./Animate.css");

var _AnimateGroup = require("../AnimateGroup/AnimateGroup");

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

function noop() {}

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

  function Animate() {
    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;
    return _this;
  }

  var _proto = Animate.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        animateOnMount = _this$props.animateOnMount,
        block = _this$props.block,
        _children = _this$props.children,
        className = _this$props.className,
        duration = _this$props.duration,
        easing = _this$props.easing,
        transitionIn = _this$props.in,
        inline = _this$props.inline,
        inlineBlock = _this$props.inlineBlock,
        mountOnEnter = _this$props.mountOnEnter,
        defaultStyle = _this$props.style,
        sequence = _this$props.sequence,
        timeout = _this$props.timeout,
        transitionProperty = _this$props.transitionProperty,
        unmountOnExit = _this$props.unmountOnExit,
        delay = _this$props.delay,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["animateOnMount", "block", "children", "className", "duration", "easing", "in", "inline", "inlineBlock", "mountOnEnter", "style", "sequence", "timeout", "transitionProperty", "unmountOnExit", "delay"]);
    var componentClassName = (0, _classnames.default)('c-Animate', block && 'is-block', inline && 'is-inline', inlineBlock && 'is-inlineBlock', className);
    var componentStyles = (0, _extends2.default)({}, defaultStyle, {
      transitionProperty: transitionProperty,
      transitionDuration: duration + "ms",
      transitionDelay: delay + "ms",
      transitionTimingFunction: (0, _easing.getEasingTiming)(easing)
    });
    var sequenceClassNames = (0, _Animate.getSequenceNames)(sequence).map(function (s) {
      return "ax-" + s;
    }).join(' ');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, (0, _extends2.default)({}, rest, {
      mountOnEnter: mountOnEnter,
      unmountOnExit: unmountOnExit,
      appear: animateOnMount,
      in: transitionIn,
      timeout: {
        enter: 0,
        exit: timeout !== undefined ? timeout : duration + delay
      },
      children: function children(transitionState) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate2.AnimateUI, {
          className: (0, _classnames.default)(componentClassName, sequenceClassNames, "ax-" + transitionState),
          ref: function ref(node) {
            _this2.node = node;
          },
          style: (0, _extends2.default)({}, componentStyles),
          children: _children
        });
      }
    }));
  };

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

exports.Animate = Animate;
Animate.contextType = _AnimateGroup.AnimateGroupContext;

var AnimateConsumer = function AnimateConsumer(props) {
  var contextValue = _react.default.useContext(_AnimateGroup.AnimateGroupContext);

  if (contextValue) {
    var newProps;

    if (props.delay && props.delay !== 0) {
      newProps = (0, _extends2.default)({}, contextValue, props);
    } else {
      newProps = (0, _extends2.default)({}, props, contextValue);
    }

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

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

Animate.defaultProps = {
  animateOnMount: true,
  delay: 0,
  'data-cy': 'Animate',
  duration: 300,
  easing: 'ease-in-out',
  in: true,
  mountOnEnter: true,
  onEnter: noop,
  onEntered: noop,
  onEntering: noop,
  onExit: noop,
  onExited: noop,
  onExiting: noop,
  sequence: ['fade'],
  transitionProperty: 'all',
  unmountOnExit: true
};
Animate.propTypes = {
  /** Automatically animates when component is rendered. */
  animateOnMount: _propTypes.default.bool,

  /** Applies `display: block` to the component. */
  block: _propTypes.default.bool,

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

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

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

  /** Determines the CSS easing transition function. */
  easing: _propTypes.default.string,

  /** Programatically triggering the animation. */
  in: _propTypes.default.bool,

  /** Applies `display: inline` to the component. */
  inline: _propTypes.default.bool,

  /** Applies `display: inline-block` to the component. */
  inlineBlock: _propTypes.default.bool,

  /** Mounts child component as soon as `Animate` mounts. */
  mountOnEnter: _propTypes.default.bool,

  /** Callback before the component's `enter` animation sequence. */
  onEnter: _propTypes.default.func,

  /** Callback after the component's `enter` animation sequence. */
  onEntered: _propTypes.default.func,

  /** Callback during the component's `enter` animation sequence. */
  onEntering: _propTypes.default.func,

  /** Callback after the component's `exit` animation sequence. */
  onExit: _propTypes.default.func,

  /** Callback before the component's `exit` animation sequence. */
  onExited: _propTypes.default.func,

  /** Callback during the component's `exit` animation sequence. */
  onExiting: _propTypes.default.func,

  /** Names of animation styles to apply. */
  sequence: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),

  /** The duration (in `ms`) to apply/remove the animations. */
  timeout: _propTypes.default.number,

  /** Determines the CSS transition property. */
  transitionProperty: _propTypes.default.string,

  /** Unmounts child component as soon as `Animate` unmounts.` */
  unmountOnExit: _propTypes.default.bool,

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