wix-style-react/dist/es/src/Animate/Animate.js

wix-style-react

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import PropTypes from 'prop-types';
/** Animate Component */

var getDelayValue = function getDelayValue(delay) {
  switch (_typeof(delay)) {
    case 'string':
      return delay;

    case 'number':
      return "".concat(delay, "ms");

    default:
      return undefined;
  }
};

var Animate = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var dataHook = _ref.dataHook,
      animateClasses = _ref.animateClasses,
      delay = _ref.delay,
      onStart = _ref.onStart,
      onEnd = _ref.onEnd,
      children = _ref.children,
      animateInlineStyle = _ref.animateInlineStyle;
  return /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHook,
    className: animateClasses,
    style: _objectSpread({
      animationDelay: getDelayValue(delay)
    }, animateInlineStyle),
    onAnimationStart: onStart,
    onAnimationEnd: onEnd,
    ref: ref
  }, children && React.Children.only(children));
});
Animate.propTypes = {
  /** Classes to be applied to the root element. */
  animateClasses: PropTypes.string,

  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Any node to render to animate. */
  children: PropTypes.node.isRequired,

  /** A callback fired immediately after the transition starts.*/
  onStart: PropTypes.func,

  /** A callback fired immediately after the transition ended.*/
  onEnd: PropTypes.func,

  /** set a delay before the animation execution. When provided a number- sets this as `ms`.*/
  delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Add inline styles to the animation */
  animateInlineStyle: PropTypes.object
};
Animate.displayName = 'Animate';
Animate.defaultProps = {};
export default Animate;