@ioca/react 1.5.18 → 1.5.19

package/lib/index.js

@@ -135,12 +135,15 @@ function useMouseUp(listener, options) {
 }
 function useKeydown(listener, options) {
     initEventsOnce();
+    const listenerRef = useRef(listener);
+    listenerRef.current = listener;
     useEffect(() => {
         if (options?.disabled)
             return;
-        KeydownEvents.add(listener);
+        const handler = (e) => listenerRef.current(e);
+        KeydownEvents.add(handler);
         return () => {
-            KeydownEvents.delete(listener);
+            KeydownEvents.delete(handler);
         };
     }, []);
 }
@@ -1785,7 +1788,7 @@ const List$1 = forwardRef((props, ref) => {
 });
 List$1.Item = Item$4;
 
-const Content$2 = forwardRef((props, ref) => {
+const Content$3 = forwardRef((props, ref) => {
     const { arrow, arrowProps = {}, className, children, ...restProps } = props;
     const arrowCSS = useMemo(() => {
         let { left = 0, top = 0, pos } = arrowProps;
@@ -2297,7 +2300,7 @@ function Popup(props) {
             window.removeEventListener("scroll", onScrollOrResize, true);
         };
     }, [show]);
-    return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
+    return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content$3, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
                     ...style,
                     position: "fixed",
                 }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
@@ -2703,6 +2706,7 @@ const Editor = (props) => {
     const [memtionKeyword, setMemtionKeyword] = useState("");
     const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);
     const [activeMemtionIndex, setActiveMemtionIndex] = useState(-1);
+    const activeMemtionIndexRef = useRef(-1);
     const memtionOptions = useMemo(() => {
         if (activeMemtionIndex < 0 || !memtion?.length)
             return [];
@@ -2838,6 +2842,7 @@ const Editor = (props) => {
                 memtionTriggerRangeRef.current =
                     selectionRef.current?.cloneRange() ?? null;
                 pendingMemtionRef.current = true;
+                activeMemtionIndexRef.current = matchedIndex;
                 setActiveMemtionIndex(matchedIndex);
             }
         }
@@ -2887,8 +2892,8 @@ const Editor = (props) => {
             setEditorValue(nextValue);
         }
         rememberSelection();
-        if (activeMemtionIndex >= 0 && (pendingMemtionRef.current || memtionVisible)) {
-            const active = memtion?.[activeMemtionIndex];
+        if (activeMemtionIndexRef.current >= 0 && (pendingMemtionRef.current || memtionVisible)) {
+            const active = memtion?.[activeMemtionIndexRef.current];
             if (!active) {
                 hideMemtion();
                 return;
@@ -3261,14 +3266,21 @@ Form.useForm = useForm;
 Form.Field = Field;
 Form.useConfig = useConfig;
 
-function Content$1(props) {
+const Content$1 = (props) => {
     const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose, } = props;
     const showHeader = title || !hideCloseButton;
+    const [loading, setLoading] = useState(false);
     const handleOk = async () => {
-        const ret = await onOk?.();
-        if (ret === false)
-            return;
-        onClose?.();
+        setLoading(true);
+        try {
+            const ret = await onOk?.();
+            if (ret === false)
+                return;
+            onClose?.();
+        }
+        finally {
+            setLoading(false);
+        }
     };
     const renderFooter = useMemo(() => {
         if (footer || footer === null)
@@ -3276,19 +3288,94 @@ function Content$1(props) {
         const propsOk = Object.assign({
             children: "确定",
             onClick: handleOk,
-        }, okButtonProps);
+        }, okButtonProps, { loading });
         const propsCancel = Object.assign({
             secondary: true,
             children: "关闭",
             onClick: onClose,
         }, cancelButtonProps);
         return (jsxs(Fragment, { children: [footerLeft, jsx(Button, { ...propsOk }), jsx(Button, { ...propsCancel })] }));
-    }, [footer, okButtonProps, cancelButtonProps]);
+    }, [footer, okButtonProps, cancelButtonProps, loading]);
     return (jsxs(Fragment, { children: [showHeader && (jsxs("header", { className: 'i-modal-header', children: [title && jsx("b", { children: title }), jsx(Helpericon, { active: !hideCloseButton, className: 'i-modal-close', onClick: onClose })] })), jsx("div", { className: 'i-modal-content', children: children }), jsx("footer", { className: 'i-modal-footer', children: renderFooter })] }));
-}
+};
+var Content$2 = memo(Content$1);
 
 const ModalContext = createContext(false);
 
+const CONTAINER_ID = "i-modal-container";
+const BACKDROP_ID = "i-modal-backdrop";
+let containerEl = null;
+let backdropEl = null;
+const stack = [];
+const listeners = new Set();
+function ensureContainer() {
+    if (containerEl)
+        return containerEl;
+    containerEl = document.createElement("div");
+    containerEl.id = CONTAINER_ID;
+    containerEl.className = "i-modal-container";
+    document.body.append(containerEl);
+    backdropEl = document.createElement("div");
+    backdropEl.id = BACKDROP_ID;
+    backdropEl.className = "i-modal-backdrop";
+    containerEl.prepend(backdropEl);
+    return containerEl;
+}
+function syncBackdrop() {
+    if (!backdropEl)
+        return;
+    const show = stack.some((e) => e.visible && !e.hideBackdrop);
+    backdropEl.classList.toggle("i-modal-backdrop-active", show);
+}
+function notify$1() {
+    listeners.forEach((fn) => fn());
+}
+function register(entry) {
+    ensureContainer();
+    stack.push(entry);
+    syncBackdrop();
+    notify$1();
+    return () => {
+        const idx = stack.findIndex((e) => e.mid === entry.mid);
+        if (idx !== -1)
+            stack.splice(idx, 1);
+        syncBackdrop();
+        notify$1();
+        if (stack.length === 0) {
+            backdropEl?.remove();
+            backdropEl = null;
+            containerEl?.remove();
+            containerEl = null;
+        }
+    };
+}
+function updateVisible(mid, visible) {
+    const entry = stack.find((e) => e.mid === mid);
+    if (entry) {
+        entry.visible = visible;
+        syncBackdrop();
+        notify$1();
+    }
+}
+function isTop(mid) {
+    const top = getTopVisible();
+    return top?.mid === mid;
+}
+function getTopVisible() {
+    for (let i = stack.length - 1; i >= 0; i--) {
+        if (stack[i].visible)
+            return stack[i];
+    }
+    return undefined;
+}
+function getContainer() {
+    return ensureContainer();
+}
+function subscribe(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+}
+
 function useModal() {
     const ref = useRef(null);
     const handleOpen = (props) => {
@@ -3316,26 +3403,41 @@ function useModal() {
     };
 }
 
+let midCounter = 0;
 function Modal(props) {
     const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, disableEsc, width, height, customized, fixed, hideShadow, children, style, className, keepDOM, footerLeft, onClick, onVisibleChange, onClose, onOk, ...restProps } = props;
+    const midRef = useRef(`modal-${++midCounter}`);
+    const mid = midRef.current;
     const [show, setShow] = useState(visible);
     const [active, setActive] = useState(false);
     const [bounced, setBounced] = useState(false);
     const [mounted, setMounted] = useState(false);
+    const [top, setTop] = useState(false);
     const toggable = useRef(true);
-    const handleShow = async () => {
+    const layerRef = useRef(null);
+    const handleShow = useCallback(() => {
         if (!toggable.current)
             return;
-        (!keepDOM || !show) && setShow(true);
+        if (!keepDOM || !show)
+            setShow(true);
         toggable.current = false;
-        const timer = setTimeout(() => {
+        updateVisible(mid, true);
+        const raf = requestAnimationFrame(() => {
+            if (!layerRef.current) {
+                requestAnimationFrame(() => {
+                    setActive(true);
+                    onVisibleChange?.(true);
+                    toggable.current = true;
+                });
+                return;
+            }
             setActive(true);
             onVisibleChange?.(true);
             toggable.current = true;
-        }, 64);
-        return () => clearTimeout(timer);
-    };
-    const handleHide = () => {
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [keepDOM, show, onVisibleChange]);
+    const handleHide = useCallback(() => {
         if (!toggable.current)
             return;
         toggable.current = false;
@@ -3348,28 +3450,53 @@ function Modal(props) {
             return () => clearTimeout(timer);
         }
         setActive(false);
+        updateVisible(mid, false);
         const timer = setTimeout(() => {
-            !keepDOM && setShow(false);
+            if (!keepDOM)
+                setShow(false);
             toggable.current = true;
             onVisibleChange?.(false);
             onClose?.();
         }, 240);
         return () => clearTimeout(timer);
-    };
+    }, [closable, keepDOM, onClose, onVisibleChange]);
     const handleBackdropClick = () => {
         backdropClosable && handleHide();
     };
-    useKeydown((e) => {
-        if (e.code !== "Escape" || !visible)
-            return;
-        handleHide();
-    }, { disabled: disableEsc });
+    useEffect(() => {
+        const unsub = subscribe(() => {
+            setTop(isTop(mid));
+        });
+        return unsub;
+    }, []);
+    useEffect(() => {
+        const unregister = register({
+            mid,
+            visible: !!visible,
+            hideBackdrop: !!hideBackdrop,
+            closable: !!closable,
+        });
+        return unregister;
+    }, []);
     useEffect(() => {
         visible ? handleShow() : handleHide();
     }, [visible]);
+    useEffect(() => {
+        if (!show)
+            return;
+        const raf = requestAnimationFrame(() => {
+            setActive(top);
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [top]);
     useEffect(() => {
         setMounted(true);
     }, []);
+    useKeydown((e) => {
+        if (e.code !== "Escape" || !visible || !top)
+            return;
+        handleHide();
+    }, { disabled: disableEsc });
     const handleClick = () => {
         if (typeof document === "undefined")
             return;
@@ -3377,12 +3504,12 @@ function Modal(props) {
     };
     if (!show || !mounted)
         return null;
-    return createPortal(jsx("div", { className: classNames("i-modal-container", {
-            "i-modal-backdrop": !hideBackdrop,
-            "i-modal-customized": customized,
+    return createPortal(jsx("div", { ref: layerRef, className: classNames("i-modal-layer", {
             "i-modal-active": active,
+            "i-modal-customized": customized,
+            "i-modal-hide-backdrop": hideBackdrop,
             fixed,
-        }, className), style: style, onClick: handleBackdropClick, "aria-modal": 'true', inert: !active, children: jsx("div", { className: classNames("i-modal", {
+        }, className), style: style, onClick: handleBackdropClick, children: jsx("div", { className: classNames("i-modal", {
                 bounced,
                 shadow: !hideShadow,
             }), style: {
@@ -3392,7 +3519,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 onClick?.(e);
-            }, role: 'dialog', "aria-labelledby": title ? "modal-title" : undefined, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), document?.body ?? null);
+            }, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content$2, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), getContainer());
 }
 Modal.useModal = useModal;
 
@@ -4258,7 +4385,7 @@ const Textarea = (props) => {
         onKeyDown: handleKeydown,
         ...restProps,
     };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsx("div", { className: classNames("i-input-item", {
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: classNames("i-textarea-label", className), style: { width, ...style }, tip: message ?? tip, status: status, children: jsx("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
             }), children: jsx("textarea", { ...inputProps }) }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ioca/react",
-    "version": "1.5.18",
+    "version": "1.5.19",
     "type": "module",
     "scripts": {
         "dev": "vite",