From 0ac49ae906e29330bad8c429144316bef52e683e Mon Sep 17 00:00:00 2001
From: Harshit Kedia <hkedia@paypal.com>
Date: Sun, 20 Oct 2019 15:07:27 +0530
Subject: [PATCH] add animation for deleting note

---
 src/App.css               |  7 +++++++
 src/components/Home.js    | 26 +++++++++++++++++++-------
 src/components/Notepad.js |  1 +
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 5cc95cd..3d06603 100644
--- a/src/App.css
+++ b/src/App.css
@@ -105,4 +105,11 @@ textarea {
     background: #aa73ff;
     opacity: 0.55;
     margin: 6px;
+}
+.col-md-3 {
+    transition: all 0.5s ease-in;
+}
+.remove {
+    transform: scale(0);
+    opacity: 0;
 }
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
index d3adeb4..9df66ef 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -14,7 +14,8 @@ class Home extends Component {
       {
         id: 0,
         title: "",
-        content: ""
+        content: "",
+        colClassName: "",
       }
     ]
   };
@@ -38,12 +39,22 @@ class Home extends Component {
   };
   removeNote = id => {
     let index = _.findIndex(this.state.notesData, { id });
-    this.setState(prevState => {
-      prevState.notesData.splice(index, 1);
-      return {
-        notesData: prevState.notesData
-      }
-    })
+
+    let { notesData } = this.state;
+    var noteData = {
+      ...notesData[index],
+      colClassName: 'remove'
+    }
+    notesData.splice(index, 1, noteData);
+    this.setState({ notesData: notesData });
+    setTimeout(()=>{
+      this.setState(prevState => {
+        prevState.notesData.splice(index, 1);
+        return {
+          notesData: prevState.notesData
+        }
+      })
+    },500);
   }
   handleAddNotepad = event => {
     let newNoteData = {
@@ -72,6 +83,7 @@ class Home extends Component {
               return (
                 <Notepad
                   key={noteData.id}
+                  colClassName={noteData.colClassName}
                   noteData={JSON.stringify(noteData)}
                   updateNote={this.updateNote}
                   remove={() => this.removeNote(noteData.id)}
diff --git a/src/components/Notepad.js b/src/components/Notepad.js
index 2f77f06..469a307 100644
--- a/src/components/Notepad.js
+++ b/src/components/Notepad.js
@@ -78,6 +78,7 @@ class Notepad extends PureComponent {
      <Col      
       xs={12} md={3} className="notepad-wrap"
       onDrop={this.onDrop}
+      className={this.props.colClassName}
       onDragOver={this.onDragOver}    
       onDragLeave={this.onDragLeave}
       onDragEnd={this.onDragEnd}