@hubstr/kit 0.1.4 → 0.1.6

package/ui/es/DraggableSideNav/DraggableSideNav.mjs

@@ -0,0 +1,436 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Center from "../Flex/Center.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useHover } from "ahooks";
+import { Resizable } from "re-resizable";
+//#region src/DraggableSideNav/DraggableSideNav.tsx
+const DEFAULT_MIN_WIDTH = 64;
+const DEFAULT_EXPAND = true;
+const DEFAULT_EXPANDED_WIDTH = 280;
+const ANIMATION_DURATION = 300;
+const COLLAPSE_ANIMATION_DELAY = 200;
+const RESIZE_DISABLED = {
+	bottom: false,
+	bottomLeft: false,
+	bottomRight: false,
+	left: false,
+	right: false,
+	top: false,
+	topLeft: false,
+	topRight: false
+};
+function sideNavReducer(state, action) {
+	switch (action.type) {
+		case "START_RESIZE": return {
+			...state,
+			isResizing: true
+		};
+		case "STOP_RESIZE": return {
+			...state,
+			isResizing: false
+		};
+		case "START_ANIMATION": return {
+			...state,
+			isAnimating: true
+		};
+		case "STOP_ANIMATION": return {
+			...state,
+			isAnimating: false
+		};
+		case "SET_WIDTH": return {
+			...state,
+			internalWidth: action.payload
+		};
+		case "SET_EXPANDED_WIDTH": return {
+			...state,
+			expandedWidth: action.payload
+		};
+		case "SET_RENDER_EXPAND": return {
+			...state,
+			renderExpand: action.payload
+		};
+		case "ANIMATE_EXPAND": return {
+			...state,
+			internalWidth: action.payload,
+			renderExpand: true
+		};
+		case "ANIMATE_COLLAPSE": return {
+			...state,
+			internalWidth: action.payload
+		};
+		default: return state;
+	}
+}
+const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DEFAULT_EXPAND, defaultWidth, expand, expandable = true, footer, header, maxWidth, minWidth = DEFAULT_MIN_WIDTH, onExpandChange, onWidthChange, onWidthDragging, placement = "left", resizable = true, showBorder = true, showHandle = true, showHandleWhenCollapsed = false, showHandleHighlight = false, backgroundColor, styles: customStyles, width, ...rest }) => {
+	const cssVariables = useMemo(() => ({ "--draggable-side-nav-bg": backgroundColor || "" }), [backgroundColor]);
+	const ref = useRef(null);
+	const isHovering = useHover(ref);
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+		onChange: onExpandChange,
+		value: expand
+	});
+	const animationTimeoutRef = useRef(void 0);
+	const collapseTimeoutRef = useRef(void 0);
+	const computedDefaultExpandedWidth = useMemo(() => defaultWidth || DEFAULT_EXPANDED_WIDTH, [defaultWidth]);
+	const [state, dispatch] = useReducer(sideNavReducer, {
+		expandedWidth: width ?? computedDefaultExpandedWidth,
+		internalWidth: isExpand ? width ?? computedDefaultExpandedWidth : minWidth,
+		isAnimating: false,
+		isResizing: false,
+		renderExpand: isExpand
+	});
+	const collapseThreshold = useMemo(() => {
+		return minWidth + (state.expandedWidth - minWidth) / 3;
+	}, [minWidth, state.expandedWidth]);
+	const toggleExpand = useCallback(() => {
+		if (!expandable) return;
+		if (state.isAnimating || state.isResizing) return;
+		if (animationTimeoutRef.current) clearTimeout(animationTimeoutRef.current);
+		dispatch({ type: "START_ANIMATION" });
+		setIsExpand(!isExpand);
+		animationTimeoutRef.current = setTimeout(() => {
+			dispatch({ type: "STOP_ANIMATION" });
+		}, ANIMATION_DURATION);
+	}, [
+		expandable,
+		isExpand,
+		setIsExpand,
+		state.isAnimating,
+		state.isResizing
+	]);
+	const prevExpandRef = useRef(isExpand);
+	useEffect(() => {
+		if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {
+			if (animationTimeoutRef.current) clearTimeout(animationTimeoutRef.current);
+			dispatch({ type: "START_ANIMATION" });
+			animationTimeoutRef.current = setTimeout(() => {
+				dispatch({ type: "STOP_ANIMATION" });
+			}, ANIMATION_DURATION);
+			prevExpandRef.current = isExpand;
+		}
+	}, [
+		isExpand,
+		state.isResizing,
+		state.isAnimating
+	]);
+	useEffect(() => {
+		if (state.isAnimating) {
+			const rafId = requestAnimationFrame(() => {
+				if (isExpand) dispatch({
+					payload: state.expandedWidth,
+					type: "ANIMATE_EXPAND"
+				});
+				else {
+					dispatch({
+						payload: minWidth,
+						type: "ANIMATE_COLLAPSE"
+					});
+					if (collapseTimeoutRef.current) clearTimeout(collapseTimeoutRef.current);
+					collapseTimeoutRef.current = setTimeout(() => {
+						dispatch({
+							payload: false,
+							type: "SET_RENDER_EXPAND"
+						});
+					}, COLLAPSE_ANIMATION_DELAY);
+				}
+			});
+			return () => {
+				cancelAnimationFrame(rafId);
+			};
+		}
+	}, [
+		isExpand,
+		state.isAnimating,
+		minWidth,
+		state.expandedWidth
+	]);
+	const prevIsResizingRef = useRef(state.isResizing);
+	useEffect(() => {
+		const wasResizing = prevIsResizingRef.current;
+		prevIsResizingRef.current = state.isResizing;
+		if (wasResizing && !state.isResizing && !state.isAnimating) dispatch({
+			payload: isExpand,
+			type: "SET_RENDER_EXPAND"
+		});
+	}, [
+		isExpand,
+		state.isAnimating,
+		state.isResizing
+	]);
+	useEffect(() => {
+		if (width !== void 0 && !state.isResizing && !state.isAnimating) {
+			dispatch({
+				payload: width,
+				type: "SET_EXPANDED_WIDTH"
+			});
+			if (isExpand) dispatch({
+				payload: width,
+				type: "SET_WIDTH"
+			});
+		}
+	}, [
+		width,
+		state.isResizing,
+		state.isAnimating,
+		isExpand
+	]);
+	const currentBody = useMemo(() => {
+		return body(state.renderExpand);
+	}, [body, state.renderExpand]);
+	const currentHeader = useMemo(() => {
+		return typeof header === "function" ? header(state.renderExpand) : header;
+	}, [header, state.renderExpand]);
+	const currentFooter = useMemo(() => {
+		return typeof footer === "function" ? footer(state.renderExpand) : footer;
+	}, [footer, state.renderExpand]);
+	const handleResize = useCallback((_, __, ref, delta) => {
+		const currentWidth = ref.offsetWidth;
+		dispatch({
+			payload: currentWidth,
+			type: "SET_WIDTH"
+		});
+		onWidthDragging?.(delta, currentWidth);
+	}, [onWidthDragging]);
+	const handleResizeStart = useCallback(() => {
+		dispatch({ type: "START_RESIZE" });
+	}, []);
+	const handleResizeStop = useCallback((_, __, ref, delta) => {
+		dispatch({ type: "STOP_RESIZE" });
+		const currentWidth = ref.offsetWidth;
+		if (animationTimeoutRef.current) clearTimeout(animationTimeoutRef.current);
+		if (expandable) {
+			const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;
+			if (shouldCollapse || !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold) {
+				dispatch({ type: "START_ANIMATION" });
+				if (shouldCollapse) {
+					setIsExpand(false);
+					dispatch({
+						payload: minWidth,
+						type: "SET_WIDTH"
+					});
+				} else {
+					setIsExpand(true);
+					dispatch({
+						payload: currentWidth,
+						type: "SET_EXPANDED_WIDTH"
+					});
+					dispatch({
+						payload: currentWidth,
+						type: "SET_WIDTH"
+					});
+				}
+				animationTimeoutRef.current = setTimeout(() => {
+					dispatch({ type: "STOP_ANIMATION" });
+				}, ANIMATION_DURATION);
+			} else if (isExpand) {
+				dispatch({
+					payload: currentWidth,
+					type: "SET_EXPANDED_WIDTH"
+				});
+				dispatch({
+					payload: currentWidth,
+					type: "SET_WIDTH"
+				});
+			}
+		} else {
+			dispatch({
+				payload: currentWidth,
+				type: "SET_EXPANDED_WIDTH"
+			});
+			dispatch({
+				payload: currentWidth,
+				type: "SET_WIDTH"
+			});
+		}
+		onWidthChange?.(delta, currentWidth);
+	}, [
+		expandable,
+		minWidth,
+		collapseThreshold,
+		isExpand,
+		onWidthChange,
+		setIsExpand
+	]);
+	const ArrowIcon = useMemo(() => {
+		if (placement === "left") return ChevronLeft;
+		return ChevronRight;
+	}, [placement]);
+	const handleRootStyle = useMemo(() => ({
+		display: "flex",
+		opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,
+		transition: "opacity 0.25s ease"
+	}), [
+		isExpand,
+		showHandleWhenCollapsed,
+		isHovering
+	]);
+	const handleCenterStyle = useMemo(() => ({
+		...customStyles?.handle,
+		cursor: "pointer"
+	}), [customStyles?.handle]);
+	const handleIconWrapperStyle = useMemo(() => ({
+		marginLeft: placement === "right" ? 4 : 0,
+		marginRight: placement === "left" ? 4 : 0,
+		transform: isExpand ? "rotate(0deg)" : "rotate(180deg)",
+		transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`
+	}), [placement, isExpand]);
+	const handle = useMemo(() => showHandle && expandable && /* @__PURE__ */ jsx("div", {
+		style: handleRootStyle,
+		className: cx(styles.toggleRoot, placement === "left" ? styles.toggleLeft : styles.toggleRight),
+		children: /* @__PURE__ */ jsx(Center, {
+			className: classNames?.handle,
+			style: handleCenterStyle,
+			onClick: toggleExpand,
+			children: /* @__PURE__ */ jsx("div", {
+				style: handleIconWrapperStyle,
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: styles.handlerIcon,
+					icon: ArrowIcon,
+					size: 16
+				})
+			})
+		})
+	}), [
+		showHandle,
+		expandable,
+		styles.toggleRoot,
+		styles.toggleLeft,
+		styles.toggleRight,
+		styles.handlerIcon,
+		placement,
+		handleRootStyle,
+		classNames?.handle,
+		toggleExpand,
+		handleCenterStyle,
+		handleIconWrapperStyle,
+		ArrowIcon,
+		cx
+	]);
+	const sizeConfig = useMemo(() => {
+		return {
+			maxWidth,
+			minWidth,
+			size: {
+				height: "100%",
+				width: state.internalWidth
+			}
+		};
+	}, [
+		state.internalWidth,
+		minWidth,
+		maxWidth
+	]);
+	const resizeEnable = useMemo(() => {
+		if (!resizable) return RESIZE_DISABLED;
+		return {
+			bottom: false,
+			bottomLeft: false,
+			bottomRight: false,
+			left: placement === "right",
+			right: placement === "left",
+			top: false,
+			topLeft: false,
+			topRight: false
+		};
+	}, [resizable, placement]);
+	const handleClasses = useMemo(() => ({ [placement === "left" ? "right" : "left"]: cx(styles.resizeHandle, showHandleHighlight && styles.resizeHandleHighlight, placement === "left" ? styles.resizeHandleLeft : styles.resizeHandleRight) }), [
+		placement,
+		styles,
+		showHandleHighlight,
+		cx
+	]);
+	const containerStyle = useMemo(() => ({
+		...customStyles?.container,
+		...rest.style,
+		transition: state.isResizing ? "none" : state.isAnimating ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)` : "none"
+	}), [
+		customStyles?.container,
+		rest.style,
+		state.isResizing,
+		state.isAnimating
+	]);
+	const containerClassName = useMemo(() => cx(styles.container, classNames?.container, className), [
+		cx,
+		styles.container,
+		classNames?.container,
+		className
+	]);
+	const contentClassName = useMemo(() => cx(showBorder ? styles.contentContainer : styles.contentContainerNoBorder, styles.menuOverride, classNames?.content), [
+		cx,
+		styles.contentContainer,
+		styles.contentContainerNoBorder,
+		styles.menuOverride,
+		classNames?.content,
+		showBorder
+	]);
+	const headerClassName = useMemo(() => cx(styles.header, classNames?.header), [
+		cx,
+		styles.header,
+		classNames?.header
+	]);
+	const bodyClassName = useMemo(() => cx(styles.body, classNames?.body), [
+		cx,
+		styles.body,
+		classNames?.body
+	]);
+	const footerClassName = useMemo(() => cx(styles.footer, classNames?.footer), [
+		cx,
+		styles.footer,
+		classNames?.footer
+	]);
+	useEffect(() => {
+		return () => {
+			if (animationTimeoutRef.current) clearTimeout(animationTimeoutRef.current);
+			if (collapseTimeoutRef.current) clearTimeout(collapseTimeoutRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("aside", {
+		ref,
+		children: /* @__PURE__ */ jsxs(Resizable, {
+			...sizeConfig,
+			className: containerClassName,
+			enable: resizeEnable,
+			handleClasses,
+			style: containerStyle,
+			onResize: handleResize,
+			onResizeStart: handleResizeStart,
+			onResizeStop: handleResizeStop,
+			children: [handle, /* @__PURE__ */ jsxs(FlexBasic_default, {
+				className: contentClassName,
+				style: {
+					...cssVariables,
+					...customStyles?.content
+				},
+				children: [
+					currentHeader && /* @__PURE__ */ jsx("div", {
+						className: headerClassName,
+						style: customStyles?.header,
+						children: currentHeader
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: bodyClassName,
+						style: customStyles?.body,
+						children: currentBody
+					}),
+					currentFooter && /* @__PURE__ */ jsx("div", {
+						className: footerClassName,
+						style: customStyles?.footer,
+						children: currentFooter
+					})
+				]
+			})]
+		})
+	});
+});
+DraggableSideNav.displayName = "DraggableSideNav";
+//#endregion
+export { DraggableSideNav as default };
+
+//# sourceMappingURL=DraggableSideNav.mjs.map

package/ui/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableSideNav.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useHover } from 'ahooks';\r\nimport { cx } from 'antd-style';\r\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\r\nimport { Resizable, type ResizeCallback } from 're-resizable';\r\nimport {\r\n  type CSSProperties,\r\n  memo,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useReducer,\r\n  useRef,\r\n} from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport { Center, Flexbox } from '../Flex';\r\nimport Icon from '../Icon';\r\n\r\nimport { styles } from './style';\r\nimport type { DraggableSideNavProps } from './type';\r\n\r\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\r\nconst DEFAULT_EXPAND = true;\r\nconst DEFAULT_EXPANDED_WIDTH = 280;\r\nconst ANIMATION_DURATION = 300;\r\nconst COLLAPSE_ANIMATION_DELAY = 200;\r\n\r\n// Pre-define static objects to avoid recreating\r\nconst RESIZE_DISABLED = {\r\n  bottom: false,\r\n  bottomLeft: false,\r\n  bottomRight: false,\r\n  left: false,\r\n  right: false,\r\n  top: false,\r\n  topLeft: false,\r\n  topRight: false,\r\n};\r\n\r\n// State reducer for better state management\r\ninterface SideNavState {\r\n  expandedWidth: number;\r\n  internalWidth: number;\r\n  isAnimating: boolean;\r\n  isResizing: boolean;\r\n  renderExpand: boolean;\r\n}\r\n\r\ntype SideNavAction =\r\n  | { type: 'START_RESIZE' }\r\n  | { type: 'STOP_RESIZE' }\r\n  | { type: 'START_ANIMATION' }\r\n  | { type: 'STOP_ANIMATION' }\r\n  | { payload: number; type: 'SET_WIDTH' }\r\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\r\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\r\n  | { payload: number; type: 'ANIMATE_EXPAND' }\r\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\r\n\r\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\r\n  switch (action.type) {\r\n    case 'START_RESIZE': {\r\n      return { ...state, isResizing: true };\r\n    }\r\n    case 'STOP_RESIZE': {\r\n      return { ...state, isResizing: false };\r\n    }\r\n    case 'START_ANIMATION': {\r\n      return { ...state, isAnimating: true };\r\n    }\r\n    case 'STOP_ANIMATION': {\r\n      return { ...state, isAnimating: false };\r\n    }\r\n    case 'SET_WIDTH': {\r\n      return { ...state, internalWidth: action.payload };\r\n    }\r\n    case 'SET_EXPANDED_WIDTH': {\r\n      return { ...state, expandedWidth: action.payload };\r\n    }\r\n    case 'SET_RENDER_EXPAND': {\r\n      return { ...state, renderExpand: action.payload };\r\n    }\r\n    case 'ANIMATE_EXPAND': {\r\n      return { ...state, internalWidth: action.payload, renderExpand: true };\r\n    }\r\n    case 'ANIMATE_COLLAPSE': {\r\n      return { ...state, internalWidth: action.payload };\r\n    }\r\n    default: {\r\n      return state;\r\n    }\r\n  }\r\n}\r\n\r\nconst DraggableSideNav = memo<DraggableSideNavProps>(\r\n  ({\r\n    body,\r\n    className,\r\n    classNames,\r\n    defaultExpand = DEFAULT_EXPAND,\r\n    defaultWidth,\r\n    expand,\r\n    expandable = true,\r\n    footer,\r\n    header,\r\n    maxWidth,\r\n    minWidth = DEFAULT_MIN_WIDTH,\r\n    onExpandChange,\r\n    onWidthChange,\r\n    onWidthDragging,\r\n    placement = 'left',\r\n    resizable = true,\r\n    showBorder = true,\r\n    showHandle = true,\r\n    showHandleWhenCollapsed = false,\r\n    showHandleHighlight = false,\r\n    backgroundColor,\r\n    styles: customStyles,\r\n    width,\r\n    ...rest\r\n  }) => {\r\n    const cssVariables = useMemo<Record<string, string>>(\r\n      () => ({\r\n        '--draggable-side-nav-bg': backgroundColor || '',\r\n      }),\r\n      [backgroundColor],\r\n    );\r\n    const ref = useRef<HTMLDivElement>(null);\r\n    const isHovering = useHover(ref);\r\n\r\n    // Expand state management\r\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\r\n      onChange: onExpandChange,\r\n      value: expand,\r\n    });\r\n\r\n    // Use refs for animation timeouts to avoid memory leaks\r\n    const animationTimeoutRef = useRef<any>(undefined);\r\n    const collapseTimeoutRef = useRef<any>(undefined);\r\n\r\n    // Compute default expanded width - memoize to avoid recalculation\r\n    const computedDefaultExpandedWidth = useMemo(\r\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\r\n      [defaultWidth],\r\n    );\r\n\r\n    // Initialize state with useReducer for better performance\r\n    const initialState: SideNavState = {\r\n      expandedWidth: width ?? computedDefaultExpandedWidth,\r\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\r\n      isAnimating: false,\r\n      isResizing: false,\r\n      renderExpand: isExpand,\r\n    };\r\n\r\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\r\n\r\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\r\n    const collapseThreshold = useMemo(() => {\r\n      return minWidth + (state.expandedWidth - minWidth) / 3;\r\n    }, [minWidth, state.expandedWidth]);\r\n\r\n    // Toggle expand state with smooth animation\r\n    const toggleExpand = useCallback(() => {\r\n      if (!expandable) return;\r\n\r\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\r\n      if (state.isAnimating || state.isResizing) return;\r\n\r\n      // 清除之前的动画\r\n      if (animationTimeoutRef.current) {\r\n        clearTimeout(animationTimeoutRef.current);\r\n      }\r\n\r\n      // 立即设置动画状态，避免其他 useEffect 干扰\r\n      dispatch({ type: 'START_ANIMATION' });\r\n      setIsExpand(!isExpand);\r\n\r\n      // 动画完成后重置状态 - 与宽度动画时长一致\r\n      animationTimeoutRef.current = setTimeout(() => {\r\n        dispatch({ type: 'STOP_ANIMATION' });\r\n      }, ANIMATION_DURATION);\r\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\r\n\r\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\r\n    const prevExpandRef = useRef(isExpand);\r\n\r\n    // 监听外部 expand prop 变化，触发动画\r\n    useEffect(() => {\r\n      // 检测到 expand 状态变化，且不在拖拽和动画中\r\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\r\n        if (animationTimeoutRef.current) {\r\n          clearTimeout(animationTimeoutRef.current);\r\n        }\r\n\r\n        // 立即设置动画状态，避免其他 useEffect 干扰\r\n        dispatch({ type: 'START_ANIMATION' });\r\n\r\n        animationTimeoutRef.current = setTimeout(() => {\r\n          dispatch({ type: 'STOP_ANIMATION' });\r\n        }, ANIMATION_DURATION);\r\n\r\n        prevExpandRef.current = isExpand;\r\n      }\r\n    }, [isExpand, state.isResizing, state.isAnimating]);\r\n\r\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\r\n    useEffect(() => {\r\n      if (state.isAnimating) {\r\n        // 使用 requestAnimationFrame 确保动画平滑\r\n        const rafId = requestAnimationFrame(() => {\r\n          if (isExpand) {\r\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\r\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\r\n          } else {\r\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\r\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\r\n\r\n            if (collapseTimeoutRef.current) {\r\n              clearTimeout(collapseTimeoutRef.current);\r\n            }\r\n            collapseTimeoutRef.current = setTimeout(() => {\r\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\r\n            }, COLLAPSE_ANIMATION_DELAY);\r\n          }\r\n        });\r\n\r\n        return () => {\r\n          cancelAnimationFrame(rafId);\r\n        };\r\n      }\r\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\r\n\r\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\r\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\r\n    const prevIsResizingRef = useRef(state.isResizing);\r\n    useEffect(() => {\r\n      const wasResizing = prevIsResizingRef.current;\r\n      prevIsResizingRef.current = state.isResizing;\r\n\r\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\r\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\r\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\r\n      }\r\n    }, [isExpand, state.isAnimating, state.isResizing]);\r\n\r\n    // 处理外部 width prop 变化\r\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\r\n    useEffect(() => {\r\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\r\n        // 更新展开宽度记录\r\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\r\n        // 根据当前状态设置实际宽度\r\n        if (isExpand) {\r\n          dispatch({ payload: width, type: 'SET_WIDTH' });\r\n        }\r\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\r\n      }\r\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\r\n\r\n    // 计算当前的 body 内容 - 使用 renderExpand\r\n    const currentBody = useMemo(() => {\r\n      return body(state.renderExpand);\r\n    }, [body, state.renderExpand]);\r\n\r\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\r\n    const currentHeader = useMemo(() => {\r\n      return typeof header === 'function' ? header(state.renderExpand) : header;\r\n    }, [header, state.renderExpand]);\r\n\r\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\r\n    const currentFooter = useMemo(() => {\r\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\r\n    }, [footer, state.renderExpand]);\r\n\r\n    // Handle resize - memoize to prevent recreating on every render\r\n    const handleResize: ResizeCallback = useCallback(\r\n      (_, __, ref, delta) => {\r\n        const currentWidth = ref.offsetWidth;\r\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\r\n\r\n        onWidthDragging?.(delta, currentWidth);\r\n      },\r\n      [onWidthDragging],\r\n    );\r\n\r\n    const handleResizeStart = useCallback(() => {\r\n      dispatch({ type: 'START_RESIZE' });\r\n    }, []);\r\n\r\n    const handleResizeStop: ResizeCallback = useCallback(\r\n      (_, __, ref, delta) => {\r\n        dispatch({ type: 'STOP_RESIZE' });\r\n\r\n        const currentWidth = ref.offsetWidth;\r\n\r\n        // 清除之前的动画\r\n        if (animationTimeoutRef.current) {\r\n          clearTimeout(animationTimeoutRef.current);\r\n        }\r\n\r\n        // 根据拖拽后的宽度决定是折叠还是展开\r\n        if (expandable) {\r\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\r\n          const shouldExpand =\r\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\r\n\r\n          if (shouldCollapse || shouldExpand) {\r\n            // 立即设置动画状态\r\n            dispatch({ type: 'START_ANIMATION' });\r\n\r\n            if (shouldCollapse) {\r\n              setIsExpand(false);\r\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\r\n            } else {\r\n              setIsExpand(true);\r\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\r\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\r\n            }\r\n\r\n            animationTimeoutRef.current = setTimeout(() => {\r\n              dispatch({ type: 'STOP_ANIMATION' });\r\n            }, ANIMATION_DURATION);\r\n          } else if (isExpand) {\r\n            // 展开状态下正常拖拽，记住宽度\r\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\r\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\r\n          }\r\n        } else {\r\n          // 如果不可折叠，仅更新宽度\r\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\r\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\r\n        }\r\n\r\n        onWidthChange?.(delta, currentWidth);\r\n      },\r\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\r\n    );\r\n\r\n    // Arrow icon based on placement and expand state\r\n    const ArrowIcon = useMemo(() => {\r\n      if (placement === 'left') {\r\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\r\n        return ChevronLeft;\r\n      }\r\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\r\n      return ChevronRight;\r\n    }, [placement]);\r\n\r\n    // Memoize handle styles to prevent recreation\r\n    const handleRootStyle = useMemo<CSSProperties>(\r\n      () => ({\r\n        display: 'flex',\r\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\r\n        transition: 'opacity 0.25s ease',\r\n      }),\r\n      [isExpand, showHandleWhenCollapsed, isHovering],\r\n    );\r\n\r\n    const handleCenterStyle = useMemo<CSSProperties>(\r\n      () => ({\r\n        ...customStyles?.handle,\r\n        cursor: 'pointer',\r\n      }),\r\n      [customStyles?.handle],\r\n    );\r\n\r\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\r\n      () => ({\r\n        marginLeft: placement === 'right' ? 4 : 0,\r\n        marginRight: placement === 'left' ? 4 : 0,\r\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\r\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\r\n      }),\r\n      [placement, isExpand],\r\n    );\r\n\r\n    // Toggle handle with smooth transitions\r\n    const handle = useMemo(\r\n      () =>\r\n        showHandle &&\r\n        expandable && (\r\n          <div\r\n            style={handleRootStyle}\r\n            className={cx(\r\n              styles.toggleRoot,\r\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\r\n            )}\r\n          >\r\n            <Center className={classNames?.handle} style={handleCenterStyle} onClick={toggleExpand}>\r\n              <div style={handleIconWrapperStyle}>\r\n                <Icon className={styles.handlerIcon} icon={ArrowIcon} size={16} />\r\n              </div>\r\n            </Center>\r\n          </div>\r\n        ),\r\n      [\r\n        showHandle,\r\n        expandable,\r\n        styles.toggleRoot,\r\n        styles.toggleLeft,\r\n        styles.toggleRight,\r\n        styles.handlerIcon,\r\n        placement,\r\n        handleRootStyle,\r\n        classNames?.handle,\r\n        toggleExpand,\r\n        handleCenterStyle,\r\n        handleIconWrapperStyle,\r\n        ArrowIcon,\r\n        cx,\r\n      ],\r\n    );\r\n\r\n    // Size configuration - 使用内部宽度状态\r\n    const sizeConfig = useMemo(() => {\r\n      return {\r\n        maxWidth: maxWidth,\r\n        minWidth: minWidth,\r\n        size: { height: '100%', width: state.internalWidth },\r\n      };\r\n    }, [state.internalWidth, minWidth, maxWidth]);\r\n\r\n    // Resize enable configuration - 始终允许拖拽\r\n    const resizeEnable = useMemo(() => {\r\n      if (!resizable) {\r\n        return RESIZE_DISABLED;\r\n      }\r\n      return {\r\n        bottom: false,\r\n        bottomLeft: false,\r\n        bottomRight: false,\r\n        left: placement === 'right',\r\n        right: placement === 'left',\r\n        top: false,\r\n        topLeft: false,\r\n        topRight: false,\r\n      };\r\n    }, [resizable, placement]);\r\n\r\n    // Memoize handle classes to prevent recreation\r\n    const handleClasses = useMemo(\r\n      () => ({\r\n        [placement === 'left' ? 'right' : 'left']: cx(\r\n          styles.resizeHandle,\r\n          showHandleHighlight && styles.resizeHandleHighlight,\r\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\r\n        ),\r\n      }),\r\n      [placement, styles, showHandleHighlight, cx],\r\n    );\r\n\r\n    // Memoize container style to prevent recreation\r\n    const containerStyle = useMemo<CSSProperties>(\r\n      () => ({\r\n        ...customStyles?.container,\r\n        ...rest.style,\r\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\r\n        transition: state.isResizing\r\n          ? 'none'\r\n          : state.isAnimating\r\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\r\n            : 'none',\r\n      }),\r\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\r\n    );\r\n\r\n    // Memoize class names\r\n    const containerClassName = useMemo(\r\n      () => cx(styles.container, classNames?.container, className),\r\n      [cx, styles.container, classNames?.container, className],\r\n    );\r\n\r\n    const contentClassName = useMemo(\r\n      () =>\r\n        cx(\r\n          showBorder ? styles.contentContainer : styles.contentContainerNoBorder,\r\n          styles.menuOverride,\r\n          classNames?.content,\r\n        ),\r\n      [\r\n        cx,\r\n        styles.contentContainer,\r\n        styles.contentContainerNoBorder,\r\n        styles.menuOverride,\r\n        classNames?.content,\r\n        showBorder,\r\n      ],\r\n    );\r\n\r\n    const headerClassName = useMemo(\r\n      () => cx(styles.header, classNames?.header),\r\n      [cx, styles.header, classNames?.header],\r\n    );\r\n\r\n    const bodyClassName = useMemo(\r\n      () => cx(styles.body, classNames?.body),\r\n      [cx, styles.body, classNames?.body],\r\n    );\r\n\r\n    const footerClassName = useMemo(\r\n      () => cx(styles.footer, classNames?.footer),\r\n      [cx, styles.footer, classNames?.footer],\r\n    );\r\n\r\n    // Cleanup timeouts on unmount\r\n    useEffect(() => {\r\n      return () => {\r\n        if (animationTimeoutRef.current) {\r\n          clearTimeout(animationTimeoutRef.current);\r\n        }\r\n        if (collapseTimeoutRef.current) {\r\n          clearTimeout(collapseTimeoutRef.current);\r\n        }\r\n      };\r\n    }, []);\r\n\r\n    return (\r\n      <aside ref={ref}>\r\n        <Resizable\r\n          {...sizeConfig}\r\n          className={containerClassName}\r\n          enable={resizeEnable}\r\n          handleClasses={handleClasses}\r\n          style={containerStyle}\r\n          onResize={handleResize}\r\n          onResizeStart={handleResizeStart}\r\n          onResizeStop={handleResizeStop}\r\n        >\r\n          {handle}\r\n          <Flexbox\r\n            className={contentClassName}\r\n            style={{\r\n              ...cssVariables,\r\n              ...customStyles?.content,\r\n            }}\r\n          >\r\n            {currentHeader && (\r\n              <div className={headerClassName} style={customStyles?.header}>\r\n                {currentHeader}\r\n              </div>\r\n            )}\r\n            <div className={bodyClassName} style={customStyles?.body}>\r\n              {currentBody}\r\n            </div>\r\n            {currentFooter && (\r\n              <div className={footerClassName} style={customStyles?.footer}>\r\n                {currentFooter}\r\n              </div>\r\n            )}\r\n          </Flexbox>\r\n        </Resizable>\r\n      </aside>\r\n    );\r\n  },\r\n);\r\n\r\nDraggableSideNav.displayName = 'DraggableSideNav';\r\n\r\nexport default DraggableSideNav;\r\n"],"mappings":"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"}

package/ui/es/DraggableSideNav/index.d.mts

@@ -0,0 +1,3 @@
+import { DraggableSideNavProps } from "./type.mjs";
+import { DraggableSideNav } from "./DraggableSideNav.mjs";
+export { DraggableSideNavProps, DraggableSideNav as default };

package/ui/es/DraggableSideNav/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/ui/es/DraggableSideNav/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/ui/es/DraggableSideNav/index.mjs

@@ -0,0 +1,2 @@
+import DraggableSideNav from "./DraggableSideNav.mjs";
+export { DraggableSideNav as default };