@etsoo/materialui 1.6.16 → 1.6.18

package/lib/cjs/ComboBoxMultiple.js

@@ -29,41 +29,29 @@ function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...restProps, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
     const [localOptions, setOptions] = react_1.default.useState(options ?? []);
     const isMounted = react_1.default.useRef(true);
-    // Local default value
-    const localValue = idValue != null
-        ? localOptions.filter((o) => o[idField] === idValue)
-        : idValues != null
-            ? localOptions.filter((o) => idValues?.includes(o[idField]))
-            : defaultValue?.concat() ?? value?.concat();
-    // State
-    // null for controlled
-    const [stateValue, setStateValue] = react_1.default.useState(null);
-    react_1.default.useEffect(() => {
-        setStateValue(localValue ?? []);
-    }, [localValue]);
-    // When options change
-    // [options] will cause infinite loop
     const propertyWay = loadData == null;
     react_1.default.useEffect(() => {
         if (propertyWay && options != null) {
             setOptions(options);
-            if (stateValue != null) {
-                if (Array.isArray(stateValue)) {
-                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
-                    setStateValue(newState);
-                }
-                else if (!options.some((option) => option[idField] === stateValue[idField])) {
-                    setStateValue(null);
-                }
-            }
         }
     }, [options, propertyWay]);
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = react_1.default.useState(null);
+    react_1.default.useEffect(() => {
+        const localValue = idValue != null
+            ? localOptions.filter((o) => o[idField] === idValue)
+            : idValues != null
+                ? localOptions.filter((o) => idValues?.includes(o[idField]))
+                : (defaultValue?.concat() ?? value?.concat());
+        setStateValue(localValue ?? []);
+    }, [localOptions, idField, idValue, idValues, defaultValue, value]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

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/custom/FieldCombobox.js

@@ -38,10 +38,11 @@ const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
-    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
+    const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, inputRequired: required || inputRequired, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);
             setIds(ids);
             onChange(name, ids);
-        }, ...field.mainSlotProps }));
+        }, ...mainRests }));
 };
 exports.FieldCombobox = FieldCombobox;

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/ComboBoxMultiple.js

@@ -23,41 +23,29 @@ export function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => (_jsxs("li", { ...restProps, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
     const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
-    // Local default value
-    const localValue = idValue != null
-        ? localOptions.filter((o) => o[idField] === idValue)
-        : idValues != null
-            ? localOptions.filter((o) => idValues?.includes(o[idField]))
-            : defaultValue?.concat() ?? value?.concat();
-    // State
-    // null for controlled
-    const [stateValue, setStateValue] = React.useState(null);
-    React.useEffect(() => {
-        setStateValue(localValue ?? []);
-    }, [localValue]);
-    // When options change
-    // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
         if (propertyWay && options != null) {
             setOptions(options);
-            if (stateValue != null) {
-                if (Array.isArray(stateValue)) {
-                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
-                    setStateValue(newState);
-                }
-                else if (!options.some((option) => option[idField] === stateValue[idField])) {
-                    setStateValue(null);
-                }
-            }
         }
     }, [options, propertyWay]);
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = React.useState(null);
+    React.useEffect(() => {
+        const localValue = idValue != null
+            ? localOptions.filter((o) => o[idField] === idValue)
+            : idValues != null
+                ? localOptions.filter((o) => idValues?.includes(o[idField]))
+                : (defaultValue?.concat() ?? value?.concat());
+        setStateValue(localValue ?? []);
+    }, [localOptions, idField, idValue, idValues, defaultValue, value]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

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/custom/FieldCombobox.js

@@ -32,9 +32,10 @@ export const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return (_jsxs(Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
-    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
+    const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, inputRequired: required || inputRequired, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);
             setIds(ids);
             onChange(name, ids);
-        }, ...field.mainSlotProps }));
+        }, ...mainRests }));
 };

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.16",
+  "version": "1.6.18",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ComboBoxMultiple.tsx

@@ -110,8 +110,8 @@ export function ComboBoxMultiple<
     openOnFocus = true,
     value,
     disableCloseOnSelect = true,
-    renderOption = (props, option, { selected }) => (
-      <li {...props}>
+    renderOption = ({ key, ...restProps }, option, { selected }) => (
+      <li key={key} {...restProps}>
         <Checkbox
           icon={icon}
           checkedIcon={checkedIcon}
@@ -137,43 +137,27 @@ export function ComboBoxMultiple<
   const [localOptions, setOptions] = React.useState(options ?? []);
   const isMounted = React.useRef(true);
 
-  // Local default value
-  const localValue: T[] | null | undefined =
-    idValue != null
-      ? localOptions.filter((o) => o[idField] === idValue)
-      : idValues != null
-      ? localOptions.filter((o) => idValues?.includes(o[idField]))
-      : defaultValue?.concat() ?? value?.concat();
+  const propertyWay = loadData == null;
+  React.useEffect(() => {
+    if (propertyWay && options != null) {
+      setOptions(options);
+    }
+  }, [options, propertyWay]);
 
   // State
   // null for controlled
   const [stateValue, setStateValue] = React.useState<T[] | null>(null);
 
   React.useEffect(() => {
-    setStateValue(localValue ?? []);
-  }, [localValue]);
+    const localValue: T[] | null | undefined =
+      idValue != null
+        ? localOptions.filter((o) => o[idField] === idValue)
+        : idValues != null
+          ? localOptions.filter((o) => idValues?.includes(o[idField]))
+          : (defaultValue?.concat() ?? value?.concat());
 
-  // When options change
-  // [options] will cause infinite loop
-  const propertyWay = loadData == null;
-  React.useEffect(() => {
-    if (propertyWay && options != null) {
-      setOptions(options);
-
-      if (stateValue != null) {
-        if (Array.isArray(stateValue)) {
-          const newState = stateValue.filter((item) =>
-            options.some((option) => option[idField] === item[idField])
-          );
-          setStateValue(newState);
-        } else if (
-          !options.some((option) => option[idField] === stateValue[idField])
-        ) {
-          setStateValue(null);
-        }
-      }
-    }
-  }, [options, propertyWay]);
+    setStateValue(localValue ?? []);
+  }, [localOptions, idField, idValue, idValues, defaultValue, value]);
 
   // Add readOnly
   const addReadOnly = (params: AutocompleteRenderInputParams) => {
@@ -258,8 +242,8 @@ export function ComboBoxMultiple<
           stateValue == null
             ? []
             : Array.isArray(stateValue)
-            ? stateValue
-            : [stateValue]
+              ? stateValue
+              : [stateValue]
         }
         disabled={disabled}
         disableCloseOnSelect={disableCloseOnSelect}

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/custom/FieldCombobox.tsx

@@ -44,6 +44,8 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
     );
   }
 
+  const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
+
   return (
     <ComboBoxMultiple
       label={field.label ?? ""}
@@ -52,12 +54,13 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
       options={field.options}
       fullWidth
       idValues={ids}
+      inputRequired={required || inputRequired}
       onChange={(_event, value) => {
         const ids = value.map((v) => v.id);
         setIds(ids);
         onChange(name, ids);
       }}
-      {...field.mainSlotProps}
+      {...mainRests}
     />
   );
 };

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";