@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
54 lines (53 loc) • 1.93 kB
JavaScript
"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { InputBase } from "../InputBase/InputBase.mjs";
import { Textarea } from "../Textarea/Textarea.mjs";
import { validateJson } from "./validate-json/validate-json.mjs";
import { useState } from "react";
import { useUncontrolled } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/JsonInput/JsonInput.tsx
const defaultProps = {
serialize: JSON.stringify,
deserialize: JSON.parse,
size: "sm",
indentSpaces: 2
};
const JsonInput = factory((props) => {
const { value, defaultValue, onChange, formatOnBlur, validationError, serialize, deserialize, onFocus, onBlur, readOnly, error, indentSpaces, ...others } = useProps("JsonInput", defaultProps, props);
const [_value, setValue] = useUncontrolled({
value,
defaultValue,
finalValue: "",
onChange
});
const [valid, setValid] = useState(validateJson(_value, deserialize));
const handleFocus = (event) => {
onFocus?.(event);
setValid(true);
};
const handleBlur = (event) => {
onBlur?.(event);
const isValid = validateJson(event.currentTarget.value, deserialize);
formatOnBlur && !readOnly && isValid && event.currentTarget.value.trim() !== "" && setValue(serialize(deserialize(event.currentTarget.value), null, indentSpaces));
setValid(isValid);
};
return /* @__PURE__ */ jsx(Textarea, {
value: _value,
onChange: (event) => setValue(event.currentTarget.value),
onFocus: handleFocus,
onBlur: handleBlur,
readOnly,
...others,
autoComplete: "off",
__staticSelector: "JsonInput",
error: valid ? error : validationError || true,
"data-monospace": true
});
});
JsonInput.classes = InputBase.classes;
JsonInput.displayName = "@mantine/core/JsonInput";
//#endregion
export { JsonInput };
//# sourceMappingURL=JsonInput.mjs.map