@cimpress/react-components
Version:
React components to support the MCP styleguide
60 lines • 3.23 kB
JavaScript
import React, { useState } from 'react';
import { DragAndDrop, Droppable, withDraggable, FlexBox } from '@cimpress/react-components';
import IconDragDrop from '@cimpress-technology/react-streamline-icons/lib/IconDragDrop';
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
/**
* Moves an item from one list to another list.
*/
const move = (source, destination, droppableSource, droppableDestination) => {
const sourceClone = Array.from(source);
const destClone = Array.from(destination);
const [removed] = sourceClone.splice(droppableSource.index, 1);
destClone.splice(droppableDestination.index, 0, removed);
const result = {};
result[droppableSource.droppableId] = sourceClone;
result[droppableDestination.droppableId] = destClone;
return result;
};
const DraggableItem = withDraggable(({ item }) => React.createElement("div", null, item.id));
const Example = () => {
const [leftItems, setLeftItems] = useState(Array(4)
.fill()
.map((_, index) => ({ id: `Draggable ${index}` })));
const [rightItems, setRightItems] = useState([]);
const getList = id => (id === 'leftDroppable' ? leftItems : rightItems);
const onDragEnd = result => {
const { source, destination } = result;
// dropped outside the list
if (!destination) {
return;
}
if (source.droppableId === destination.droppableId) {
const items = reorder(getList(source.droppableId), source.index, destination.index);
if (source.droppableId === 'leftDroppable') {
setLeftItems(items);
}
else {
setRightItems(items);
}
}
else {
const newResult = move(getList(source.droppableId), getList(destination.droppableId), source, destination);
setLeftItems(newResult.leftDroppable);
setRightItems(newResult.rightDroppable);
}
};
return (React.createElement(DragAndDrop, { onDragEnd: onDragEnd },
React.createElement(FlexBox, null,
React.createElement("div", { style: { flexBasis: '50%' } },
React.createElement(Droppable, { droppableId: "leftDroppable", isEmpty: leftItems.length === 0, emptyPlaceholder: React.createElement("div", null, " Drag something into the first droppable ") }, leftItems.map((item, index) => (React.createElement(DraggableItem, { draggableId: item.id, index: index, key: item.id, item: item, icon: IconDragDrop }))))),
React.createElement("div", { style: { flexBasis: '50%' } },
React.createElement(Droppable, { droppableId: "rightDroppable", isEmpty: rightItems.length === 0, emptyPlaceholder: React.createElement("div", null, " Drag something into the second droppable ") }, rightItems.map((item, index) => (React.createElement(DraggableItem, { draggableId: item.id, index: index, key: item.id, item: item, icon: IconDragDrop }))))))));
};
export default Example;
//# sourceMappingURL=draganddrop.js.map