Created
July 29, 2020 14:24
-
-
Save evatrium/779d9346fcd878650df2dba20f4e256b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import ReactDOM from "react-dom"; | |
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; | |
// fake data generator | |
const getItems = count => | |
Array.from({ length: count }, (v, k) => k).map(k => ({ | |
id: `item-${k}`, | |
content: `item ${k}` | |
})); | |
// 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; | |
}; | |
const grid = 8; | |
const getItemStyle = (isDragging, draggableStyle) => ({ | |
// some basic styles to make the items look a bit nicer | |
userSelect: "none", | |
padding: grid * 2, | |
margin: `0 0 ${grid}px 0`, | |
// change background colour if dragging | |
background: isDragging ? "lightgreen" : "grey", | |
// styles we need to apply on draggables | |
...draggableStyle | |
}); | |
const getListStyle = isDraggingOver => ({ | |
background: isDraggingOver ? "lightblue" : "lightgrey", | |
padding: grid, | |
width: 250 | |
}); | |
class App extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
items: getItems(10) | |
}; | |
this.onDragEnd = this.onDragEnd.bind(this); | |
} | |
onDragEnd(result) { | |
// dropped outside the list | |
if (!result.destination) { | |
return; | |
} | |
const items = reorder( | |
this.state.items, | |
result.source.index, | |
result.destination.index | |
); | |
this.setState({ | |
items | |
}); | |
} | |
// Normally you would want to split things out into separate components. | |
// But in this example everything is just done in one place for simplicity | |
render() { | |
return ( | |
<DragDropContext onDragEnd={this.onDragEnd}> | |
<Droppable droppableId="droppable"> | |
{(provided, snapshot) => ( | |
<div | |
{...provided.droppableProps} | |
ref={provided.innerRef} | |
style={getListStyle(snapshot.isDraggingOver)} | |
> | |
{this.state.items.map((item, index) => ( | |
<Draggable key={item.id} draggableId={item.id} index={index}> | |
{(provided, snapshot) => ( | |
<div | |
ref={provided.innerRef} | |
{...provided.draggableProps} | |
{...provided.dragHandleProps} | |
style={getItemStyle( | |
snapshot.isDragging, | |
provided.draggableProps.style | |
)} | |
> | |
{item.content} | |
</div> | |
)} | |
</Draggable> | |
))} | |
{provided.placeholder} | |
</div> | |
)} | |
</Droppable> | |
</DragDropContext> | |
); | |
} | |
} | |
// Put the thing into the DOM! | |
ReactDOM.render(<App />, document.getElementById("root")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment