jledentu
diff --git a/‎jest.setup.js
Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions b/‎jest.setup.js
Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions
diff --git a/‎src/components/Finder.vue
Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions b/‎src/components/Finder.vue
Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions
diff --git a/‎src/components/FinderList.vue
Copy file name to clipboard
+177-30Lines changed: 177 additions & 30 deletions b/‎src/components/FinderList.vue
Copy file name to clipboard
+177-30Lines changed: 177 additions & 30 deletions
diff --git a/‎src/components/FinderListDropZone.vue
Copy file name to clipboard
+11-7Lines changed: 11 additions & 7 deletions b/‎src/components/FinderListDropZone.vue
Copy file name to clipboard
+11-7Lines changed: 11 additions & 7 deletions
@@ -1,3 +1,9 @@
 import Vue from "vue";
 
 Vue.config.productionTip = false;
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn()
+}));
@@ -240,8 +240,28 @@ export default {
     scrollAnimationDuration: {
       type: Number,
       default: 200
+    },
+    /**
+     * Enable list virtualization of the tree.
+     */
+    virtualize: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Height of items, used for calculating the height of the virtualized list.
+     */
+    itemHeight: {
+      type: Number,
+      default: 44
     }
   },
+  provide() {
+    return {
+      virtualize: this.virtualize,
+      itemHeight: this.itemHeight
+    };
+  },
   data() {
     return {
       treeModel: {}
 
@@ -3,14 +3,8 @@ import { get } from "lodash-es";
 import FinderItem from "./FinderItem";
 import FinderListDropZone from "./FinderListDropZone";
 
-function renderItems(h, { props, expandedItemIndex }) {
-  let { items, options } = props;
-
-  if (options.sortBy) {
-    items = [...items].sort(options.sortBy);
-  }
-
-  return items.map((item, index) => [
+function renderItem(h, { props, item, index, expandedItemIndex }) {
+  return [
     ...[
       props.dragEnabled && (
         <FinderListDropZone
@@ -25,6 +19,7 @@ function renderItems(h, { props, expandedItemIndex }) {
     ],
 
     <FinderItem
+      ref={`item-${item.id}`}
       key={`item-${item.id}`}
       node={item}
       treeModel={props.treeModel}
@@ -35,7 +30,7 @@ function renderItems(h, { props, expandedItemIndex }) {
     >
       {item.label}
     </FinderItem>
-  ]);
+  ];
 }
 
 function getPreviousItemElement(element) {
@@ -62,7 +57,11 @@ function getNextItemElement(element) {
 
 export default {
   name: "FinderList",
-  functional: true,
+  components: {
+    FinderItem,
+    FinderListDropZone
+  },
+  inject: ["virtualize", "itemHeight"],
   props: {
     parent: {
       type: Object,
@@ -93,20 +92,78 @@ export default {
       default: false
     }
   },
-  render(h, { props, listeners }) {
-    const separatorColor = get(props, "options.theme.separatorColor", "");
-    const separatorWidth = get(props, "options.theme.separatorWidth", "");
-    const style = {
-      ...(separatorColor && { borderColor: separatorColor }),
-      ...(separatorWidth && { borderWidth: separatorWidth })
+  data() {
+    return {
+      listWidth: null,
+      visibleStart: null,
+      visibleEnd: null
     };
+  },
+  computed: {
+    sortedItems() {
+      return this.options.sortBy
+        ? [...this.items].sort(this.options.sortBy)
+        : this.items;
+    },
+    topOffset() {
+      return this.visibleStart * this.itemHeight;
+    },
+    bottomOffset() {
+      return (this.items.length - this.visibleEnd) * this.itemHeight;
+    },
+    style() {
+      const separatorColor = get(this.options, "theme.separatorColor", "");
+      const separatorWidth = get(this.options, "theme.separatorWidth", "");
+      return {
+        ...(separatorColor && { borderColor: separatorColor }),
+        ...(separatorWidth && { borderWidth: separatorWidth }),
+        ...(this.listWidth && { width: `${this.listWidth}px` })
+      };
+    },
+    expandedItemIndex() {
+      return Math.max(
+        0,
+        this.sortedItems.findIndex(item =>
+          this.treeModel.isNodeExpanded(item.id)
+        )
+      );
+    }
+  },
+  watch: {
+    parent: {
+      immediate: true,
+      handler(newParent, oldParent) {
+        if (newParent.id !== oldParent?.id && this.$el) {
+          this.listWidth = null;
+          this.$el.scrollTop = 0;
+          this.updateVisibleRange();
+        }
+      }
+    },
+    "items.length": {
+      handler() {
+        this.updateVisibleRange();
+      }
+    }
+  },
+  mounted() {
+    this.updateVisibleRange();
 
-    const expandedItemIndex = Math.max(
-      0,
-      props.items.findIndex(item => props.treeModel.isNodeExpanded(item.id))
-    );
+    const resizeObserver = new ResizeObserver(() => {
+      this.updateVisibleRange();
+    });
+
+    resizeObserver.observe(this.$el);
 
-    function navigate(event) {
+    this.$el.addEventListener("keydown", this.navigate);
+  },
+  destroyed() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  },
+  methods: {
+    navigate(event) {
       let sibling;
       if (event.key === "ArrowDown") {
         sibling = getNextItemElement(event.target);
@@ -117,24 +174,114 @@ export default {
       if (sibling) {
         sibling.focus();
       }
+    },
+    onScroll() {
+      if (!this.virtualize || this.isUpdatingVisibleRange) {
+        return;
+      }
+
+      window.requestAnimationFrame(() => {
+        this.updateVisibleRange();
+        this.isUpdatingVisibleRange = false;
+      });
+
+      this.isUpdatingVisibleRange = true;
+    },
+    getOffset() {
+      Math.floor(this.$el.scrollTop / this.itemHeight) + 1;
+    },
+    getVirtualRange() {
+      const overscan = 5;
+      const start = Math.max(
+        0,
+        Math.floor(this.$el.scrollTop / this.itemHeight) + 1 - overscan
+      );
+      const capacity = Math.ceil(this.$el.clientHeight / this.itemHeight);
+      const end = Math.min(start + capacity + overscan, this.items.length);
+
+      return { start, end };
+    },
+    async updateVisibleRange() {
+      if (!this.virtualize) {
+        return;
+      }
+
+      const { start, end } = this.getVirtualRange();
+
+      if (start === this.visibleStart && end === this.visibleEnd) {
+        return;
+      }
+
+      this.visibleStart = start;
+      this.visibleEnd = end;
+
+      // Wait for re-rendering
+      await this.$nextTick();
+
+      // Set initial list width to avoid horizontal jumping when scrolling
+      if (!this.listWidth) {
+        this.listWidth = this.$el.clientWidth;
+      }
+
+      // We could have lost focus on focused item while updating the visible range
+      // so we need to refocus it
+      const focusedItem = this.$refs[`item-${this.treeModel.focusedNodeId}`];
+      if (
+        focusedItem &&
+        focusedItem.$el &&
+        focusedItem.$el !== document.activeElement
+      ) {
+        focusedItem.$el.focus({
+          preventScroll: true
+        });
+      }
     }
+  },
+  render(h) {
+    const expandedItemIndex = Math.max(
+      0,
+      this.sortedItems.findIndex(item => this.treeModel.isNodeExpanded(item.id))
+    );
+
+    const isVisible = index =>
+      !this.virtualize ||
+      (index >= this.visibleStart && index <= this.visibleEnd);
 
     return [
-      <div class="list" style={style} vOn:keydown={navigate}>
+      <div class="list" style={this.style} vOn:scroll={this.onScroll}>
         {[
-          ...renderItems(h, { props, listeners, expandedItemIndex }),
+          ...(this.virtualize
+            ? [<div style={{ flexShrink: 0, height: `${this.topOffset}px` }} />]
+            : []),
+          ...this.sortedItems.map(
+            (item, index) =>
+              isVisible(index) &&
+              renderItem(h, {
+                props: this.$props,
+                item,
+                index,
+                expandedItemIndex
+              })
+          ),
           ...[
-            props.dragEnabled && (
+            this.dragEnabled && (
               <FinderListDropZone
                 class="last"
-                treeModel={props.treeModel}
-                node={props.parent}
-                dragEnabled={props.dragEnabled}
-                index={props.items.length}
-                options={props.options}
+                treeModel={this.treeModel}
+                node={this.parent}
+                dragEnabled={this.dragEnabled}
+                index={this.items.length}
+                options={this.options}
               />
             )
-          ]
+          ],
+          ...(this.virtualize
+            ? [
+                <div
+                  style={{ flexShrink: 0, height: `${this.bottomOffset}px` }}
+                />
+              ]
+            : [])
         ]}
       </div>
     ];
 
@@ -54,13 +54,12 @@ export default {
       default: () => ({})
     }
   },
-  data: () => ({
-    dragCounter: 0
-  }),
   computed: {
     dragOver() {
       return (
-        this.treeModel.isDragging() && this.canDrop && this.dragCounter > 0
+        this.treeModel.isDragging() &&
+        this.canDrop &&
+        this.treeModel.isDragOver(this.dropzoneId)
       );
     },
     theme() {
@@ -82,18 +81,23 @@ export default {
         !this.options.canDrop ||
         this.options.canDrop(this.node.id, this.treeModel.draggedNodeId)
       );
+    },
+    dropzoneId() {
+      return `drop-zone-${this.node.id}${
+        this.index ? `____i${this.index}` : ""
+      }`;
     }
   },
   methods: {
     onDragEnter() {
-      this.dragCounter++;
+      this.treeModel.onDragEnter(this.dropzoneId);
     },
     onDragLeave() {
-      this.dragCounter--;
+      this.treeModel.onDragLeave(this.dropzoneId);
     },
     onDrop(event) {
       event.preventDefault();
-      this.dragCounter = 0;
+      this.treeModel.dragReset();
       if (!this.canDrop || !this.treeModel.isDragging()) {
         return;
       }