@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
98 lines (97 loc) • 4.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModuleManager = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../dnd");
const DragAndDropContext_1 = require("./DragAndDropContext");
const TabList_1 = require("./TabList");
const UnusedPanel_1 = require("./UnusedPanel");
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Card_1 = require("../Card");
const ModuleManager = (props) => {
const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, className, } = props;
const contextValue = React.useMemo(() => {
const preparedPermittedAction = {
createTab: true,
editTabName: true,
dragAndDropTab: true,
deleteTab: true,
// override default permitted actions
...permittedActions,
};
return {
permittedActions: preparedPermittedAction,
availableItems: props.availableItems,
};
}, [props.availableItems, props.permittedActions]);
const unusedItems = React.useMemo(() => availableItems
.map((t) => t.Id)
.filter((item) => {
return !tabs.some((tab) => tab.Items?.includes(item));
}), [tabs, availableItems]);
const handleToolbarDragEnd = (result) => {
const { source, destination, draggableId } = result;
if (!source || !destination) {
return;
}
if (source.droppableId !== 'UNUSED') {
const sourceTabToolbars = tabs[Number(source.droppableId)].Items;
sourceTabToolbars.splice(source.index, 1);
}
if (destination.droppableId !== 'UNUSED') {
const destinationTabToolbars = tabs[Number(destination.droppableId)].Items;
destinationTabToolbars.splice(destination.index, 0, draggableId);
}
onTabsChange([...tabs]);
};
const handleTabDragEnd = (result) => {
const { source, destination } = result;
if (!source || !destination)
return;
const [removed] = tabs.splice(source.index, 1);
tabs.splice(destination.index, 0, removed);
onTabsChange([...tabs]);
};
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,
};
}));
};
return (React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
if (result.type === 'TAB')
handleTabDragEnd(result);
if (result.type === 'TOOLBAR')
handleToolbarDragEnd(result);
} },
React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className) },
React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
React.createElement(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
React.createElement(Card_1.Card.Title, { border: false }, tabsTitle),
React.createElement(Card_1.Card.Body, { className: "twa:px-2" },
React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
};
exports.ModuleManager = ModuleManager;