@rjsf/semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
42 lines • 2.66 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Form } from 'semantic-ui-react';
import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue, getTemplate, optionId, titleId, } from '@rjsf/utils';
import { getSemanticProps } from '../util.js';
/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
* It is typically used to represent an array of enums.
*
* @param props - The `WidgetProps` for this component
*/
export default function CheckboxesWidget(props) {
const { id, disabled, options, value, autofocus, readonly, label, hideLabel, onChange, onBlur, onFocus, formContext, schema, uiSchema, rawErrors = [], registry, } = props;
const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
const { enumOptions, enumDisabled, inline } = options;
const checkboxesValues = Array.isArray(value) ? value : [value];
const semanticProps = getSemanticProps({
options,
formContext,
uiSchema,
defaultSchemaProps: {
inverted: 'false',
},
});
const _onChange = (index) => ({ target: { checked } }) => {
// eslint-disable-next-line no-shadow
if (checked) {
onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
}
else {
onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
}
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = inline ? { inline: true } : { grouped: true };
return (_jsxs(_Fragment, { children: [!hideLabel && !!label && (_jsx(TitleFieldTemplate, { id: titleId(id), title: label, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(Form.Group, { id: id, name: id, ...inlineOption, children: Array.isArray(enumOptions) &&
enumOptions.map((option, index) => {
const checked = enumOptionsIsSelected(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return (_jsx(Form.Checkbox, { id: optionId(id, index), name: id, label: option.label, ...semanticProps, checked: checked, error: rawErrors.length > 0, disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: _onChange(index), onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }, index));
}) })] }));
}
//# sourceMappingURL=CheckboxesWidget.js.map