@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
81 lines (80 loc) • 6.83 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useCallback, useMemo, useState, useRef } from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import Dropdown from '../internal/components/dropdown';
import DropdownStatus from '../internal/components/dropdown-status';
import Filter from './parts/filter';
import Trigger from './parts/trigger';
import { LiveRegion } from '../internal/components/live-region';
import { getBaseProps } from '../internal/base-component';
import { flattenOptions } from '../internal/components/option/utils/flatten-options';
import { filterOptions } from '../internal/components/option/utils/filter-options';
import { useSelect } from './utils/use-select';
import { fireNonCancelableEvent } from '../internal/events';
import { useLoadItems } from './utils/use-load-items';
import { useAnnouncement } from './utils/use-announcement';
import { useFocusTracker } from '../internal/hooks/use-focus-tracker';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';
import PlainList from './parts/plain-list';
import VirtualList from './parts/virtual-list';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var Select = React.forwardRef(function (_a, externalRef) {
var _b;
var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.filteringType, filteringType = _d === void 0 ? 'none' : _d, filteringPlaceholder = _a.filteringPlaceholder, filteringAriaLabel = _a.filteringAriaLabel, ariaRequired = _a.ariaRequired, placeholder = _a.placeholder, disabled = _a.disabled, ariaLabel = _a.ariaLabel, _e = _a.statusType, statusType = _e === void 0 ? 'finished' : _e, empty = _a.empty, loadingText = _a.loadingText, finishedText = _a.finishedText, errorText = _a.errorText, recoveryText = _a.recoveryText, noMatch = _a.noMatch, _f = _a.triggerVariant, triggerVariant = _f === void 0 ? 'label' : _f, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, selectedOption = _a.selectedOption, onBlur = _a.onBlur, onFocus = _a.onFocus, onLoadItems = _a.onLoadItems, onChange = _a.onChange, virtualScroll = _a.virtualScroll, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "ariaRequired", "placeholder", "disabled", "ariaLabel", "statusType", "empty", "loadingText", "finishedText", "errorText", "recoveryText", "noMatch", "triggerVariant", "selectedAriaLabel", "renderHighlightedAriaLive", "selectedOption", "onBlur", "onFocus", "onLoadItems", "onChange", "virtualScroll"]);
useTelemetry('Select');
var baseProps = getBaseProps(restProps);
var formFieldContext = useFormFieldContext(restProps);
var _g = useLoadItems({
onLoadItems: onLoadItems,
options: options,
statusType: statusType
}), fireDelayedInput = _g.fireDelayedInput, handleLoadMore = _g.handleLoadMore, handleRecoveryClick = _g.handleRecoveryClick, fireLoadItems = _g.fireLoadItems;
var _h = useState(''), filteringValue = _h[0], setFilteringValue = _h[1];
var updateSelectedOption = useCallback(function (option) {
fireNonCancelableEvent(onChange, { selectedOption: option });
}, [onChange]);
var _j = useMemo(function () {
return flattenOptions(options);
}, [options]), flatOptions = _j.flatOptions, parentMap = _j.parentMap;
var filteredOptions = useMemo(function () {
if (filteringType !== 'auto') {
return flatOptions;
}
return filterOptions(flatOptions, filteringValue);
}, [filterOptions, flatOptions, filteringType, filteringValue]);
generateTestIndexes(filteredOptions, parentMap.get.bind(parentMap));
var rootRef = useRef();
useFocusTracker({ rootRef: rootRef, onBlur: onBlur, onFocus: onFocus });
var scrollToIndex = useRef(null);
var _k = useSelect({
selectedOptions: selectedOption ? [selectedOption] : [],
updateSelectedOption: updateSelectedOption,
options: filteredOptions,
filteringType: filteringType,
rootRef: rootRef,
externalRef: externalRef,
fireLoadItems: fireLoadItems,
setFilteringValue: setFilteringValue,
scrollToIndex: (_b = scrollToIndex.current) !== null && _b !== void 0 ? _b : undefined
}), isOpen = _k.isOpen, highlightedOption = _k.highlightedOption, getTriggerProps = _k.getTriggerProps, getFilterProps = _k.getFilterProps, getMenuProps = _k.getMenuProps, getDropdownProps = _k.getDropdownProps, getOptionProps = _k.getOptionProps, isKeyboard = _k.isKeyboard, resetHighlight = _k.resetHighlight, announceSelected = _k.announceSelected;
var filter = (React.createElement(Filter, { filteringType: filteringType, filteringPlaceholder: filteringPlaceholder, filteringAriaLabel: filteringAriaLabel, ariaRequired: ariaRequired, filterProps: getFilterProps(), filteringValue: filteringValue, setFilteringValue: setFilteringValue, resetHighlight: resetHighlight, fireDelayedInput: fireDelayedInput }));
var trigger = (React.createElement(Trigger, __assign({ placeholder: placeholder, disabled: disabled, ariaLabel: ariaLabel, triggerVariant: triggerVariant, triggerProps: getTriggerProps(disabled), selectedOption: selectedOption, isOpen: isOpen }, formFieldContext)));
var dropdownProps = __assign({ trigger: trigger, header: filter }, getDropdownProps());
var menuProps = __assign(__assign({}, getMenuProps()), { onLoadMore: handleLoadMore });
var dropdownStatus = (React.createElement(DropdownStatus, { statusType: statusType, empty: empty, loadingText: loadingText, finishedText: finishedText, errorText: errorText, recoveryText: recoveryText, noMatch: noMatch, onRecoveryClick: handleRecoveryClick, isNoMatch: filteredOptions && filteredOptions.length === 0, isEmpty: !options || options.length === 0 }));
var announcement = useAnnouncement({
announceSelected: announceSelected,
highlightedOption: highlightedOption,
parentMap: parentMap,
selectedAriaLabel: selectedAriaLabel,
renderHighlightedAriaLive: renderHighlightedAriaLive
});
var ListComponent = virtualScroll ? VirtualList : PlainList;
return (React.createElement("div", __assign({}, baseProps, { ref: rootRef, className: clsx(styles.root, baseProps.className) }),
React.createElement(Dropdown, __assign({}, dropdownProps),
React.createElement(ListComponent, { menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, isKeyboard: isKeyboard, dropdownStatus: dropdownStatus, ref: scrollToIndex })),
isKeyboard && React.createElement(LiveRegion, { message: announcement })));
});
export default Select;