@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
72 lines (71 loc) • 5.9 kB
JavaScript
import { __assign, __rest } from "tslib";
import clsx from 'clsx';
import React from 'react';
import styles from './styles.css.js';
import { getCardsPerRow } from './cards-layout-helper';
import { getBaseProps } from '../internal/base-component';
import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
import ToolsHeader from '../table/tools-header';
import { getItemKey } from '../table/utils';
import { useSelection, useFocusMove, focusMarkers } from '../table/use-selection';
import SelectionControl from '../table/selection-control';
import Container from '../container';
import StatusIndicator from '../status-indicator';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var Cards = React.forwardRef(function (_a, ref) {
var _b = _a.items, items = _b === void 0 ? [] : _b, cardDefinition = _a.cardDefinition, _c = _a.cardsPerRow, cardsPerRow = _c === void 0 ? [] : _c, header = _a.header, filter = _a.filter, pagination = _a.pagination, preferences = _a.preferences, empty = _a.empty, loading = _a.loading, loadingText = _a.loadingText, trackBy = _a.trackBy, selectedItems = _a.selectedItems, selectionType = _a.selectionType, isItemDisabled = _a.isItemDisabled, onSelectionChange = _a.onSelectionChange, ariaLabels = _a.ariaLabels, visibleSections = _a.visibleSections, rest = __rest(_a, ["items", "cardDefinition", "cardsPerRow", "header", "filter", "pagination", "preferences", "empty", "loading", "loadingText", "trackBy", "selectedItems", "selectionType", "isItemDisabled", "onSelectionChange", "ariaLabels", "visibleSections"]);
useTelemetry('Cards');
var baseProps = getBaseProps(rest);
var _d = useContainerQuery(function (_a) {
var width = _a.width;
return getCardsPerRow(width, cardsPerRow);
}, [
cardsPerRow
]), columns = _d[0], containerRef = _d[1];
var _e = useSelection({
items: items,
trackBy: trackBy,
selectedItems: selectedItems,
selectionType: selectionType,
isItemDisabled: isItemDisabled,
onSelectionChange: onSelectionChange,
ariaLabels: ariaLabels
}), isItemSelected = _e.isItemSelected, getItemSelectionProps = _e.getItemSelectionProps, updateShiftToggle = _e.updateShiftToggle;
var status;
if (loading) {
status = (React.createElement("div", { className: styles.loading },
React.createElement(StatusIndicator, { type: "loading" }, loadingText)));
}
else if (empty && !items.length) {
status = React.createElement("div", { className: styles.empty }, empty);
}
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: containerRef }),
(header || filter || pagination || preferences) && (React.createElement(Container, { className: styles.header, header: React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }), disableContentPaddings: true })), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, updateShiftToggle: updateShiftToggle }))));
});
export default Cards;
var CardsList = function (_a) {
var items = _a.items, cardDefinition = _a.cardDefinition, trackBy = _a.trackBy, selectionType = _a.selectionType, columns = _a.columns, isItemSelected = _a.isItemSelected, getItemSelectionProps = _a.getItemSelectionProps, visibleSections = _a.visibleSections, updateShiftToggle = _a.updateShiftToggle;
var selectable = !!selectionType;
var _b = useFocusMove(selectionType, items.length), moveFocusDown = _b.moveFocusDown, moveFocusUp = _b.moveFocusUp;
var visibleSectionsDefinition = cardDefinition.sections || [];
visibleSectionsDefinition = visibleSections
? visibleSectionsDefinition.filter(function (section) { return section.id && visibleSections.indexOf(section.id) !== -1; })
: visibleSectionsDefinition;
return (React.createElement("ol", __assign({ className: clsx(styles.list, styles["list-grid-" + (columns || 1)]) }, (focusMarkers && focusMarkers.root)), items.map(function (item, index) {
var _a;
return (React.createElement("li", __assign({ className: clsx(styles.card, (_a = {},
_a[styles['card-selectable']] = selectable,
_a[styles['card-selected']] = selectable && isItemSelected(item),
_a)), key: getItemKey(trackBy, item, index) }, (focusMarkers && focusMarkers.item)),
React.createElement("div", { className: styles['card-inner'] },
React.createElement("div", { className: styles['card-header'] },
React.createElement("span", { className: styles['card-header-inner'] }, cardDefinition.header ? cardDefinition.header(item) : ''),
selectable && (React.createElement(SelectionControl, __assign({ className: styles['selection-control'], rootTag: 'div', onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, onShiftToggle: updateShiftToggle }, getItemSelectionProps(item))))),
visibleSectionsDefinition.map(function (_a, index) {
var _b = _a.width, width = _b === void 0 ? 100 : _b, header = _a.header, content = _a.content, id = _a.id;
return (React.createElement("div", { key: id || index, className: styles.section, style: { width: width + "%" } },
header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : ''));
}))));
})));
};