@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
60 lines • 4.85 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 { getBaseProps } from '../internal/base-component';
import InternalDragHandle from '../internal/components/drag-handle';
import SortableArea from '../internal/components/sortable-area';
import { formatDndItemCommitted, formatDndItemReordered, formatDndStarted, } from '../internal/components/sortable-area/use-live-announcements';
import InternalStructuredItem from '../internal/components/structured-item';
import { fireNonCancelableEvent } from '../internal/events';
import styles from './styles.css.js';
import testClasses from './test-classes/styles.css.js';
const extractValidStructuredItemProps = ({ content, secondaryContent, icon, actions }) => ({
content,
secondaryContent,
icon,
actions,
});
export default function InternalList({ items, renderItem, sortable = false, sortDisabled = false, tagOverride: Tag = sortable ? 'ol' : 'ul', ariaLabel, ariaLabelledby, ariaDescribedby, onSortingChange, i18nStrings, disablePaddings, disableItemPaddings, __internalRootRef, ...rest }) {
const baseProps = getBaseProps(rest);
const i18n = useInternalI18n('list');
let contents;
if (sortable) {
contents = (React.createElement(SortableArea, { items: items, disableReorder: sortDisabled, itemDefinition: {
id: item => renderItem(item).id,
label: item => {
var _a;
const details = renderItem(item);
return (_a = details.announcementLabel) !== null && _a !== void 0 ? _a : details.content;
},
}, onItemsChange: event => fireNonCancelableEvent(onSortingChange, { items: event.detail.items }), i18nStrings: {
liveAnnouncementDndStarted: i18n('liveAnnouncementDndStarted', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndStarted, formatDndStarted),
liveAnnouncementDndItemReordered: i18n('liveAnnouncementDndItemReordered', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndItemReordered, formatDndItemReordered),
liveAnnouncementDndItemCommitted: i18n('liveAnnouncementDndItemCommitted', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndItemCommitted, formatDndItemCommitted),
liveAnnouncementDndDiscarded: i18n('liveAnnouncementDndDiscarded', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndDiscarded),
dragHandleAriaLabel: i18n('dragHandleAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaLabel),
dragHandleAriaDescription: i18n('dragHandleAriaDescription', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaDescription),
}, renderItem: ({ ref, item, id, style, className, dragHandleProps, isDragGhost }) => {
const structuredItemProps = extractValidStructuredItemProps(renderItem(item));
const itemClass = clsx(styles.item, testClasses.item, disableItemPaddings && styles['disable-item-paddings'], styles['sortable-item'], className);
const content = (React.createElement(React.Fragment, null,
React.createElement(InternalDragHandle, { ...dragHandleProps }),
React.createElement(InternalStructuredItem, { ...structuredItemProps, disablePaddings: disableItemPaddings })));
if (isDragGhost) {
return React.createElement("div", { className: itemClass }, content);
}
return (React.createElement("li", { ref: ref, className: itemClass, style: style, "data-testid": id }, content));
} }));
}
else {
contents = items === null || items === void 0 ? void 0 : items.map(item => {
const { id, ...structuredItemProps } = renderItem(item);
return (React.createElement("li", { key: id, "data-testid": id, className: clsx(styles.item, testClasses.item, disablePaddings && styles['disable-paddings'], disableItemPaddings && styles['disable-item-paddings']) },
React.createElement(InternalStructuredItem, { ...extractValidStructuredItemProps(structuredItemProps), disablePaddings: disableItemPaddings })));
});
}
return (React.createElement(Tag, { ref: __internalRootRef, ...baseProps, className: clsx(baseProps.className, styles.root, testClasses.root), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, contents));
}
//# sourceMappingURL=internal.js.map