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

wix-style-react

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

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

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

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) { (0, _defineProperty2["default"])(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; }

/** Animate Component */
var getDelayValue = function getDelayValue(delay) {
  switch ((0, _typeof2["default"])(delay)) {
    case 'string':
      return delay;

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

    default:
      return undefined;
  }
};

var Animate = /*#__PURE__*/_react["default"].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["default"].createElement("div", {
    "data-hook": dataHook,
    className: animateClasses,
    style: _objectSpread({
      animationDelay: getDelayValue(delay)
    }, animateInlineStyle),
    onAnimationStart: onStart,
    onAnimationEnd: onEnd,
    ref: ref
  }, children && _react["default"].Children.only(children));
});

Animate.propTypes = {
  /** Classes to be applied to the root element. */
  animateClasses: _propTypes["default"].string,

  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes["default"].string,

  /** Any node to render to animate. */
  children: _propTypes["default"].node.isRequired,

  /** A callback fired immediately after the transition starts.*/
  onStart: _propTypes["default"].func,

  /** A callback fired immediately after the transition ended.*/
  onEnd: _propTypes["default"].func,

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

  /** Add inline styles to the animation */
  animateInlineStyle: _propTypes["default"].object
};
Animate.displayName = 'Animate';
Animate.defaultProps = {};
var _default = Animate;
exports["default"] = _default;