@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
37 lines • 2.73 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useState } from 'react';
import clsx from 'clsx';
import { useUniqueId } from '../../hooks/use-unique-id';
import TokenLimitToggle from './token-limit-toggle';
import styles from './styles.css.js';
export default function TokenList({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, onExpandedClick = () => undefined, }) {
const controlId = useUniqueId();
const [expanded, setExpanded] = useState(false);
const hasItems = items.length > 0;
const hasHiddenItems = hasItems && limit !== undefined && items.length > limit;
const visibleItems = hasHiddenItems && !expanded ? items.slice(0, limit) : items;
const hasVisibleItems = visibleItems.length > 0;
const toggle = hasHiddenItems ? (React.createElement("div", { className: styles[`toggle-container-${alignment}`] },
React.createElement(TokenLimitToggle, { controlId: hasVisibleItems ? controlId : undefined, allHidden: limit === 0, expanded: expanded, numberOfHiddenOptions: items.length - visibleItems.length, i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, onClick: () => {
const isExpanded = !expanded;
setExpanded(isExpanded);
onExpandedClick(isExpanded);
} }))) : null;
if (alignment === 'inline') {
return (React.createElement("div", { className: clsx(styles.root, styles.horizontal) },
hasItems && (React.createElement("ul", { id: controlId, className: styles.list }, visibleItems.map((item, itemIndex) => (React.createElement("li", { key: itemIndex, className: styles['list-item'], "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }, renderItem(item, itemIndex)))))),
toggle,
after && React.createElement("div", { className: styles.separator }),
after));
}
return (React.createElement("div", { className: clsx(styles.root, styles.vertical) },
hasVisibleItems && (React.createElement("ul", { id: controlId, className: clsx(styles.list, {
[styles.vertical]: alignment === 'vertical',
[styles.horizontal]: alignment === 'horizontal',
[styles.grid]: alignment === 'horizontal-grid',
}) }, visibleItems.map((item, itemIndex) => (React.createElement("li", { key: itemIndex, className: styles['list-item'], "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }, renderItem(item, itemIndex)))))),
toggle,
after));
}
//# sourceMappingURL=index.js.map