@etsoo/react 1.7.7 → 1.7.9

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
+     */
+    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) | 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

@@ -84,4 +84,62 @@ export var ReactUtils;
         }
     }
     ReactUtils.triggerChange = triggerChange;
+    /**
+     * Update refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to update refs' value
+     */
+    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);
+            }
+            else {
+                // Straightforward set string value to property "value"
+                item.value = value !== null && value !== void 0 ? 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 {
+                data[k] = item.value;
+            }
+        }
+    }
+    ReactUtils.updateRefValues = updateRefValues;
 })(ReactUtils || (ReactUtils = {}));

package/lib/components/GridColumn.d.ts

@@ -185,7 +185,7 @@ export type GridColumn<T> = {
     /**
      * Render props
      */
-    renderProps?: GridColumnRenderProps;
+    renderProps?: GridColumnRenderProps | ((data: T | undefined) => GridColumnRenderProps);
     /**
      * Header cell renderer
      */

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.7",
+    "version": "1.7.9",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,28 +50,28 @@
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@etsoo/appscript": "^1.4.35",
+        "@etsoo/appscript": "^1.4.53",
         "@etsoo/notificationbase": "^1.1.28",
-        "@etsoo/shared": "^1.2.10",
+        "@etsoo/shared": "^1.2.12",
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
         "@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.10",
-        "@babel/core": "^7.22.11",
-        "@babel/plugin-transform-runtime": "^7.22.10",
-        "@babel/preset-env": "^7.22.14",
-        "@babel/runtime-corejs3": "^7.22.11",
-        "@testing-library/jest-dom": "^6.1.2",
+        "@babel/cli": "^7.22.15",
+        "@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 } from '@etsoo/shared';
 import React from 'react';
 
 /**
@@ -98,4 +99,82 @@ export namespace ReactUtils {
             input.dispatchEvent(inputEvent);
         }
     }
+
+    /**
+     * Update refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to update refs' value
+     */
+    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) | 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);
+            } else {
+                // Straightforward set string value to property "value"
+                (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 {
+                data[k] = (item as any).value;
+            }
+        }
+    }
 }

package/src/components/GridColumn.ts

@@ -253,7 +253,9 @@ export type GridColumn<T> = {
     /**
      * Render props
      */
-    renderProps?: GridColumnRenderProps;
+    renderProps?:
+        | GridColumnRenderProps
+        | ((data: T | undefined) => GridColumnRenderProps);
 
     /**
      * Header cell renderer

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;
+}