@ioca/react 1.5.6 → 1.5.7

package/lib/index.js

@@ -4971,14 +4971,104 @@ const Swiper = ((props) => {
 });
 Swiper.Item = Item$1;
 
+const TabsContents = (props) => {
+    const { tabs, activeKey, cachedTabKeySet, getContent } = props;
+    return (jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
+            const key = tab.key ?? `${i}`;
+            const content = getContent(key);
+            const isActive = activeKey === key;
+            const show = isActive || cachedTabKeySet.has(key);
+            return (show && (jsx("div", { className: classNames("i-tab-content", {
+                    "i-tab-active": isActive,
+                }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
+        }) }));
+};
+var TabsContents$1 = memo(TabsContents);
+
+const emptyBarStyle = {
+    height: 0,
+    width: 0,
+};
+const defaultRenderMore = () => (jsx(Button, { flat: true, square: true, size: "small", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) }));
+const isSameTabs = (prev, next) => prev.length === next.length &&
+    prev.every((tab, index) => {
+        const target = next[index];
+        return (tab.key === target.key &&
+            tab.title === target.title &&
+            tab.keepDOM === target.keepDOM &&
+            tab.closable === target.closable &&
+            tab.intersecting === target.intersecting);
+    });
+const getParsedTabs = (items, children) => {
+    const contents = new Map();
+    if (!items) {
+        const tabs = Children.map(children, (node, i) => {
+            const { key, props: nodeProps } = node;
+            const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
+            const tabKey = String(key ?? i);
+            contents.set(tabKey, tabChildren ?? content);
+            return {
+                key: tabKey,
+                title,
+                keepDOM,
+                closable,
+            };
+        }) ?? [];
+        return {
+            tabs,
+            contents,
+            keys: new Set(tabs.map((tab) => String(tab.key))),
+        };
+    }
+    const tabs = items.map((item, i) => {
+        if (["string", "number"].includes(typeof item)) {
+            const key = String(item);
+            return { key, title: item };
+        }
+        const key = String(item.key ?? i);
+        contents.set(key, item.content);
+        const { content, ...rest } = item;
+        return {
+            ...rest,
+            key,
+        };
+    });
+    return {
+        tabs,
+        contents,
+        keys: new Set(tabs.map((tab) => String(tab.key))),
+    };
+};
+
 const Item = (props) => {
     return jsx(Fragment, {});
 };
 
+const TabsNavs = (props) => {
+    const { tabs, moreTabs, activeKey, vertical, overflow, hideMore, navsJustify = "start", bar, barClass, barStyle, navsRef, renderMore, setNavRef, onOpen, onClose, onMoreTabClick, onKeyAction, } = props;
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: navsRef, className: classNames("i-tab-navs", `justify-${navsJustify}`), role: "tablist", "aria-orientation": vertical ? "vertical" : "horizontal", children: [tabs.map((tab, i) => {
+                        const { title, key = `${i}`, closable } = tab;
+                        const isActive = activeKey === key;
+                        return (jsxs("a", { ref: (node) => setNavRef(i, node), className: classNames("i-tab-nav", {
+                                "i-tab-active": isActive,
+                            }), role: "tab", tabIndex: isActive ? 0 : -1, "aria-selected": isActive, onClick: () => onOpen(key), onKeyDown: (e) => onKeyAction(e, () => onOpen(key)), children: [title, closable && (jsx(Helpericon, { as: "i", active: true, className: "i-tab-nav-close", role: "button", tabIndex: 0, "aria-label": "\u5173\u95ED\u6807\u7B7E\u9875", onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onClose(key);
+                                    }, onKeyDown: (e) => onKeyAction(e, () => onClose(key)) }))] }, key));
+                    }), bar && (jsx("span", { className: classNames("i-tab-navs-bar", barClass), style: barStyle }))] }), !hideMore && overflow && moreTabs.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: "end", touchable: true, hideDelay: 500, content: jsx("div", { className: "i-tabs-morelist pd-4", children: moreTabs.map((tab, i) => {
+                        const { key = `${i}`, title } = tab;
+                        const isActive = activeKey === key;
+                        return (jsx("a", { className: classNames("i-tab-nav", {
+                                "i-tab-active": isActive,
+                            }), role: "button", tabIndex: 0, onClick: () => onMoreTabClick(key), onKeyDown: (e) => onKeyAction(e, () => onMoreTabClick(key)), children: title }, key));
+                    }) }), children: renderMore(moreTabs) }))] }));
+};
+var TabsNavs$1 = memo(TabsNavs);
+
 const Tabs = ((props) => {
-    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => (jsx(Button, { flat: true, square: true, size: "small", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
+    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", navsClass, bar = true, hideMore, barClass, renderMore = defaultRenderMore, onTabChange, ...rest } = props;
     const navRefs = useRef([]);
-    const barRef = useRef(null);
     const navsRef = useRef(null);
     const contentsRef = useRef(new Map());
     const [activeKey, setActiveKey] = useState(active);
@@ -4995,42 +5085,36 @@ const Tabs = ((props) => {
     activeKeyRef.current = activeKey;
     const prevActiveKeyRef = useRef(prevActiveKey);
     prevActiveKeyRef.current = prevActiveKey;
+    const sourceKeysRef = useRef(new Set());
+    const hiddenSourceKeysRef = useRef(new Set());
+    const parsedTabs = useMemo(() => getParsedTabs(items, children), [children, items]);
     useEffect(() => {
-        contentsRef.current.clear();
-        if (!items) {
-            if (!children) {
-                setTabs([]);
-                return;
+        const prevContents = new Map(contentsRef.current);
+        const nextContents = new Map(parsedTabs.contents);
+        const sourceTabs = parsedTabs.tabs;
+        const sourceKeys = parsedTabs.keys;
+        hiddenSourceKeysRef.current.forEach((key) => {
+            if (!sourceKeys.has(key)) {
+                hiddenSourceKeysRef.current.delete(key);
             }
-            setTabs(Children.map(children, (node, i) => {
-                const { key, props: nodeProps } = node;
-                const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
-                const tabKey = String(key ?? i);
-                contentsRef.current.set(tabKey, tabChildren ?? content);
-                return {
-                    key: tabKey,
-                    title,
-                    keepDOM,
-                    closable,
-                };
-            }) ?? []);
-            return;
-        }
-        setTabs(items.map((item, i) => {
-            if (["string", "number"].includes(typeof item)) {
-                const key = String(item);
-                return { key, title: item };
-            }
-            const key = String(item.key ?? i);
-            contentsRef.current.set(key, item.content);
-            const { content, ...rest } = item;
-            return {
-                ...rest,
-                key,
-            };
-        }));
-    }, [children, items]);
-    const add = (tab) => {
+        });
+        const dynamicTabs = tabsRef.current.filter((tab) => {
+            const key = String(tab.key);
+            return !sourceKeysRef.current.has(key) && !sourceKeys.has(key);
+        });
+        dynamicTabs.forEach((tab) => {
+            const key = String(tab.key);
+            nextContents.set(key, prevContents.get(key));
+        });
+        sourceKeysRef.current = sourceKeys;
+        contentsRef.current = nextContents;
+        const nextTabs = [
+            ...sourceTabs.filter((tab) => !hiddenSourceKeysRef.current.has(String(tab.key))),
+            ...dynamicTabs,
+        ];
+        setTabs((currentTabs) => isSameTabs(currentTabs, nextTabs) ? currentTabs : nextTabs);
+    }, [parsedTabs]);
+    const add = (tab, position) => {
         const currentTabs = tabsRef.current;
         const tkey = String(tab.key ?? currentTabs.length);
         const i = currentTabs.findIndex((t) => t.key === tkey);
@@ -5040,7 +5124,14 @@ const Tabs = ((props) => {
         }
         contentsRef.current.set(tkey, tab.content);
         const { content, ...rest } = tab;
-        setTabs((ts) => [...ts, { ...rest, key: tkey }]);
+        setTabs((ts) => {
+            const nextTabs = [...ts];
+            const index = position === undefined
+                ? nextTabs.length
+                : Math.max(0, Math.min(position, nextTabs.length));
+            nextTabs.splice(index, 0, { ...rest, key: tkey });
+            return nextTabs;
+        });
         open(tkey);
     };
     const close = (key) => {
@@ -5048,7 +5139,12 @@ const Tabs = ((props) => {
         const i = currentTabs.findIndex((t) => t.key === key);
         if (i < 0)
             return;
-        contentsRef.current.delete(key);
+        if (sourceKeysRef.current.has(key)) {
+            hiddenSourceKeysRef.current.add(key);
+        }
+        else {
+            contentsRef.current.delete(key);
+        }
         const nextTabs = [...currentTabs];
         nextTabs.splice(i, 1);
         setTabs(nextTabs);
@@ -5065,10 +5161,7 @@ const Tabs = ((props) => {
             onTabChange?.(undefined, activeKey);
             setPrevActiveKey(activeKey);
             setActiveKey(undefined);
-            setBarStyle({
-                height: 0,
-                width: 0,
-            });
+            setBarStyle(emptyBarStyle);
             return;
         }
         if (nextKey === activeKey) {
@@ -5076,10 +5169,7 @@ const Tabs = ((props) => {
                 return;
             onTabChange?.(undefined, key);
             setActiveKey(undefined);
-            setBarStyle({
-                height: 0,
-                width: 0,
-            });
+            setBarStyle(emptyBarStyle);
             return;
         }
         setPrevActiveKey(activeKey);
@@ -5105,6 +5195,10 @@ const Tabs = ((props) => {
         open(key);
         scrollToTab(key);
     };
+    const setNavRef = (index, node) => {
+        navRefs.current[index] = node;
+    };
+    const getContent = (key) => contentsRef.current.get(key);
     useEffect(() => {
         if (!size || hideMore || !observe || !unobserve)
             return;
@@ -5128,7 +5222,7 @@ const Tabs = ((props) => {
             return;
         }
         const observed = [];
-        navRefs.current.map((nav, i) => {
+        navRefs.current.forEach((nav, i) => {
             if (!nav)
                 return;
             observed.push(nav);
@@ -5143,7 +5237,7 @@ const Tabs = ((props) => {
             });
         });
         return () => {
-            observed.map((el) => unobserve(el));
+            observed.forEach((el) => unobserve(el));
         };
     }, [size, hideMore, tabs.length, observe, unobserve]);
     useEffect(() => {
@@ -5165,7 +5259,7 @@ const Tabs = ((props) => {
             const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
             const isLine = type === "line";
             setBarStyle({
-                height: !vertical && isLine ? ".25em" : ".8em",
+                height: !vertical && isLine ? ".25em" : offsetHeight * 0.5,
                 width: vertical && isLine ? ".25em" : offsetWidth,
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
             });
@@ -5177,7 +5271,8 @@ const Tabs = ((props) => {
     useEffect(() => {
         if (active === undefined || activeKey === active)
             return;
-        open(active);
+        setPrevActiveKey(activeKey);
+        setActiveKey(active);
     }, [active]);
     useEffect(() => {
         if (!navsRef.current || vertical)
@@ -5206,37 +5301,13 @@ const Tabs = ((props) => {
         add,
         navs: navsRef,
     }));
-    const moreTabs = !hideMore && overflow
+    const cachedTabKeySet = useMemo(() => new Set(cachedTabs), [cachedTabs]);
+    const moreTabs = useMemo(() => !hideMore && overflow
         ? tabs.filter((tab) => tab.intersecting === false)
-        : [];
-    return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", {
+        : [], [hideMore, overflow, tabs]);
+    return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", navsClass, {
                     "i-tab-navs-vertical": vertical,
-                }), children: [prepend, jsxs("div", { ref: navsRef, className: classNames("i-tab-navs", `justify-${navsJustify}`), role: "tablist", "aria-orientation": vertical ? "vertical" : "horizontal", children: [tabs.map((tab, i) => {
-                                const { title, key = `${i}`, closable } = tab;
-                                const isActive = activeKey === key;
-                                return (jsxs("a", { ref: (ref) => (navRefs.current[i] = ref), className: classNames("i-tab-nav", {
-                                        "i-tab-active": isActive,
-                                    }), role: "tab", tabIndex: isActive ? 0 : -1, "aria-selected": isActive, onClick: () => open(key), onKeyDown: (e) => handleKeyAction(e, () => open(key)), children: [title, closable && (jsx(Helpericon, { as: "i", active: true, className: "i-tab-nav-close", role: "button", tabIndex: 0, "aria-label": "\u5173\u95ED\u6807\u7B7E\u9875", onClick: (e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                close(key);
-                                            }, onKeyDown: (e) => handleKeyAction(e, () => close(key)) }))] }, key));
-                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: barStyle }))] }), !hideMore && overflow && moreTabs.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: "end", touchable: true, hideDelay: 500, content: jsx("div", { className: "i-tabs-morelist pd-4", children: moreTabs.map((tab, i) => {
-                                const { key = `${i}`, title } = tab;
-                                const isActive = activeKey === key;
-                                return (jsx("a", { className: classNames("i-tab-nav", {
-                                        "i-tab-active": isActive,
-                                    }), role: "button", tabIndex: 0, onClick: () => handleMoreTabClick(key), onKeyDown: (e) => handleKeyAction(e, () => handleMoreTabClick(key)), children: title }, key));
-                            }) }), children: renderMore(moreTabs) })), append] }), jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
-                    const key = tab.key ?? `${i}`;
-                    const content = contentsRef.current.get(key);
-                    const isActive = activeKey === key;
-                    const show = isActive ||
-                        (key !== undefined && cachedTabs.includes(key));
-                    return (show && (jsx("div", { className: classNames("i-tab-content", {
-                            "i-tab-active": isActive,
-                        }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
-                }) })] }));
+                }), children: [prepend, jsx(TabsNavs$1, { tabs: tabs, moreTabs: moreTabs, activeKey: activeKey, vertical: vertical, overflow: overflow, hideMore: hideMore, navsJustify: navsJustify, bar: bar, barClass: barClass, barStyle: barStyle, navsRef: navsRef, renderMore: renderMore, setNavRef: setNavRef, onOpen: open, onClose: close, onMoreTabClick: handleMoreTabClick, onKeyAction: handleKeyAction }), append] }), jsx(TabsContents$1, { tabs: tabs, activeKey: activeKey, cachedTabKeySet: cachedTabKeySet, getContent: getContent })] }));
 });
 Tabs.Item = Item;
 

package/lib/types/components/tabs/type.d.ts

@@ -1,9 +1,8 @@
-import { ForwardRefExoticComponent, RefObject, ReactNode, Ref, CSSProperties } from 'react';
+import { ForwardRefExoticComponent, Ref, ReactNode, RefObject, CSSProperties } from 'react';
 import Item from './item.js';
 
 interface ITabItem {
     key?: string;
-    props?: any;
     title?: ReactNode;
     content?: ReactNode;
     closable?: boolean;
@@ -12,7 +11,7 @@ interface ITabItem {
     children?: ReactNode;
 }
 interface ITabs {
-    ref?: RefObject<RefTabs | null>;
+    ref?: Ref<RefTabs>;
     active?: string;
     tabs?: ITabItem[] | string[];
     type?: "default" | "line" | "pane";
@@ -24,6 +23,7 @@ interface ITabs {
     barClass?: string;
     toggable?: boolean;
     navsJustify?: "start" | "center" | "end";
+    navsClass?: string;
     className?: string;
     children?: ReactNode;
     style?: CSSProperties;
@@ -34,7 +34,7 @@ interface RefTabs {
     open: (key: string) => void;
     close: (key: string) => void;
     add: (tab: ITabItem, position?: number) => void;
-    navs: Ref<HTMLDivElement>;
+    navs: RefObject<HTMLDivElement>;
 }
 interface CompositionTabs extends ForwardRefExoticComponent<ITabs> {
     Item: typeof Item;

package/package.json

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