@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

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

import React, { useContext } 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 function VelocityAnimationGroup(props) {
  let {
    children,
    enterName,
    exitName,
    enterDuration,
    exitDuration,
    isActive,
    component,
    runOnMount,
    enterShowStyle,
    enterHideStyle,
    exitDelay,
    isFlex,
    enterDelay,
    isCustomized,
    name,
    needUIPack
  } = props;
  let {
    direction,
    isReducedMotion
  } = useContext(LibraryContext) || {};
  let childProps = clearProps(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' : ''
  };
  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'
  };
  return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
    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; // if (__DOCS__) {
//   VelocityAnimationGroup.docs = {
//     componentGroup: 'Animation'
//   };
// }