@etsoo/materialui 1.3.67 → 1.3.68

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/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/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";

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/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.67",
+  "version": "1.3.68",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

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/index.ts

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