diff options
| -rw-r--r-- | apps/files/src/components/VirtualList.vue | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue index 3386924d928..22b54e560bf 100644 --- a/apps/files/src/components/VirtualList.vue +++ b/apps/files/src/components/VirtualList.vue @@ -146,9 +146,17 @@ export default Vue.extend({ return Math.floor(this.filesListWidth / this.itemWidth) }, + /** + * Index of the first item to be rendered + */ startIndex() { return Math.max(0, this.index - this.bufferItems) }, + + /** + * Number of items to be rendered at the same time + * For list view this is the same as `rowCount`, for grid view this is `rowCount` * `columnCount` + */ shownItems() { // If in grid mode, we need to multiply the number of rows by the number of columns if (this.gridMode) { @@ -157,6 +165,7 @@ export default Vue.extend({ return this.rowCount }, + renderedItems(): RecycledPoolItem[] { if (!this.isReady) { return [] @@ -185,6 +194,13 @@ export default Vue.extend({ }) }, + /** + * The total number of rows that are available + */ + totalRowCount() { + return Math.floor(this.dataSources.length / this.columnCount) + }, + tbodyStyle() { const isOverScrolled = this.startIndex + this.rowCount > this.dataSources.length const lastIndex = this.dataSources.length - this.startIndex - this.shownItems @@ -192,6 +208,7 @@ export default Vue.extend({ return { paddingTop: `${Math.floor(this.startIndex / this.columnCount) * this.itemHeight}px`, paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * this.itemHeight}px`, + minHeight: `${this.totalRowCount * this.itemHeight + this.beforeHeight}px`, } }, }, @@ -199,6 +216,13 @@ export default Vue.extend({ scrollToIndex(index) { this.scrollTo(index) }, + + totalRowCount() { + if (this.scrollToIndex) { + this.$nextTick(() => this.scrollTo(this.scrollToIndex)) + } + }, + columnCount(columnCount, oldColumnCount) { if (oldColumnCount === 0) { // We're initializing, the scroll position |