@etsoo/materialui 1.3.67 → 1.3.69

package/lib/UserAvatarEditor.js

@@ -10,6 +10,7 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
+const defaultSize = 300;
 const defaultState = {
     scale: 1,
     rotate: 0
@@ -22,11 +23,11 @@ const defaultState = {
  */
 export function UserAvatarEditor(props) {
     // Destruct
-    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = 200, height = 200, range = [0.1, 2, 0.1] } = props;
+    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = defaultSize, height = defaultSize, range = [0.1, 2, 0.1] } = props;
     // Container width
     const containerWidth = width + 2 * border + 44 + 4;
     // Calculated max width
-    const maxWidthCalculated = maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
+    const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
     // Labels
     const labels = Labels.UserAvatarEditor;
     // Ref
@@ -41,6 +42,10 @@ export function UserAvatarEditor(props) {
     const [ready, setReady] = React.useState(false);
     // Editor states
     const [editorState, setEditorState] = React.useState(defaultState);
+    // Height
+    // noHeight: height is not set and will be updated dynamically
+    const noHeight = height <= 0;
+    const [localHeight, setHeight] = React.useState(noHeight ? defaultSize : height);
     // Range
     const [min, max, step] = range;
     const marks = [
@@ -69,7 +74,10 @@ export function UserAvatarEditor(props) {
         setScale(editorState.scale + (isAdd ? step : -step));
     };
     // Handle image load
-    const handleLoad = () => {
+    const handleLoad = (imageInfo) => {
+        if (noHeight) {
+            setHeight((imageInfo.height * width) / imageInfo.width);
+        }
         setReady(true);
     };
     // Handle file upload
@@ -115,7 +123,7 @@ export function UserAvatarEditor(props) {
         };
         if (data.width > maxWidthCalculated) {
             // Target height
-            const heightCalculated = (height * maxWidthCalculated) / width;
+            const heightCalculated = (localHeight * maxWidthCalculated) / width;
             // Target
             const to = document.createElement("canvas");
             to.width = maxWidthCalculated;
@@ -136,5 +144,5 @@ export function UserAvatarEditor(props) {
     };
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
-    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ComputerIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: labels.upload }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: height }), children: _jsx(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ComputerIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: labels.upload }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

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.69",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -54,9 +54,9 @@
     "@etsoo/notificationbase": "^1.1.42",
     "@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.1",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
+    "@mui/x-data-grid": "^7.6.1",
     "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",

package/src/UserAvatarEditor.tsx

@@ -17,6 +17,9 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
+import { ImageState } from "react-avatar-editor";
+
+const defaultSize = 300;
 
 /**
  * User avatar editor to Blob helper
@@ -109,8 +112,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     maxWidth,
     onDone,
     scaledResult = false,
-    width = 200,
-    height = 200,
+    width = defaultSize,
+    height = defaultSize,
     range = [0.1, 2, 0.1]
   } = props;
 
@@ -119,7 +122,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
   // Calculated max width
   const maxWidthCalculated =
-    maxWidth == null || maxWidth < 200 ? 3 * width : maxWidth;
+    maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
 
   // Labels
   const labels = Labels.UserAvatarEditor;
@@ -142,6 +145,13 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Editor states
   const [editorState, setEditorState] = React.useState(defaultState);
 
+  // Height
+  // noHeight: height is not set and will be updated dynamically
+  const noHeight = height <= 0;
+  const [localHeight, setHeight] = React.useState(
+    noHeight ? defaultSize : height
+  );
+
   // Range
   const [min, max, step] = range;
   const marks = [
@@ -179,7 +189,10 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   };
 
   // Handle image load
-  const handleLoad = () => {
+  const handleLoad = (imageInfo: ImageState) => {
+    if (noHeight) {
+      setHeight((imageInfo.height * width) / imageInfo.width);
+    }
     setReady(true);
   };
 
@@ -238,7 +251,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
     if (data.width > maxWidthCalculated) {
       // Target height
-      const heightCalculated = (height * maxWidthCalculated) / width;
+      const heightCalculated = (localHeight * maxWidthCalculated) / width;
 
       // Target
       const to = document.createElement("canvas");
@@ -277,14 +290,14 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
       <Stack direction="row" spacing={0.5}>
         <React.Suspense
           fallback={
-            <Skeleton variant="rounded" width={width} height={height} />
+            <Skeleton variant="rounded" width={width} height={localHeight} />
           }
         >
           <AE
             ref={ref}
             border={border}
             width={width}
-            height={height}
+            height={localHeight}
             onLoadSuccess={handleLoad}
             image={previewImage ?? ""}
             scale={editorState.scale}

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