@laser-ui/components 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/laser-ui/laser-ui/compare/v1.3.0...v1.4.0) (2024-10-10)
+
+### Features
+
+- **components:** tabs support `lazyLoading` ([f23b605](https://github.com/laser-ui/laser-ui/commit/f23b605cf8d935c8221b962cd352808d05ce2b75))
+
 # [1.3.0](https://github.com/laser-ui/laser-ui/compare/v1.2.0...v1.3.0) (2024-09-27)
 
 **Note:** Version bump only for package @laser-ui/components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "4d23c9e48d8e44d78673367640d213d6f5f585ca"
+  "gitHead": "e2186ab2e70beb344c2e51a9d0425f0663164056"
 }

package/tabs/Tabs.js

@@ -6,15 +6,15 @@ import { checkScrollEnd, findNested } from '@laser-ui/utils';
 import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
-import { isUndefined, nth } from 'lodash';
-import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { isNull, isUndefined, nth } from 'lodash';
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES } from './vars';
 import { Dropdown } from '../dropdown';
 import { useComponentProps, useControlled, useNamespace, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
 function TabsFC(props, ref) {
-    const _a = useComponentProps('Tabs', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "onActiveChange", "onAddClick", "onClose"]);
+    const _a = useComponentProps('Tabs', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive: _defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, lazyLoading = true, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "lazyLoading", "onActiveChange", "onAddClick", "onClose"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tabs: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tabs }, styleOverrides);
     const { t } = useTranslation();
@@ -31,18 +31,35 @@ function TabsFC(props, ref) {
     const [scrollEnd, setScrollEnd] = useState(false);
     const iconSize = size === 'small' ? 16 : size === 'large' ? 20 : 18;
     const isHorizontal = placement === 'top' || placement === 'bottom';
-    const [active, changeActive] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : (() => {
+    const defaultActive = useMemo(() => {
+        if (!isUndefined(_defaultActive)) {
+            return _defaultActive;
+        }
         for (const tab of list) {
             if (!tab.disabled) {
                 return tab.id;
             }
         }
         return null;
-    }), activeProp, (id) => {
+    }, []);
+    const [active, changeActive] = useControlled(defaultActive, activeProp, (id) => {
+        panelLoaded.current.add(id);
         if (onActiveChange) {
             onActiveChange(id, findNested(list, (item) => item.id === id));
         }
     });
+    const panelLoaded = useRef(new Set(isNull(defaultActive) ? [] : [defaultActive]));
+    const newPanelLoaded = new Set();
+    const panels = list.map((item) => {
+        const { id: itemId, panel: itemPanel } = item;
+        const hidden = itemId !== active;
+        const loaded = panelLoaded.current.has(itemId);
+        if (loaded) {
+            newPanelLoaded.add(itemId);
+        }
+        return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: hidden, role: "tabpanel", "aria-labelledby": getTabId(itemId) }), lazyLoading && hidden && !loaded ? null : itemPanel));
+    });
+    panelLoaded.current = newPanelLoaded;
     const refreshTabs = () => {
         const tablistWrapperEl = tablistWrapperRef.current;
         if (tablistWrapperEl) {
@@ -240,9 +257,6 @@ function TabsFC(props, ref) {
                                         'tabs__button.is-end': scrollEnd,
                                     }), { "aria-label": t('More'), children: _jsx(Icon, { size: iconSize, children: _jsx(MoreHorizOutlined, {}) }) })) })), addible && (_jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--add'), { role: "button", "aria-label": t('Add'), onClick: () => {
                                         onAddClick === null || onAddClick === void 0 ? void 0 : onAddClick();
-                                    }, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: indicatorRef }))] })) })), list.map((item) => {
-                const { id: itemId, panel: itemPanel } = item;
-                return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: itemId !== active, role: "tabpanel", "aria-labelledby": getTabId(itemId) }), itemPanel));
-            })] })));
+                                    }, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: indicatorRef }))] })) })), panels] })));
 }
 export const Tabs = forwardRef(TabsFC);

package/tabs/types.d.ts

@@ -22,6 +22,7 @@ export interface TabsProps<ID extends React.Key, T extends TabsItem<ID>> extends
     center?: boolean;
     size?: Size;
     addible?: boolean;
+    lazyLoading?: boolean;
     onActiveChange?: (id: ID, origin: T) => void;
     onAddClick?: () => void;
     onClose?: (id: ID, origin: T) => void;