@etsoo/materialui 1.3.66 → 1.3.68

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/CustomFieldViewer.d.ts

@@ -0,0 +1,50 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import { GridProps, TypographyProps } from "@mui/material";
+/**
+ * Custom field viewer props
+ * 自定义字段查看器属性
+ */
+export type CustomFieldViewerProps = {
+    /**
+     * Custom fields
+     * 自定义字段
+     */
+    fields: CustomFieldData[];
+    /**
+     * Grid props
+     * 网格属性
+     */
+    gridProps?: GridProps;
+    /**
+     * JSON data
+     * JSON 数据
+     */
+    jsonData: unknown;
+    /**
+     * Title label props
+     * 标题标签属性
+     */
+    titleProps?: TypographyProps;
+    /**
+     * Vertical gap
+     * 垂直间距
+     */
+    verticalGap?: number;
+    /**
+     * Value label formatter
+     * 值标签格式化
+     */
+    valueLabelFormatter?: (value: any, field: CustomFieldData) => string;
+    /**
+     * Value label props
+     * 值标签属性
+     */
+    valueProps?: TypographyProps;
+};
+/**
+ * Custom field viewer
+ * 自定义字段查看器
+ * @param props Props
+ * @returns Component
+ */
+export declare function CustomFieldViewer(props: CustomFieldViewerProps): import("react/jsx-runtime").JSX.Element;

package/lib/custom/CustomFieldViewer.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, Typography } from "@mui/material";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+import { MUGlobal } from "../MUGlobal";
+import { VBox } from "../FlexBox";
+import { DataTypes, Utils } from "@etsoo/shared";
+/**
+ * Custom field viewer
+ * 自定义字段查看器
+ * @param props Props
+ * @returns Component
+ */
+export function CustomFieldViewer(props) {
+    // Destruct
+    const { fields, gridProps, jsonData, titleProps, verticalGap = 0.5, valueLabelFormatter = (value, field) => {
+        if (value == null)
+            return "";
+        if (field.options) {
+            const option = field.options.find((o) => o.id === value);
+            if (option) {
+                return DataTypes.getListItemLabel(option);
+            }
+        }
+        if (typeof value === "object") {
+            if (value instanceof Date) {
+                return value.toLocaleString();
+            }
+            else {
+                return JSON.stringify(value);
+            }
+        }
+        else {
+            return `${value}`;
+        }
+    }, valueProps } = props;
+    const spacing = MUGlobal.half(MUGlobal.pagePaddings);
+    const data = typeof jsonData === "string" ? JSON.parse(jsonData) : jsonData;
+    if (data == null || typeof data !== "object" || Array.isArray(data)) {
+        throw new Error("Invalid JSON data");
+    }
+    return (_jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
+            ".MuiTypography-subtitle2": {
+                fontWeight: "bold"
+            }
+        }, ...gridProps, children: fields.map((field, index) => {
+            // Field name
+            const name = field.name;
+            if (!name)
+                return;
+            // Field value
+            const value = Utils.getNestedValue(data, name);
+            return (_jsx(Grid, { item: true, ...field.gridItemProps, ...CustomFieldUtils.transformSpace(field.space), children: _jsxs(VBox, { gap: verticalGap, children: [_jsx(Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), _jsx(Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
+        }) }));
+}

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,8 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
+export * from "./custom/CustomFieldViewer";
+export * from "./custom/CustomFieldWindow";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/lib/index.js

@@ -9,6 +9,8 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
+export * from "./custom/CustomFieldViewer";
+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.66",
+  "version": "1.3.68",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
     "@emotion/styled": "^11.11.5",
     "@etsoo/appscript": "^1.4.96",
     "@etsoo/notificationbase": "^1.1.42",
-    "@etsoo/react": "^1.7.53",
+    "@etsoo/react": "^1.7.54",
     "@etsoo/shared": "^1.2.41",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",

package/src/custom/CustomFieldViewer.tsx

@@ -0,0 +1,138 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import { Grid, GridProps, Typography, TypographyProps } from "@mui/material";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+import { MUGlobal } from "../MUGlobal";
+import { VBox } from "../FlexBox";
+import { DataTypes, Utils } from "@etsoo/shared";
+
+/**
+ * Custom field viewer props
+ * 自定义字段查看器属性
+ */
+export type CustomFieldViewerProps = {
+  /**
+   * Custom fields
+   * 自定义字段
+   */
+  fields: CustomFieldData[];
+
+  /**
+   * Grid props
+   * 网格属性
+   */
+  gridProps?: GridProps;
+
+  /**
+   * JSON data
+   * JSON 数据
+   */
+  jsonData: unknown;
+
+  /**
+   * Title label props
+   * 标题标签属性
+   */
+  titleProps?: TypographyProps;
+
+  /**
+   * Vertical gap
+   * 垂直间距
+   */
+  verticalGap?: number;
+
+  /**
+   * Value label formatter
+   * 值标签格式化
+   */
+  valueLabelFormatter?: (value: any, field: CustomFieldData) => string;
+
+  /**
+   * Value label props
+   * 值标签属性
+   */
+  valueProps?: TypographyProps;
+};
+
+/**
+ * Custom field viewer
+ * 自定义字段查看器
+ * @param props Props
+ * @returns Component
+ */
+export function CustomFieldViewer(props: CustomFieldViewerProps) {
+  // Destruct
+  const {
+    fields,
+    gridProps,
+    jsonData,
+    titleProps,
+    verticalGap = 0.5,
+    valueLabelFormatter = (value, field) => {
+      if (value == null) return "";
+      if (field.options) {
+        const option = field.options.find((o) => o.id === value);
+        if (option) {
+          return DataTypes.getListItemLabel(option);
+        }
+      }
+
+      if (typeof value === "object") {
+        if (value instanceof Date) {
+          return value.toLocaleString();
+        } else {
+          return JSON.stringify(value);
+        }
+      } else {
+        return `${value}`;
+      }
+    },
+    valueProps
+  } = props;
+
+  const spacing = MUGlobal.half(MUGlobal.pagePaddings);
+  const data = typeof jsonData === "string" ? JSON.parse(jsonData) : jsonData;
+  if (data == null || typeof data !== "object" || Array.isArray(data)) {
+    throw new Error("Invalid JSON data");
+  }
+
+  return (
+    <Grid
+      container
+      justifyContent="left"
+      spacing={spacing}
+      sx={{
+        ".MuiTypography-subtitle2": {
+          fontWeight: "bold"
+        }
+      }}
+      {...gridProps}
+    >
+      {fields.map((field, index) => {
+        // Field name
+        const name = field.name;
+        if (!name) return;
+
+        // Field value
+        const value = Utils.getNestedValue(data, name);
+
+        return (
+          <Grid
+            item
+            key={name ?? index}
+            {...field.gridItemProps}
+            {...CustomFieldUtils.transformSpace(field.space)}
+          >
+            <VBox gap={verticalGap}>
+              <Typography fontWeight="bold" fontSize="small" {...titleProps}>
+                {field.label ?? name}
+              </Typography>
+              <Typography {...valueProps}>
+                {valueLabelFormatter(value, field)}
+              </Typography>
+            </VBox>
+          </Grid>
+        );
+      })}
+    </Grid>
+  );
+}

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,8 @@ export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 
 export * from "./custom/CustomFieldUtils";
+export * from "./custom/CustomFieldViewer";
+export * from "./custom/CustomFieldWindow";
 
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";