@clive-cudi/geist-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";
var _excluded = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
import React, { useEffect, useState } from 'react';
var defaultProps = {
  visible: false,
  enterTime: 60,
  leaveTime: 60,
  clearTime: 60,
  className: '',
  name: 'transition'
};

var CssTransition = function CssTransition(_ref) {
  var children = _ref.children,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? defaultProps.className : _ref$className,
      _ref$visible = _ref.visible,
      visible = _ref$visible === void 0 ? defaultProps.visible : _ref$visible,
      _ref$enterTime = _ref.enterTime,
      enterTime = _ref$enterTime === void 0 ? defaultProps.enterTime : _ref$enterTime,
      _ref$leaveTime = _ref.leaveTime,
      leaveTime = _ref$leaveTime === void 0 ? defaultProps.leaveTime : _ref$leaveTime,
      _ref$clearTime = _ref.clearTime,
      clearTime = _ref$clearTime === void 0 ? defaultProps.clearTime : _ref$clearTime,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? defaultProps.name : _ref$name,
      props = _objectWithoutProperties(_ref, _excluded);

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

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

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

    if (visible && !renderable) {
      setRenderable(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('');
        setRenderable(false);
      }

      clearTimeout(clearClassesTimer);
    }, time + clearTime);
    return function () {
      clearTimeout(timer);
      clearTimeout(clearClassesTimer);
    };
  }, [visible, renderable]);
  if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
  return /*#__PURE__*/React.cloneElement(children, _extends({}, props, {
    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
  }));
}; // CssTransition.defaultProps = defaultProps


CssTransition.displayName = 'GeistCssTransition';
export default CssTransition;