@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.62 kB
Source Map (JSON)
{"version":3,"file":"JsonInput.cjs","names":["factory","useProps","validateJson","Textarea","InputBase"],"sources":["../../../src/components/JsonInput/JsonInput.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { factory, Factory, useProps } from '../../core';\nimport { __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Textarea, TextareaProps } from '../Textarea';\nimport { validateJson } from './validate-json/validate-json';\n\nexport interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {\n /** Controlled component value */\n value?: string;\n\n /** Uncontrolled component default value */\n defaultValue?: string;\n\n /** Called when value changes */\n onChange?: (value: string) => void;\n\n /** Determines whether the value should be formatted on blur @default false */\n formatOnBlur?: boolean;\n\n /** Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. */\n validationError?: React.ReactNode;\n\n /** Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level. @default JSON.stringify */\n serialize?: typeof JSON.stringify;\n\n /** Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON. @default JSON.parse */\n deserialize?: typeof JSON.parse;\n\n /** Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. @default 2 */\n indentSpaces?: number;\n}\n\nexport type JsonInputFactory = Factory<{\n props: JsonInputProps;\n ref: HTMLTextAreaElement;\n stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {\n serialize: JSON.stringify,\n deserialize: JSON.parse,\n indentSpaces: 2,\n} satisfies Partial<JsonInputProps>;\n\nexport const JsonInput = factory<JsonInputFactory>((props) => {\n const {\n value,\n defaultValue,\n onChange,\n formatOnBlur,\n validationError,\n serialize,\n deserialize,\n onFocus,\n onBlur,\n readOnly,\n error,\n indentSpaces,\n ...others\n } = useProps(['Input', 'InputWrapper', 'JsonInput'], defaultProps, props);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const [valid, setValid] = useState(validateJson(_value, deserialize));\n\n const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setValid(true);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n const isValid = validateJson(event.currentTarget.value, deserialize);\n formatOnBlur &&\n !readOnly &&\n isValid &&\n event.currentTarget.value.trim() !== '' &&\n setValue(serialize(deserialize(event.currentTarget.value), null, indentSpaces));\n setValid(isValid);\n };\n\n return (\n <Textarea\n value={_value}\n onChange={(event) => setValue(event.currentTarget.value)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n readOnly={readOnly}\n {...others}\n autoComplete=\"off\"\n __staticSelector=\"JsonInput\"\n error={valid ? error : validationError || true}\n data-monospace\n />\n );\n});\n\nJsonInput.classes = InputBase.classes;\nJsonInput.displayName = '@mantine/core/JsonInput';\n\nexport namespace JsonInput {\n export type Props = JsonInputProps;\n export type Factory = JsonInputFactory;\n}\n"],"mappings":";;;;;;;;;;;AAwCA,MAAM,eAAe;CACnB,WAAW,KAAK;CAChB,aAAa,KAAK;CAClB,cAAc;AAChB;AAEA,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAC5D,MAAM,EACJ,OACA,cACA,UACA,cACA,iBACA,WACA,aACA,SACA,QACA,UACA,OACA,cACA,GAAG,WACDC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,cAAc,KAAK;CAExE,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqBC,sBAAAA,aAAa,QAAQ,WAAW,CAAC;CAEpE,MAAM,eAAe,UAAiD;EACpE,UAAU,KAAK;EACf,SAAS,IAAI;CACf;CAEA,MAAM,cAAc,UAAiD;EACnE,SAAS,KAAK;EACd,MAAM,UAAUA,sBAAAA,aAAa,MAAM,cAAc,OAAO,WAAW;EACnE,gBACE,CAAC,YACD,WACA,MAAM,cAAc,MAAM,KAAK,MAAM,MACrC,SAAS,UAAU,YAAY,MAAM,cAAc,KAAK,GAAG,MAAM,YAAY,CAAC;EAChF,SAAS,OAAO;CAClB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,OAAO;EACP,WAAW,UAAU,SAAS,MAAM,cAAc,KAAK;EACvD,SAAS;EACT,QAAQ;EACE;EACV,GAAI;EACJ,cAAa;EACb,kBAAiB;EACjB,OAAO,QAAQ,QAAQ,mBAAmB;EAC1C,kBAAA;CACD,CAAA;AAEL,CAAC;AAED,UAAU,UAAUC,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}