@etsoo/materialui
Version:
TypeScript Material-UI Implementation
63 lines (62 loc) • 2.91 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonTextField = JsonTextField;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const TextField_1 = __importDefault(require("@mui/material/TextField"));
const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
const react_2 = __importDefault(require("react"));
const MUGlobal_1 = require("./MUGlobal");
const ReactApp_1 = require("./app/ReactApp");
/**
* JSON text field component
* @param props Props
* @returns Component
*/
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_2.default.useRef(null);
// Global app
const app = (0, ReactApp_1.useRequiredAppContext)();
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { fullWidth: fullWidth, inputRef: (0, react_1.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 ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => onEdit?.(localRef.current), children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) }) })) : undefined,
...input
},
inputLabel: {
shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
...inputLabel
},
...restSlotProps
}, ...rest }));
}