feat: accept dragEnabled as function (#200)

* feat: accept dragEnabled as function
jledentu · Mar 17, 2023 · 2d2b935 · 2d2b935
1 parent 8af7531
commit 2d2b935
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 13 deletions.
diff --git a/docs/.vuepress/components/FinderExample.vue b/docs/.vuepress/components/FinderExample.vue
@@ -35,11 +35,13 @@ export default {
               {
                 id: "apple",
                 label: "Apple",
-                selectable: false
+                selectable: false,
+                movable: true
               },
               {
                 id: "banana",
-                label: "Banana"
+                label: "Banana",
+                movable: true
               },
               {
                 id: "grape",
@@ -64,12 +66,14 @@ export default {
             children: [
               {
                 id: "bean",
-                label: "Beans"
+                label: "Beans",
+                movable: true
               },
               {
                 id: "carrot",
                 label: "Carrot",
-                selected: true
+                selected: true,
+                movable: true
               },
               {
                 id: "eggplant",

diff --git a/docs/examples.md b/docs/examples.md
@@ -79,3 +79,11 @@ You can enable the drag and drop of items with `dragEnabled`:
 You can show handles to drag items with `hasDragHandle`:
 
 <FinderExample :dragEnabled="true" :has-drag-handle="true"></FinderExample>
+
+If you want to enable the drag of only some items, you can set a function as `dragEnabled` prop:
+
+```js
+const dragEnabled = item => item.movable;
+```
+
+<FinderExample :dragEnabled="item => item.movable" :has-drag-handle="true"></FinderExample>
diff --git a/src/components/Finder.vue b/src/components/Finder.vue
@@ -125,9 +125,10 @@ export default {
     },
     /**
      * Enable the drag & drop of items.
+     * Can be a `boolean`, to enable the behaviour globally, or a `function` that indicates if an item can be dragged.
      */
     dragEnabled: {
-      type: Boolean,
+      type: [Boolean, Function],
       default: false
     },
     /**

diff --git a/src/components/FinderItem.vue b/src/components/FinderItem.vue
@@ -6,9 +6,9 @@
       node.cssClass || '',
       {
         expanded,
-        draggable: dragEnabled && !options.hasDragHandle,
+        draggable: canDrag && !options.hasDragHandle,
         dragged,
-        'has-drag-handle': dragEnabled && options.hasDragHandle,
+        'has-drag-handle': canDrag && options.hasDragHandle,
         'drag-over': dragOver,
         'no-drop': treeModel.isDragging() && !canDrop
       }
@@ -29,7 +29,7 @@
       ...(dragOver &&
         theme.dropZoneBgColor && { backgroundColor: theme.dropZoneBgColor })
     }"
-    :draggable="dragEnabled && !options.hasDragHandle"
+    :draggable="canDrag && !options.hasDragHandle"
     :aria-expanded="node.isLeaf ? undefined : expanded"
     @mousedown="onMouseDown"
     @click="onClick"
@@ -42,7 +42,7 @@
     @focus="onFocus"
   >
     <div
-      v-if="dragEnabled && options.hasDragHandle"
+      v-if="canDrag && options.hasDragHandle"
       class="drag-handle"
       @mousedown="$el.setAttribute('draggable', 'true')"
       @mouseup="$el.setAttribute('draggable', 'false')"
@@ -152,7 +152,7 @@ export default {
       this.treeModel.selectNode(this.node.id, event.target.checked);
     },
     onDragStart(event) {
-      if (!this.dragEnabled) {
+      if (!this.canDrag) {
         return;
       }
 
@@ -165,7 +165,7 @@ export default {
       this.treeModel.startDrag(this.node.id);
     },
     onDragOver(event) {
-      if (!this.dragEnabled) {
+      if (!this.canDrag) {
         return;
       }
 
@@ -182,7 +182,7 @@ export default {
         this.ghost.parentNode.removeChild(this.ghost);
         this.ghost = null;
       }
-      if (!this.dragEnabled) {
+      if (!this.canDrag) {
         return;
       }
 

diff --git a/src/components/FinderListDropZone.vue b/src/components/FinderListDropZone.vue
@@ -42,7 +42,7 @@ export default {
       required: true
     },
     dragEnabled: {
-      type: Boolean,
+      type: [Boolean, Function],
       default: false
     },
     index: {
@@ -66,6 +66,13 @@ export default {
     theme() {
       return get(this, "options.theme", {});
     },
+    canDrag() {
+      if (typeof this.dragEnabled === "function") {
+        return this.dragEnabled(this.node);
+      }
+
+      return this.dragEnabled;
+    },
     canDrop() {
       // Cannot drop on a descendant of itself
       if (this.treeModel.isParent(this.treeModel.draggedNodeId, this.node.id)) {

diff --git a/src/components/__tests__/FinderItem.test.js b/src/components/__tests__/FinderItem.test.js
@@ -147,6 +147,28 @@ describe("FinderItem", () => {
       expect(wrapper).toMatchSnapshot();
     });
 
+    it("should match snapshot if dragEnabled is a function returning `false`", () => {
+      const wrapper = mount(FinderItem, {
+        propsData: {
+          treeModel,
+          node,
+          dragEnabled: node => node.id === "test111"
+        }
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it("should match snapshot if dragEnabled is a function returning `true`", () => {
+      const wrapper = mount(FinderItem, {
+        propsData: {
+          treeModel,
+          node,
+          dragEnabled: node => node.id === "test"
+        }
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+
     describe("dragstart", () => {
       it("should call treeModel.startDrag", () => {
         const dataTransfer = {
@@ -173,6 +195,31 @@ describe("FinderItem", () => {
         expect(treeModel.startDrag).toHaveBeenCalledWith("test111");
       });
 
+      it("should call treeModel.startDrag if `dragEnabled` is a function returning `true`", () => {
+        const dataTransfer = {
+          setDragImage: jest.fn(),
+          setData: jest.fn()
+        };
+        const wrapper = mount(FinderItem, {
+          propsData: {
+            treeModel,
+            node,
+            dragEnabled: node => node.id === "test111"
+          }
+        });
+
+        wrapper.trigger("dragstart", {
+          dataTransfer
+        });
+
+        expect(dataTransfer.setDragImage).not.toHaveBeenCalled();
+        expect(dataTransfer.setData).toHaveBeenCalledWith(
+          "text/plain",
+          "test111"
+        );
+        expect(treeModel.startDrag).toHaveBeenCalledWith("test111");
+      });
+
       it("should not call treeModel.startDrag if `dragEnabled` is false", () => {
         const wrapper = mount(FinderItem, {
           propsData: {
@@ -186,6 +233,19 @@ describe("FinderItem", () => {
         expect(treeModel.startDrag).not.toHaveBeenCalled();
       });
 
+      it("should not call treeModel.startDrag if `dragEnabled` is a function returning `false`", () => {
+        const wrapper = mount(FinderItem, {
+          propsData: {
+            treeModel,
+            node,
+            dragEnabled: node => node.is === "test"
+          }
+        });
+
+        wrapper.trigger("dragstart");
+        expect(treeModel.startDrag).not.toHaveBeenCalled();
+      });
+
       it("should initialize drag image element if `dragImageComponent` is defined", () => {
         const dataTransfer = {
           setDragImage: jest.fn(),

diff --git a/src/components/__tests__/__snapshots__/FinderItem.test.js.snap b/src/components/__tests__/__snapshots__/FinderItem.test.js.snap
@@ -9,6 +9,24 @@ exports[`FinderItem Drag & drop should match snapshot if dragEnabled is \`true\`
 </div>
 `;
 
+exports[`FinderItem Drag & drop should match snapshot if dragEnabled is a function returning \`false\` 1`] = `
+<div role="button" draggable="true" class="item draggable">
+  <!---->
+  <!---->
+  <div item="[object Object]" class="inner-item"></div>
+  <div class="arrow"></div>
+</div>
+`;
+
+exports[`FinderItem Drag & drop should match snapshot if dragEnabled is a function returning \`true\` 1`] = `
+<div role="button" draggable="false" class="item">
+  <!---->
+  <!---->
+  <div item="[object Object]" class="inner-item"></div>
+  <div class="arrow"></div>
+</div>
+`;
+
 exports[`FinderItem Expand should match snapshot if expanded 1`] = `
 <div role="button" draggable="false" aria-expanded="true" class="item expanded">
   <!---->