From 2c46c5174d94bf7db4820d072b1f69b202799121 Mon Sep 17 00:00:00 2001
From: ManavMadhu <manavmadhu397@gmail.com>
Date: Fri, 24 Jul 2020 19:43:38 +0530
Subject: [PATCH] Added vertical dnd

---
 src/App.js          | 18 +++++----
 src/form.js         | 15 +++++--
 src/verticalform.js | 99 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 122 insertions(+), 10 deletions(-)
 create mode 100644 src/verticalform.js

diff --git a/src/App.js b/src/App.js
index f60b40e..7884ae6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,16 +2,17 @@ import React, { useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { v4 as uuid } from 'uuid';
 import Form from './form';
+import VertFrom from './verticalform';
 import { BrowserRouter,Route, Link } from "react-router-dom";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Button, Col } from 'reactstrap';
 
-const itemsFromBackend = [
+export const itemsFromBackend = [
   {id: uuid(), content: 'First Task'},
   {id: uuid(), content: 'Second Task'},
 ]
 
-const columnsFromBackend = 
+export const columnsFromBackend = 
   {
     [uuid()]: {
       name: 'Lead In',
@@ -40,6 +41,7 @@ const columnsFromBackend =
     },
   };
 
+
 const onDragEnd = (result, columns, setColumns) => {
   if (!result.destination) return;
   const { source, destination } = result;
@@ -76,7 +78,7 @@ const onDragEnd = (result, columns, setColumns) => {
   }
 };
 
-const handleAdd = (id, columns, setColumns, items, setItems) => {
+export const handleAdd = (id, columns, setColumns, items, setItems) => {
   const column = columns[id];
   console.log(column);
   
@@ -111,10 +113,10 @@ function App() {
           return (
             <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <h2>{column.name}</h2>
-            <Button onClick={() => handleAdd(id, columns, setColumns, items, setItems)}>+</Button>
+            <Link to="/form" onClick={() => handleAdd(id, columns, setColumns, items, setItems)}><Link component={Form}>+</Link></Link>
 
             <div style={{ margin: 8 }}>
-            <Droppable droppableId={id} key={id}>
+            <Droppable droppableId={id} key={id} >
               {(provided, snapshot) => {
                 return (
                   <div
@@ -146,9 +148,7 @@ function App() {
                                   color: 'white',
                                   ...provided.draggableProps.style
                                 }}>
-                                   <Link to="/form"></Link>
                                    <h2>Name</h2>
-                                    <Route component={Form} path="/form" />
                               </div>
                             )
                           }}
@@ -160,13 +160,17 @@ function App() {
                 )
               }}
             </Droppable>
+            
             </div>
             </div>
           )
+          
         })}
       </DragDropContext>
     </div>
     <div>
+
+        <Route component={VertFrom} />
       
       </div>
     </BrowserRouter>
diff --git a/src/form.js b/src/form.js
index ced40e0..7e87ef5 100644
--- a/src/form.js
+++ b/src/form.js
@@ -1,22 +1,31 @@
 import React, { useState } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter , Col, Row, Form, FormGroup, Label, Input} from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter , Col, Row, Form, FormGroup, Label, Input , Alert} from 'reactstrap';
+import {itemsFromBackend as ifb , columnsFromBackend as cfb , handleAdd}  from "./App";
 
 const ModalExample = (props) => {
   const {
     className
   } = props;
 
+
+
   const [modal, setModal] = useState(false);
 
   const toggle = () => setModal(!modal);
 
   const closeBtn = <button className="close" onClick={toggle}>&times;</button>;
 
+  const check =() => { console.log(cfb);};
+
+  const [columns, setColumns] = useState(cfb);
+  const [items, setItems] = useState(ifb);
+  
+
   return (
   <div>
     <Button color="success" onClick={toggle}>+</Button>
     <Modal isOpen={modal} toggle={toggle} className={className}>
-      <ModalHeader color='primary' toggle={toggle} close={closeBtn}>Add Lead</ModalHeader>
+      <Alert color="primary"><ModalHeader toggle={toggle} close={closeBtn}>Add Lead</ModalHeader></Alert>
       <ModalBody>
       <Form>
       <Row form>
@@ -89,7 +98,7 @@ const ModalExample = (props) => {
       </ModalBody>
       <ModalFooter>
         <Button color="success" onClick={toggle}>Save</Button>{' '}
-        <Button color="secondary" onClick={toggle}>Cancel</Button>
+        <Button color="danger" onClick={toggle}>Cancel</Button>
       </ModalFooter>
     </Modal>
   </div>
diff --git a/src/verticalform.js b/src/verticalform.js
new file mode 100644
index 0000000..680676d
--- /dev/null
+++ b/src/verticalform.js
@@ -0,0 +1,99 @@
+import React, { Component ,useState } from 'react';
+import {itemsFromBackend as ifb , columnsFromBackend as cfb , handleAdd}  from "./App";
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+
+// const [columns, setColumns] = useState(cfb);
+// const [items, setItems] = useState(ifb);
+
+const getItems = count =>
+  Array.from({ length: count }, (v, k) => k).map(k => ({
+    id: `item-${k}`,
+    content: `item ${k}`,
+  }));
+
+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 getListStyle = isDraggingOver => ({
+  background: isDraggingOver ? 'lightblue' : 'lightgrey',
+  display: 'flex',
+  padding: grid,
+  overflow: 'auto',
+});
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: getItems(3),
+    };
+    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,
+    });
+  }
+
+  render() {
+    return (
+      <DragDropContext onDragEnd={this.onDragEnd}>
+        <Droppable droppableId="droppable" direction="horizontal">
+          {(provided, snapshot) => (
+            <div
+              ref={provided.innerRef}
+              style={getListStyle(snapshot.isDraggingOver)}
+              {...provided.droppableProps}
+            >
+              {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={{
+                        userSelect: 'none',
+                        padding: 16,
+                        margin: '0 0 8px 0',
+                        minHeight: '50px',
+                        backgroundColor: snapshot.isDragging ? '#263B4A' : '#456C86',
+                        color: 'white',
+                        ...provided.draggableProps.style
+                      }}
+                    >
+                      <h2>Name</h2>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+}
+
+export default App;