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

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { InputField } from "./InputField";
import { useRequiredAppContext } from "./app/ReactApp";
/**
 * JSON data input component
 * @param props - Component properties
 * @returns JSX Element
 */
export function JsonDataInput(props) {
    // Destruct
    const { error, helperText, onChange, rows = 3, ...rest } = props;
    // Global app
    const app = useRequiredAppContext();
    const jsonError = app.get("jsonDataError") ?? "JSON format error";
    // Error message
    const [localError, setError] = React.useState();
    // Layout
    return (_jsx(InputField, { multiline: true, rows: rows, ...rest, error: localError ? true : error, helperText: localError ?? helperText, onChange: (e) => {
            if (onChange) {
                onChange(e);
                if (e.isDefaultPrevented())
                    return;
            }
            const json = e.target.value;
            if (json) {
                try {
                    JSON.parse(json);
                }
                catch (e) {
                    setError(`${jsonError}: ${e instanceof Error ? e.message : String(e)}`);
                    return;
                }
            }
            setError(undefined);
        } }));
}