@etsoo/react 1.7.8 → 1.7.10

package/lib/app/ReactUtils.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 /**
  * React utils
@@ -22,4 +23,18 @@ export declare namespace ReactUtils {
      * @param cancelable Cancelable
      */
     function triggerChange(input: HTMLInputElement, value: string, cancelable: boolean): void;
+    /**
+     * Update refs
+     * @param refs Refs
+     * @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;
+    /**
+     * 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;
 }

package/lib/app/ReactUtils.js

@@ -1,3 +1,4 @@
+import { DomUtils } from '@etsoo/shared';
 /**
  * React utils
  */
@@ -84,4 +85,67 @@ export var ReactUtils;
         }
     }
     ReactUtils.triggerChange = triggerChange;
+    /**
+     * Update refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to update refs' value, return false continue to process
+     */
+    function updateRefs(refs, data, callback) {
+        const local = callback == null
+            ? undefined
+            : typeof callback === 'function'
+                ? callback
+                : (item, value) => {
+                    item[callback] = value;
+                };
+        let k;
+        for (k in refs) {
+            const ref = refs[k];
+            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) {
+                continue;
+            }
+            else if (item instanceof HTMLInputElement) {
+                item.value = `${value !== null && value !== void 0 ? value : ''}`;
+            }
+            else {
+                item.value = value;
+            }
+        }
+    }
+    ReactUtils.updateRefs = updateRefs;
+    /**
+     * Update data with refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to return new value
+     */
+    function updateRefValues(refs, data, callback) {
+        const local = callback == null
+            ? undefined
+            : typeof callback === 'function'
+                ? callback
+                : (item) => item[callback];
+        let k;
+        for (k in refs) {
+            const ref = refs[k];
+            const item = ref === null || ref === void 0 ? void 0 : ref.current;
+            if (item == null)
+                continue;
+            if (local) {
+                data[k] = local(item);
+            }
+            else if (item instanceof HTMLInputElement) {
+                data[k] = DomUtils.getInputValue(item);
+            }
+            else {
+                data[k] = item.value;
+            }
+        }
+    }
+    ReactUtils.updateRefValues = updateRefValues;
 })(ReactUtils || (ReactUtils = {}));

package/lib/index.d.ts

@@ -24,6 +24,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useRefs';
 export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';

package/lib/index.js

@@ -28,6 +28,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useRefs';
 export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';

package/lib/uses/useRefs.d.ts

@@ -0,0 +1,8 @@
+import { DataTypes } from '@etsoo/shared';
+import React from 'react';
+/**
+ * Create multiple refs
+ * @param fields Fields
+ * @returns Result
+ */
+export declare function useRefs<F extends ReadonlyArray<string>, T = HTMLInputElement>(fields: F): DataTypes.DI<F, React.MutableRefObject<T | undefined>>;

package/lib/uses/useRefs.js

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Create multiple refs
+ * @param fields Fields
+ * @returns Result
+ */
+export function useRefs(fields) {
+    const refs = {};
+    fields.forEach((field) => (refs[field] = React.useRef()));
+    return refs;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.7.8",
+    "version": "1.7.10",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@etsoo/appscript": "^1.4.45",
+        "@etsoo/appscript": "^1.4.53",
         "@etsoo/notificationbase": "^1.1.28",
         "@etsoo/shared": "^1.2.12",
         "@types/react": "^18.2.21",
@@ -58,20 +58,20 @@
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.15.0",
+        "react-router-dom": "^6.16.0",
         "react-window": "^1.8.9"
     },
     "devDependencies": {
         "@babel/cli": "^7.22.15",
-        "@babel/core": "^7.22.17",
+        "@babel/core": "^7.22.19",
         "@babel/plugin-transform-runtime": "^7.22.15",
         "@babel/preset-env": "^7.22.15",
         "@babel/runtime-corejs3": "^7.22.15",
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^14.0.0",
         "@types/jest": "^29.5.4",
-        "jest": "^29.6.4",
-        "jest-environment-jsdom": "^29.6.4",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "ts-jest": "^29.1.1",
         "typescript": "^5.2.2"
     }

package/src/app/ReactUtils.ts

@@ -1,3 +1,4 @@
+import { DataTypes, DomUtils } from '@etsoo/shared';
 import React from 'react';
 
 /**
@@ -98,4 +99,87 @@ export namespace ReactUtils {
             input.dispatchEvent(inputEvent);
         }
     }
+
+    /**
+     * Update refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to update refs' value, return false continue to process
+     */
+    export 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
+    ) {
+        const local: typeof callback =
+            callback == null
+                ? undefined
+                : typeof callback === 'function'
+                ? callback
+                : (item, value) => {
+                      item[callback] = value as any;
+                  };
+
+        let k: keyof typeof refs;
+        for (k in refs) {
+            const ref = refs[k];
+            const item = ref?.current;
+            if (item == null) continue;
+            const value = data[k];
+
+            if (local && local(item, value) !== false) {
+                continue;
+            } else if (item instanceof HTMLInputElement) {
+                item.value = `${value ?? ''}`;
+            } else {
+                (item as any).value = value;
+            }
+        }
+    }
+
+    /**
+     * Update data with refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to return new value
+     */
+    export 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
+    ) {
+        const local: typeof callback =
+            callback == null
+                ? undefined
+                : typeof callback === 'function'
+                ? callback
+                : (item) => item[callback];
+
+        let k: keyof typeof refs;
+        for (k in refs) {
+            const ref = refs[k];
+            const item = ref?.current;
+            if (item == null) continue;
+
+            if (local) {
+                data[k] = local(item);
+            } else if (item instanceof HTMLInputElement) {
+                data[k] = DomUtils.getInputValue(item) as any;
+            } else {
+                data[k] = (item as any).value;
+            }
+        }
+    }
 }

package/src/index.ts

@@ -37,6 +37,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useRefs';
 export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';

package/src/uses/useRefs.ts

@@ -0,0 +1,15 @@
+import { DataTypes } from '@etsoo/shared';
+import React from 'react';
+
+/**
+ * Create multiple refs
+ * @param fields Fields
+ * @returns Result
+ */
+export function useRefs<F extends ReadonlyArray<string>, T = HTMLInputElement>(
+    fields: F
+): DataTypes.DI<F, React.MutableRefObject<T | undefined>> {
+    const refs: Record<string, React.MutableRefObject<T | undefined>> = {};
+    fields.forEach((field) => (refs[field] = React.useRef<T>()));
+    return refs as any;
+}