@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
54 lines (53 loc) • 4.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../dnd");
const rebass_1 = require("rebass");
const icons_1 = require("../icons");
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const DragAndDropContext_1 = require("./DragAndDropContext");
function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "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) }))),
provided.placeholder))));
}
exports.TabList = TabList;
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) => (React.createElement("div", { className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
...(isDragDisabled ? {} : provided.draggableProps.style),
} },
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 }))),
React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
}
exports.TabItem = TabItem;
function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", 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) }))),
provided.placeholder))));
}
exports.ToolbarList = ToolbarList;
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(rebass_1.Flex, { className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
? 'var(--ab-dashboard-toolbar-drag__background)'
: 'var(--ab-color-primarylight)', ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style },
React.createElement("div", { style: { flex: 1 } }, title),
React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
}
exports.ToolbarItem = ToolbarItem;