@adaptabletools/adaptable/src/components/DragAndDropContext/UnusedPanel.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { defaultDragProxyMove, DragList } from '../dnd';
import { DragAndDropContext } from './DragAndDropContext';
import { scopeDragId, scopeListId } from './dragScope';
import { Box, Flex } from '../Flex';
import { Icon } from '../icons';
import { cn } from '../../lib/utils';
export function UnusedPanel({ items, disabled, title, dragItemText, listId = 'UNUSED', }) {
    const showHeader = Boolean(title);
    return (_jsxs(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [showHeader ? (_jsxs(Box, { className: "twa:p-2", children: [_jsx("b", { children: title }), dragItemText ? _jsxs(_Fragment, { children: [" (", dragItemText, ")"] }) : null] })) : null, _jsx(UnusedItemList, { disabled: disabled, items: items, listId: listId })] }));
}
const EMPTY_ARRAY = [];
function UnusedItemList({ items, disabled, listId = 'UNUSED', }) {
    const { dragScope } = React.useContext(DragAndDropContext);
    return (_jsx(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: scopeListId(dragScope, listId), orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
            proxyElement.classList.add('twa:shadow-md');
        }, onDrop: () => { }, children: (listDomProps) => (_jsx("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: cn('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => (_jsx(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
}
function UnusedItem({ unusedItem, disabled }) {
    const { availableItems, dragScope } = React.useContext(DragAndDropContext);
    const currentItem = availableItems.find((t) => t.Id === unusedItem);
    const title = currentItem ? currentItem.Title : unusedItem;
    return (_jsx(DragList.DraggableItem, { id: scopeDragId(dragScope, unusedItem), children: (itemDomProps) => {
            const { onPointerDown, ...restDomProps } = itemDomProps;
            return (_jsxs(Flex, { "data-name": "unused-item", alignItems: "center", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: cn('ab-ModuleSelector__DraggableChip twa:rounded-standard twa:text-sm twa:px-2 twa:py-1 twa:select-none twa:gap-1', restDomProps.className), children: [_jsx(Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), _jsx("span", { children: title })] }));
        } }));
}