feat(virtual-list): support virtual items auto height

Author: nolimits4web

src/core/components/virtual-list/virtual-list-class.js

@@ -123,6 +123,7 @@ class VirtualList extends Framework7Class {
       maxBufferHeight: 0,
       listHeight: undefined,
       dynamicHeight: typeof vl.params.height === 'function',
+      autoHeight: vl.params.height === 'auto',
     });
 
     // Install Modules
@@ -170,10 +171,12 @@ class VirtualList extends Framework7Class {
     return vl;
   }
 
-  setListSize() {
+  setListSize(autoHeightRerender) {
     const vl = this;
     const items = vl.filteredItems || vl.items;
-    vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
+    if (!autoHeightRerender) {
+      vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
+    }
     if (vl.dynamicHeight) {
       vl.listHeight = 0;
       vl.heights = [];
@@ -182,6 +185,27 @@ class VirtualList extends Framework7Class {
         vl.listHeight += itemHeight;
         vl.heights.push(itemHeight);
       }
+    } else if (vl.autoHeight) {
+      vl.listHeight = 0;
+      if (!vl.heights) vl.heights = [];
+      if (!vl.heightsCalculated) vl.heightsCalculated = [];
+      const renderedItems = {};
+      vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach((el) => {
+        renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;
+      });
+      for (let i = 0; i < items.length; i += 1) {
+        const renderedItem = renderedItems[i];
+        if (renderedItem) {
+          if (!vl.heightsCalculated.includes(i)) {
+            vl.heights[i] = renderedItem.offsetHeight;
+            vl.heightsCalculated.push(i);
+          }
+        }
+        if (typeof vl.heights[i] === 'undefined') {
+          vl.heights[i] = 40;
+        }
+        vl.listHeight += vl.heights[i];
+      }
     } else {
       vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;
       vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);
@@ -222,7 +246,7 @@ class VirtualList extends Framework7Class {
     let toIndex;
     let heightBeforeFirstItem = 0;
     let heightBeforeLastItem = 0;
-    if (vl.dynamicHeight) {
+    if (vl.dynamicHeight || vl.autoHeight) {
       let itemTop = 0;
       let itemHeight;
       vl.maxBufferHeight = vl.pageHeight;
@@ -292,7 +316,7 @@ class VirtualList extends Framework7Class {
 
       // Set item top position
       if (i === fromIndex) {
-        if (vl.dynamicHeight) {
+        if (vl.dynamicHeight || vl.autoHeight) {
           topPosition = heightBeforeFirstItem;
         } else {
           topPosition = (i * vl.params.height) / vl.params.cols;
@@ -311,7 +335,7 @@ class VirtualList extends Framework7Class {
 
     // Update list height with not updatable scroll
     if (!vl.updatableScroll) {
-      if (vl.dynamicHeight) {
+      if (vl.dynamicHeight || vl.autoHeight) {
         vl.itemsWrapEl.style.height = `${heightBeforeLastItem}px`;
       } else {
         vl.itemsWrapEl.style.height = `${(i * vl.params.height) / vl.params.cols}px`;
@@ -351,6 +375,11 @@ class VirtualList extends Framework7Class {
         items: renderExternalItems,
       });
     }
+    if (vl.autoHeight) {
+      requestAnimationFrame(() => {
+        vl.setListSize(true);
+      });
+    }
   }
 
   // Filter
@@ -381,7 +410,7 @@ class VirtualList extends Framework7Class {
     const vl = this;
     if (index > vl.items.length) return false;
     let itemTop = 0;
-    if (vl.dynamicHeight) {
+    if (vl.dynamicHeight || vl.autoHeight) {
       for (let i = 0; i < index; i += 1) {
         itemTop += vl.heights[i];
       }
@@ -407,6 +436,7 @@ class VirtualList extends Framework7Class {
   handleResize() {
     const vl = this;
     if (vl.isVisible()) {
+      vl.heightsCalculated = [];
       vl.setListSize();
       vl.render(true);
     }
@@ -589,6 +619,7 @@ class VirtualList extends Framework7Class {
     if (deleteCache && vl.params.cache) {
       vl.domCache = {};
     }
+    vl.heightsCalculated = [];
     vl.setListSize();
     vl.render(true);
   }

src/core/components/virtual-list/virtual-list.d.ts

@@ -80,8 +80,8 @@ export namespace VirtualList {
     rowsAfter?: number;
     /** Number of items per row. Doesn't compatible when using Virtual List with dynamic height (default 1) */
     cols?: number;
-    /** If number - list item height in px. If function then function should return item height. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
-    height?: number | Function;
+    /** If number - list item height in px. If function then function should return item height. If "auto" - will automatically calculate each items heights. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
+    height?: number | Function | string;
     /** This optional function allows to use custom function to render item HTML. It could be used instead of template parameter */
     renderItem?(item: any): string;
     /** This optional function allows to render DOM items using some custom method. Useful in case it is used (e.g.) with Vue/React plugin to pass DOM rendering and manipulation to Vue/React. renderParameters conaints object with the following properties: fromIndex, toIndex, listHeight, topPosition, items */