Skip to content

Instantly share code, notes, and snippets.

@ashikrai
Created July 27, 2021 04:59
Show Gist options
  • Save ashikrai/2ac20300b86aef650ebeb5f5b2699131 to your computer and use it in GitHub Desktop.
Save ashikrai/2ac20300b86aef650ebeb5f5b2699131 to your computer and use it in GitHub Desktop.
App.js is the root container of a React App
// FileName: App.js
import './App.css';
import React from 'react';
// importing components from another files
import { ListComponents } from "./ListComponent";
// imports related to DND
import { DragDropContext } from 'react-beautiful-dnd';
function App() {
// List 1 consisting of all MARVEL super heroes
const [list1, setList1] = React.useState(['Captain America', 'Iron Man', 'SpiderMan', 'Thor', 'Hulk', 'Black Widow', 'Loki', 'Black Panther', 'Deadpool', 'Doctor Strange', 'Ant Man', 'Captain Marvel'])
// List 2 consisting of all DC super heroes
const [list2, setList2] = React.useState(['BatMan', 'SuperMan', 'Wonder Woman', 'Flash', 'Green Lantern', 'AquaMan', 'Robin', 'Cyborg', 'StarFire', 'HawkGirl', 'Shazam'])
// Function for deleting items from list using index
const deleteItem = (list, index) => {
return list.splice(index, 1)
}
// Function called when Drag Ends
const onDragEnd = (result) => {
// getting the source and destination object
const { source, destination } = result
if (!destination)
return;
if (source.droppableId === destination.droppableId) {
if (source.droppableId === "Marvel_drop_area") {
let tempList = list1
const removed = deleteItem(tempList, source.index)
tempList.splice(destination.index, 0, removed)
setList1(tempList)
}
else {
let tempList = list2
const removed = deleteItem(tempList, source.index)
tempList.splice(destination.index, 0, removed)
setList2(tempList)
}
} else {
let tempList1 = list1
let tempList2 = list2
if (source.droppableId === "Marvel_drop_area") {
const removed = deleteItem(tempList1, source.index)
tempList2.splice(destination.index, 0, removed)
setList1(tempList1)
setList2(tempList2)
} else {
const removed = deleteItem(tempList2, source.index)
tempList1.splice(destination.index, 0, removed)
setList1(tempList1)
setList2(tempList2)
}
}
}
return (
<DragDropContext onDragEnd={onDragEnd}>
<div className="App">
<header className="App-header">
<h4>Hands on React-Beautiful-DND</h4>
<ListComponents Marvel={list1} DC={list2} />
</header>
</div>
</DragDropContext>
)
}
export default App;
// Filename : App.jsx
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h4>Hands on React-Beautiful-DND</h4>
</header>
</div>
);
}
export default App;
// Filename : ListComponent.jsx
import React from 'react';
// imports related to DND
import { Droppable, Draggable } from 'react-beautiful-dnd';
export function ListComponents({ Marvel, DC }) {
const getListStyle = isDraggingOver => ({
background: isDraggingOver ? "lightblue" : "darkgrey",
width: '21%',
margin: 'auto',
});
const getItemStyle = (isDragging, draggableStyle) => ({
userSelect: "none",
background: isDragging ? "darkgrey" : "white",
color: isDragging ? "white" : "black",
padding: isDragging ? '0%' : '2%',
paddingLeft: '2%',
margin: '0%',
fontSize: '17px',
borderBottom: '0.5px solid gray',
// styles we need to apply on draggables
...draggableStyle
});
return (
<div style={{ width: '100%', display: 'flex' }}>
<Droppable droppableId="Marvel_drop_area" >
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
<ul style={{ listStyleType: 'none', textAlign: 'left', padding: '0%', width: '100%' }} >
<h6 style={{ paddingLeft: '2%' }}>Marvel SuperHeroes</h6>
{Marvel.map((data, index) => (
<Draggable key={data}
draggableId={`${data}${index}`} index={index}>
{(provided, snapshot) => (
<li
key={index}
ref={provided.innerRef}
...provided.draggableProps}
...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{data}
</li>
)}
</Draggable>
))}
</ul>
{provided.placeholder}
</div>
)}
</Droppable>
<Droppable droppableId="DC_drop_area" >
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
<ul style={{ listStyleType: 'none', textAlign: 'left', padding: '0%', width: '100%' }} >
<h6 style={{ paddingLeft: '2%' }}>DC SuperHeroes</h6>
{DC.map((data, index) => (
<Draggable key={data} draggableId={`${data}${index}`} index={index}>
{(provided, snapshot) => (
<li
key={index}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{data}
</li>
)}
</Draggable>
))}
</ul>
{provided.placeholder}
</div>
)}
</Droppable>
</div>
)
}
// FileName: App.js
import './App.css';
// importing components from another files
import { ListComponents } from "./ListComponent";
function App() {
// List 1 consisting of all MARVEL super heroes
const list1 = ['Captain America', 'Iron Man', 'SpiderMan', 'Thor', 'Hulk', 'Black Widow', 'Loki', 'Black Panther', 'Deadpool', 'Doctor Strange', 'Ant Man', 'Captain Marvel']
// List 2 consisting of all DC super heroes
const list2 = ['BatMan', 'SuperMan', 'Wonder Woman', 'Flash', 'Green Lantern', 'AquaMan', 'Robin', 'Cyborg', 'StarFire', 'HawkGirl', 'Shazam', '']
return (
<div className="App">
<header className="App-header">
<h4>Hands on React-Beautiful-DND</h4>
<ListComponents Marvel={list1} DC={list2} />
</header>
</div>
);
}
export default App;
// Filename : ListComponent.jsx
import React from 'react';
export function ListComponents({Marvel, DC}) {
return (
<div style={{ width: '100%', display: 'flex' }}>
<div style={{ width: '25%', margin: 'auto' }}>
<ul style={{ listStyleType: 'none', textAlign: 'left' }} >
<h6>Marvel SuperHeroes</h6>
{Marvel.map((data, index) => (
<li key={index}>
{data}
</li>
))}
</ul>
</div>
<div style={{ width: '25%', margin: 'auto' }}>
<ul style={{ listStyleType: 'none', textAlign: 'left' }}>
<h6>DC SuperHeroes</h6>
{DC.map((data, index) => (
<li key={index}>
{data}
</li>
))}
</ul>
</div>
</div>
)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment