UNPKG

@rjsf/mui

Version:

Material UI 5 theme, fields and widgets for react-jsonschema-form

24 lines 2 kB
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import Checkbox from '@mui/material/Checkbox/index.js'; import FormControlLabel from '@mui/material/FormControlLabel/index.js'; import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequiresTrueValue, } from '@rjsf/utils'; /** The `CheckBoxWidget` is a widget for rendering boolean properties. * It is typically used to represent a boolean. * * @param props - The `WidgetProps` for this component */ export default function CheckboxWidget(props) { var _a; const { schema, id, value, disabled, readonly, label = '', hideLabel, autofocus, onChange, onBlur, onFocus, registry, options, uiSchema, } = props; const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options); // Because an unchecked checkbox will cause html5 validation to fail, only add // the "required" attribute if the field value must be "true", due to the // "const" or "enum" keywords const required = schemaRequiresTrueValue(schema); const _onChange = (_, checked) => onChange(checked); const _onBlur = ({ target }) => onBlur(id, target && target.value); const _onFocus = ({ target }) => onFocus(id, target && target.value); const description = (_a = options.description) !== null && _a !== void 0 ? _a : schema.description; return (_jsxs(_Fragment, { children: [!hideLabel && !!description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: id, name: id, checked: typeof value === 'undefined' ? false : Boolean(value), required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }), label: labelValue(label, hideLabel, false) })] })); } //# sourceMappingURL=CheckboxWidget.js.map