feat: accept dragEnabled as function (#206)

docs/.vuepress/components/FinderExample.vue

@@ -36,10 +36,12 @@ export default {
                 id: "apple",
                 label: "Apple",
                 selectable: false,
+                movable: true,
               },
               {
                 id: "banana",
                 label: "Banana",
+                movable: true,
               },
               {
                 id: "grape",
@@ -65,11 +67,13 @@ export default {
               {
                 id: "bean",
                 label: "Beans",
+                movable: true,
               },
               {
                 id: "carrot",
                 label: "Carrot",
                 selected: true,
+                movable: true,
               },
               {
                 id: "eggplant",

docs/examples.md

@@ -12,19 +12,19 @@ const tree = {
       id: "fruits",
       label: "Fruits",
       children: [
-        { id: "apple", label: "Apple" },
+        { id: "apple", label: "Apple" }
         // ...
-      ],
+      ]
     },
     {
       id: "vegetables",
       label: "Vegetables",
       children: [
-        { id: "bean", label: "Beans" },
+        { id: "bean", label: "Beans" }
         // ...
-      ],
-    },
-  ],
+      ]
+    }
+  ]
 };
 ```
 
@@ -61,7 +61,7 @@ You can filter displayed items by defining the `filter` prop:
 Where `filter` is a `Function` that takes an item as argument, and should return `true` if this item must be displayed.
 
 ```js
-const filter = (item) => item.id === "apple";
+const filter = item => item.id === "apple";
 ```
 
 <FinderExample :filter="item => item.id === 'apple'"></FinderExample>
@@ -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>

src/components/Finder.vue

@@ -126,9 +126,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,
     },
     /**

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 || dragHandleOver)"
+    :draggable="canDrag && (!options.hasDragHandle || dragHandleOver)"
     :aria-expanded="node.isLeaf ? undefined : expanded"
     v-bind="$attrs"
     @mousedown="onMouseDown"
@@ -43,7 +43,7 @@
     @focus="onFocus"
   >
     <div
-      v-if="dragEnabled && options.hasDragHandle"
+      v-if="canDrag && options.hasDragHandle"
       class="drag-handle"
       @mousedown="dragHandleOver = true"
       @mouseup="dragHandleOver = false"
@@ -175,7 +175,7 @@ export default {
       this.treeModel.selectNode(this.node.id, event.target.checked);
     },
     async onDragStart(event) {
-      if (!this.dragEnabled) {
+      if (!this.canDrag) {
         return;
       }
 
@@ -189,7 +189,7 @@ export default {
       this.treeModel.startDrag(this.node.id);
     },
     onDragOver(event) {
-      if (!this.dragEnabled) {
+      if (!this.canDrag) {
         return;
       }
 
@@ -203,7 +203,7 @@ export default {
     },
     onDragEnd() {
       this.showGhost = false;
-      if (!this.dragEnabled) {
+      if (!this.canDrag) {
         return;
       }
 

src/components/FinderList.vue

@@ -82,8 +82,8 @@ export default {
       default: false,
     },
     dragEnabled: {
-      type: Boolean,
-      default: Boolean,
+      type: [Boolean, Function],
+      default: true,
     },
     options: {
       type: Object,

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)) {

src/components/__tests__/FinderItem.test.js

@@ -160,6 +160,28 @@ describe("FinderItem", () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
 
+    it("should match snapshot if dragEnabled is a function returning `false`", () => {
+      const wrapper = mount(FinderItem, {
+        props: {
+          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, {
+        props: {
+          treeModel,
+          node,
+          dragEnabled: (node) => node.id === "test",
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+
     describe("dragstart", () => {
       it("should call treeModel.startDrag", async () => {
         const dataTransfer = {
@@ -186,6 +208,31 @@ describe("FinderItem", () => {
         expect(treeModel.startDrag).toHaveBeenCalledWith("test111");
       });
 
+      it("should call treeModel.startDrag if `dragEnabled` is a function returning `true`", async () => {
+        const dataTransfer = {
+          setDragImage: jest.fn(),
+          setData: jest.fn(),
+        };
+        const wrapper = mount(FinderItem, {
+          props: {
+            treeModel,
+            node,
+            dragEnabled: (node) => node.id === "test111",
+          },
+        });
+
+        await wrapper.find(".item").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", async () => {
         const wrapper = mount(FinderItem, {
           props: {
@@ -199,6 +246,19 @@ describe("FinderItem", () => {
         expect(treeModel.startDrag).not.toHaveBeenCalled();
       });
 
+      it("should not call treeModel.startDrag if `dragEnabled` is a function returning `false`", async () => {
+        const wrapper = mount(FinderItem, {
+          props: {
+            treeModel,
+            node,
+            dragEnabled: (node) => node.is === "test",
+          },
+        });
+
+        await wrapper.find(".item").trigger("dragstart");
+        expect(treeModel.startDrag).not.toHaveBeenCalled();
+      });
+
       it("should initialize drag image element if dragImageComponent is defined", async () => {
         const dataTransfer = {
           setDragImage: jest.fn(),