@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
80 lines (79 loc) • 3.3 kB
JavaScript
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useState, useEffect, useRef, cloneElement, useCallback } from "react";
var ConfigurableCSSTransition = function(props) {
var inPhase = props.in, _props_timeout = props.timeout, timeout = _props_timeout === void 0 ? 300 : _props_timeout, tmp = props.classNames, baseClassName = tmp === void 0 ? '' : tmp, nodeRef = props.nodeRef, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, onEntered = props.onEntered, onExited = props.onExited, children = props.children;
var _useState = _sliced_to_array(useState(function() {
if (inPhase) return 'entered';
return unmountOnExit || mountOnEnter ? 'unmounted' : 'exited';
}), 2), status = _useState[0], setStatus = _useState[1];
var _useState1 = _sliced_to_array(useState(function() {
if (inPhase) return "".concat(baseClassName, "-enter-done");
return "".concat(baseClassName, "-exit-done");
}), 2), classes = _useState1[0], setClasses = _useState1[1];
var timerRef = useRef(null);
var statusRef = useRef(status);
var prevInPhase = useRef(inPhase);
var updateStatus = useCallback(function(nextStatus) {
statusRef.current = nextStatus;
setStatus(nextStatus);
}, []);
var enter = useCallback(function() {
if (timerRef.current) clearTimeout(timerRef.current);
if (statusRef.current === 'unmounted') {
updateStatus('exited');
}
updateStatus('entering');
setClasses("".concat(baseClassName, "-enter ").concat(baseClassName, "-enter-active"));
timerRef.current = setTimeout(function() {
updateStatus('entered');
setClasses("".concat(baseClassName, "-enter-done"));
onEntered === null || onEntered === void 0 ? void 0 : onEntered();
}, timeout);
}, [
baseClassName,
onEntered,
timeout,
updateStatus
]);
var exit = useCallback(function() {
if (timerRef.current) clearTimeout(timerRef.current);
updateStatus('exiting');
setClasses("".concat(baseClassName, "-exit ").concat(baseClassName, "-exit-active"));
timerRef.current = setTimeout(function() {
updateStatus('exited');
setClasses("".concat(baseClassName, "-exit-done"));
if (unmountOnExit) {
updateStatus('unmounted');
}
onExited === null || onExited === void 0 ? void 0 : onExited();
}, timeout);
}, [
baseClassName,
onExited,
timeout,
unmountOnExit,
updateStatus
]);
useEffect(function() {
if (prevInPhase.current !== inPhase) {
if (inPhase) {
enter();
} else {
exit();
}
prevInPhase.current = inPhase;
}
return function() {
if (timerRef.current) clearTimeout(timerRef.current);
};
}, [
inPhase,
enter,
exit
]);
if (status === 'unmounted') return null;
return /*#__PURE__*/ cloneElement(children, {
className: "".concat(children.props.className || '', " ").concat(classes)
});
};
export default ConfigurableCSSTransition;