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

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Utils } from "@etsoo/shared";
import React from "react";
import { MUGlobal } from "../MUGlobal";
import { CustomFieldUtils } from "./CustomFieldUtils";
import { useRequiredAppContext } from "../app/ReactApp";
import Grid from "@mui/material/Grid";
import Stack from "@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
 */
export function CustomFieldWindow(props) {
    // Global app
    const app = useRequiredAppContext();
    const { children, label = app.get("jsonData"), gridProps, jsonData, inputName = "jsonData", inputRef, onUpdate } = props;
    const spacing = MUGlobal.half(MUGlobal.pagePaddings);
    const [count, setCount] = React.useState(0);
    const [initData, propertyCount] = parseJsonData(jsonData);
    React.useEffect(() => setCount(propertyCount), [propertyCount]);
    return (_jsxs(React.Fragment, { children: [_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: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
                                ".MuiTypography-subtitle2": {
                                    fontWeight: "bold"
                                }
                            }, ...gridProps, children: CustomFieldUtils.create(customFields, collections, (field) => {
                                if (field.name == null)
                                    return;
                                return Utils.getNestedValue(data, field.name);
                            }, (name, value) => {
                                Utils.setNestedValue(data, name, value);
                            }) }) }))
                });
            }, label, count)] }));
}