UNPKG

@aokiapp/rjsf-mantine-theme

Version:

Mantine theme, fields and widgets for react-jsonschema-form

60 lines (57 loc) 1.56 kB
import { jsx } from 'react/jsx-runtime'; import { schemaRequiresTrueValue, labelValue, ariaDescribedByIds } from '@rjsf/utils'; import { useCallback } from 'react'; import { Checkbox } from '@mantine/core'; import { createErrors } from '../utils/createErrors.mjs'; import { useFieldContext } from '../templates/FieldTemplate.mjs'; function CheckboxWidget(props) { const { id, value, disabled, readonly, label = "", hideLabel, autofocus, onChange, onBlur, onFocus, schema, rawErrors, hideError } = props; const required = schemaRequiresTrueValue(schema); const handleChange = useCallback( (event) => onChange(event.target.checked), [onChange] ); const handleBlur = useCallback( (event) => onBlur(id, event.target.checked), [onBlur, id] ); const handleFocus = useCallback( (event) => onFocus(id, event.target.checked), [onFocus, id] ); const { description } = useFieldContext(); return /* @__PURE__ */ jsx( Checkbox, { description, id, label: labelValue(label, hideLabel), required, disabled: disabled || readonly, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, error: createErrors(rawErrors, hideError), "aria-describedby": ariaDescribedByIds(id), checked: typeof value === "undefined" ? false : value, className: "armt-widget-checkbox" } ); } export { CheckboxWidget as default }; //# sourceMappingURL=CheckboxWidget.mjs.map