@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
47 lines (46 loc) • 3.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReorderDraggable = ReorderDraggable;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../../../components/dnd");
const icons_1 = require("../../../components/icons");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
const Flex_1 = require("../../../components/Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
function ReorderDraggable(props) {
const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
const baseClassName = 'ab-ReorderDraggable';
const renderOption = (option, index) => {
const identifier = toIdentifier(option);
const renderNode = (flexProps, dragHandleProps) => {
const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
return (React.createElement(Flex_1.Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps, className: (0, clsx_1.default)(`${baseClassName}__option ${index ? 'twa:mt-1' : 'twa:mt-0'} twa:bg-primary twa:p-2 ${flexProps?.className || ''}`, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
React.createElement(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
reorderable ? (React.createElement(Flex_1.Box, { ...dragHandleProps, className: `twa:mr-3 ${dragHandleProps?.className || ''}` },
React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Flex_1.Box, { className: "twa:mr-3" },
React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
props.renderOption(option, index))));
};
const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
return (React.createElement(dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable || disabled }, (draggableProvided) => {
return renderNode({
ref: draggableProvided.innerRef,
...draggableProvided.draggableProps,
style: draggableProvided.draggableProps.style,
}, draggableProvided.dragHandleProps);
}));
};
return (React.createElement(Flex_1.Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
const { source, destination } = result;
const newOrder = ArrayExtensions_1.default.reorderArray(props.order, source.index, destination.index);
onChange(newOrder);
} },
React.createElement(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
order.map(renderOption),
droppableProvided.placeholder));
})))));
}