@etsoo/materialui 1.6.15 → 1.6.17

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

@@ -0,0 +1,27 @@
+import { CustomFieldData } from "@etsoo/appscript";
+/**
+ * CustomFieldUI component props
+ */
+export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
+    /**
+     * Custom fields
+     */
+    fields: D[];
+    /**
+     * Change event
+     * @param data Current data collection
+     * @param name Changed field name
+     * @param value Changed field value
+     */
+    onChange?: (data: Record<string, unknown>, name: string, value: unknown) => void;
+    /**
+     * Initial value
+     */
+    value?: Record<string, unknown>;
+};
+/**
+ * CustomFieldUI component
+ * @param props Props
+ * @returns component
+ */
+export declare function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(props: CustomFieldUIProps<D>): import("react/jsx-runtime").JSX.Element[];

package/lib/cjs/custom/CustomFieldUI.js

@@ -0,0 +1,29 @@
+"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
+ * @param props Props
+ * @returns component
+ */
+function CustomFieldUI(props) {
+    // Destruct
+    const { fields, onChange, value } = props;
+    const data = react_1.default.useRef({});
+    const getValue = react_1.default.useCallback((field) => {
+        if (!field.name)
+            return undefined;
+        return value?.[field.name];
+    }, [value]);
+    const doChange = react_1.default.useCallback((name, value) => {
+        data.current[name] = value;
+        onChange?.(data.current, name, value);
+    }, []);
+    // Layout
+    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, getValue, doChange);
+}

package/lib/cjs/custom/CustomFieldUtils.js

@@ -70,7 +70,7 @@ var CustomFieldUtils;
                 fieldCalback(field);
             const creator = CustomFieldUtils.customFieldCreators[field.type];
             if (creator == null) {
-                return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
+                return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, field.name ?? index));
             }
             const Creator = creator;
             const mref = react_1.default.createRef();

package/lib/cjs/index.d.ts

@@ -7,6 +7,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomAttributeArea";
+export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";

package/lib/cjs/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./app/Labels"), exports);
 __exportStar(require("./app/ReactApp"), exports);
 __exportStar(require("./app/ServiceApp"), exports);
 __exportStar(require("./custom/CustomAttributeArea"), exports);
+__exportStar(require("./custom/CustomFieldUI"), exports);
 __exportStar(require("./custom/CustomFieldUtils"), exports);
 __exportStar(require("./custom/CustomFieldViewer"), exports);
 __exportStar(require("./custom/CustomFieldWindow"), exports);

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

@@ -0,0 +1,27 @@
+import { CustomFieldData } from "@etsoo/appscript";
+/**
+ * CustomFieldUI component props
+ */
+export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
+    /**
+     * Custom fields
+     */
+    fields: D[];
+    /**
+     * Change event
+     * @param data Current data collection
+     * @param name Changed field name
+     * @param value Changed field value
+     */
+    onChange?: (data: Record<string, unknown>, name: string, value: unknown) => void;
+    /**
+     * Initial value
+     */
+    value?: Record<string, unknown>;
+};
+/**
+ * CustomFieldUI component
+ * @param props Props
+ * @returns component
+ */
+export declare function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(props: CustomFieldUIProps<D>): import("react/jsx-runtime").JSX.Element[];

package/lib/mjs/custom/CustomFieldUI.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+/**
+ * CustomFieldUI component
+ * @param props Props
+ * @returns component
+ */
+export function CustomFieldUI(props) {
+    // Destruct
+    const { fields, onChange, value } = props;
+    const data = React.useRef({});
+    const getValue = React.useCallback((field) => {
+        if (!field.name)
+            return undefined;
+        return value?.[field.name];
+    }, [value]);
+    const doChange = React.useCallback((name, value) => {
+        data.current[name] = value;
+        onChange?.(data.current, name, value);
+    }, []);
+    // Layout
+    return CustomFieldUtils.create(fields, {}, getValue, doChange);
+}

package/lib/mjs/custom/CustomFieldUtils.js

@@ -64,7 +64,7 @@ export var CustomFieldUtils;
                 fieldCalback(field);
             const creator = CustomFieldUtils.customFieldCreators[field.type];
             if (creator == null) {
-                return (_jsx(Grid, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
+                return (_jsx(Grid, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, field.name ?? index));
             }
             const Creator = creator;
             const mref = React.createRef();

package/lib/mjs/index.d.ts

@@ -7,6 +7,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomAttributeArea";
+export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";

package/lib/mjs/index.js

@@ -7,6 +7,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomAttributeArea";
+export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.15",
+  "version": "1.6.17",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.56",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.76",
+    "@etsoo/react": "^1.8.78",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.8",
     "@mui/material": "^7.3.8",

package/src/custom/CustomFieldUI.tsx

@@ -0,0 +1,60 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import React from "react";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+
+/**
+ * CustomFieldUI component props
+ */
+export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
+  /**
+   * Custom fields
+   */
+  fields: D[];
+
+  /**
+   * Change event
+   * @param data Current data collection
+   * @param name Changed field name
+   * @param value Changed field value
+   */
+  onChange?: (
+    data: Record<string, unknown>,
+    name: string,
+    value: unknown
+  ) => void;
+
+  /**
+   * Initial value
+   */
+  value?: Record<string, unknown>;
+};
+
+/**
+ * CustomFieldUI component
+ * @param props Props
+ * @returns component
+ */
+export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
+  props: CustomFieldUIProps<D>
+) {
+  // Destruct
+  const { fields, onChange, value } = props;
+
+  const data = React.useRef<Record<string, unknown>>({});
+
+  const getValue = React.useCallback(
+    (field: CustomFieldData) => {
+      if (!field.name) return undefined;
+      return value?.[field.name];
+    },
+    [value]
+  );
+
+  const doChange = React.useCallback((name: string, value: unknown) => {
+    data.current[name] = value;
+    onChange?.(data.current, name, value);
+  }, []);
+
+  // Layout
+  return CustomFieldUtils.create(fields, {}, getValue, doChange);
+}

package/src/custom/CustomFieldUtils.tsx

@@ -84,7 +84,7 @@ export namespace CustomFieldUtils {
       if (creator == null) {
         return (
           <Grid
-            key={index}
+            key={field.name ?? index}
             size={transformSpace(field.space)}
             {...field.gridItemProps}
           >
@@ -153,14 +153,14 @@ export namespace CustomFieldUtils {
       space === "full"
         ? { xs: 12 }
         : space === "quater"
-        ? { sm: 12, md: 6, lg: 3 }
-        : space === "five"
-        ? { sm: 12, md: 5 }
-        : space === "seven"
-        ? { sm: 12, md: 7 }
-        : space === "half1"
-        ? { xs: 12, sm: 6 }
-        : { sm: 12, md: 6 };
+          ? { sm: 12, md: 6, lg: 3 }
+          : space === "five"
+            ? { sm: 12, md: 5 }
+            : space === "seven"
+              ? { sm: 12, md: 7 }
+              : space === "half1"
+                ? { xs: 12, sm: 6 }
+                : { sm: 12, md: 6 };
     return size;
   }
 

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 
 export * from "./custom/CustomAttributeArea";
+export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";