@ioca/react 1.3.66 → 1.3.69

package/lib/es/js/useRipple/index.js

@@ -1,8 +1,10 @@
 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) {
@@ -13,6 +15,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;

package/lib/es/js/useRipple/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../packages/js/useRipple/index.ts"],"sourcesContent":["import \"./ripple.css\";\n\nconst TIMEOUT = 500;\n\nconst useRipple = () => {\n\tif (document.documentElement.dataset[\"useripple\"]) return;\n\tdocument.documentElement.dataset[\"useripple\"] = \"enable\";\n\n\tdocument.addEventListener(\"mousedown\", listener);\n};\n\nfunction listener(e: MouseEvent) {\n\tconst target = e.target as HTMLElement;\n\tconst parent = target.closest(\"[data-ripple]\") as HTMLElement;\n\n\tif (!target || !parent) return;\n\n\ttriggerRipple(parent, e);\n}\n\nfunction triggerRipple(target: HTMLElement, e: MouseEvent) {\n\tconst [$box, $ripple] = createRipple();\n\tconst rect = target.getBoundingClientRect();\n\tconst size = Math.max(rect.width, rect.height) * 2;\n\n\t$ripple.style.cssText = `\n        left: ${e.pageX - rect.left}px;\n        top: ${e.pageY - rect.top}px;\n        width: ${size}px;\n        height: ${size}px;\n        transition: all ${TIMEOUT / 1000}s;\n    `;\n\ttarget.insertAdjacentElement(\"afterbegin\", $box);\n\ttarget.offsetHeight;\n\t$ripple.classList.add(\"i-ripple-active\");\n\n\tsetTimeout(() => {\n\t\t$box.remove();\n\t}, TIMEOUT);\n}\n\nfunction createRipple() {\n\tconst $box = document.createElement(\"SPAN\");\n\tconst $ripple = document.createElement(\"SPAN\");\n\n\t$box.className = \"i-ripple-container\";\n\t$ripple.className = \"i-ripple\";\n\n\t$box.append($ripple);\n\n\treturn [$box, $ripple];\n}\n\nexport default useRipple;\n"],"names":[],"mappings":"AAEA,MAAM,OAAO,GAAG,GAAG;AAEb,MAAA,SAAS,GAAG,MAAK;AACtB,IAAA,IAAI,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,CAAC;QAAE;IACnD,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,QAAQ;AAExD,IAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC;AACjD;AAEA,SAAS,QAAQ,CAAC,CAAa,EAAA;AAC9B,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB;IACtC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAgB;AAE7D,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;QAAE;AAExB,IAAA,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;AACzB;AAEA,SAAS,aAAa,CAAC,MAAmB,EAAE,CAAa,EAAA;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,EAAE;AACtC,IAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;AAC3C,IAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;AAElD,IAAA,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG;AACT,cAAA,EAAA,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAA;AACpB,aAAA,EAAA,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAA;iBAChB,IAAI,CAAA;kBACH,IAAI,CAAA;AACI,wBAAA,EAAA,OAAO,GAAG,IAAI,CAAA;KACnC;AACJ,IAAA,MAAM,CAAC,qBAAqB,CAAC,YAAY,EAAE,IAAI,CAAC;IAChD,MAAM,CAAC,YAAY;AACnB,IAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;IAExC,UAAU,CAAC,MAAK;QACf,IAAI,CAAC,MAAM,EAAE;KACb,EAAE,OAAO,CAAC;AACZ;AAEA,SAAS,YAAY,GAAA;IACpB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;IAC3C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAE9C,IAAA,IAAI,CAAC,SAAS,GAAG,oBAAoB;AACrC,IAAA,OAAO,CAAC,SAAS,GAAG,UAAU;AAE9B,IAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAEpB,IAAA,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AACvB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../packages/js/useRipple/index.ts"],"sourcesContent":["import \"./ripple.css\";\n\nconst TIMEOUT = 500;\n\nconst useRipple = () => {\n\tif (!document) return;\n\tif (document.documentElement.dataset[\"ioca-ripple\"]) return;\n\tdocument.documentElement.dataset[\"ioca-ripple\"] = \"enable\";\n\n\tdocument.addEventListener(\"mousedown\", listener);\n};\n\nfunction listener(e: MouseEvent) {\n\tconst target = e.target as HTMLElement;\n\tconst parent = target.closest(\"[data-ripple]\") as HTMLElement;\n\n\tif (!target || !parent) return;\n\n\ttriggerRipple(parent, e);\n}\n\nfunction triggerRipple(target: HTMLElement, e: MouseEvent) {\n\tif (!document) return;\n\tconst [$box, $ripple] = createRipple();\n\tconst rect = target.getBoundingClientRect();\n\tconst size = Math.max(rect.width, rect.height) * 2;\n\n\t$ripple.style.cssText = `\n        left: ${e.pageX - rect.left}px;\n        top: ${e.pageY - rect.top}px;\n        width: ${size}px;\n        height: ${size}px;\n        transition: all ${TIMEOUT / 1000}s;\n    `;\n\ttarget.insertAdjacentElement(\"afterbegin\", $box);\n\ttarget.offsetHeight;\n\t$ripple.classList.add(\"i-ripple-active\");\n\n\tsetTimeout(() => {\n\t\t$box.remove();\n\t}, TIMEOUT);\n}\n\nfunction createRipple() {\n\tconst $box = document.createElement(\"SPAN\");\n\tconst $ripple = document.createElement(\"SPAN\");\n\n\t$box.className = \"i-ripple-container\";\n\t$ripple.className = \"i-ripple\";\n\n\t$box.append($ripple);\n\n\treturn [$box, $ripple];\n}\n\nexport default useRipple;\n"],"names":[],"mappings":"AAEA,MAAM,OAAO,GAAG,GAAG;AAEb,MAAA,SAAS,GAAG,MAAK;AACtB,IAAA,IAAI,CAAC,QAAQ;QAAE;AACf,IAAA,IAAI,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,aAAa,CAAC;QAAE;IACrD,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,QAAQ;AAE1D,IAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC;AACjD;AAEA,SAAS,QAAQ,CAAC,CAAa,EAAA;AAC9B,IAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB;IACtC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAgB;AAE7D,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;QAAE;AAExB,IAAA,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;AACzB;AAEA,SAAS,aAAa,CAAC,MAAmB,EAAE,CAAa,EAAA;AACxD,IAAA,IAAI,CAAC,QAAQ;QAAE;IACf,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,EAAE;AACtC,IAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;AAC3C,IAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;AAElD,IAAA,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG;AACT,cAAA,EAAA,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAA;AACpB,aAAA,EAAA,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAA;iBAChB,IAAI,CAAA;kBACH,IAAI,CAAA;AACI,wBAAA,EAAA,OAAO,GAAG,IAAI,CAAA;KACnC;AACJ,IAAA,MAAM,CAAC,qBAAqB,CAAC,YAAY,EAAE,IAAI,CAAC;IAChD,MAAM,CAAC,YAAY;AACnB,IAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;IAExC,UAAU,CAAC,MAAK;QACf,IAAI,CAAC,MAAM,EAAE;KACb,EAAE,OAAO,CAAC;AACZ;AAEA,SAAS,YAAY,GAAA;IACpB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;IAC3C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAE9C,IAAA,IAAI,CAAC,SAAS,GAAG,oBAAoB;AACrC,IAAA,OAAO,CAAC,SAAS,GAAG,UAAU;AAE9B,IAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAEpB,IAAA,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AACvB;;;;"}

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;
-        WM.set(target, callback);
-        target && IO.observe(target);
+        if (WM.current.get(target))
+            return;
+        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;
@@ -2640,7 +2705,6 @@ const ItemDefaultConfig = {
     closable: true,
     active: false,
 };
-const container = createContainer();
 const handler = {
     oneInstance: null,
     callout(item) { },
@@ -2656,7 +2720,6 @@ const heights = {
     center: [],
     right: [],
 };
-createRoot(container).render(jsx(Messages, {}));
 const MessageItem = function ({ ref, active, content, top, className, style, onClick, }) {
     return (jsx("div", { ref: ref, className: classNames("i-message", className, {
             "i-message-active": active,
@@ -2748,6 +2811,8 @@ function message(config) {
     };
 }
 function createContainer() {
+    if (typeof document === "undefined")
+        return null;
     const container = document.createElement("div");
     container.dataset.id = "messages";
     document.body.append(container);
@@ -2789,6 +2854,16 @@ message.one = (config) => {
         handler.oneInstance = instance;
     }
 };
+// 初始化消息容器
+let container = null;
+let root = null;
+if (typeof window !== "undefined") {
+    container = createContainer();
+    if (container) {
+        root = createRoot(container);
+        root.render(jsx(Messages, {}));
+    }
+}
 
 function useModal() {
     const ref = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.3.66",
+	"version": "1.3.69",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -52,7 +52,7 @@
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0",
-		"xss": ">=1.0.0"
+		"ahooks": ">=3.8.0"
 	},
 	"main": "lib/cjs/index.js",
 	"module": "lib/es/index.js",