@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) • 2.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UnusedPanel = 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 DragAndDropContext_1 = require("./DragAndDropContext");
function UnusedPanel({ items, disabled, title, dragItemText, }) {
return (React.createElement(rebass_1.Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
React.createElement(rebass_1.Box, { p: 2 },
React.createElement("b", null, title),
" (",
dragItemText,
")"),
React.createElement(UnusedItemList, { disabled: disabled, items: items })));
}
exports.UnusedPanel = UnusedPanel;
function UnusedItemList({ items, disabled }) {
return (React.createElement(dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, style: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 'var(--ab-space-2)',
paddingRight: 'var(--ab-space-2)',
} },
items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
provided.placeholder))));
}
function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
let currentItem = availableItems.find((t) => t.Id === unusedItem);
const title = currentItem ? currentItem.Title : unusedItem;
return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
const eventHandlers = disabled
? {}
: {
...provided.draggableProps,
...provided.dragHandleProps,
};
const dragStyle = disabled ? {} : provided.draggableProps.style;
return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, style: {
...dragStyle,
border: '1px solid var(--ab-color-primary)',
backgroundColor: snapshot.isDragging
? 'var(--ab-dashboard-toolbar-drag__background)'
: 'var(--ab-color-primarylight)',
padding: 'var(--ab-space-1) var(--ab-space-2)',
marginRight: 'var(--ab-space-1)',
marginBottom: 'var(--ab-space-1)',
} }, title));
}));
}