|
| 1 | +// Copyright (C) 2022-2025 Intel Corporation |
| 2 | +// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE |
| 3 | + |
| 4 | +import { Key, ReactNode } from 'react'; |
| 5 | + |
| 6 | +import { ActionButton, Flex, Item, Loading, TabList, TabPanels, Tabs, Tooltip, TooltipTrigger } from '@geti/ui'; |
| 7 | +import { Add } from '@geti/ui/icons'; |
| 8 | + |
| 9 | +import { CollapsedItemsPicker } from '../collapsed-items-picker/collapsed-items-picker.component'; |
| 10 | +import { TabItem } from '../tabs/tabs.interface'; |
| 11 | + |
| 12 | +import classes from './managed-tabs.module.scss'; |
| 13 | + |
| 14 | +export interface AddButtonConfig { |
| 15 | + ariaLabel: string; |
| 16 | + tooltipText: string; |
| 17 | + onPress: () => void; |
| 18 | + isLoading?: boolean; |
| 19 | + isDisabled?: boolean; |
| 20 | + id?: string; |
| 21 | +} |
| 22 | + |
| 23 | +export interface OverflowConfig { |
| 24 | + maxVisibleTabs: number; |
| 25 | + pickerAriaLabel: string; |
| 26 | + onCollapsedItemSelect: (key: string) => void; |
| 27 | +} |
| 28 | + |
| 29 | +export interface ManagedTabsProps<T extends { id: string; name: string }> { |
| 30 | + id?: string; |
| 31 | + items: T[]; |
| 32 | + selectedKey: string; |
| 33 | + onSelectionChange: (key: Key) => void; |
| 34 | + renderTabItem: (item: T) => ReactNode; |
| 35 | + renderTabPanel: (item: T) => ReactNode; |
| 36 | + addButton?: AddButtonConfig; |
| 37 | + overflow?: OverflowConfig; |
| 38 | + orientation?: 'horizontal' | 'vertical'; |
| 39 | + wrapperClassName?: string; |
| 40 | + tabListClassName?: string; |
| 41 | + ariaLabel: string; |
| 42 | +} |
| 43 | + |
| 44 | +export const ManagedTabs = <T extends { id: string; name: string }>({ |
| 45 | + id, |
| 46 | + items, |
| 47 | + selectedKey, |
| 48 | + onSelectionChange, |
| 49 | + renderTabItem, |
| 50 | + renderTabPanel, |
| 51 | + addButton, |
| 52 | + overflow, |
| 53 | + orientation = 'vertical', |
| 54 | + wrapperClassName, |
| 55 | + tabListClassName, |
| 56 | + ariaLabel, |
| 57 | +}: ManagedTabsProps<T>) => { |
| 58 | + const { visibleItems, collapsedItems, hasSelectedCollapsedItem } = (() => { |
| 59 | + if (!overflow || items.length <= overflow.maxVisibleTabs) { |
| 60 | + return { |
| 61 | + visibleItems: items, |
| 62 | + collapsedItems: [], |
| 63 | + hasSelectedCollapsedItem: false, |
| 64 | + }; |
| 65 | + } |
| 66 | + |
| 67 | + const visible = items.slice(0, overflow.maxVisibleTabs); |
| 68 | + const collapsed = items.slice(overflow.maxVisibleTabs); |
| 69 | + const hasCollapsedSelection = collapsed.some((item) => item.id === selectedKey); |
| 70 | + |
| 71 | + return { |
| 72 | + visibleItems: visible, |
| 73 | + collapsedItems: collapsed, |
| 74 | + hasSelectedCollapsedItem: hasCollapsedSelection, |
| 75 | + }; |
| 76 | + })(); |
| 77 | + |
| 78 | + const tabItems = visibleItems.map((item) => ({ |
| 79 | + id: item.id, |
| 80 | + key: item.id, |
| 81 | + name: item.name, |
| 82 | + children: renderTabPanel(item), |
| 83 | + originalItem: item, |
| 84 | + })); |
| 85 | + |
| 86 | + const collapsedPickerItems = collapsedItems.map((item) => ({ id: item.id, name: item.name })); |
| 87 | + |
| 88 | + return ( |
| 89 | + <Flex |
| 90 | + id={id} |
| 91 | + direction={orientation === 'vertical' ? 'row' : 'column'} |
| 92 | + height='100%' |
| 93 | + width='100%' |
| 94 | + UNSAFE_className={`${classes.componentWrapper} ${wrapperClassName || ''}`} |
| 95 | + > |
| 96 | + <Tabs |
| 97 | + orientation={orientation} |
| 98 | + selectedKey={selectedKey} |
| 99 | + items={tabItems} |
| 100 | + aria-label={ariaLabel} |
| 101 | + height='100%' |
| 102 | + width='100%' |
| 103 | + onSelectionChange={onSelectionChange} |
| 104 | + > |
| 105 | + <Flex |
| 106 | + alignItems='center' |
| 107 | + width='100%' |
| 108 | + position='relative' |
| 109 | + gap='size-200' |
| 110 | + UNSAFE_className={classes.tabWrapper} |
| 111 | + > |
| 112 | + <div className={classes.tabListScrollContainer}> |
| 113 | + <TabList UNSAFE_className={tabListClassName || classes.tabList}> |
| 114 | + {(item: TabItem & { originalItem: T }) => ( |
| 115 | + <Item textValue={String(item.name)} key={item.key}> |
| 116 | + {renderTabItem(item.originalItem)} |
| 117 | + </Item> |
| 118 | + )} |
| 119 | + </TabList> |
| 120 | + </div> |
| 121 | + |
| 122 | + {overflow && collapsedItems.length > 0 && ( |
| 123 | + <CollapsedItemsPicker |
| 124 | + items={collapsedPickerItems} |
| 125 | + ariaLabel={overflow.pickerAriaLabel} |
| 126 | + onSelectionChange={overflow.onCollapsedItemSelect} |
| 127 | + hasSelectedPinnedItem={!hasSelectedCollapsedItem} |
| 128 | + numberOfCollapsedItems={collapsedItems.length} |
| 129 | + /> |
| 130 | + )} |
| 131 | + |
| 132 | + {addButton && ( |
| 133 | + <TooltipTrigger placement='bottom'> |
| 134 | + <ActionButton |
| 135 | + isQuiet |
| 136 | + id={addButton.id} |
| 137 | + onPress={addButton.onPress} |
| 138 | + isDisabled={addButton.isDisabled || addButton.isLoading} |
| 139 | + aria-label={addButton.ariaLabel} |
| 140 | + > |
| 141 | + {addButton.isLoading ? <Loading mode='inline' size='S' /> : <Add />} |
| 142 | + </ActionButton> |
| 143 | + <Tooltip>{addButton.tooltipText}</Tooltip> |
| 144 | + </TooltipTrigger> |
| 145 | + )} |
| 146 | + </Flex> |
| 147 | + |
| 148 | + <TabPanels>{(item: TabItem) => <Item key={item.key}>{item.children}</Item>}</TabPanels> |
| 149 | + </Tabs> |
| 150 | + </Flex> |
| 151 | + ); |
| 152 | +}; |
0 commit comments