@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
37 lines (36 loc) • 2.19 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import SelectToggle from './parts/toggle';
import TokenGroup from '../../../token-group';
import { generateUniqueId } from '../../hooks/use-unique-id';
function sliceOptions(options, limit) {
if (limit === undefined) {
return { slicedOptions: options, numberOfHidden: 0 };
}
return { slicedOptions: options.slice(0, limit), numberOfHidden: options.length - limit };
}
var SelectedTokens = function (_a) {
var controlId = _a.controlId, expanded = _a.expanded, disabled = _a.disabled, tokenLimit = _a.tokenLimit, _b = _a.selectedOptions, selectedOptions = _b === void 0 ? [] : _b, deselectAriaLabel = _a.deselectAriaLabel, i18nStrings = _a.i18nStrings, onToggleClick = _a.onToggleClick, onTokenDismiss = _a.onTokenDismiss;
controlId = useMemo(function () { return controlId || generateUniqueId(); }, [controlId]);
var handleDismiss = useCallback(function (e) {
onTokenDismiss && onTokenDismiss(e.detail.itemIndex);
}, [onTokenDismiss]);
var _c = sliceOptions(selectedOptions, tokenLimit), slicedOptions = _c.slicedOptions, numberOfHidden = _c.numberOfHidden;
var hasHiddenOptions = numberOfHidden > 0;
var displayedOptions = hasHiddenOptions && !expanded ? slicedOptions : selectedOptions;
var items = displayedOptions.map(function (option) { return ({
label: option.label,
disabled: disabled || option.disabled,
labelTag: option.labelTag,
description: option.description,
iconAlt: option.iconAlt,
iconName: option.iconName,
iconUrl: option.iconUrl,
tags: option.tags,
dismissLabel: deselectAriaLabel ? deselectAriaLabel(option) : undefined
}); });
return (React.createElement("div", null,
React.createElement("div", { id: controlId },
React.createElement(TokenGroup, { items: items, onDismiss: handleDismiss })),
hasHiddenOptions && (React.createElement(SelectToggle, { controlId: controlId, allHidden: tokenLimit === 0, expanded: expanded, numberOfHiddenOptions: numberOfHidden, i18nStrings: i18nStrings, onClick: onToggleClick }))));
};
export default SelectedTokens;