@etsoo/materialui
Version:
TypeScript Material-UI Implementation
56 lines (55 loc) • 2.29 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CustomFieldUtils } from "./CustomFieldUtils";
import { MUGlobal } from "../MUGlobal";
import { VBox } from "../FlexBox";
import { DataTypes, Utils } from "@etsoo/shared";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
/**
* 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, { size: CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, 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));
}) }));
}