@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
47 lines • 4.4 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useInternalI18n } from '../../i18n/context';
import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
import InternalStructuredItem from '../../internal/components/structured-item';
import { joinStrings } from '../../internal/utils/strings';
import VerticalConnector from '../vertical-connector';
import FocusTarget from './focus-target';
import testUtilStyles from '../test-classes/styles.css.js';
import styles from './styles.css.js';
const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [], connectorLines, renderItemToggleIcon, renderItem, getItemId, getItemChildren, onItemToggle, allVisibleItemsIndices, }) => {
var _a, _b;
const i18n = useInternalI18n('tree-view');
const { icon, content, secondaryContent, actions, announcementLabel } = renderItem(item, index);
const id = getItemId(item, index);
const children = getItemChildren(item, index) || [];
const isExpandable = children.length > 0;
const isExpanded = isExpandable && expandedItems.includes(id);
const nextLevel = level + 1;
const showVerticalConnectorLines = connectorLines === 'vertical' && isExpanded;
let customIcon = undefined;
if (isExpandable && renderItemToggleIcon) {
customIcon = renderItemToggleIcon({ expanded: isExpanded });
}
const itemLabelToAnnounce = announcementLabel
? announcementLabel
: typeof content === 'string'
? content
: '';
return (React.createElement("li", { role: "treeitem", id: id, className: clsx(styles.treeitem, testUtilStyles.treeitem, level > 1 && styles.offset, isExpandable && [testUtilStyles.expandable], isExpanded && [testUtilStyles.expanded]), "aria-expanded": isExpandable ? isExpanded : undefined, "aria-level": level, "data-testid": `awsui-treeitem-${id}`, "data-awsui-tree-item-index": allVisibleItemsIndices[id] },
React.createElement("div", { className: styles['treeitem-content-wrapper'] },
React.createElement("div", { className: styles['expand-toggle-wrapper'] },
React.createElement("div", { className: styles.toggle }, isExpandable ? (React.createElement(ExpandToggleButton, { isExpanded: isExpanded, customIcon: customIcon, expandButtonLabel: joinStrings(i18n('i18nStrings.expandButtonLabel', (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.expandButtonLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, item)), itemLabelToAnnounce), collapseButtonLabel: joinStrings(i18n('i18nStrings.collapseButtonLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.collapseButtonLabel) === null || _b === void 0 ? void 0 : _b.call(i18nStrings, item)), itemLabelToAnnounce), onExpandableItemToggle: () => onItemToggle({ id, item, expanded: !isExpanded }), className: styles['tree-item-focus-target'], disableFocusHighlight: true })) : (React.createElement(FocusTarget, { ariaLabel: itemLabelToAnnounce })))),
showVerticalConnectorLines && React.createElement(VerticalConnector, { variant: "grid" }),
React.createElement("div", { className: styles['structured-item-wrapper'] },
React.createElement(InternalStructuredItem, { icon: icon, content: content, secondaryContent: secondaryContent, actions: actions, wrapActions: false, className: styles['tree-item-structured-item'] }))),
isExpanded && children.length && (React.createElement("ul", { role: "group", className: styles['treeitem-group'] },
children.map((child, index) => {
const itemId = getItemId(child, index);
return (React.createElement(InternalTreeItem, { item: child, index: index, key: itemId, level: nextLevel, expandedItems: expandedItems, i18nStrings: i18nStrings, onItemToggle: onItemToggle, renderItem: renderItem, getItemId: getItemId, getItemChildren: getItemChildren, renderItemToggleIcon: renderItemToggleIcon, allVisibleItemsIndices: allVisibleItemsIndices, connectorLines: connectorLines }));
}),
showVerticalConnectorLines && React.createElement(VerticalConnector, { variant: "absolute" })))));
};
export default InternalTreeItem;
//# sourceMappingURL=index.js.map