box-ui-elements
Version:
Box UI Elements
63 lines (59 loc) • 2.28 kB
JavaScript
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { XMark } from '@box/blueprint-web-assets/icons/Fill/index';
import { IconButton, PageHeader, Text } from '@box/blueprint-web';
import messages from '../messages';
import './SubHeaderLeftV2.scss';
const SubHeaderLeftV2 = props => {
const {
currentCollection,
onClearSelectedItemIds,
rootName,
selectedItemIds,
title
} = props;
const {
formatMessage
} = useIntl();
// Generate selected item text based on selected keys
const selectedItemText = useMemo(() => {
const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;
if (selectedCount === 0) {
return '';
}
// Case 1: Single selected item - show item name
if (selectedCount === 1) {
const selectedKey = selectedItemIds === 'all' ? currentCollection.items[0].id : selectedItemIds.values().next().value;
const selectedItem = currentCollection.items.find(item => item.id === selectedKey);
return selectedItem?.name ?? '';
}
// Case 2: Multiple selected items - show count
if (selectedCount > 1) {
return formatMessage(messages.numFilesSelected, {
numSelected: selectedCount
});
}
return '';
}, [currentCollection.items, formatMessage, selectedItemIds]);
// Case 1 and 2: selected item text with X button
if (selectedItemText) {
return /*#__PURE__*/React.createElement(PageHeader.Root, {
className: "be-SubHeaderLeftV2--selection",
variant: "default"
}, /*#__PURE__*/React.createElement(PageHeader.Corner, null, /*#__PURE__*/React.createElement(IconButton, {
"aria-label": formatMessage(messages.clearSelection),
icon: XMark,
onClick: onClearSelectedItemIds,
variant: "small-utility"
})), /*#__PURE__*/React.createElement(PageHeader.StartElements, null, /*#__PURE__*/React.createElement(Text, {
as: "span"
}, selectedItemText)));
}
// Case 3: No selected items - show title if provided, otherwise show root name
return /*#__PURE__*/React.createElement(Text, {
as: "h1",
variant: "titleXLarge"
}, title ?? rootName);
};
export default SubHeaderLeftV2;
//# sourceMappingURL=SubHeaderLeftV2.js.map