@vnmfify/core/transition/transition.js

```shell npm i @vnmfify/core -S ```

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import { isValidElement, useMemo, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { prefixClassname } from "../styles";
export var TransitionName;

(function (TransitionName) {
  TransitionName["Fade"] = "fade";
  TransitionName["SlideUp"] = "slide-up";
  TransitionName["SlideDown"] = "slide-down";
  TransitionName["SlideLeft"] = "slide-left";
  TransitionName["SlideRight"] = "slide-right";
})(TransitionName || (TransitionName = {}));

var TRANSITION_PRESETS = [TransitionName.Fade, TransitionName.SlideUp, TransitionName.SlideDown, TransitionName.SlideLeft, TransitionName.SlideRight];

function isTransitionPreset(name) {
  return name && TRANSITION_PRESETS.includes(name);
}

function useElementStyle(children) {
  return useMemo(() => {
    if (! /*#__PURE__*/isValidElement(children)) {
      return {};
    }

    var element = children;
    var {
      style
    } = element.props;
    return style !== null && style !== void 0 ? style : {};
  }, [children]);
}

export default function Transition(props) {
  var {
    name,
    in: inProp = false,
    appear = false,
    mountOnEnter = false,
    unmountOnExit,
    timeout = 300,
    children: childrenProp,
    onEnter: _onEnter,
    onEntering,
    onEntered,
    onExit,
    onExiting,
    onExited: _onExited
  } = props;
  var children = useMemo(() => childrenProp, [childrenProp]);
  var childrenStyle = useElementStyle(children);
  var transactionName = isTransitionPreset(name) ? prefixClassname("transition-".concat(name)) : name;
  var [enter, setEnter] = useState(false);
  var [exited, setExited] = useState(false);
  return /*#__PURE__*/React.createElement(CSSTransition, {
    in: inProp,
    mountOnEnter: mountOnEnter,
    unmountOnExit: unmountOnExit,
    timeout: timeout,
    appear: appear,
    classNames: transactionName,
    style: _objectSpread(_objectSpread({}, childrenStyle), {}, {
      display: enter && !exited ? "" : "none"
    }),
    children: children,
    onEnter: (node, isAppearing) => {
      setEnter(true);
      setExited(false);
      _onEnter === null || _onEnter === void 0 ? void 0 : _onEnter(node, isAppearing);
    },
    onEntering: onEntering,
    onEntered: onEntered,
    onExit: onExit,
    onExiting: onExiting,
    onExited: node => {
      setEnter(false);
      setExited(true);
      _onExited === null || _onExited === void 0 ? void 0 : _onExited(node);
    }
  });
}
//# sourceMappingURL=transition.js.map