@zohodesk/components/es/Animation/Animation.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { CSSTransition } from 'react-transition-group';
import { animationStyle } from "./utils";
export default class Animation extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      name,
      enterDuration,
      exitDuration,
      children,
      isActive,
      unmountOnExit,
      onEntered = () => {},
      onExit = () => {},
      delayClassName = null
    } = this.props;
    let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
      exit: `${delayClassName} ${animationStyle[name].exit}`
    }) : animationStyle[name];
    return /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, children));
  }

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