Merge pull request #171 from minop1205/feature-167

Update package version to 3.4.0

.storybook/preview.js

@@ -10,9 +10,9 @@ export const parameters = {
         "Basic Examples",
         [
           "Minimum configuration",
-          "AnimateExpand",
           "Custom node",
           "Custom drag preview",
+          "AnimateExpand",
           "Select node",
           "Multiple selections",
           "Opening and closing all nodes",

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 3.4.0
+
+_Nov 29, 2022_
+
+### Added
+
+- Added `enableAnimateExpand` API to support open/close animation.
+
 ## 3.3.0
 
 _Nov 2, 2022_

README.md

@@ -3,7 +3,7 @@
 A draggable and droppable React treeview component.  
 You can use render props to create each node freely.
 
-![react-dnd-treeview](https://user-images.githubusercontent.com/3772820/98293395-94441000-1ff1-11eb-81db-b84c31b03c6b.gif)
+![react-dnd-treeview](https://user-images.githubusercontent.com/3772820/204380436-4c501e28-6c0a-43ea-a317-6620d6dc1ca0.gif)
 
 ## Demo and Examples
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@minoru/react-dnd-treeview",
   "description": "A draggable / droppable React-based treeview component.",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/stories/assets/sample2.json → src/stories/assets/sample-animate-expand.json

@@ -6,208 +6,208 @@
     "text": "Folder 1"
   },
   {
-    "id": 2.1,
+    "id": 2,
     "parent": 1,
-    "text": "File 1-2.1",
+    "text": "File 1-01",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.11,
+    "id": 3,
     "parent": 1,
-    "text": "File 1-2.11",
+    "text": "File 1-02",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.12,
+    "id": 4,
     "parent": 1,
-    "text": "File 1-2.12",
+    "text": "File 1-03",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.13,
+    "id": 5,
     "parent": 1,
-    "text": "File 1-2.13",
+    "text": "File 1-04",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.14,
+    "id": 6,
     "parent": 1,
-    "text": "File 1-2.14",
+    "text": "File 1-05",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.15,
+    "id": 7,
     "parent": 1,
-    "text": "File 1-2.15",
+    "text": "File 1-06",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.16,
+    "id": 8,
     "parent": 1,
-    "text": "File 1-2.16",
+    "text": "File 1-07",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.17,
+    "id": 9,
     "parent": 1,
-    "text": "File 1-2.17",
+    "text": "File 1-08",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.18,
+    "id": 10,
     "parent": 1,
-    "text": "File 1-2.18",
+    "text": "File 1-09",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.19,
+    "id": 11,
     "parent": 1,
-    "text": "File 1-2.19",
+    "text": "File 1-10",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.2,
+    "id": 12,
     "parent": 1,
-    "text": "File 1-2.2",
+    "text": "File 1-11",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.21,
+    "id": 13,
     "parent": 1,
-    "text": "File 1-2.21",
+    "text": "File 1-12",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.22,
+    "id": 14,
     "parent": 1,
-    "text": "File 1-2.22",
+    "text": "File 1-13",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.23,
+    "id": 15,
     "parent": 1,
-    "text": "File 1-2.23",
+    "text": "File 1-14",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.24,
+    "id": 16,
     "parent": 1,
-    "text": "File 1-2.24",
+    "text": "File 1-15",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.25,
+    "id": 17,
     "parent": 1,
-    "text": "File 1-2.25",
+    "text": "File 1-16",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.26,
+    "id": 18,
     "parent": 1,
-    "text": "File 1-2.26",
+    "text": "File 1-17",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.27,
+    "id": 19,
     "parent": 1,
-    "text": "File 1-2.27",
+    "text": "File 1-18",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.28,
+    "id": 20,
     "parent": 1,
-    "text": "File 1-2.28",
+    "text": "File 1-19",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 2.29,
+    "id": 21,
     "parent": 1,
-    "text": "File 1-2.29",
+    "text": "File 1-20",
     "data": {
       "fileType": "text",
       "fileSize": "4.8MB"
     }
   },
   {
-    "id": 4,
+    "id": 22,
     "parent": 0,
     "droppable": true,
     "text": "Folder 2"
   },
   {
-    "id": 5,
-    "parent": 4,
+    "id": 23,
+    "parent": 22,
     "droppable": true,
     "text": "Folder 2-1"
   },
   {
-    "id": 6,
-    "parent": 5,
+    "id": 24,
+    "parent": 23,
     "text": "File 2-1-1",
     "data": {
       "fileType": "image",
       "fileSize": "2.1MB"
     }
   },
   {
-    "id": 7,
+    "id": 25,
     "parent": 0,
     "text": "File 3",
     "data": {

src/stories/examples/AnimateExpand/AnimateExpand.module.css

@@ -3,3 +3,11 @@
   height: 100%;
   padding: 32px;
 }
+
+.draggingSource {
+  opacity: 0.3;
+}
+
+.dropTarget {
+  background-color: #e8f0fe;
+}