@etsoo/materialui 1.3.65 → 1.3.67

package/__tests__/CustomFields.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { act, getByText, render } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  getByText,
+  render,
+  screen
+} from "@testing-library/react";
 import { CustomFieldData } from "@etsoo/appscript";
 import { CustomFieldUtils } from "../src/custom/CustomFieldUtils";
 import { CustomFieldReactCollection } from "@etsoo/react";
@@ -91,3 +97,58 @@ it("Render FieldCheckbox", () => {
     checkboxItems[1].click();
   });
 });
+
+it("Render FieldSelect", async () => {
+  // Arrange
+  const fields: CustomFieldData[] = [
+    {
+      type: "select",
+      name: "select",
+      options: [
+        { id: "a", label: "A" },
+        { id: "b", label: "B" },
+        { id: "c", label: "C" }
+      ]
+    }
+  ];
+
+  const collections: CustomFieldReactCollection<CustomFieldData> = {};
+
+  act(() => {
+    render(
+      <div>
+        {CustomFieldUtils.create(
+          fields,
+          collections,
+          (field) => {
+            switch (field.type) {
+              case "select":
+                return "c";
+              default:
+                return undefined;
+            }
+          },
+          (name, value) => {
+            expect(name).toBe("checkbox");
+            expect(value).toStrictEqual(["a"]);
+          }
+        )}
+      </div>
+    );
+  });
+
+  const button = screen.getByRole("combobox");
+
+  act(() => {
+    // Act, click to open the dropdown list
+    jest.useFakeTimers();
+    fireEvent.mouseDown(button);
+    jest.advanceTimersByTime(100);
+  });
+
+  const input = document.querySelector<HTMLInputElement>("input");
+  expect(input?.value).toBe("c");
+
+  const listItems = document.querySelectorAll("li");
+  expect(listItems.length).toBe(3);
+});

package/__tests__/SelectEx.tsx

@@ -19,7 +19,7 @@ it("Render SelectEx", async () => {
   });
 
   // Render component
-  render(
+  const { findByText } = render(
     <SelectEx<T>
       options={options}
       name="test"
@@ -44,12 +44,11 @@ it("Render SelectEx", async () => {
     jest.advanceTimersByTime(100);
   });
 
-  /*
   // Get list item
-  const itemName2 = await findByText(baseElement, "Name 2");
+  const itemName2 = await findByText("Name 2");
   expect(itemName2.nodeName).toBe("SPAN");
 
-  const itemBlank = await findByText(baseElement, "---");
+  const itemBlank = await findByText("---");
   expect(itemBlank.nodeName).toBe("SPAN");
 
   act(() => {
@@ -57,7 +56,6 @@ it("Render SelectEx", async () => {
   });
 
   expect(itemChangeCallback).toBeCalledTimes(2);
-  */
 });
 
 it("Render multiple SelectEx", async () => {

package/lib/custom/CustomFieldUtils.js

@@ -10,6 +10,10 @@ import { FieldInput } from "./FieldInput";
 import { FieldLabel } from "./FieldLabel";
 import { FieldNumberInput } from "./FieldNumberInput";
 import { FieldTexarea } from "./FieldTexarea";
+import { FieldJson } from "./FieldJson";
+import { FieldRadio } from "./FieldRadio";
+import { FieldSelect } from "./FieldSelect";
+import { FieldSwitch } from "./FieldSwitch";
 /**
  * Custom field utilities
  */
@@ -25,8 +29,12 @@ export var CustomFieldUtils;
         date: FieldDateInput,
         divider: FieldDivider,
         input: FieldInput,
+        json: FieldJson,
         label: FieldLabel,
         number: FieldNumberInput,
+        radio: FieldRadio,
+        select: FieldSelect,
+        switch: FieldSwitch,
         textarea: FieldTexarea
     };
     /**

package/lib/custom/CustomFieldWindow.d.ts

@@ -0,0 +1,55 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import { GridProps } from "@mui/material";
+import React from "react";
+/**
+ * Custom field window props
+ * 自定义字段窗口属性
+ */
+export type CustomFieldWindowProps<D extends CustomFieldData> = {
+    /**
+     * Children creation callback
+     * 子元素创建回调
+     * @param open Open callback
+     * @param label Label
+     * @param pc Property count
+     * @returns Component
+     */
+    children: (open: (customFields: D[], jsonData?: unknown) => void, label: string | undefined, pc: number) => React.ReactNode;
+    /**
+     * Label
+     * 标签
+     */
+    label?: string;
+    /**
+     * Grid props
+     * 网格属性
+     */
+    gridProps?: GridProps;
+    /**
+     * JSON data
+     * JSON 数据
+     */
+    jsonData?: unknown;
+    /**
+     * Input name
+     * 输入框名称
+     */
+    inputName?: string;
+    /**
+     * Input ref
+     * 输入框引用
+     */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null>;
+    /**
+     * On update callback
+     * 更新回调
+     */
+    onUpdate?: (data: Record<string, unknown>) => void;
+};
+/**
+ * Custom field window
+ * 自定义字段窗口
+ * @param props Props
+ * @returns Component
+ */
+export declare function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(props: CustomFieldWindowProps<D>): import("react/jsx-runtime").JSX.Element;

package/lib/custom/CustomFieldWindow.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Utils } from "@etsoo/shared";
+import { Grid, Stack } from "@mui/material";
+import React from "react";
+import { globalApp } from "../app/ReactApp";
+import { MUGlobal } from "../MUGlobal";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+function calculateKeys(data) {
+    let count = 0;
+    for (const key in data) {
+        const item = data[key];
+        if (typeof item === "object" && item !== null && !Array.isArray(item)) {
+            count += calculateKeys(item);
+        }
+        else {
+            count++;
+        }
+    }
+    return count;
+}
+function parseJsonData(jsonData) {
+    let data = {};
+    if (jsonData) {
+        try {
+            data =
+                typeof jsonData === "object"
+                    ? jsonData
+                    : typeof jsonData === "string"
+                        ? JSON.parse(jsonData)
+                        : {};
+        }
+        catch { }
+    }
+    return [data, calculateKeys(data)];
+}
+/**
+ * Custom field window
+ * 自定义字段窗口
+ * @param props Props
+ * @returns Component
+ */
+export function CustomFieldWindow(props) {
+    // Validate app
+    const app = globalApp;
+    if (app == null) {
+        throw new Error("No globalApp");
+    }
+    const { children, label = app.get("jsonData"), gridProps, jsonData, inputName = "jsonData", inputRef, onUpdate } = props;
+    const spacing = MUGlobal.half(MUGlobal.pagePaddings);
+    const [count, setCount] = React.useState(0);
+    const [initData, propertyCount] = parseJsonData(jsonData);
+    React.useEffect(() => setCount(propertyCount), [propertyCount]);
+    return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "hidden", name: inputName, ref: inputRef }), children((customFields, jsonData) => {
+                const collections = {};
+                let data = {};
+                jsonData ?? (jsonData = inputRef?.current?.value);
+                if (jsonData) {
+                    const [d, pc] = parseJsonData(jsonData);
+                    data = d;
+                    setCount(pc);
+                }
+                else {
+                    data = initData;
+                }
+                app.notifier.confirm(label, undefined, (value) => {
+                    if (value) {
+                        if (inputRef?.current) {
+                            inputRef.current.value = JSON.stringify(data);
+                        }
+                        setCount(calculateKeys(data));
+                        if (onUpdate)
+                            onUpdate(data);
+                    }
+                }, {
+                    fullScreen: app.smDown,
+                    inputs: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                                ".MuiTypography-subtitle2": {
+                                    fontWeight: "bold"
+                                }
+                            }, ...gridProps, children: CustomFieldUtils.create(customFields, collections, (field) => {
+                                if (field.name == null)
+                                    return;
+                                return Utils.getNestedValue(data, field.name);
+                            }, (name, value) => {
+                                Utils.setNestedValue(data, name, value);
+                            }) }) }))
+                });
+            }, label, count)] }));
+}

package/lib/custom/FieldSelect.js

@@ -37,7 +37,7 @@ export const FieldSelect = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return (_jsxs(Typography, { children: ["No name for FieldSelect ", JSON.stringify(field)] }));
     }
-    return (_jsx(SelectEx, { label: field.label ?? "", helperText: field.helperText, name: name, options: field.options, fullWidth: true, onChange: (event) => {
+    return (_jsx(SelectEx, { label: field.label ?? "", helperText: field.helperText, name: name, options: field.options, fullWidth: true, value: value, onChange: (event) => {
             const value = event.target.value;
             const newValue = typeof value === "string" || typeof value === "number"
                 ? value

package/lib/index.d.ts

@@ -9,6 +9,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
+export * from "./custom/CustomFieldWindow";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/lib/index.js

@@ -9,6 +9,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
+export * from "./custom/CustomFieldWindow";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.65",
+  "version": "1.3.67",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@etsoo/appscript": "^1.4.95",
+    "@etsoo/appscript": "^1.4.96",
     "@etsoo/notificationbase": "^1.1.42",
-    "@etsoo/react": "^1.7.52",
-    "@etsoo/shared": "^1.2.40",
+    "@etsoo/react": "^1.7.54",
+    "@etsoo/shared": "^1.2.41",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
-    "@mui/x-data-grid": "^7.5.0",
+    "@mui/x-data-grid": "^7.5.1",
     "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
@@ -87,8 +87,8 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-input-mask": "^3.0.5",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.4.5"

package/src/custom/CustomFieldUtils.tsx

@@ -17,6 +17,10 @@ import { FieldInput } from "./FieldInput";
 import { FieldLabel } from "./FieldLabel";
 import { FieldNumberInput } from "./FieldNumberInput";
 import { FieldTexarea } from "./FieldTexarea";
+import { FieldJson } from "./FieldJson";
+import { FieldRadio } from "./FieldRadio";
+import { FieldSelect } from "./FieldSelect";
+import { FieldSwitch } from "./FieldSwitch";
 
 /**
  * Custom field utilities
@@ -35,8 +39,12 @@ export namespace CustomFieldUtils {
     date: FieldDateInput,
     divider: FieldDivider,
     input: FieldInput,
+    json: FieldJson,
     label: FieldLabel,
     number: FieldNumberInput,
+    radio: FieldRadio,
+    select: FieldSelect,
+    switch: FieldSwitch,
     textarea: FieldTexarea
   };
 

package/src/custom/CustomFieldWindow.tsx

@@ -0,0 +1,192 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldReactCollection } from "@etsoo/react";
+import { Utils } from "@etsoo/shared";
+import { Grid, GridProps, Stack } from "@mui/material";
+import React from "react";
+import { globalApp } from "../app/ReactApp";
+import { MUGlobal } from "../MUGlobal";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+
+function calculateKeys(data: Record<string, unknown>) {
+  let count = 0;
+  for (const key in data) {
+    const item = data[key];
+    if (typeof item === "object" && item !== null && !Array.isArray(item)) {
+      count += calculateKeys(item as Record<string, unknown>);
+    } else {
+      count++;
+    }
+  }
+  return count;
+}
+
+function parseJsonData(jsonData: unknown): [Record<string, unknown>, number] {
+  let data: Record<string, unknown> = {};
+  if (jsonData) {
+    try {
+      data =
+        typeof jsonData === "object"
+          ? jsonData
+          : typeof jsonData === "string"
+          ? JSON.parse(jsonData)
+          : {};
+    } catch {}
+  }
+  return [data, calculateKeys(data)];
+}
+
+/**
+ * Custom field window props
+ * 自定义字段窗口属性
+ */
+export type CustomFieldWindowProps<D extends CustomFieldData> = {
+  /**
+   * Children creation callback
+   * 子元素创建回调
+   * @param open Open callback
+   * @param label Label
+   * @param pc Property count
+   * @returns Component
+   */
+  children: (
+    open: (customFields: D[], jsonData?: unknown) => void,
+    label: string | undefined,
+    pc: number
+  ) => React.ReactNode;
+
+  /**
+   * Label
+   * 标签
+   */
+  label?: string;
+
+  /**
+   * Grid props
+   * 网格属性
+   */
+  gridProps?: GridProps;
+
+  /**
+   * JSON data
+   * JSON 数据
+   */
+  jsonData?: unknown;
+
+  /**
+   * Input name
+   * 输入框名称
+   */
+  inputName?: string;
+
+  /**
+   * Input ref
+   * 输入框引用
+   */
+  inputRef?: React.MutableRefObject<HTMLInputElement | null>;
+
+  /**
+   * On update callback
+   * 更新回调
+   */
+  onUpdate?: (data: Record<string, unknown>) => void;
+};
+
+/**
+ * Custom field window
+ * 自定义字段窗口
+ * @param props Props
+ * @returns Component
+ */
+export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
+  props: CustomFieldWindowProps<D>
+) {
+  // Validate app
+  const app = globalApp;
+  if (app == null) {
+    throw new Error("No globalApp");
+  }
+
+  const {
+    children,
+    label = app.get("jsonData"),
+    gridProps,
+    jsonData,
+    inputName = "jsonData",
+    inputRef,
+    onUpdate
+  } = props;
+
+  const spacing = MUGlobal.half(MUGlobal.pagePaddings);
+
+  const [count, setCount] = React.useState(0);
+
+  const [initData, propertyCount] = parseJsonData(jsonData);
+
+  React.useEffect(() => setCount(propertyCount), [propertyCount]);
+
+  return (
+    <React.Fragment>
+      <input type="hidden" name={inputName} ref={inputRef} />
+      {children(
+        (customFields, jsonData) => {
+          const collections: CustomFieldReactCollection<D> = {};
+          let data: Record<string, unknown> = {};
+          jsonData ??= inputRef?.current?.value;
+          if (jsonData) {
+            const [d, pc] = parseJsonData(jsonData);
+            data = d;
+            setCount(pc);
+          } else {
+            data = initData;
+          }
+
+          app.notifier.confirm(
+            label,
+            undefined,
+            (value) => {
+              if (value) {
+                if (inputRef?.current) {
+                  inputRef.current.value = JSON.stringify(data);
+                }
+                setCount(calculateKeys(data));
+                if (onUpdate) onUpdate(data);
+              }
+            },
+            {
+              fullScreen: app.smDown,
+              inputs: (
+                <Stack marginTop={1.5}>
+                  <Grid
+                    container
+                    justifyContent="left"
+                    spacing={spacing}
+                    sx={{
+                      ".MuiTypography-subtitle2": {
+                        fontWeight: "bold"
+                      }
+                    }}
+                    {...gridProps}
+                  >
+                    {CustomFieldUtils.create(
+                      customFields,
+                      collections,
+                      (field) => {
+                        if (field.name == null) return;
+                        return Utils.getNestedValue(data, field.name);
+                      },
+                      (name, value) => {
+                        Utils.setNestedValue(data, name, value);
+                      }
+                    )}
+                  </Grid>
+                </Stack>
+              )
+            }
+          );
+        },
+        label,
+        count
+      )}
+    </React.Fragment>
+  );
+}

package/src/custom/FieldSelect.tsx

@@ -55,6 +55,7 @@ export const FieldSelect: ICustomFieldReact<IdType> = ({
       name={name}
       options={field.options}
       fullWidth
+      value={value}
       onChange={(event) => {
         const value = event.target.value;
         const newValue =

package/src/index.ts

@@ -10,6 +10,7 @@ export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 
 export * from "./custom/CustomFieldUtils";
+export * from "./custom/CustomFieldWindow";
 
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";