@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
104 lines (103 loc) • 7.57 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { DragDropProvider } from '../dnd';
import { DragAndDropContext, DEFAULT_UNUSED_LIST_ID } from './DragAndDropContext';
import { TabList, ToolbarList } from './TabList';
import { UnusedPanel } from './UnusedPanel';
import { Box, Flex } from '../Flex';
import { Card } from '../Card';
import { cn } from '../../lib/utils';
export const ModuleManager = (props) => {
const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, unusedItemGroups, unusedItemGroupsLayout = 'row', permittedActions, className, layout = 'tabs', dragScope = 'default', } = props;
const unusedListIds = React.useMemo(() => {
if (unusedItemGroups?.length) {
return unusedItemGroups.map((group, index) => group.listId ?? `UNUSED-${index}`);
}
return [DEFAULT_UNUSED_LIST_ID];
}, [unusedItemGroups]);
const contextValue = React.useMemo(() => {
const preparedPermittedAction = {
createTab: true,
editTabName: true,
dragAndDropTab: true,
deleteTab: true,
...permittedActions,
};
return {
permittedActions: preparedPermittedAction,
availableItems: props.availableItems,
dragScope,
unusedListIds,
};
}, [props.availableItems, props.permittedActions, dragScope, unusedListIds, permittedActions]);
const allowedItems = React.useMemo(() => {
let result = availableItems.map((t) => t.Id);
if (props.filterOutSelectedItems) {
result = result.filter((item) => {
return !tabs.some((tab) => tab.Items?.includes(item));
});
}
return result;
}, [tabs, availableItems]);
const handleRemoveTab = (tabIndex) => {
onTabsChange(tabs.filter((_, index) => index !== tabIndex));
};
const handleTabAdd = () => {
onTabsChange([...tabs, { Name: 'New Tab', Items: [] }]);
};
const handleRemoveToolbar = (tabIndex, toolbarIndex) => {
onTabsChange(tabs.map((tab, index) => {
if (index !== tabIndex)
return tab;
return {
...tab,
Items: tab.Items.filter((_, index) => index !== toolbarIndex),
};
}));
};
const handleChangeTabName = (tabIndex, tabName) => {
onTabsChange(tabs.map((tab, index) => {
if (index !== tabIndex)
return tab;
return {
...tab,
Name: tabName,
};
}));
};
const renderUnusedItemGroups = () => {
const groupsLayout = unusedItemGroups.length > 1 ? unusedItemGroupsLayout : 'column';
return (_jsxs(_Fragment, { children: [dragItemText ? (_jsx(Box, { className: "twa:pb-2 twa:text-sm twa:opacity-80", children: dragItemText })) : null, _jsx(Flex, { flexDirection: groupsLayout === 'row' ? 'row' : 'column', className: cn('twa:gap-2 ab-ModuleSelector__UnusedGroups', {
'ab-ModuleSelector__UnusedGroups--row': groupsLayout === 'row',
}), children: unusedItemGroups.map((group, index) => {
const listId = group.listId ?? `UNUSED-${index}`;
const isRow = groupsLayout === 'row';
const hasCustomFlex = typeof group.flex === 'number';
return (_jsxs(Card, { className: cn('twa:m-0 ab-ModuleSelector__UnusedGroup', {
'twa:min-w-0': isRow,
'twa:flex-1': isRow && !hasCustomFlex,
}), style: isRow && hasCustomFlex ? { flex: group.flex } : undefined, children: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
}) })] }));
};
const renderAvailableItemPanels = (options) => {
const includeOuterPadding = options?.includeOuterPadding ?? true;
if (unusedItemGroups?.length) {
const content = renderUnusedItemGroups();
if (!includeOuterPadding) {
return content;
}
return _jsx(Box, { className: "twa:px-2 twa:mb-2", children: content });
}
return (_jsx(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }));
};
const renderUsedPanelCard = () => (_jsxs(Card, { className: "twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? _jsx(Card.Title, { border: false, children: tabsTitle }) : null, _jsx(Card.Body, { className: "twa:px-2", children: _jsx(TabList, { variant: layout === 'rows' ? 'rows' : 'columns', disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] }));
if (layout === 'strip') {
const stripTab = tabs[0] ?? { Name: '', Items: [] };
return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector ab-ModuleSelector--strip', className), children: [_jsx(Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), _jsx(Box, { className: "twa:px-2 twa:pb-1", children: _jsx(ToolbarList, { compact: true, orientation: "horizontal", disabled: disabled, toolbars: stripTab.Items ?? [], tabIndex: 0, tabs: tabs, onTabsChange: onTabsChange, onRemove: (toolbarIndex) => handleRemoveToolbar(0, toolbarIndex) }) })] }) }) }));
}
if (layout === 'rows') {
const alignUsedPanelWithGroups = Boolean(unusedItemGroups?.length);
return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsx(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector ab-ModuleSelector--rows', className), children: alignUsedPanelWithGroups ? (_jsxs(Box, { className: "twa:px-2 twa:flex twa:flex-col twa:gap-2", children: [renderAvailableItemPanels({ includeOuterPadding: false }), renderUsedPanelCard()] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), renderUsedPanelCard()] })) }) }) }));
}
return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector twa:flex-1', className), children: [renderAvailableItemPanels(), _jsxs(Card, { className: "twa:flex-1 twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? _jsx(Card.Title, { border: false, children: tabsTitle }) : null, _jsx(Card.Body, { className: "twa:px-2", children: _jsx(TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] })] }) }) }));
};