@ioca/react 1.5.23 → 1.5.24

package/lib/es/components/tabs/async-content.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+const AsyncContent = (props) => {
+    const { load, loader } = props;
+    const [state, setState] = useState({ status: "loading" });
+    useEffect(() => {
+        let cancelled = false;
+        setState({ status: "loading" });
+        load()
+            .then((module) => {
+            if (!cancelled) {
+                setState({ status: "loaded", Component: module.default });
+            }
+        })
+            .catch((error) => {
+            if (!cancelled) {
+                setState({ status: "error", error });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [load]);
+    switch (state.status) {
+        case "loaded":
+            return jsx(state.Component, {});
+        case "error":
+            return null;
+        case "loading":
+        default:
+            return loader ?? null;
+    }
+};
+
+export { AsyncContent as default };

package/lib/es/components/tabs/helper.js

@@ -21,11 +21,17 @@ const isSameTabs = (prev, next) => prev.length === next.length &&
 const getParsedTabs = (items, children) => {
     const contents = new Map();
     if (!items) {
+        const lazyLoaders = new Map();
         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);
+            if (typeof content === "function") {
+                lazyLoaders.set(tabKey, { load: content });
+            }
+            else {
+                contents.set(tabKey, tabChildren ?? content);
+            }
             return {
                 key: tabKey,
                 title,
@@ -36,16 +42,23 @@ const getParsedTabs = (items, children) => {
         return {
             tabs,
             contents,
+            lazyLoaders,
             keys: new Set(tabs.map((tab) => String(tab.key))),
         };
     }
+    const lazyLoaders = new Map();
     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);
+        if (typeof item.content === "function") {
+            lazyLoaders.set(key, { load: item.content });
+        }
+        else {
+            contents.set(key, item.content);
+        }
         const { content, ...rest } = item;
         return {
             ...rest,
@@ -55,6 +68,7 @@ const getParsedTabs = (items, children) => {
     return {
         tabs,
         contents,
+        lazyLoaders,
         keys: new Set(tabs.map((tab) => String(tab.key))),
     };
 };

package/lib/es/components/tabs/tabs.js

@@ -1,14 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, useEffect, useImperativeHandle } from 'react';
 import { useIntersectionObserver, useSize } from '../../js/hooks.js';
+import AsyncContent from './async-content.js';
 import TabsContents from './contents.js';
 import { defaultRenderMore, getParsedTabs, isSameTabs, emptyBarStyle } from './helper.js';
 import Item from './item.js';
 import TabsNavs from './navs.js';
 
 const Tabs = ((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 { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, loader, navsJustify = "start", navsClass, bar = true, hideMore, barClass, renderMore = defaultRenderMore, onTabChange, ...rest } = props;
     const navRefs = useRef([]);
     const navsRef = useRef(null);
     const contentsRef = useRef(new Map());
@@ -34,6 +35,9 @@ const Tabs = ((props) => {
         const nextContents = new Map(parsedTabs.contents);
         const sourceTabs = parsedTabs.tabs;
         const sourceKeys = parsedTabs.keys;
+        parsedTabs.lazyLoaders.forEach((lazyLoader, key) => {
+            nextContents.set(key, jsx(AsyncContent, { load: lazyLoader.load, loader: loader }));
+        });
         hiddenSourceKeysRef.current.forEach((key) => {
             if (!sourceKeys.has(key)) {
                 hiddenSourceKeysRef.current.delete(key);
@@ -60,7 +64,12 @@ const Tabs = ((props) => {
             open(currentTabs[i].key ?? `${i}`);
             return;
         }
-        contentsRef.current.set(tkey, tab.content);
+        if (typeof tab.content === "function") {
+            contentsRef.current.set(tkey, jsx(AsyncContent, { load: tab.content, loader: loader }));
+        }
+        else {
+            contentsRef.current.set(tkey, tab.content);
+        }
         const { content, ...rest } = tab;
         setTabs((ts) => {
             const nextTabs = [...ts];

package/lib/index.js

@@ -5942,6 +5942,38 @@ const Swiper = ((props) => {
 });
 Swiper.Item = Item$1;
 
+const AsyncContent = (props) => {
+    const { load, loader } = props;
+    const [state, setState] = useState({ status: "loading" });
+    useEffect(() => {
+        let cancelled = false;
+        setState({ status: "loading" });
+        load()
+            .then((module) => {
+            if (!cancelled) {
+                setState({ status: "loaded", Component: module.default });
+            }
+        })
+            .catch((error) => {
+            if (!cancelled) {
+                setState({ status: "error", error });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [load]);
+    switch (state.status) {
+        case "loaded":
+            return jsx(state.Component, {});
+        case "error":
+            return null;
+        case "loading":
+        default:
+            return loader ?? null;
+    }
+};
+
 const TabsContents = (props) => {
     const { tabs, activeKey, cachedTabKeySet, getContent } = props;
     return (jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
@@ -5973,11 +6005,17 @@ const isSameTabs = (prev, next) => prev.length === next.length &&
 const getParsedTabs = (items, children) => {
     const contents = new Map();
     if (!items) {
+        const lazyLoaders = new Map();
         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);
+            if (typeof content === "function") {
+                lazyLoaders.set(tabKey, { load: content });
+            }
+            else {
+                contents.set(tabKey, tabChildren ?? content);
+            }
             return {
                 key: tabKey,
                 title,
@@ -5988,16 +6026,23 @@ const getParsedTabs = (items, children) => {
         return {
             tabs,
             contents,
+            lazyLoaders,
             keys: new Set(tabs.map((tab) => String(tab.key))),
         };
     }
+    const lazyLoaders = new Map();
     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);
+        if (typeof item.content === "function") {
+            lazyLoaders.set(key, { load: item.content });
+        }
+        else {
+            contents.set(key, item.content);
+        }
         const { content, ...rest } = item;
         return {
             ...rest,
@@ -6007,6 +6052,7 @@ const getParsedTabs = (items, children) => {
     return {
         tabs,
         contents,
+        lazyLoaders,
         keys: new Set(tabs.map((tab) => String(tab.key))),
     };
 };
@@ -6038,7 +6084,7 @@ const TabsNavs = (props) => {
 var TabsNavs$1 = memo(TabsNavs);
 
 const Tabs = ((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 { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, loader, navsJustify = "start", navsClass, bar = true, hideMore, barClass, renderMore = defaultRenderMore, onTabChange, ...rest } = props;
     const navRefs = useRef([]);
     const navsRef = useRef(null);
     const contentsRef = useRef(new Map());
@@ -6064,6 +6110,9 @@ const Tabs = ((props) => {
         const nextContents = new Map(parsedTabs.contents);
         const sourceTabs = parsedTabs.tabs;
         const sourceKeys = parsedTabs.keys;
+        parsedTabs.lazyLoaders.forEach((lazyLoader, key) => {
+            nextContents.set(key, jsx(AsyncContent, { load: lazyLoader.load, loader: loader }));
+        });
         hiddenSourceKeysRef.current.forEach((key) => {
             if (!sourceKeys.has(key)) {
                 hiddenSourceKeysRef.current.delete(key);
@@ -6090,7 +6139,12 @@ const Tabs = ((props) => {
             open(currentTabs[i].key ?? `${i}`);
             return;
         }
-        contentsRef.current.set(tkey, tab.content);
+        if (typeof tab.content === "function") {
+            contentsRef.current.set(tkey, jsx(AsyncContent, { load: tab.content, loader: loader }));
+        }
+        else {
+            contentsRef.current.set(tkey, tab.content);
+        }
         const { content, ...rest } = tab;
         setTabs((ts) => {
             const nextTabs = [...ts];

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

@@ -1,10 +1,12 @@
-import { ForwardRefExoticComponent, Ref, ReactNode, RefObject, CSSProperties } from 'react';
+import { ForwardRefExoticComponent, Ref, ReactNode, ComponentType, RefObject, CSSProperties } from 'react';
 import Item from './item.js';
 
 interface ITabItem {
     key?: string;
     title?: ReactNode;
-    content?: ReactNode;
+    content?: ReactNode | (() => Promise<{
+        default: ComponentType<any>;
+    }>);
     closable?: boolean;
     keepDOM?: boolean;
     intersecting?: boolean;
@@ -28,6 +30,7 @@ interface ITabs {
     children?: ReactNode;
     style?: CSSProperties;
     renderMore?: (moreTabs: ITabItem[]) => ReactNode;
+    loader?: ReactNode;
     onTabChange?: (to?: string, from?: string) => void;
 }
 interface RefTabs {

package/package.json

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