@ioca/react 1.3.68 → 1.3.69

package/lib/index.js

@@ -16,9 +16,11 @@ import SortableContainer, { SortableItem } from 'react-easy-sort';
 
 const TIMEOUT = 500;
 const useRipple = () => {
-    if (document.documentElement.dataset["useripple"])
+    if (!document)
         return;
-    document.documentElement.dataset["useripple"] = "enable";
+    if (document.documentElement.dataset["ioca-ripple"])
+        return;
+    document.documentElement.dataset["ioca-ripple"] = "enable";
     document.addEventListener("mousedown", listener);
 };
 function listener(e) {
@@ -29,6 +31,8 @@ function listener(e) {
     triggerRipple(parent, e);
 }
 function triggerRipple(target, e) {
+    if (!document)
+        return;
     const [$box, $ripple] = createRipple();
     const rect = target.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height) * 2;
@@ -196,7 +200,11 @@ function ToTop(props) {
 }
 
 const Affix = (props) => {
-    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => document.body, } = props;
+    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => {
+        if (typeof document === "undefined")
+            return null;
+        return document.body;
+    }, } = props;
     const [hidden, setHidden] = useState(false);
     const hijackChildren = useMemo(() => {
         return Children.map(children, (node) => {
@@ -692,32 +700,42 @@ function Cell(props) {
             }), children: data[id] })) }));
 }
 
-const MouseMoveEvents = new Set();
-const MouseUpEvents = new Set();
-const KeydownEvents = new Set();
-const touchable = "ontouchend" in document;
-const EVENTS = {
-    MOVE: touchable ? "touchmove" : "mousemove",
-    UP: touchable ? "touchend" : "mouseup",
-    KEYDOWN: "keydown",
-};
-document.addEventListener(EVENTS.MOVE, (e) => {
-    for (const listener of MouseMoveEvents.values()) {
-        listener(e);
-    }
-}, { passive: false });
-document.addEventListener(EVENTS.UP, (e) => {
-    for (const listener of MouseUpEvents.values()) {
-        listener(e);
-    }
-});
-document.addEventListener(EVENTS.KEYDOWN, (e) => {
-    for (const listener of KeydownEvents.values()) {
-        listener(e);
-    }
-});
+const isBrowser = typeof window !== "undefined";
+let MouseMoveEvents;
+let MouseUpEvents;
+let KeydownEvents;
+let touchable;
+let EVENTS;
+if (isBrowser) {
+    MouseMoveEvents = new Set();
+    MouseUpEvents = new Set();
+    KeydownEvents = new Set();
+    touchable = "ontouchend" in document;
+    EVENTS = {
+        MOVE: touchable ? "touchmove" : "mousemove",
+        UP: touchable ? "touchend" : "mouseup",
+        KEYDOWN: "keydown",
+    };
+    document.addEventListener(EVENTS.MOVE, (e) => {
+        for (const listener of MouseMoveEvents.values()) {
+            listener(e);
+        }
+    }, { passive: false });
+    document.addEventListener(EVENTS.UP, (e) => {
+        for (const listener of MouseUpEvents.values()) {
+            listener(e);
+        }
+    });
+    document.addEventListener(EVENTS.KEYDOWN, (e) => {
+        for (const listener of KeydownEvents.values()) {
+            listener(e);
+        }
+    });
+}
 function useMouseMove(listener, options) {
     useEffect(() => {
+        if (!isBrowser || options?.disabled)
+            return;
         MouseMoveEvents.add(listener);
         return () => {
             MouseMoveEvents.delete(listener);
@@ -726,6 +744,8 @@ function useMouseMove(listener, options) {
 }
 function useMouseUp(listener, options) {
     useEffect(() => {
+        if (!isBrowser || options?.disabled)
+            return;
         MouseUpEvents.add(listener);
         return () => {
             MouseUpEvents.delete(listener);
@@ -734,7 +754,7 @@ function useMouseUp(listener, options) {
 }
 function useKeydown(listener, options) {
     useEffect(() => {
-        if (options?.disabled)
+        if (!isBrowser || options?.disabled)
             return;
         KeydownEvents.add(listener);
         return () => {
@@ -743,25 +763,39 @@ function useKeydown(listener, options) {
     }, [listener]);
 }
 function useIntersectionObserver(configs) {
-    const WM = new WeakMap();
-    const IO = new IntersectionObserver((entries) => {
-        entries.map((entry) => {
-            const callback = WM.get(entry.target);
-            callback?.(entry.target, entry.isIntersecting);
-        });
-    }, configs);
+    const WM = useRef(new WeakMap());
+    const IO = useRef(null);
+    useEffect(() => {
+        if (!isBrowser)
+            return;
+        IO.current = new IntersectionObserver((entries) => {
+            entries.map((entry) => {
+                const callback = WM.current.get(entry.target);
+                callback?.(entry.target, entry.isIntersecting);
+            });
+        }, configs);
+        return () => {
+            IO.current?.disconnect();
+        };
+    }, []);
     function observe(target, callback) {
-        if (WM.get(target))
+        if (!isBrowser || !IO.current || !target)
+            return;
+        if (WM.current.get(target))
             return;
-        WM.set(target, callback);
-        target && IO.observe(target);
+        WM.current.set(target, callback);
+        IO.current.observe(target);
     }
     function unobserve(target) {
-        target && IO.unobserve(target);
-        WM.delete(target);
+        if (!isBrowser || !IO.current || !target)
+            return;
+        IO.current.unobserve(target);
+        WM.current.delete(target);
     }
     function disconnect() {
-        IO.disconnect();
+        if (!isBrowser || !IO.current)
+            return;
+        IO.current.disconnect();
     }
     return {
         observe,
@@ -770,25 +804,39 @@ function useIntersectionObserver(configs) {
     };
 }
 function useResizeObserver() {
-    const WM = new WeakMap();
-    const IO = new ResizeObserver((entries) => {
-        entries.map((entry) => {
-            const callback = WM.get(entry.target);
-            callback?.(entry.target);
+    const WM = useRef(new WeakMap());
+    const IO = useRef(null);
+    useEffect(() => {
+        if (!isBrowser)
+            return;
+        IO.current = new ResizeObserver((entries) => {
+            entries.map((entry) => {
+                const callback = WM.current.get(entry.target);
+                callback?.(entry.target);
+            });
         });
-    });
+        return () => {
+            IO.current?.disconnect();
+        };
+    }, []);
     function observe(target, callback) {
-        if (WM.get(target))
+        if (!isBrowser || !IO.current || !target)
+            return;
+        if (WM.current.get(target))
             return;
-        target && IO.observe(target);
-        WM.set(target, callback);
+        IO.current.observe(target);
+        WM.current.set(target, callback);
     }
     function unobserve(target) {
-        target && IO.unobserve(target);
-        WM.delete(target);
+        if (!isBrowser || !IO.current || !target)
+            return;
+        IO.current.unobserve(target);
+        WM.current.delete(target);
     }
     function disconnect() {
-        IO.disconnect();
+        if (!isBrowser || !IO.current)
+            return;
+        IO.current.disconnect();
     }
     return {
         observe,
@@ -1037,7 +1085,7 @@ function Drawer(props) {
     });
     return createPortal(state.show && (jsx("div", { className: classNames("i-backdrop-drawer", className, {
             "i-active": state.active,
-        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [jsxs("header", { className: 'i-drawer-header', children: [header, jsx(Helpericon, { active: !hideCloseButton, className: 'i-drawer-close', onClick: handleHide })] }), jsx("div", { className: 'i-drawer-content', children: children }), jsx("div", { className: 'i-drawer-footer', children: footer })] }) })), document.body);
+        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [jsxs("header", { className: 'i-drawer-header', children: [header, jsx(Helpericon, { active: !hideCloseButton, className: 'i-drawer-close', onClick: handleHide })] }), jsx("div", { className: 'i-drawer-content', children: children }), jsx("div", { className: 'i-drawer-footer', children: footer })] }) })), document?.body ?? null);
 }
 
 const Item$4 = (props) => {
@@ -1067,7 +1115,11 @@ const List$1 = (props) => {
 List$1.Item = Item$4;
 
 const Content$1 = (props) => {
-    const { ref, getContainer = (trigger) => trigger?.offsetParent ?? document.body, trigger, arrow, arrowProps = {}, className, children, ...restProps } = props;
+    const { ref, getContainer = (trigger) => {
+        if (typeof document === "undefined")
+            return null;
+        return trigger?.offsetParent ?? document.body;
+    }, trigger, arrow, arrowProps = {}, className, children, ...restProps } = props;
     const arrowCSS = useMemo(() => {
         let { left, top, pos } = arrowProps;
         let transform = "";
@@ -1327,7 +1379,11 @@ const Dropdown = (props) => {
 };
 Dropdown.Item = Item$3;
 
-const exec = (a, b, c) => document.execCommand(a, b, c);
+const exec = (a, b, c) => {
+    if (typeof document === "undefined")
+        return;
+    return document.execCommand(a, b, c);
+};
 const xssOptions = {
     onIgnoreTagAttr: function (tag, name, value) {
         if (["data-", "style"].includes(name.substr(0, 5))) {
@@ -1795,6 +1851,11 @@ function Modal(props) {
     useEffect(() => {
         visible ? handleShow() : handleHide();
     }, [visible]);
+    const handleClick = () => {
+        if (typeof document === "undefined")
+            return;
+        document.documentElement.click();
+    };
     if (!show)
         return null;
     return createPortal(jsx("div", { className: classNames("i-modal-container", {
@@ -1810,9 +1871,9 @@ function Modal(props) {
                 height,
             }, onClick: (e) => {
                 e.stopPropagation();
-                document.documentElement.click();
+                handleClick();
                 onClick?.(e);
-            }, ...restProps, children: [customized && children, !customized && (jsx(DefaultContent, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document.body);
+            }, ...restProps, children: [customized && children, !customized && (jsx(DefaultContent, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document?.body ?? null);
 }
 
 const HookModal = (props) => {
@@ -2035,6 +2096,8 @@ const Video = (props) => {
         state.playing = !e.target.paused;
     };
     const fsChangeListener = () => {
+        if (typeof document === "undefined")
+            return;
         const tar = videoRef.current?.parentElement;
         if (!tar)
             return;
@@ -2136,6 +2199,8 @@ const Video = (props) => {
         getVideo: () => videoRef.current,
     }));
     useEffect(() => {
+        if (typeof document === "undefined")
+            return;
         const v = videoRef.current;
         if (!v)
             return;

package/package.json

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