@laser-ui/components 1.4.0 → 1.5.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.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

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.4.0",
+  "version": "1.5.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "e2186ab2e70beb344c2e51a9d0425f0663164056"
+  "gitHead": "316da1ed34c626ca27819993998c0a745455d0b4"
 }