@pisell/private-materials 6.12.372 → 6.12.374

package/lib/pro/compensatedPisellContainer/floatingLayer/index.js

@@ -1,6 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_useScrollActivity = require("../../../hooks/useScrollActivity.js");
+const require_observeTransitions = require("./observeTransitions.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let antd = require("antd");
@@ -11,7 +12,6 @@ require("./index.less");
 //#region src/pro/compensatedPisellContainer/floatingLayer/index.tsx
 const prefixCls = "pisell-lowcode-floating-layer";
 const legacyDrawerPrefixCls = "pisell-lowcode-drawer";
-const motionDuration = 300;
 const ModalButton = antd.Button;
 const overlayBaseZIndex = 600;
 const overlayZIndexStep = 10;
@@ -75,35 +75,28 @@ const getFloatingLayoutState = (isLayoutChanging = false) => {
 		viewportSize: getViewportSize()
 	};
 };
-const isSameFloatingLayout = (prevLayout, nextLayout) => {
-	return Math.abs(prevLayout.bodyScale.x - nextLayout.bodyScale.x) < .001 && Math.abs(prevLayout.bodyScale.y - nextLayout.bodyScale.y) < .001 && prevLayout.viewportSize.width === nextLayout.viewportSize.width && prevLayout.viewportSize.height === nextLayout.viewportSize.height && prevLayout.isLayoutChanging === nextLayout.isLayoutChanging;
+const isSameFloatingGeometry = (prevLayout, nextLayout) => {
+	return Math.abs(prevLayout.bodyScale.x - nextLayout.bodyScale.x) < .001 && Math.abs(prevLayout.bodyScale.y - nextLayout.bodyScale.y) < .001 && prevLayout.viewportSize.width === nextLayout.viewportSize.width && prevLayout.viewportSize.height === nextLayout.viewportSize.height;
 };
 const useBodyScaleViewport = () => {
 	const [layoutState, setLayoutState] = (0, react.useState)(() => getFloatingLayoutState(false));
 	const updateFrameRef = (0, react.useRef)();
-	const settleTimerRef = (0, react.useRef)();
+	const settleFrameRef = (0, react.useRef)();
 	(0, react.useEffect)(() => {
 		var _window$visualViewpor;
 		if (typeof window === "undefined" || typeof document === "undefined") return;
-		const setNextLayout = (isLayoutChanging) => {
-			const nextLayout = getFloatingLayoutState(isLayoutChanging);
-			setLayoutState((prevLayout) => isSameFloatingLayout(prevLayout, nextLayout) ? prevLayout : nextLayout);
-		};
-		const markLayoutSettled = () => {
-			if (settleTimerRef.current) window.clearTimeout(settleTimerRef.current);
-			settleTimerRef.current = window.setTimeout(() => {
-				setNextLayout(false);
-			}, motionDuration);
+		const updateGeometry = () => {
+			const nextLayout = getFloatingLayoutState(true);
+			setLayoutState((prevLayout) => isSameFloatingGeometry(prevLayout, nextLayout) ? prevLayout : nextLayout);
 		};
 		const scheduleScaleViewportUpdate = () => {
 			if (updateFrameRef.current) window.cancelAnimationFrame(updateFrameRef.current);
 			updateFrameRef.current = window.requestAnimationFrame(() => {
 				updateFrameRef.current = void 0;
-				setNextLayout(true);
-				markLayoutSettled();
+				updateGeometry();
 			});
 		};
-		setNextLayout(false);
+		updateGeometry();
 		window.addEventListener("resize", scheduleScaleViewportUpdate);
 		(_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 || _window$visualViewpor.addEventListener("resize", scheduleScaleViewportUpdate);
 		const bodyObserver = new MutationObserver(scheduleScaleViewportUpdate);
@@ -114,12 +107,21 @@ const useBodyScaleViewport = () => {
 		return () => {
 			var _window$visualViewpor2;
 			if (updateFrameRef.current) window.cancelAnimationFrame(updateFrameRef.current);
-			if (settleTimerRef.current) window.clearTimeout(settleTimerRef.current);
 			window.removeEventListener("resize", scheduleScaleViewportUpdate);
 			(_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.removeEventListener("resize", scheduleScaleViewportUpdate);
 			bodyObserver.disconnect();
 		};
 	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (!layoutState.isLayoutChanging) return;
+		document.body.getBoundingClientRect();
+		settleFrameRef.current = requestAnimationFrame(() => {
+			setLayoutState((current) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, current), {}, { isLayoutChanging: false }));
+		});
+		return () => {
+			if (settleFrameRef.current !== void 0) cancelAnimationFrame(settleFrameRef.current);
+		};
+	}, [layoutState]);
 	return layoutState;
 };
 const getDefaultDrawerSize = (size) => {
@@ -236,7 +238,13 @@ const TransformFloatingLayer = (props) => {
 		shouldAutoHideHeaderFooter
 	]);
 	const [rendered, setRendered] = (0, react.useState)(mergedOpen);
-	const [motionOpen, setMotionOpen] = (0, react.useState)(mergedOpen);
+	const [motion, setMotion] = (0, react.useState)({
+		open: false,
+		id: 0
+	});
+	const motionOpen = motion.open;
+	const wrapperRef = (0, react.useRef)(null);
+	const maskRef = (0, react.useRef)(null);
 	const shouldRenderLayer = rendered || mergedOpen;
 	const skipCurrentEnterMotion = skipEnterMotion && mergedOpen;
 	const effectiveMotionOpen = skipCurrentEnterMotion ? true : motionOpen;
@@ -244,10 +252,16 @@ const TransformFloatingLayer = (props) => {
 	const overlayIdRef = (0, react.useRef)();
 	const autoZIndexRef = (0, react.useRef)();
 	const autoZIndexActiveRef = (0, react.useRef)(false);
-	const mountedRef = (0, react.useRef)(false);
-	const renderedRef = (0, react.useRef)(mergedOpen);
-	const motionFrameRef = (0, react.useRef)();
-	const motionTimerRef = (0, react.useRef)();
+	const hasOpenedRef = (0, react.useRef)(false);
+	const motionRunRef = (0, react.useRef)(0);
+	const motionOptionsRef = (0, react.useRef)({
+		afterOpenChange,
+		shouldDestroyOnClose
+	});
+	motionOptionsRef.current = {
+		afterOpenChange,
+		shouldDestroyOnClose
+	};
 	if (overlayIdRef.current === void 0) overlayIdRef.current = getNextOverlayId();
 	const overlayId = overlayIdRef.current;
 	const releaseAutoZIndex = () => {
@@ -263,50 +277,49 @@ const TransformFloatingLayer = (props) => {
 		autoZIndexActiveRef.current = true;
 	}
 	const mergedZIndex = (_ref = zIndex !== null && zIndex !== void 0 ? zIndex : autoZIndexRef.current) !== null && _ref !== void 0 ? _ref : overlayBaseZIndex;
-	const updateRendered = (nextRendered) => {
-		renderedRef.current = nextRendered;
-		setRendered(nextRendered);
-	};
 	const handleClose = (event) => {
 		const closeHandler = mode === "modal" ? onCancel || onClose : onClose || onCancel;
 		closeHandler === null || closeHandler === void 0 || closeHandler(event);
 	};
-	(0, react.useEffect)(() => {
+	(0, react.useEffect)(() => () => releaseAutoZIndex(), []);
+	(0, react.useLayoutEffect)(() => {
+		const id = ++motionRunRef.current;
+		let frame;
+		if (mergedOpen) {
+			hasOpenedRef.current = true;
+			setRendered(true);
+		}
+		if (mergedOpen && !skipEnterMotion && !motionOpen) {
+			var _wrapperRef$current, _maskRef$current;
+			(_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 || _wrapperRef$current.getBoundingClientRect();
+			(_maskRef$current = maskRef.current) === null || _maskRef$current === void 0 || _maskRef$current.getBoundingClientRect();
+			frame = requestAnimationFrame(() => {
+				frame = requestAnimationFrame(() => setMotion({
+					open: true,
+					id
+				}));
+			});
+		} else setMotion({
+			open: mergedOpen,
+			id
+		});
 		return () => {
-			if (motionFrameRef.current) window.cancelAnimationFrame(motionFrameRef.current);
-			if (motionTimerRef.current) window.clearTimeout(motionTimerRef.current);
-			releaseAutoZIndex();
+			++motionRunRef.current;
+			if (frame !== void 0) cancelAnimationFrame(frame);
 		};
-	}, []);
-	(0, react.useEffect)(() => {
-		if (typeof window === "undefined") return;
-		if (motionFrameRef.current) window.cancelAnimationFrame(motionFrameRef.current);
-		if (motionTimerRef.current) window.clearTimeout(motionTimerRef.current);
-		if (mergedOpen) if (renderedRef.current) setMotionOpen(true);
-		else {
-			updateRendered(true);
-			setMotionOpen(false);
-			motionFrameRef.current = window.requestAnimationFrame(() => {
-				setMotionOpen(true);
-			});
-		}
-		else setMotionOpen(false);
-		if (!mountedRef.current) {
-			mountedRef.current = true;
-			return;
-		}
-		motionTimerRef.current = window.setTimeout(() => {
-			afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(mergedOpen);
-			if (!mergedOpen) {
+	}, [mergedOpen, skipEnterMotion]);
+	(0, react.useLayoutEffect)(() => {
+		if (!hasOpenedRef.current || motion.id !== motionRunRef.current || motion.open !== mergedOpen) return;
+		return require_observeTransitions.observeTransitions([wrapperRef.current, maskRef.current].filter((element) => element !== null), () => {
+			var _motionOptionsRef$cur, _motionOptionsRef$cur2;
+			if (motion.id !== motionRunRef.current) return;
+			if (!motion.open) {
 				releaseAutoZIndex();
-				if (shouldDestroyOnClose) updateRendered(false);
+				if (motionOptionsRef.current.shouldDestroyOnClose) setRendered(false);
 			}
-		}, motionDuration);
-	}, [
-		afterOpenChange,
-		mergedOpen,
-		shouldDestroyOnClose
-	]);
+			(_motionOptionsRef$cur = (_motionOptionsRef$cur2 = motionOptionsRef.current).afterOpenChange) === null || _motionOptionsRef$cur === void 0 || _motionOptionsRef$cur.call(_motionOptionsRef$cur2, motion.open);
+		});
+	}, [motion, mergedOpen]);
 	(0, react.useEffect)(() => {
 		if (!mergedOpen || keyboard === false || typeof window === "undefined") return;
 		const handleKeyDown = (event) => {
@@ -413,12 +426,14 @@ const TransformFloatingLayer = (props) => {
 		className: (0, classnames.default)(`${prefixCls}-root`, `${prefixCls}-mode-${mode}`, `${prefixCls}-${centered && mode === "modal" ? "center" : placement}`, getLegacyDrawerRootClasses(mode, placement), rootClassName, wrapClassName, layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.root),
 		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ zIndex: mergedZIndex }, rootScaleStyle), rootStyle), styles === null || styles === void 0 ? void 0 : styles.root)
 	}, mask ? /* @__PURE__ */ react.default.createElement("div", {
+		ref: maskRef,
 		className: (0, classnames.default)(`${prefixCls}-mask`, getLegacyDrawerClass(mode, "mask"), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.mask),
 		style: maskStyle,
 		onClick: (event) => {
 			if (event.target === event.currentTarget && maskClosable) handleClose(event);
 		}
 	}) : null, /* @__PURE__ */ react.default.createElement("div", {
+		ref: wrapperRef,
 		className: (0, classnames.default)(`${prefixCls}-content-wrapper`, getLegacyDrawerWrapperClasses(mode), className, layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.wrapper),
 		style: wrapperStyle
 	}, modalRender ? modalRender(contentNode) : contentNode)) : null;

package/lib/pro/compensatedPisellContainer/floatingLayer/observeTransitions.js

@@ -0,0 +1,65 @@
+//#region src/pro/compensatedPisellContainer/floatingLayer/observeTransitions.ts
+/** Observe only the shell's own transitions, never animations inside its content. */
+const observeTransitions = (elements, onSettled) => {
+	let disposed = false;
+	let frame;
+	const pendingEvents = /* @__PURE__ */ new Map();
+	const supportsAnimations = elements.every((element) => typeof element.getAnimations === "function");
+	const isMotionProperty = (property) => property === "opacity" || property === "transform";
+	const check = () => {
+		if (disposed) return;
+		if (supportsAnimations) {
+			const transitions = [];
+			elements.forEach((element) => {
+				transitions.push(...element.getAnimations().filter((animation) => isMotionProperty(animation.transitionProperty) && animation.playState !== "finished" && animation.playState !== "idle"));
+			});
+			if (transitions.length) {
+				Promise.all(transitions.map((animation) => animation.finished.catch(() => void 0))).then(check);
+				return;
+			}
+		} else if ([...pendingEvents.values()].some((properties) => properties.size)) return;
+		disposed = true;
+		removeListeners();
+		onSettled();
+	};
+	const scheduleCheck = () => {
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(check);
+	};
+	const handleTransition = (event) => {
+		const transition = event;
+		if (event.target !== event.currentTarget || !isMotionProperty(transition.propertyName)) return;
+		const element = event.currentTarget;
+		const properties = pendingEvents.get(element);
+		if (event.type === "transitionrun") properties.add(transition.propertyName);
+		else {
+			properties.delete(transition.propertyName);
+			scheduleCheck();
+		}
+	};
+	const removeListeners = () => {
+		elements.forEach((element) => {
+			element.removeEventListener("transitionrun", handleTransition);
+			element.removeEventListener("transitionend", handleTransition);
+			element.removeEventListener("transitioncancel", handleTransition);
+		});
+	};
+	elements.forEach((element) => {
+		pendingEvents.set(element, /* @__PURE__ */ new Set());
+		if (!supportsAnimations) {
+			element.addEventListener("transitionrun", handleTransition);
+			element.addEventListener("transitionend", handleTransition);
+			element.addEventListener("transitioncancel", handleTransition);
+		}
+		element.getBoundingClientRect();
+	});
+	if (supportsAnimations) Promise.resolve().then(check);
+	else frame = requestAnimationFrame(scheduleCheck);
+	return () => {
+		disposed = true;
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		removeListeners();
+	};
+};
+//#endregion
+exports.observeTransitions = observeTransitions;