@rjsf/semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
57 lines • 3.27 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue, } from '@rjsf/utils';
import map from 'lodash/map';
import { Form } from 'semantic-ui-react';
import { getSemanticProps } from '../util.js';
/**
* Returns and creates an array format required for semantic drop down
* @param {array} enumOptions - array of items for the dropdown
* @param {array} enumDisabled - array of enum option values to disable
* @param {boolean} showPlaceholderOption - whether to show a placeholder option
* @param {string} placeholder - placeholder option label
* @returns {*}
*/
function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder) {
const disabledOptions = enumDisabled || [];
const options = map(enumOptions, ({ label, value }, index) => ({
disabled: disabledOptions.indexOf(value) !== -1,
key: label,
text: label,
value: String(index),
}));
if (showPlaceholderOption) {
options.unshift({ value: '', text: placeholder || '' });
}
return options;
}
/** The `SelectWidget` is a widget for rendering dropdowns.
* It is typically used with string properties constrained with enum options.
*
* @param props - The `WidgetProps` for this component
*/
export default function SelectWidget(props) {
const { uiSchema, formContext, id, options, label, hideLabel, required, disabled, readonly, value, multiple, placeholder, autofocus, onChange, onBlur, onFocus, rawErrors = [], schema, } = props;
const semanticProps = getSemanticProps({
uiSchema,
formContext,
options,
defaultSchemaProps: {
inverted: 'false',
selection: true,
fluid: true,
scrolling: true,
upward: false,
},
});
const { enumDisabled, enumOptions, emptyValue: optEmptyVal } = options;
const emptyValue = multiple ? [] : '';
const showPlaceholderOption = !multiple && schema.default === undefined;
const dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder);
const _onChange = (_, { value }) => onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
// eslint-disable-next-line no-shadow
const _onBlur = (_, { target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const _onFocus = (_, { target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
return (_jsx(Form.Dropdown, { id: id, name: id, label: labelValue(label || undefined, hideLabel, false), multiple: typeof multiple === 'undefined' ? false : multiple, value: typeof value === 'undefined' ? emptyValue : selectedIndexes, error: rawErrors.length > 0, disabled: disabled, placeholder: placeholder, ...semanticProps, required: required, autoFocus: autofocus, readOnly: readonly, options: dropdownOptions, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }, id));
}
//# sourceMappingURL=SelectWidget.js.map