@etsoo/materialui
Version:
TypeScript Material-UI Implementation
62 lines (61 loc) • 2.78 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomFieldViewer = CustomFieldViewer;
const jsx_runtime_1 = require("react/jsx-runtime");
const CustomFieldUtils_1 = require("./CustomFieldUtils");
const MUGlobal_1 = require("../MUGlobal");
const FlexBox_1 = require("../FlexBox");
const shared_1 = require("@etsoo/shared");
const Grid_1 = __importDefault(require("@mui/material/Grid"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
/**
* Custom field viewer
* 自定义字段查看器
* @param props Props
* @returns Component
*/
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 shared_1.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_1.MUGlobal.half(MUGlobal_1.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 ((0, jsx_runtime_1.jsx)(Grid_1.default, { 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 = shared_1.Utils.getNestedValue(data, name);
return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: CustomFieldUtils_1.CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: (0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: verticalGap, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), (0, jsx_runtime_1.jsx)(Typography_1.default, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
}) }));
}