@etsoo/react 1.7.10 → 1.7.12

package/lib/app/ReactUtils.d.ts

@@ -10,12 +10,26 @@ export declare namespace ReactUtils {
      * @returns Formatted value
      */
     function formatInputValue(value: unknown): string | number | any[] | undefined;
+    /**
+     * Get nested value
+     * @param data Data
+     * @param name Field name, support property chain like 'jsonData.logSize'
+     * @returns Result
+     */
+    function getNestedValue(data: object, name: string): any;
     /**
      * Is safe click
      * @param event Mouse event
      * @returns Result
      */
     function isSafeClick(event: React.MouseEvent<HTMLElement>): boolean;
+    /**
+     * Set nested value
+     * @param data Data
+     * @param name Field name, support property chain like 'jsonData.logSize'
+     * @param value Value
+     */
+    function setNestedValue(data: object, name: string, value: unknown): void;
     /**
      * Trigger input change event
      * @param input Form input
@@ -29,12 +43,12 @@ export declare namespace ReactUtils {
      * @param data Data
      * @param callback Callback to update refs' value, return false continue to process
      */
-    function updateRefs<D, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T, value: D[keyof D & string]) => void | boolean) | keyof T): void;
+    function updateRefs<D extends object, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T, value: D[keyof D & string]) => void | boolean) | keyof T): void;
     /**
      * Update data with refs
      * @param refs Refs
      * @param data Data
      * @param callback Callback to return new value
      */
-    function updateRefValues<D, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T) => any) | keyof T): void;
+    function updateRefValues<D extends object, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T) => any) | keyof T): void;
 }

package/lib/app/ReactUtils.js

@@ -21,6 +21,36 @@ export var ReactUtils;
         return String(value);
     }
     ReactUtils.formatInputValue = formatInputValue;
+    /**
+     * Get nested value
+     * @param data Data
+     * @param name Field name, support property chain like 'jsonData.logSize'
+     * @returns Result
+     */
+    function getNestedValue(data, name) {
+        const properties = name.split('.');
+        const len = properties.length;
+        if (len === 1) {
+            return Reflect.get(data, name);
+        }
+        else {
+            let curr = data;
+            for (let i = 0; i < len; i++) {
+                const property = properties[i];
+                if (i + 1 === len) {
+                    return Reflect.get(curr, property);
+                }
+                else {
+                    let p = Reflect.get(curr, property);
+                    if (p == null) {
+                        return undefined;
+                    }
+                    curr = p;
+                }
+            }
+        }
+    }
+    ReactUtils.getNestedValue = getNestedValue;
     /**
      * Is safe click
      * @param event Mouse event
@@ -47,6 +77,36 @@ export var ReactUtils;
         return true;
     }
     ReactUtils.isSafeClick = isSafeClick;
+    /**
+     * Set nested value
+     * @param data Data
+     * @param name Field name, support property chain like 'jsonData.logSize'
+     * @param value Value
+     */
+    function setNestedValue(data, name, value) {
+        const properties = name.split('.');
+        const len = properties.length;
+        if (len === 1)
+            Reflect.set(data, name, value);
+        else {
+            let curr = data;
+            for (let i = 0; i < len; i++) {
+                const property = properties[i];
+                if (i + 1 === len) {
+                    Reflect.set(curr, property, value);
+                }
+                else {
+                    let p = Reflect.get(curr, property);
+                    if (p == null) {
+                        p = {};
+                        Reflect.set(curr, property, p);
+                    }
+                    curr = p;
+                }
+            }
+        }
+    }
+    ReactUtils.setNestedValue = setNestedValue;
     /**
      * Trigger input change event
      * @param input Form input
@@ -92,6 +152,7 @@ export var ReactUtils;
      * @param callback Callback to update refs' value, return false continue to process
      */
     function updateRefs(refs, data, callback) {
+        var _a;
         const local = callback == null
             ? undefined
             : typeof callback === 'function'
@@ -105,15 +166,16 @@ export var ReactUtils;
             const item = ref === null || ref === void 0 ? void 0 : ref.current;
             if (item == null)
                 continue;
-            const value = data[k];
-            if (local && local(item, value) !== false) {
+            if (local && local(item, data[k]) !== false) {
                 continue;
             }
-            else if (item instanceof HTMLInputElement) {
-                item.value = `${value !== null && value !== void 0 ? value : ''}`;
+            else if (item instanceof HTMLInputElement ||
+                item instanceof HTMLTextAreaElement ||
+                item instanceof HTMLSelectElement) {
+                item.value = `${(_a = getNestedValue(data, item.name || k)) !== null && _a !== void 0 ? _a : ''}`;
             }
             else {
-                item.value = value;
+                item.value = data[k];
             }
         }
     }
@@ -140,7 +202,11 @@ export var ReactUtils;
                 data[k] = local(item);
             }
             else if (item instanceof HTMLInputElement) {
-                data[k] = DomUtils.getInputValue(item);
+                setNestedValue(data, item.name || k, DomUtils.getInputValue(item));
+            }
+            else if (item instanceof HTMLTextAreaElement ||
+                item instanceof HTMLSelectElement) {
+                setNestedValue(data, item.name || k, item.value);
             }
             else {
                 data[k] = item.value;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.7.10",
+    "version": "1.7.12",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@etsoo/appscript": "^1.4.53",
+        "@etsoo/appscript": "^1.4.55",
         "@etsoo/notificationbase": "^1.1.28",
-        "@etsoo/shared": "^1.2.12",
-        "@types/react": "^18.2.21",
+        "@etsoo/shared": "^1.2.13",
+        "@types/react": "^18.2.22",
         "@types/react-dom": "^18.2.7",
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
@@ -63,13 +63,13 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.22.15",
-        "@babel/core": "^7.22.19",
+        "@babel/core": "^7.22.20",
         "@babel/plugin-transform-runtime": "^7.22.15",
-        "@babel/preset-env": "^7.22.15",
+        "@babel/preset-env": "^7.22.20",
         "@babel/runtime-corejs3": "^7.22.15",
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^14.0.0",
-        "@types/jest": "^29.5.4",
+        "@types/jest": "^29.5.5",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "ts-jest": "^29.1.1",

package/src/app/ReactUtils.ts

@@ -22,6 +22,36 @@ export namespace ReactUtils {
         return String(value);
     }
 
+    /**
+     * Get nested value
+     * @param data Data
+     * @param name Field name, support property chain like 'jsonData.logSize'
+     * @returns Result
+     */
+    export function getNestedValue(data: object, name: string) {
+        const properties = name.split('.');
+        const len = properties.length;
+        if (len === 1) {
+            return Reflect.get(data, name);
+        } else {
+            let curr = data;
+            for (let i = 0; i < len; i++) {
+                const property = properties[i];
+
+                if (i + 1 === len) {
+                    return Reflect.get(curr, property);
+                } else {
+                    let p = Reflect.get(curr, property);
+                    if (p == null) {
+                        return undefined;
+                    }
+
+                    curr = p;
+                }
+            }
+        }
+    }
+
     /**
      * Is safe click
      * @param event Mouse event
@@ -52,6 +82,36 @@ export namespace ReactUtils {
         return true;
     }
 
+    /**
+     * Set nested value
+     * @param data Data
+     * @param name Field name, support property chain like 'jsonData.logSize'
+     * @param value Value
+     */
+    export function setNestedValue(data: object, name: string, value: unknown) {
+        const properties = name.split('.');
+        const len = properties.length;
+        if (len === 1) Reflect.set(data, name, value);
+        else {
+            let curr = data;
+            for (let i = 0; i < len; i++) {
+                const property = properties[i];
+
+                if (i + 1 === len) {
+                    Reflect.set(curr, property, value);
+                } else {
+                    let p = Reflect.get(curr, property);
+                    if (p == null) {
+                        p = {};
+                        Reflect.set(curr, property, p);
+                    }
+
+                    curr = p;
+                }
+            }
+        }
+    }
+
     /**
      * Trigger input change event
      * @param input Form input
@@ -106,7 +166,7 @@ export namespace ReactUtils {
      * @param data Data
      * @param callback Callback to update refs' value, return false continue to process
      */
-    export function updateRefs<D, T = HTMLInputElement>(
+    export function updateRefs<D extends object, T = HTMLInputElement>(
         refs: Partial<
             DataTypes.DI<
                 ReadonlyArray<keyof D & string>,
@@ -132,14 +192,17 @@ export namespace ReactUtils {
             const ref = refs[k];
             const item = ref?.current;
             if (item == null) continue;
-            const value = data[k];
 
-            if (local && local(item, value) !== false) {
+            if (local && local(item, data[k]) !== false) {
                 continue;
-            } else if (item instanceof HTMLInputElement) {
-                item.value = `${value ?? ''}`;
+            } else if (
+                item instanceof HTMLInputElement ||
+                item instanceof HTMLTextAreaElement ||
+                item instanceof HTMLSelectElement
+            ) {
+                item.value = `${getNestedValue(data, item.name || k) ?? ''}`;
             } else {
-                (item as any).value = value;
+                (item as any).value = data[k];
             }
         }
     }
@@ -150,7 +213,7 @@ export namespace ReactUtils {
      * @param data Data
      * @param callback Callback to return new value
      */
-    export function updateRefValues<D, T = HTMLInputElement>(
+    export function updateRefValues<D extends object, T = HTMLInputElement>(
         refs: Partial<
             DataTypes.DI<
                 ReadonlyArray<keyof D & string>,
@@ -176,7 +239,16 @@ export namespace ReactUtils {
             if (local) {
                 data[k] = local(item);
             } else if (item instanceof HTMLInputElement) {
-                data[k] = DomUtils.getInputValue(item) as any;
+                setNestedValue(
+                    data,
+                    item.name || k,
+                    DomUtils.getInputValue(item)
+                );
+            } else if (
+                item instanceof HTMLTextAreaElement ||
+                item instanceof HTMLSelectElement
+            ) {
+                setNestedValue(data, item.name || k, item.value);
             } else {
                 data[k] = (item as any).value;
             }