@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
91 lines (90 loc) • 3.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var ConfigurableCSSTransition = function ConfigurableCSSTransition(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 = (0, _sliced_to_array._)((0, _react.useState)(function() {
if (inPhase) return 'entered';
return unmountOnExit || mountOnEnter ? 'unmounted' : 'exited';
}), 2), status = _useState[0], setStatus = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(function() {
if (inPhase) return "".concat(baseClassName, "-enter-done");
return "".concat(baseClassName, "-exit-done");
}), 2), classes = _useState1[0], setClasses = _useState1[1];
var timerRef = (0, _react.useRef)(null);
var statusRef = (0, _react.useRef)(status);
var prevInPhase = (0, _react.useRef)(inPhase);
var updateStatus = (0, _react.useCallback)(function(nextStatus) {
statusRef.current = nextStatus;
setStatus(nextStatus);
}, []);
var enter = (0, _react.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 = (0, _react.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
]);
(0, _react.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__*/ (0, _react.cloneElement)(children, {
className: "".concat(children.props.className || '', " ").concat(classes)
});
};
var _default = ConfigurableCSSTransition;