@rjsf/fluent-ui/lib/SelectWidget/SelectWidget.js

Fluent UI theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown } from '@fluentui/react';
import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIndexForValue, enumOptionsSelectValue, enumOptionsValueForIndex, labelValue, } from '@rjsf/utils';
import _pick from 'lodash/pick';
// Keys of IDropdownProps from @fluentui/react
const allowedProps = [
    'placeHolder',
    'options',
    'onChange',
    'onChanged',
    'onRenderLabel',
    'onRenderPlaceholder',
    'onRenderPlaceHolder',
    'onRenderTitle',
    'onRenderCaretDown',
    'dropdownWidth',
    'responsiveMode',
    'defaultSelectedKeys',
    'selectedKeys',
    'multiselectDelimiter',
    'notifyOnReselect',
    'isDisabled',
    'keytipProps',
    'theme',
    'styles',
    // ISelectableDroppableTextProps
    'componentRef',
    'label',
    'ariaLabel',
    'id',
    'className',
    'defaultSelectedKey',
    'selectedKey',
    'multiSelect',
    'options',
    'onRenderContainer',
    'onRenderList',
    'onRenderItem',
    'onRenderOption',
    'onDismiss',
    'disabled',
    'required',
    'calloutProps',
    'panelProps',
    'errorMessage',
    'placeholder',
    'openOnKeyboardFocus',
];
export default function SelectWidget({ id, options, label, hideLabel, required, disabled, readonly, value, multiple, onChange, onBlur, onFocus, }) {
    const { enumOptions, enumDisabled, emptyValue } = options;
    const _onChange = (_ev, item) => {
        if (!item) {
            return;
        }
        if (multiple) {
            const valueOrDefault = value || [];
            if (item.selected) {
                onChange(enumOptionsSelectValue(item.key, valueOrDefault, enumOptions));
            }
            else {
                onChange(enumOptionsDeselectValue(item.key, valueOrDefault, enumOptions));
            }
        }
        else {
            onChange(enumOptionsValueForIndex(item.key, enumOptions, emptyValue));
        }
    };
    const _onBlur = (e) => onBlur(id, enumOptionsValueForIndex(e.target.value, enumOptions, emptyValue));
    const _onFocus = (e) => onFocus(id, enumOptionsValueForIndex(e.target.value, enumOptions, emptyValue));
    const newOptions = Array.isArray(enumOptions)
        ? enumOptions.map((option, index) => ({
            key: String(index),
            text: option.label,
            disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
        }))
        : [];
    const uiProps = _pick(options.props || {}, allowedProps);
    const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
    return (_jsx(Dropdown, { id: id, label: labelValue(label, hideLabel), multiSelect: multiple, defaultSelectedKey: multiple ? undefined : selectedIndexes, defaultSelectedKeys: multiple ? selectedIndexes : undefined, required: required, options: newOptions, disabled: disabled || readonly, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, ...uiProps, "aria-describedby": ariaDescribedByIds(id) }));
}
//# sourceMappingURL=SelectWidget.js.map