@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
73 lines (72 loc) • 6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabList = TabList;
exports.TabItem = TabItem;
exports.ToolbarList = ToolbarList;
exports.ToolbarItem = ToolbarItem;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../dnd");
const icons_1 = require("../icons");
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const DragAndDropContext_1 = require("./DragAndDropContext");
const Flex_1 = require("../Flex");
function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto", ref: provided.innerRef, "data-name": "dashboard-tabs" },
tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
!disabled && onNewTab ? (React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
React.createElement(icons_1.Icon, { name: "plus", size: 32 }),
"Click to add tab"))) : null,
provided.placeholder))));
}
function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
return (React.createElement(dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => {
let showHeader = true;
if (tab.Name === '' &&
!context.permittedActions.editTabName &&
!context.permittedActions.deleteTab) {
showHeader = false;
}
return (React.createElement("div", { className: "ab-ModuleSelector__TabItem twa:min-w-32", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
...(isDragDisabled ? {} : provided.draggableProps.style),
} },
showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
? {}
: {
display: 'none',
} },
React.createElement(icons_1.Icon, { name: "drag" })),
context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
onChangeTabName(event.target.value);
} })) : (tab.Name),
context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })));
}));
}
function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Flex_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", style: {
backgroundColor: snapshot.isDraggingOver
? 'var(--ab-dashboard-tab-drop-target__background)'
: '',
} },
toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null,
provided.placeholder))));
}
function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
let currentItem = availableItems.find((t) => t.Id === toolbar);
const title = currentItem ? currentItem.Title : toolbar;
return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex_1.Flex, { className: `ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1`, alignItems: "center", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
...provided.draggableProps.style,
backgroundColor: snapshot.isDragging
? 'var(--ab-dashboard-toolbar-drag__background)'
: 'var(--ab-color-primarylight)',
} },
React.createElement("div", { className: "twa:flex-1" }, title),
React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })))));
}