@geezee/react-ui/esm/shared/css-transition.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useEffect, useState } from 'react';
import withDefaults from '../utils/with-defaults';
export var defaultProps = {
  visible: false,
  enterTime: 60,
  leaveTime: 60,
  clearTime: 60,
  className: '',
  renderable: false,
  name: 'transition'
};

var CSSTransition = function CSSTransition(_ref) {
  var children = _ref.children,
      className = _ref.className,
      visible = _ref.visible,
      renderable = _ref.renderable,
      enterTime = _ref.enterTime,
      leaveTime = _ref.leaveTime,
      clearTime = _ref.clearTime,
      name = _ref.name,
      props = _objectWithoutProperties(_ref, ["children", "className", "visible", "renderable", "enterTime", "leaveTime", "clearTime", "name"]);

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      classes = _useState2[0],
      setClasses = _useState2[1];

  var _useState3 = useState(renderable || visible),
      _useState4 = _slicedToArray(_useState3, 2),
      selfRenderable = _useState4[0],
      setSelfRenderable = _useState4[1];

  useEffect(function () {
    var statusClassName = visible ? 'enter' : 'leave';
    var time = visible ? enterTime : leaveTime;

    if (visible && !selfRenderable) {
      setSelfRenderable(true);
    }

    setClasses("".concat(name, "-").concat(statusClassName)); // set class to active

    var timer = setTimeout(function () {
      setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
      clearTimeout(timer);
    }, time); // remove classess when animation over

    var clearClassesTimer = setTimeout(function () {
      if (!visible) {
        setClasses('');
        setSelfRenderable(renderable || false);
      }

      clearTimeout(clearClassesTimer);
    }, time + clearTime);
    return function () {
      clearTimeout(timer);
      clearTimeout(clearClassesTimer);
    };
  }, [visible, selfRenderable]);
  if (!React.isValidElement(children) || !selfRenderable) return null;
  return React.cloneElement(children, _extends(_extends({}, props), {}, {
    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
  }));
};

export default withDefaults(CSSTransition, defaultProps);