From b1fdf8e9263750215fd7b3e87a0c56eb8350cec7 Mon Sep 17 00:00:00 2001 From: Merlijn Vos Date: Thu, 20 Jul 2023 21:49:43 +0800 Subject: [PATCH] Add VirtualList to ProviderView (#4566) * Add VirtualList to ProviderView * Import correctly from lib * fixup! Import correctly from lib * fixup! fixup! Import correctly from lib * Really do it this time * Only virtual list for lists * fixup! Only virtual list for lists * Fix scroll * Set hardcoded width/height for img, as recommened --------- Co-authored-by: Artur Paikin --- .../dashboard/src/components/FileList.jsx | 2 +- packages/@uppy/provider-views/src/Browser.jsx | 149 ++++++++++++------ .../src/Item/components/ItemIcon.jsx | 2 +- .../src/ProviderView/ProviderView.jsx | 1 + .../uppy-ProviderBrowser-viewType--list.scss | 2 - packages/@uppy/utils/package.json | 4 +- .../components => utils/src}/VirtualList.jsx | 0 yarn.lock | 1 + 8 files changed, 112 insertions(+), 49 deletions(-) rename packages/@uppy/{dashboard/src/components => utils/src}/VirtualList.jsx (100%) diff --git a/packages/@uppy/dashboard/src/components/FileList.jsx b/packages/@uppy/dashboard/src/components/FileList.jsx index 0568a929a4..f8721f1c6c 100644 --- a/packages/@uppy/dashboard/src/components/FileList.jsx +++ b/packages/@uppy/dashboard/src/components/FileList.jsx @@ -1,7 +1,7 @@ import { h } from 'preact' import { useMemo } from 'preact/hooks' +import VirtualList from '@uppy/utils/lib/VirtualList' import FileItem from './FileItem/index.jsx' -import VirtualList from './VirtualList.jsx' function chunks (list, size) { const chunked = [] diff --git a/packages/@uppy/provider-views/src/Browser.jsx b/packages/@uppy/provider-views/src/Browser.jsx index 06d2bf7bd0..9b249824a4 100644 --- a/packages/@uppy/provider-views/src/Browser.jsx +++ b/packages/@uppy/provider-views/src/Browser.jsx @@ -2,12 +2,71 @@ import { h } from 'preact' import classNames from 'classnames' import remoteFileObjToLocal from '@uppy/utils/lib/remoteFileObjToLocal' +import { useMemo } from 'preact/hooks' +import VirtualList from '@uppy/utils/lib/VirtualList' import SearchFilterInput from './SearchFilterInput.jsx' import FooterActions from './FooterActions.jsx' import Item from './Item/index.jsx' const VIRTUAL_SHARED_DIR = 'shared-with-me' +function ListItem (props) { + const { + currentSelection, + uppyFiles, + viewType, + isChecked, + toggleCheckbox, + recordShiftKeyPress, + showTitles, + i18n, + validateRestrictions, + getNextFolder, + columns, + f, + } = props + + if (f.isFolder) { + return Item({ + columns, + showTitles, + viewType, + i18n, + id: f.id, + title: f.name, + getItemIcon: () => f.icon, + isChecked: isChecked(f), + toggleCheckbox: (event) => toggleCheckbox(event, f), + recordShiftKeyPress, + type: 'folder', + isDisabled: isChecked(f)?.loading, + isCheckboxDisabled: f.id === VIRTUAL_SHARED_DIR, + handleFolderClick: () => getNextFolder(f), + }) + } + const restrictionError = validateRestrictions(remoteFileObjToLocal(f), [ + ...uppyFiles, + ...currentSelection, + ]) + + return Item({ + id: f.id, + title: f.name, + author: f.author, + getItemIcon: () => f.icon, + isChecked: isChecked(f), + toggleCheckbox: (event) => toggleCheckbox(event, f), + recordShiftKeyPress, + columns, + showTitles, + viewType, + i18n, + type: 'file', + isDisabled: restrictionError && !isChecked(f), + restrictionError, + }) +} + function Browser (props) { const { currentSelection, @@ -37,10 +96,13 @@ function Browser (props) { done, columns, noResultsLabel, + loadAllFiles, } = props const selected = currentSelection.length + const rows = useMemo(() => [...folders, ...files], [folders, files]) + return (
{noResultsLabel}
+ } + + if (loadAllFiles) { return ( -
- {noResultsLabel} +
+
    + ( + + )} + rowHeight={31} + /> +
) } @@ -101,48 +188,22 @@ function Browser (props) { // making
    not focusable for firefox tabIndex="-1" > - {folders.map((folder) => { - return Item({ - columns, - showTitles, - viewType, - i18n, - id: folder.id, - title: folder.name, - getItemIcon: () => folder.icon, - isChecked: isChecked(folder), - toggleCheckbox: (event) => toggleCheckbox(event, folder), - recordShiftKeyPress, - type: 'folder', - isDisabled: isChecked(folder)?.loading, - isCheckboxDisabled: folder.id === VIRTUAL_SHARED_DIR, - handleFolderClick: () => getNextFolder(folder), - }) - })} - - {files.map((file) => { - const restrictionError = validateRestrictions( - remoteFileObjToLocal(file), - [...uppyFiles, ...currentSelection], - ) - - return Item({ - id: file.id, - title: file.name, - author: file.author, - getItemIcon: () => file.icon, - isChecked: isChecked(file), - toggleCheckbox: (event) => toggleCheckbox(event, file), - recordShiftKeyPress, - columns, - showTitles, - viewType, - i18n, - type: 'file', - isDisabled: restrictionError && !isChecked(file), - restrictionError, - }) - })} + {rows.map((f) => ( + + ))}
) diff --git a/packages/@uppy/provider-views/src/Item/components/ItemIcon.jsx b/packages/@uppy/provider-views/src/Item/components/ItemIcon.jsx index bfab51f4b2..8a4f9c9d77 100644 --- a/packages/@uppy/provider-views/src/Item/components/ItemIcon.jsx +++ b/packages/@uppy/provider-views/src/Item/components/ItemIcon.jsx @@ -38,7 +38,7 @@ export default (props) => { return default: { const { alt } = props - return {alt} + return {alt} } } } diff --git a/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx b/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx index 7bc38b0ccc..c4ccfccbf6 100644 --- a/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx +++ b/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx @@ -474,6 +474,7 @@ export default class ProviderView extends View { username: this.username, getNextFolder: this.getNextFolder, getFolder: this.getFolder, + loadAllFiles: this.opts.loadAllFiles, // For SearchFilterInput component showSearchFilter: targetViewOptions.showFilter, diff --git a/packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--list.scss b/packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--list.scss index dbf816ab78..42b0e208e5 100644 --- a/packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--list.scss +++ b/packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--list.scss @@ -83,8 +83,6 @@ img, svg { - max-width: 20px; - max-height: 20px; margin-inline-end: 8px; } diff --git a/packages/@uppy/utils/package.json b/packages/@uppy/utils/package.json index 1c78e7b2e1..53bafcd4df 100644 --- a/packages/@uppy/utils/package.json +++ b/packages/@uppy/utils/package.json @@ -64,10 +64,12 @@ "./lib/getDroppedFiles": "./lib/getDroppedFiles/index.js", "./lib/FOCUSABLE_ELEMENTS.js": "./lib/FOCUSABLE_ELEMENTS.js", "./lib/fileFilters": "./lib/fileFilters.js", + "./lib/VirtualList": "./lib/VirtualList.js", "./src/microtip.scss": "./src/microtip.scss" }, "dependencies": { - "lodash": "^4.17.21" + "lodash": "^4.17.21", + "preact": "^10.16.0" }, "devDependencies": { "@jest/globals": "^29.0.0" diff --git a/packages/@uppy/dashboard/src/components/VirtualList.jsx b/packages/@uppy/utils/src/VirtualList.jsx similarity index 100% rename from packages/@uppy/dashboard/src/components/VirtualList.jsx rename to packages/@uppy/utils/src/VirtualList.jsx diff --git a/yarn.lock b/yarn.lock index cf4ab8d2b2..2e33ef3daf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11592,6 +11592,7 @@ __metadata: dependencies: "@jest/globals": ^29.0.0 lodash: ^4.17.21 + preact: ^10.16.0 languageName: unknown linkType: soft