@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
41 lines (40 loc) • 2.78 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
import { Icon } from '../../../components/icons';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
export 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, { className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier ?? index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps },
React.createElement(Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
reorderable ? (React.createElement(Box, { mr: 3, ...dragHandleProps },
React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
props.renderOption(option, index))));
};
const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
return (React.createElement(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, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
React.createElement(DragDropContext, { onDragEnd: (result) => {
const { source, destination } = result;
const newOrder = ArrayExtensions.reorderArray(props.order, source.index, destination.index);
onChange(newOrder);
} },
React.createElement(Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
order.map(renderOption),
droppableProvided.placeholder));
})))));
}