@laser-ui/components 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/laser-ui/laser-ui/compare/v1.4.0...v1.5.0) (2024-10-15)
+
+### Features
+
+- **components:** form support rendering dependencies ([cbd10ba](https://github.com/laser-ui/laser-ui/commit/cbd10ba42010ee4d58834e6540ff4f629c22fee7))
+
+# [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/form/FormItem.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForceUpdate } from '@laser-ui/hooks';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
 import ErrorFilled from '@material-design-icons/svg/filled/error.svg?react';
@@ -25,6 +26,7 @@ export function FormItem(props) {
     const _a = useComponentProps('FormItem', props), { children, styleOverrides, styleProvider, formControls, label, labelWidth: labelWidthProp, labelWrap: labelWrapProp, labelExtra: labelExtraProp, labelFor, required: requiredProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControls", "label", "labelWidth", "labelWrap", "labelExtra", "labelFor", "required"]);
     const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
     const { t } = useTranslation();
+    const forceUpdate = useForceUpdate();
     const formContext = useContext(FormContext);
     const formGroupContext = useContext(FormGroupContext);
     const divRef = useRef(null);
@@ -39,6 +41,7 @@ export function FormItem(props) {
             if (isNull(formControl)) {
                 throw new Error(`Cant find '${controlName}', please check if name exists!`);
             }
+            formControl._emitChange = forceUpdate;
             obj[controlName] = {
                 control: formControl,
                 invalid: false,

package/form/hooks.d.ts

@@ -2,4 +2,4 @@ import type { AbstractControl } from './model/abstract-control';
 import type { FormGroup } from './model/form-group';
 export declare function useForm<T extends {
     [K in keyof T]: AbstractControl;
-} = any>(initForm: () => FormGroup<T>): readonly [FormGroup<T>, (form?: FormGroup) => void];
+} = any>(initForm: () => FormGroup<T>, deps?: readonly (string | ((form: FormGroup<T>) => any[]))[]): readonly [FormGroup<T>, (form?: FormGroup) => void];

package/form/hooks.js

@@ -1,15 +1,56 @@
-import { useEventCallback, useForceUpdate } from '@laser-ui/hooks';
-import { useState } from 'react';
-export function useForm(initForm) {
+import { useEventCallback, useForceUpdate, useIsomorphicLayoutEffect } from '@laser-ui/hooks';
+import { isString } from 'lodash';
+import { useRef, useState } from 'react';
+export function useForm(initForm, deps) {
     const forceUpdate = useForceUpdate();
+    const emitChange = useEventCallback((control) => {
+        if (deps) {
+            let rerender = false;
+            let index = -1;
+            for (const dep of deps) {
+                index += 1;
+                if (isString(dep)) {
+                    if (Object.is(form.get(dep), control)) {
+                        rerender = true;
+                        break;
+                    }
+                }
+                else {
+                    const vals = dep(control.root);
+                    const previousVals = previousDeps.current[index];
+                    if (!vals.every((val, i) => Object.is(val, previousVals[i]))) {
+                        rerender = true;
+                        previousDeps.current[index] = vals;
+                        break;
+                    }
+                    previousDeps.current[index] = vals;
+                }
+            }
+            if (rerender) {
+                forceUpdate();
+            }
+            else {
+                control._emitChange();
+            }
+        }
+        else {
+            forceUpdate();
+        }
+    });
     const [form, setForm] = useState(() => {
         const form = initForm();
-        form._emitChange = forceUpdate;
+        form._emitChange = emitChange;
         return form;
     });
+    const previousDeps = useRef([]);
+    useIsomorphicLayoutEffect(() => {
+        if (deps) {
+            previousDeps.current = deps.map((dep) => (isString(dep) ? dep : dep(form)));
+        }
+    }, []);
     const updateForm = useEventCallback((form) => {
         if (form) {
-            form._emitChange = forceUpdate;
+            form._emitChange = emitChange;
             setForm(form);
         }
         forceUpdate();

package/form/model/abstract-control.js

@@ -329,7 +329,7 @@ export class AbstractControl {
                     // the state of the asynchronous validation (whether it is in progress or not). So, it is
                     // necessary that we have updated the `_hasOwnPendingAsyncValidator` boolean flag first.
                     this.setErrors(errors);
-                    (_b = (_a = this.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    (_b = (_a = this.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a, this);
                 }
             });
         }

package/hooks/useControlled.js

@@ -17,7 +17,7 @@ export function useControlled(initialValue, value, onChange, deepCompare, formCo
                 if (formControl) {
                     formControl.markAsDirty(true);
                     formControl.setValue(newValue);
-                    (_b = (_a = formControl.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    (_b = (_a = formControl.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a, formControl);
                 }
             }
             return newValue;

package/package.json

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

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;