@etsoo/materialui/lib/cjs/custom/CustomFieldWindow.js

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomFieldWindow = CustomFieldWindow;
const jsx_runtime_1 = require("react/jsx-runtime");
const shared_1 = require("@etsoo/shared");
const react_1 = __importDefault(require("react"));
const MUGlobal_1 = require("../MUGlobal");
const CustomFieldUtils_1 = require("./CustomFieldUtils");
const ReactApp_1 = require("../app/ReactApp");
const Grid_1 = __importDefault(require("@mui/material/Grid"));
const Stack_1 = __importDefault(require("@mui/material/Stack"));
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
 */
function CustomFieldWindow(props) {
    // Global app
    const app = (0, ReactApp_1.useRequiredAppContext)();
    const { children, label = app.get("jsonData"), gridProps, jsonData, inputName = "jsonData", inputRef, onUpdate } = props;
    const spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings);
    const [count, setCount] = react_1.default.useState(0);
    const [initData, propertyCount] = parseJsonData(jsonData);
    react_1.default.useEffect(() => setCount(propertyCount), [propertyCount]);
    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, ref: inputRef }), children((customFields, jsonData) => {
                const collections = {};
                let data = {};
                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: ((0, jsx_runtime_1.jsx)(Stack_1.default, { marginTop: 1.5, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: spacing, sx: {
                                ".MuiTypography-subtitle2": {
                                    fontWeight: "bold"
                                }
                            }, ...gridProps, children: CustomFieldUtils_1.CustomFieldUtils.create(customFields, collections, (field) => {
                                if (field.name == null)
                                    return;
                                return shared_1.Utils.getNestedValue(data, field.name);
                            }, (name, value) => {
                                shared_1.Utils.setNestedValue(data, name, value);
                            }) }) }))
                });
            }, label, count)] }));
}