@etsoo/materialui/lib/mjs/JsonTextField.js

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import { useCombinedRefs } from "@etsoo/react";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import TextField from "@mui/material/TextField";
import EditIcon from "@mui/icons-material/Edit";
import React from "react";
import { MUGlobal } from "./MUGlobal";
import { useRequiredAppContext } from "./app/ReactApp";
/**
 * JSON text field component
 * @param props Props
 * @returns Component
 */
export function JsonTextField(props) {
    // Destruct
    const { fullWidth = true, inputRef, isArray = false, multiline = true, onChange, onEdit, rows = 3, slotProps, ...rest } = props;
    // Slot props
    const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
    const localRef = React.useRef(null);
    // Global app
    const app = useRequiredAppContext();
    return (_jsx(TextField, { fullWidth: fullWidth, inputRef: useCombinedRefs(inputRef, localRef), multiline: multiline, onChange: (event) => {
            const value = event.target.value.trim();
            let errorMessage = "";
            if (value.length > 0) {
                try {
                    const parsed = JSON.parse(value);
                    if (isArray && !Array.isArray(parsed)) {
                        errorMessage =
                            app.get("jsonDataArrayError") || "Value must be a JSON array";
                    }
                    if (typeof parsed !== "object") {
                        throw new Error("Parsed value is not an object");
                    }
                }
                catch (e) {
                    errorMessage =
                        (app.get("jsonDataError") || "Invalid JSON text") + " - " + e;
                }
            }
            event.target.setCustomValidity(errorMessage);
            event.target.reportValidity();
            onChange?.(event);
        }, rows: rows, slotProps: {
            input: {
                endAdornment: onEdit ? (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => onEdit?.(localRef.current), children: _jsx(EditIcon, {}) }) })) : undefined,
                ...input
            },
            inputLabel: {
                shrink: MUGlobal.inputFieldShrink,
                ...inputLabel
            },
            ...restSlotProps
        }, ...rest }));
}