@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
45 lines • 2.99 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import { unflattenOptions } from '../../internal/components/option/utils/unflatten-options';
import Item from '../parts/item';
import MultiselectItem from '../parts/multiselect-item';
import OptionGroup from '../parts/option-group';
import { getItemProps } from './get-item-props';
export const renderOptions = ({ options, getOptionProps, filteringValue, highlightType, idPrefix, checkboxes = false, hasDropdownStatus, virtualItems, useInteractiveGroups, screenReaderContent, ariaSetsize, withScrollbar, firstOptionSticky, stickyOptionRef, }) => {
const getNestedItemProps = ({ index, option }) => {
const virtualItem = virtualItems && virtualItems[index];
const globalIndex = virtualItem ? virtualItem.index : index;
return getItemProps({
option,
index: globalIndex,
getOptionProps,
filteringValue: option.type === 'select-all' ? '' : filteringValue,
checkboxes,
});
};
const renderListItem = (props, index) => {
const virtualItem = virtualItems && virtualItems[index];
const globalIndex = virtualItem ? virtualItem.index : index;
const isLastItem = index === options.length - 1;
const padBottom = !hasDropdownStatus && isLastItem;
const ListItem = useInteractiveGroups ? MultiselectItem : Item;
const isSticky = firstOptionSticky && globalIndex === 0;
return (React.createElement(ListItem, { key: globalIndex, ...props, virtualPosition: virtualItem && virtualItem.start, ref: isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky }));
};
const unflattenedOptions = unflattenOptions(options);
return unflattenedOptions.map(nestedDropdownOption => {
var _a;
const index = nestedDropdownOption.index;
const props = getNestedItemProps(nestedDropdownOption);
if (nestedDropdownOption.type === 'parent') {
const { children } = nestedDropdownOption;
const optionId = (_a = props.id) !== null && _a !== void 0 ? _a : `${idPrefix}-option-${index}`;
return (React.createElement(OptionGroup, { key: index, virtual: (virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems[index]) !== undefined, ariaLabelledby: optionId, ariaDisabled: props['aria-disabled'] },
renderListItem(props, index),
children.map(child => (React.createElement(React.Fragment, { key: child.index }, renderListItem(getNestedItemProps(child), child.index))))));
}
return renderListItem(props, index);
});
};
//# sourceMappingURL=render-options.js.map