@ioca/react 1.4.74 → 1.4.76

package/lib/es/components/popup/popup.js

@@ -1,151 +1,322 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useContext, useMemo, useEffect, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
-import { useReactive, useMouseUp, useCreation, useResizeObserver } from '../../js/hooks.js';
+import { debounce } from 'radash';
+import { useRef, useState, useMemo, useEffect, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+import { useResizeObserver, useMouseUp } from '../../js/hooks.js';
 import { getPosition, getPointPosition } from '../../js/utils.js';
-import ModalContext from '../modal/context.js';
 import Content from './content.js';
 
 function Popup(props) {
-    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, style, className, getContainer, children, onVisibleChange, } = props;
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange, } = props;
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
-    const statusRef = useRef("");
-    const isInModal = useContext(ModalContext);
-    const refWindow = isInModal || fixed;
-    const state = useReactive({
-        show: false,
-        style: { position: refWindow ? "fixed" : "absolute" },
-        arrowProps: {},
-    });
-    useMouseUp((e) => {
-        if (!triggerRef.current || !contentRef.current || !clickOutside)
-            return;
-        const tar = e.target;
-        const isContain = triggerRef.current.contains(tar) ||
-            contentRef.current.contains(tar);
-        if (!state.show || isContain)
-            return;
-        handleToggle(false);
+    const afterHideTimerRef = useRef(null);
+    const rafRef = useRef(null);
+    const [show, setShow] = useState(false);
+    const showRef = useRef(false);
+    showRef.current = show;
+    const latestRef = useRef({
+        disabled,
+        trigger,
+        touchable,
+        showDelay,
+        hideDelay,
+        position,
+        gap,
+        offset,
+        align,
+        fitSize,
+        onVisibleChange,
     });
+    latestRef.current = {
+        disabled,
+        trigger,
+        touchable,
+        showDelay,
+        hideDelay,
+        position,
+        gap,
+        offset,
+        align,
+        fitSize,
+        onVisibleChange,
+    };
+    const phaseRef = useRef("");
+    const lastPosRef = useRef(null);
+    const lastArrowRef = useRef(null);
+    const arrowElRef = useRef(null);
+    const pointRef = useRef(null);
     const clearTimer = () => {
         if (!timerRef.current)
             return;
         clearTimeout(timerRef.current);
         timerRef.current = null;
-        statusRef.current = "";
+        phaseRef.current = "";
+    };
+    const clearAllTimers = () => {
+        clearTimer();
+        if (afterHideTimerRef.current) {
+            clearTimeout(afterHideTimerRef.current);
+            afterHideTimerRef.current = null;
+        }
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+    };
+    const setContentVisible = (visible) => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        el.style.opacity = visible ? "1" : "0";
+        el.style.transform = visible ? "none" : "translate(0, 2px)";
+    };
+    const ensureBaseStyle = () => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        const pos = "fixed";
+        if (el.style.position !== pos)
+            el.style.position = pos;
+    };
+    const applyFitSize = () => {
+        const o = latestRef.current;
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        const vertical = ["top", "bottom"].includes(o.position);
+        const key = vertical ? "width" : "height";
+        if (!o.fitSize) {
+            contentEl.style[key] = "";
+            return;
+        }
+        const size = triggerEl[vertical ? "offsetWidth" : "offsetHeight"];
+        contentEl.style[key] =
+            typeof size === "number" ? `${size}px` : "";
+    };
+    const applyArrow = (arrowX, arrowY, arrowPos) => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const arrowEl = arrowElRef.current ??
+            contentEl.querySelector(".i-popup-arrow");
+        arrowElRef.current = arrowEl;
+        if (!arrowEl)
+            return;
+        let left = arrowX ?? 0;
+        let top = arrowY ?? 0;
+        let transform = "";
+        switch (arrowPos) {
+            case "left":
+                left += 2;
+                transform = `translate(-100%, -50%) rotate(180deg)`;
+                break;
+            case "right":
+                left -= 2;
+                transform = `translate(0, -50%)`;
+                break;
+            case "top":
+                top -= 2;
+                transform = `translate(-50%, -50%) rotate(-90deg)`;
+                break;
+            case "bottom":
+                top += 2;
+                transform = `translate(-50%, -50%) rotate(90deg)`;
+                break;
+        }
+        const prev = lastArrowRef.current;
+        if (prev &&
+            prev.left === left &&
+            prev.top === top &&
+            prev.transform === transform) {
+            return;
+        }
+        lastArrowRef.current = { left, top, transform };
+        arrowEl.style.left = `${left}px`;
+        arrowEl.style.top = `${top}px`;
+        arrowEl.style.transform = transform;
+    };
+    const applyLeftTop = (left, top) => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const prev = lastPosRef.current;
+        if (prev && prev.left === left && prev.top === top)
+            return;
+        lastPosRef.current = { left, top };
+        contentEl.style.left = `${left}px`;
+        contentEl.style.top = `${top}px`;
+    };
+    const computeRelativePosition = () => {
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        const o = latestRef.current;
+        applyFitSize();
+        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerEl, contentEl, {
+            position: o.position,
+            gap: o.gap,
+            offset: o.offset,
+            align: o.align,
+            refWindow: true,
+        });
+        applyLeftTop(left, top);
+        applyArrow(arrowX, arrowY, arrowPos);
+    };
+    const computePointPosition = () => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const point = pointRef.current;
+        if (!point)
+            return;
+        const [left, top] = getPointPosition(point, contentEl);
+        applyLeftTop(left, top);
+    };
+    const scheduleComputePosition = () => {
+        if (!showRef.current)
+            return;
+        if (rafRef.current !== null)
+            return;
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            if (!showRef.current)
+                return;
+            ensureBaseStyle();
+            if (latestRef.current.trigger === "contextmenu") {
+                computePointPosition();
+                return;
+            }
+            computeRelativePosition();
+        });
     };
     const handleShow = () => {
-        if (disabled)
+        const opts = latestRef.current;
+        if (opts.disabled)
             return;
-        if (state.show &&
-            (trigger !== "hover" || (trigger === "hover" && !touchable))) {
+        clearAllTimers();
+        if (showRef.current &&
+            (opts.trigger !== "hover" ||
+                (opts.trigger === "hover" && !opts.touchable))) {
+            ensureBaseStyle();
+            computeRelativePosition();
+            setContentVisible(true);
             return;
         }
-        statusRef.current = "showing";
-        state.show = true;
+        phaseRef.current = "showing";
+        if (!showRef.current) {
+            lastPosRef.current = null;
+            lastArrowRef.current = null;
+            arrowElRef.current = null;
+            setShow(true);
+        }
         timerRef.current = setTimeout(() => {
-            if (statusRef.current !== "showing")
+            if (phaseRef.current !== "showing")
                 return;
-            requestAnimationFrame(() => {
-                if (statusRef.current !== "showing")
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                if (phaseRef.current !== "showing")
                     return;
-                const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
-                    position,
-                    gap,
-                    offset,
-                    align,
-                    refWindow,
-                });
-                state.style = {
-                    ...state.style,
-                    opacity: 1,
-                    transform: "none",
-                    left,
-                    top,
-                };
-                state.arrowProps = {
-                    left: arrowX,
-                    top: arrowY,
-                    pos: arrowPos,
-                };
-                onVisibleChange?.(true);
+                if (!contentRef.current)
+                    return;
+                ensureBaseStyle();
+                if (opts.trigger === "contextmenu") {
+                    computePointPosition();
+                }
+                else {
+                    computeRelativePosition();
+                }
+                setContentVisible(true);
+                opts.onVisibleChange?.(true);
                 clearTimer();
-                statusRef.current = "";
+                phaseRef.current = "";
             });
-        }, showDelay);
+        }, opts.showDelay);
     };
     const handleHide = () => {
-        if (!state.show)
+        if (!showRef.current)
             return;
-        statusRef.current = "hiding";
+        clearAllTimers();
+        phaseRef.current = "hiding";
         timerRef.current = setTimeout(() => {
-            if (statusRef.current !== "hiding") {
+            if (phaseRef.current !== "hiding") {
                 clearTimer();
                 return;
             }
-            state.style = {
-                ...state.style,
-                opacity: 0,
-                transform: "translate(0, 2px)",
-            };
-            setTimeout(() => {
-                state.show = false;
-                clearTimer();
-                onVisibleChange?.(false);
-                statusRef.current = "";
+            setContentVisible(false);
+            afterHideTimerRef.current = setTimeout(() => {
+                afterHideTimerRef.current = null;
+                setShow(false);
+                clearAllTimers();
+                latestRef.current.onVisibleChange?.(false);
+                phaseRef.current = "";
             }, 160);
-        }, hideDelay);
+        }, latestRef.current.hideDelay);
     };
     const handleToggle = (action) => {
         if (action !== undefined) {
             action ? handleShow() : handleHide();
             return;
         }
-        state.show ? handleHide() : handleShow();
-    };
-    const eventMaps = useCreation(() => ({
-        click: {
-            onClick: () => handleToggle(true),
-        },
-        hover: {
-            onMouseEnter: () => handleToggle(true),
-            onMouseLeave: () => handleToggle(false),
-        },
-        focus: {
-            onFocus: () => handleToggle(true),
-            onBlur: () => handleToggle(false),
-        },
-        contextmenu: {
-            onContextMenu: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (state.show) {
-                    const [left, top] = getPointPosition(e, contentRef.current);
-                    state.style = {
-                        ...state.style,
-                        left,
-                        top,
-                    };
-                    return;
-                }
-                state.show = true;
-                timerRef.current = setTimeout(() => {
-                    const [left, top] = getPointPosition(e, contentRef.current);
-                    state.style = {
-                        ...state.style,
-                        opacity: 1,
-                        transform: "none",
-                        left,
-                        top,
+        showRef.current ? handleHide() : handleShow();
+    };
+    const hideRef = useRef(handleHide);
+    const toggleRef = useRef(handleToggle);
+    hideRef.current = handleHide;
+    toggleRef.current = handleToggle;
+    const doHide = useMemo(() => () => hideRef.current(), []);
+    const doToggle = useMemo(() => (action) => toggleRef.current(action), []);
+    const eventMaps = useMemo(() => {
+        return {
+            click: {
+                onClick: () => doToggle(true),
+            },
+            hover: {
+                onMouseEnter: () => doToggle(true),
+                onMouseLeave: () => doToggle(false),
+            },
+            focus: {
+                onFocus: () => doToggle(true),
+                onBlur: () => doToggle(false),
+            },
+            contextmenu: {
+                onContextMenu: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pointRef.current = {
+                        pageX: e.pageX,
+                        pageY: e.pageY,
                     };
-                    clearTimer();
-                    onVisibleChange?.(true);
-                }, showDelay);
+                    if (showRef.current) {
+                        ensureBaseStyle();
+                        computePointPosition();
+                        return;
+                    }
+                    clearAllTimers();
+                    phaseRef.current = "showing";
+                    lastPosRef.current = null;
+                    lastArrowRef.current = null;
+                    arrowElRef.current = null;
+                    setShow(true);
+                    timerRef.current = setTimeout(() => {
+                        if (phaseRef.current !== "showing")
+                            return;
+                        if (!contentRef.current)
+                            return;
+                        ensureBaseStyle();
+                        computePointPosition();
+                        setContentVisible(true);
+                        clearTimer();
+                        latestRef.current.onVisibleChange?.(true);
+                        phaseRef.current = "";
+                    }, latestRef.current.showDelay);
+                },
             },
-        },
-        none: {},
-    }), []);
+            none: {},
+        };
+    }, [doToggle]);
     const contentTouch = useMemo(() => {
         if (!touchable)
             return {};
@@ -158,72 +329,132 @@ function Popup(props) {
         }
         return events;
     }, [touchable, trigger]);
-    const computePosition = () => {
-        if (!state.show)
-            return;
-        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
-            position,
-            gap,
-            offset,
-            align,
-            refWindow,
-        });
-        Object.assign(state, {
-            style: { ...state.style, left, top },
-            arrowProps: { left: arrowX, top: arrowY, pos: arrowPos },
-        });
-    };
     const { observe, unobserve, disconnect } = useResizeObserver();
     useEffect(() => {
-        if (trigger === "contextmenu" || !observe)
-            return;
-        triggerRef.current && observe(triggerRef.current, computePosition);
-        if (!watchResize || !contentRef.current)
+        if (!observe)
             return;
-        observe(contentRef.current, computePosition);
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (triggerEl)
+            observe(triggerEl, scheduleComputePosition);
+        if (contentEl)
+            observe(contentEl, scheduleComputePosition);
         return () => {
-            if (!watchResize || !contentRef.current)
-                return;
-            unobserve(contentRef.current);
-            triggerRef.current && unobserve(triggerRef.current);
+            if (contentEl)
+                unobserve(contentEl);
+            if (triggerEl)
+                unobserve(triggerEl);
             disconnect();
         };
-    }, [watchResize, contentRef.current, triggerRef.current]);
+    }, [trigger, observe, unobserve, disconnect, show]);
     useLayoutEffect(() => {
-        if (!fitSize || !state.show)
+        if (!show)
             return;
-        const vertical = ["top", "bottom"].includes(position);
-        const size = triggerRef.current?.[vertical ? "offsetWidth" : "offsetHeight"];
-        state.style = { ...state.style, [vertical ? "width" : "height"]: size };
-    }, [state.show, fitSize]);
+        ensureBaseStyle();
+        if (latestRef.current.trigger === "contextmenu") {
+            computePointPosition();
+        }
+        else {
+            computeRelativePosition();
+        }
+    }, [show]);
     useLayoutEffect(() => {
-        handleToggle(visible);
+        doToggle(visible);
     }, [visible]);
     useEffect(() => {
         return () => {
-            clearTimer();
+            clearAllTimers();
         };
     }, []);
-    return (jsxs(Fragment, { children: [Children.map(children, (child) => {
-                if (!isValidElement(child))
-                    return;
-                const { className, ...restProps } = child.props;
-                Object.keys(eventMaps[trigger]).map((evt) => {
-                    if (!restProps[evt])
-                        return;
-                    const fn = eventMaps[trigger][evt];
-                    eventMaps[trigger][evt] = (e) => {
-                        fn();
-                        restProps[evt](e);
-                    };
-                });
-                return cloneElement(child, {
-                    ref: triggerRef,
-                    className,
-                    ...restProps,
-                    ...eventMaps[trigger],
+    const mouseUpHandlerRef = useRef(() => { });
+    mouseUpHandlerRef.current = (e) => {
+        if (!showRef.current)
+            return;
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        const tar = e.target;
+        if (triggerEl.contains(tar) || contentEl.contains(tar))
+            return;
+        doHide();
+    };
+    const onGlobalMouseUp = useMemo(() => (e) => mouseUpHandlerRef.current(e), []);
+    useMouseUp(onGlobalMouseUp);
+    useEffect(() => {
+        if (!show)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const onScrollOrResize = debounce({ delay: 160 }, () => {
+            scheduleComputePosition();
+        });
+        window.addEventListener("scroll", onScrollOrResize, {
+            passive: true,
+            capture: true,
+        });
+        return () => {
+            window.removeEventListener("scroll", onScrollOrResize, true);
+        };
+    }, [show]);
+    const mergeRefs = (...refs) => {
+        return (node) => {
+            for (const ref of refs) {
+                if (!ref)
+                    continue;
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else {
+                    ref.current = node;
+                }
+            }
+        };
+    };
+    return (jsxs(Fragment, { children: [(() => {
+                const events = eventMaps[trigger];
+                const items = Children.toArray(children);
+                const canAttachRef = (el) => {
+                    if (!isValidElement(el))
+                        return false;
+                    const t = el.type;
+                    if (typeof t === "string")
+                        return true;
+                    if (t?.prototype?.isReactComponent)
+                        return true;
+                    if (t?.$$typeof === Symbol.for("react.forward_ref"))
+                        return true;
+                    return false;
+                };
+                if (items.length !== 1) {
+                    return (jsx("div", { ref: triggerRef, ...events, className: 'i-popup-trigger', style: { display: "inline-block" }, children: children }));
+                }
+                const only = items[0];
+                if (!isValidElement(only) || !canAttachRef(only)) {
+                    return (jsx("div", { ref: triggerRef, ...events, className: 'i-popup-trigger', style: { display: "inline-block" }, children: only }));
+                }
+                const { className: childClassName, ...restProps } = only.props;
+                const nextProps = { ...restProps };
+                for (const evt of Object.keys(events)) {
+                    const theirs = restProps[evt];
+                    const ours = events[evt];
+                    nextProps[evt] =
+                        typeof theirs === "function"
+                            ? (e) => {
+                                ours(e);
+                                theirs(e);
+                            }
+                            : ours;
+                }
+                return cloneElement(only, {
+                    ref: mergeRefs(only.ref, triggerRef),
+                    className: childClassName,
+                    ...nextProps,
                 });
-            }), state.show && (jsx(Content, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
+            })(), show && (jsx(Content, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
+                    ...style,
+                    position: "fixed",
+                }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
 }
 
 export { Popup as default };