@aokiapp/rjsf-mantine-theme
Version:
Mantine theme, fields and widgets for react-jsonschema-form
60 lines (57 loc) • 1.56 kB
JavaScript
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