@zohodesk/components/lib/v1/Animation/Animation.js

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

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

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

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

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

var _utils = require("./utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function Animation(props) {
  var name = props.name,
      enterDuration = props.enterDuration,
      exitDuration = props.exitDuration,
      children = props.children,
      isActive = props.isActive,
      unmountOnExit = props.unmountOnExit,
      _props$onEntered = props.onEntered,
      onEntered = _props$onEntered === void 0 ? function () {} : _props$onEntered,
      _props$onExit = props.onExit,
      onExit = _props$onExit === void 0 ? function () {} : _props$onExit,
      _props$delayClassName = props.delayClassName,
      delayClassName = _props$delayClassName === void 0 ? null : _props$delayClassName;
  var newClassNames = delayClassName ? Object.assign({}, _utils.animationStyle[name], {
    exit: "".concat(delayClassName, " ").concat(_utils.animationStyle[name].exit)
  }) : _utils.animationStyle[name];
  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
    classNames: newClassNames && newClassNames,
    "in": isActive,
    appear: true,
    enter: true,
    exit: true,
    mountOnEnter: false,
    unmountOnExit: unmountOnExit,
    timeout: {
      enter: enterDuration,
      exit: exitDuration
    },
    onEntered: onEntered,
    onExit: onExit
  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children));
}

Animation.propTypes = _propTypes.propTypes;
Animation.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
//   Animation.docs = {
//     componentGroup: 'Animation',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' '
//   };
// }