Created
May 18, 2023 09:42
-
-
Save iamparthaonline/9a622e445abd69fb1ec73f1882773b4d to your computer and use it in GitHub Desktop.
This file contains hidden or 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, { useState } from "react"; | |
| import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; | |
| const listArray = { | |
| Earth: [ | |
| { | |
| label: "Iron Man", | |
| id: 1001, | |
| }, | |
| { | |
| label: "Hulk", | |
| id: 1002, | |
| }, | |
| { | |
| label: "Spider Man", | |
| id: 1003, | |
| }, | |
| ], | |
| Asgard: [ | |
| { | |
| label: "Thor", | |
| id: 1004, | |
| }, | |
| { | |
| label: "Loki", | |
| id: 1005, | |
| }, | |
| { | |
| label: "Hela", | |
| id: 1006, | |
| }, | |
| ], | |
| Galaxy: [ | |
| { | |
| label: "Star Lord", | |
| id: 1007, | |
| }, | |
| { | |
| label: "Rocket", | |
| id: 1008, | |
| }, | |
| { | |
| label: "Gamora", | |
| id: 1009, | |
| }, | |
| ], | |
| }; | |
| /** Task List Component */ | |
| const List = ({ list, name }) => { | |
| return ( | |
| <div> | |
| <h2>{name}</h2> | |
| <ul | |
| style={{ | |
| border: "1px solid #444", | |
| padding: "10px", | |
| margin: "10px", | |
| width: "fit-content", | |
| display: "inline-block", | |
| }} | |
| > | |
| {list.map(({ label, id }, index) => ( | |
| <ListItem key={index} label={label} id={id} index={index} /> | |
| ))} | |
| </ul> | |
| </div> | |
| ); | |
| }; | |
| /** Task Component */ | |
| const ListItem = ({ label, id, index }) => { | |
| const getItemStyle = (isDragging, draggableStyle) => ({ | |
| // some basic styles to make the items look a bit nicer | |
| userSelect: "none", | |
| padding: "16px", | |
| margin: `0 0 8px 0`, | |
| // change background color if dragging | |
| background: isDragging ? "lightgreen" : "grey", | |
| // styles we need to apply on draggable s | |
| ...draggableStyle, | |
| }); | |
| return ( | |
| <Draggable draggableId={label} index={index}> | |
| {(provided, snapshot) => ( | |
| <li | |
| {...provided.draggableProps} | |
| {...provided.dragHandleProps} | |
| className="item" | |
| ref={provided.innerRef} | |
| style={{ | |
| border: "1px solid #444", | |
| padding: "20px", | |
| margin: "10px", | |
| ...getItemStyle(snapshot.isDragging, provided.draggableProps.style), | |
| }} | |
| > | |
| {label} | |
| </li> | |
| )} | |
| </Draggable> | |
| ); | |
| }; | |
| /** Board Component */ | |
| const Board = () => { | |
| const [listData, setListData] = useState(listArray); | |
| const dragEndHandler = (result) => { | |
| const { source, destination } = result; | |
| const temp = { ...listData }; | |
| const itemToMove = temp[source.droppableId].splice(source.index, 1)[0]; | |
| temp[destination.droppableId].splice(destination.index, 0, itemToMove); | |
| setListData(temp); | |
| }; | |
| const getListStyle = (isDraggingOver) => ({ | |
| background: isDraggingOver ? "lightblue" : "lightgrey", | |
| padding: "grid", | |
| width: 250, | |
| display: "inline-block", | |
| }); | |
| return ( | |
| <DragDropContext onDragEnd={dragEndHandler}> | |
| <h1>Superhero Board</h1> | |
| {Object.keys(listData).map((listId, index) => ( | |
| <Droppable key={listId} droppableId={listId}> | |
| {(provided, snapshot) => ( | |
| <div | |
| {...provided.droppableProps} | |
| ref={provided.innerRef} | |
| style={getListStyle(snapshot.isDraggingOver)} | |
| > | |
| <List list={listData[listId]} name={listId} /> | |
| {provided.placeholder} | |
| </div> | |
| )} | |
| </Droppable> | |
| ))} | |
| </DragDropContext> | |
| ); | |
| }; | |
| export default Board; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment