@rjsf/semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
32 lines • 1.98 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
import { ariaDescribedByIds, enumOptionsIsSelected, enumOptionsValueForIndex, optionId, } from '@rjsf/utils';
import { Form, Radio } from 'semantic-ui-react';
import { getSemanticProps } from '../util.js';
/** The `RadioWidget` is a widget for rendering a radio group.
* It is typically used with a string property constrained with enum options.
*
* @param props - The `WidgetProps` for this component
*/
export default function RadioWidget(props) {
const { id, value, required, disabled, readonly, onChange, onBlur, onFocus, options, formContext, uiSchema, rawErrors = [], } = props;
const { enumOptions, enumDisabled, emptyValue } = options;
const semanticProps = getSemanticProps({
formContext,
options,
uiSchema,
});
const _onChange = (_, { value: eventValue }) => {
return onChange(enumOptionsValueForIndex(eventValue, enumOptions, emptyValue));
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = options.inline ? { inline: true } : { grouped: true };
return (_jsx(Form.Group, { ...inlineOption, children: Array.isArray(enumOptions) &&
enumOptions.map((option, index) => {
const checked = enumOptionsIsSelected(option.value, value);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return (_createElement(Form.Field, { required: required, control: Radio, id: optionId(id, index), name: id, ...semanticProps, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, label: option.label, value: String(index), error: rawErrors.length > 0, key: index, checked: checked, disabled: disabled || itemDisabled || readonly, "aria-describedby": ariaDescribedByIds(id) }));
}) }));
}
//# sourceMappingURL=RadioWidget.js.map