@etsoo/materialui 1.6.20 → 1.6.21

package/lib/cjs/custom/CustomFieldUI.d.ts

@@ -1,4 +1,5 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import React from "react";
 /**
  * CustomFieldUI component props
  */
@@ -7,6 +8,10 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      * Custom fields
      */
     fields: D[];
+    /**
+     * Initial value
+     */
+    initialValue?: Record<string, unknown>;
     /**
      * Change event
      * @param data Current data collection
@@ -15,9 +20,9 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      */
     onChange?: (data: Record<string, unknown>, name: string, value: unknown) => void;
     /**
-     * Initial value
+     * Methods reference
      */
-    value?: Record<string, unknown>;
+    mref: React.Ref<CustomFieldRef<Record<string, unknown>>>;
 };
 /**
  * CustomFieldUI component

package/lib/cjs/custom/CustomFieldUI.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldUI = CustomFieldUI;
+const react_1 = __importDefault(require("react"));
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
 /**
  * CustomFieldUI component
@@ -9,14 +13,28 @@ const CustomFieldUtils_1 = require("./CustomFieldUtils");
  */
 function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value = {} } = props;
+    const { fields, initialValue, mref, onChange } = props;
+    // Field component collections
+    const collections = {};
+    // Value reference
+    const valueRef = react_1.default.useRef({ ...initialValue });
+    // Methods
+    react_1.default.useImperativeHandle(mref, () => ({
+        getValue: () => valueRef.current,
+        setValue: (value) => {
+            if (!!value && typeof value === "object") {
+                valueRef.current = { ...value };
+                CustomFieldUtils_1.CustomFieldUtils.updateValues(collections, valueRef.current);
+            }
+        }
+    }), []);
     // Layout
-    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, (field) => {
+    return CustomFieldUtils_1.CustomFieldUtils.create(fields, collections, (field) => {
         if (!field.name)
             return undefined;
-        return value[field.name];
+        return valueRef.current[field.name];
     }, (name, fieldValue) => {
-        value[name] = fieldValue;
-        onChange?.(value, name, fieldValue);
+        valueRef.current[name] = fieldValue;
+        onChange?.(valueRef.current, name, fieldValue);
     });
 }

package/lib/cjs/custom/CustomFieldUtils.d.ts

@@ -53,4 +53,10 @@ export declare namespace CustomFieldUtils {
      * @param globalCallback Global callback
      */
     function updateProperties(input: object, globalCallback: (input: string) => string): void;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues<D extends CustomFieldData = CustomFieldData>(collections: CustomFieldReactCollection<D>, value: Record<string, unknown>): void;
 }

package/lib/cjs/custom/CustomFieldUtils.js

@@ -150,4 +150,21 @@ var CustomFieldUtils;
         }
     }
     CustomFieldUtils.updateProperties = updateProperties;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues(collections, value) {
+        for (const key in collections) {
+            const c = collections[key];
+            if (c == null)
+                continue;
+            const [ref, data] = c;
+            if (ref.current == null || !data.name)
+                continue;
+            ref.current.setValue(value[data.name]);
+        }
+    }
+    CustomFieldUtils.updateValues = updateValues;
 })(CustomFieldUtils || (exports.CustomFieldUtils = CustomFieldUtils = {}));

package/lib/mjs/custom/CustomFieldUI.d.ts

@@ -1,4 +1,5 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import React from "react";
 /**
  * CustomFieldUI component props
  */
@@ -7,6 +8,10 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      * Custom fields
      */
     fields: D[];
+    /**
+     * Initial value
+     */
+    initialValue?: Record<string, unknown>;
     /**
      * Change event
      * @param data Current data collection
@@ -15,9 +20,9 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      */
     onChange?: (data: Record<string, unknown>, name: string, value: unknown) => void;
     /**
-     * Initial value
+     * Methods reference
      */
-    value?: Record<string, unknown>;
+    mref: React.Ref<CustomFieldRef<Record<string, unknown>>>;
 };
 /**
  * CustomFieldUI component

package/lib/mjs/custom/CustomFieldUI.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 /**
  * CustomFieldUI component
@@ -6,14 +7,28 @@ import { CustomFieldUtils } from "./CustomFieldUtils";
  */
 export function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value = {} } = props;
+    const { fields, initialValue, mref, onChange } = props;
+    // Field component collections
+    const collections = {};
+    // Value reference
+    const valueRef = React.useRef({ ...initialValue });
+    // Methods
+    React.useImperativeHandle(mref, () => ({
+        getValue: () => valueRef.current,
+        setValue: (value) => {
+            if (!!value && typeof value === "object") {
+                valueRef.current = { ...value };
+                CustomFieldUtils.updateValues(collections, valueRef.current);
+            }
+        }
+    }), []);
     // Layout
-    return CustomFieldUtils.create(fields, {}, (field) => {
+    return CustomFieldUtils.create(fields, collections, (field) => {
         if (!field.name)
             return undefined;
-        return value[field.name];
+        return valueRef.current[field.name];
     }, (name, fieldValue) => {
-        value[name] = fieldValue;
-        onChange?.(value, name, fieldValue);
+        valueRef.current[name] = fieldValue;
+        onChange?.(valueRef.current, name, fieldValue);
     });
 }

package/lib/mjs/custom/CustomFieldUtils.d.ts

@@ -53,4 +53,10 @@ export declare namespace CustomFieldUtils {
      * @param globalCallback Global callback
      */
     function updateProperties(input: object, globalCallback: (input: string) => string): void;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues<D extends CustomFieldData = CustomFieldData>(collections: CustomFieldReactCollection<D>, value: Record<string, unknown>): void;
 }

package/lib/mjs/custom/CustomFieldUtils.js

@@ -144,4 +144,21 @@ export var CustomFieldUtils;
         }
     }
     CustomFieldUtils.updateProperties = updateProperties;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues(collections, value) {
+        for (const key in collections) {
+            const c = collections[key];
+            if (c == null)
+                continue;
+            const [ref, data] = c;
+            if (ref.current == null || !data.name)
+                continue;
+            ref.current.setValue(value[data.name]);
+        }
+    }
+    CustomFieldUtils.updateValues = updateValues;
 })(CustomFieldUtils || (CustomFieldUtils = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.20",
+  "version": "1.6.21",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/custom/CustomFieldUI.tsx

@@ -1,4 +1,6 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import { CustomFieldReactCollection } from "@etsoo/react";
+import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 
 /**
@@ -10,6 +12,11 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
    */
   fields: D[];
 
+  /**
+   * Initial value
+   */
+  initialValue?: Record<string, unknown>;
+
   /**
    * Change event
    * @param data Current data collection
@@ -23,9 +30,9 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
   ) => void;
 
   /**
-   * Initial value
+   * Methods reference
    */
-  value?: Record<string, unknown>;
+  mref: React.Ref<CustomFieldRef<Record<string, unknown>>>;
 };
 
 /**
@@ -37,19 +44,40 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
   props: CustomFieldUIProps<D>
 ) {
   // Destruct
-  const { fields, onChange, value = {} } = props;
+  const { fields, initialValue, mref, onChange } = props;
+
+  // Field component collections
+  const collections: CustomFieldReactCollection<D> = {};
+
+  // Value reference
+  const valueRef = React.useRef<Record<string, unknown>>({ ...initialValue });
+
+  // Methods
+  React.useImperativeHandle(
+    mref,
+    () => ({
+      getValue: () => valueRef.current,
+      setValue: (value) => {
+        if (!!value && typeof value === "object") {
+          valueRef.current = { ...value };
+          CustomFieldUtils.updateValues(collections, valueRef.current);
+        }
+      }
+    }),
+    []
+  );
 
   // Layout
   return CustomFieldUtils.create(
     fields,
-    {},
+    collections,
     (field) => {
       if (!field.name) return undefined;
-      return value[field.name];
+      return valueRef.current[field.name];
     },
     (name, fieldValue) => {
-      value[name] = fieldValue;
-      onChange?.(value, name, fieldValue);
+      valueRef.current[name] = fieldValue;
+      onChange?.(valueRef.current, name, fieldValue);
     }
   );
 }

package/src/custom/CustomFieldUtils.tsx

@@ -199,4 +199,24 @@ export namespace CustomFieldUtils {
       }
     }
   }
+
+  /**
+   * Update values for all fields
+   * @param collections Field component collections
+   * @param value New value
+   */
+  export function updateValues<D extends CustomFieldData = CustomFieldData>(
+    collections: CustomFieldReactCollection<D>,
+    value: Record<string, unknown>
+  ) {
+    for (const key in collections) {
+      const c = collections[key];
+      if (c == null) continue;
+
+      const [ref, data] = c;
+      if (ref.current == null || !data.name) continue;
+
+      ref.current.setValue(value[data.name]);
+    }
+  }
 }