UNPKG

@rjsf/antd

Version:

Ant Design theme, fields and widgets for react-jsonschema-form

24 lines 1.57 kB
import { jsx as _jsx } from "react/jsx-runtime"; import { ariaDescribedByIds, labelValue } from '@rjsf/utils'; import { Checkbox } from 'antd'; /** 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) { const { autofocus, disabled, registry, id, htmlName, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props; const { formContext } = registry; const { readonlyAsDisabled = true } = formContext; const handleChange = ({ target }) => onChange(target.checked); const handleBlur = ({ target }) => onBlur(id, target && target.checked); const handleFocus = ({ target }) => onFocus(id, target && target.checked); // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided, // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors const extraProps = { onBlur: !readonly ? handleBlur : undefined, onFocus: !readonly ? handleFocus : undefined, }; return (_jsx(Checkbox, { autoFocus: autofocus, checked: typeof value === 'undefined' ? false : value, disabled: disabled || (readonlyAsDisabled && readonly), id: id, name: htmlName || id, onChange: !readonly ? handleChange : undefined, ...extraProps, "aria-describedby": ariaDescribedByIds(id), children: labelValue(label, hideLabel, '') })); } //# sourceMappingURL=index.js.map