@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { VelocityTransitionGroup } from 'velocity-react';
import 'velocity-animate/velocity.ui';
import LibraryContext from "../../Provider/LibraryContextInit";

function clearProps(props) {
  let newProps = Object.assign({}, props);
  Object.keys(VelocityAnimationGroup.propTypes).forEach(key => {
    delete newProps[key];
  });
  return newProps;
}

export default class VelocityAnimationGroup extends React.Component {
  constructor(props) {
    super(props);
    this.handleEnterComplete = this.handleEnterComplete.bind(this);
    this.handleExitComplete = this.handleExitComplete.bind(this);
  }

  handleEnterComplete(elements) {
    const {
      onEnterComplete,
      postEnterStyles
    } = this.props;

    if (typeof onEnterComplete === 'function') {
      onEnterComplete(elements);
    }

    if (postEnterStyles && typeof postEnterStyles === 'object') {
      elements.forEach(rootElement => {
        Object.entries(postEnterStyles).forEach(([cssProperty, cssValue]) => {
          rootElement.style[cssProperty] = cssValue;
        });
      });
    }
  }

  handleExitComplete(elements) {
    const {
      onExitComplete
    } = this.props;

    if (typeof onExitComplete === 'function') {
      onExitComplete(elements);
    }
  }

  render() {
    let {
      children,
      enterName,
      exitName,
      enterDuration,
      exitDuration,
      isActive,
      component,
      runOnMount,
      enterShowStyle,
      enterHideStyle,
      exitDelay,
      isFlex,
      enterDelay,
      isCustomized,
      name,
      needUIPack,
      onEnterComplete,
      onExitComplete,
      postEnterStyles
    } = this.props;
    let {
      direction,
      isReducedMotion
    } = this.context || {};
    let childProps = clearProps(this.props);
    let enterAnimationObj = {
      fade: 'transition.fadeIn',
      slideDown: 'slideDown',
      flyDown: {
        translateY: '0%'
      },
      slideRight: {
        translateX: '0%'
      },
      slideLeft: {
        translateX: '0%'
      },
      shrink: 'transition.shrinkIn',
      expand: 'transition.expandIn'
    };
    let exitAnimationObj = {
      fade: 'transition.fadeOut',
      slideDown: 'slideUp',
      flyDown: {
        translateY: '-100%'
      },
      slideRight: {
        translateX: direction == 'rtl' ? '-100%' : '100%'
      },
      slideLeft: {
        translateX: direction == 'rtl' ? '100%' : '-100%'
      },
      shrink: 'transition.shrinkOut',
      expand: 'transition.expandOut'
    };
    let enterAnimation = {
      animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
      duration: !isReducedMotion ? enterDuration : 0,
      delay: enterDelay ? enterDelay : 0,
      display: isFlex ? 'flex' : '',
      complete: onEnterComplete || postEnterStyles ? this.handleEnterComplete : undefined
    };
    let exitAnimation = {
      animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
      duration: !isReducedMotion ? exitDuration : 0,
      delay: exitDelay ? exitDelay : 0,
      display: 'none',
      complete: onExitComplete ? this.handleExitComplete : undefined
    };
    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
      enter: enterAnimation,
      leave: exitAnimation,
      component: component && component,
      runOnMount: runOnMount,
      enterHideStyle: enterHideStyle,
      enterShowStyle: enterShowStyle
    }, childProps), isActive ? children : null);
  }

}
VelocityAnimationGroup.defaultProps = { ...defaultProps,
  component: React.Fragment
};
VelocityAnimationGroup.propTypes = propTypes;
VelocityAnimationGroup.contextType = LibraryContext; // if (__DOCS__) {
//   VelocityAnimationGroup.docs = {
//     componentGroup: 'Animation'
//   };
// }