@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
22 lines (21 loc) • 2.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
import { Icon } from '../../../components/icons';
import { Box, Flex } from '../../../components/Flex';
import { cn } from '../../../lib/utils';
export function ReorderDraggable(props) {
const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
const baseClassName = 'ab-ReorderDraggable';
return (_jsx(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column", children: _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column", children: _jsx(DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
proxyElement.classList.add('twa:shadow-md');
}, onDrop: (sortedIndexes) => {
onChange(sortedIndexes.map((i) => order[i]));
}, children: (listDomProps) => (_jsx("div", { ...listDomProps, children: order.map((option, index) => {
const identifier = toIdentifier(option);
const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
const { onPointerDown, ...restDomProps } = itemDomProps;
return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: cn(`${baseClassName}__option`, 'ab-DraggableListItem', index ? 'twa:mt-0.5' : 'twa:mt-0', 'twa:py-1 twa:px-1.5', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-2", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-2", children: _jsx(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
} }, identifier));
}) })) }) }) }) }));
}