feat(archive): Fix virtualized table cannot scroll (#1146)

* feat(archive): Fix virtualized table cannot scroll * feat(archive): Address comments
box · Jan 8, 2020 · ea915b7 · ea915b7
1 parent 0ebd9ab
commit ea915b7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -4,15 +4,15 @@ import elementsMessages from 'box-elements-messages'; // eslint-disable-line
 import intlLocaleData from 'react-intl-locale-data'; // eslint-disable-line
 import Internationalize from 'box-ui-elements/es/elements/common/Internationalize';
 import fuzzySearch from 'box-ui-elements/es/utils/fuzzySearch';
+import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table';
+import { AutoSizer, Column, SortDirection } from 'react-virtualized';
 import {
     itemNameCellRenderer,
     readableTimeCellRenderer,
     sizeCellRenderer,
     sortableColumnHeaderRenderer,
 } from 'box-ui-elements/es/features/virtualized-table-renderers';
-import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table';
 import { addLocaleData } from 'react-intl';
-import { Column, SortDirection } from 'react-virtualized/dist/es/Table/index';
 import Breadcrumbs from './Breadcrumbs';
 import SearchBar from './SearchBar';
 import { TABLE_COLUMNS, VIEWS } from './constants';
@@ -189,43 +189,50 @@ class ArchiveExplorer extends React.Component {
                 <div className="bp-ArchiveExplorer" data-resin-feature="archive">
                     <SearchBar onSearch={this.handleSearch} searchQuery={searchQuery} />
                     <Breadcrumbs fullPath={fullPath} onClick={this.handleBreadcrumbClick} view={view} />
-                    <VirtualizedTable
-                        rowData={itemList}
-                        rowGetter={this.getRowData(itemList)}
-                        sort={this.handleSort}
-                        sortBy={sortBy}
-                        sortDirection={sortDirection}
-                    >
-                        {intl => [
-                            <Column
-                                key={KEY_NAME}
-                                cellRenderer={itemNameCellRenderer(intl, this.handleItemClick)}
-                                dataKey={KEY_NAME}
-                                flexGrow={3}
-                                headerRenderer={sortableColumnHeaderRenderer}
-                                label={__('filename')}
-                                width={1}
-                            />,
-                            <Column
-                                key={KEY_MODIFIED_AT}
-                                cellRenderer={readableTimeCellRenderer}
-                                dataKey={KEY_MODIFIED_AT}
-                                flexGrow={2}
-                                headerRenderer={sortableColumnHeaderRenderer}
-                                label={__('last_modified_date')}
-                                width={1}
-                            />,
-                            <Column
-                                key={KEY_SIZE}
-                                cellRenderer={sizeCellRenderer()}
-                                dataKey={KEY_SIZE}
-                                flexGrow={1}
-                                headerRenderer={sortableColumnHeaderRenderer}
-                                label={__('size')}
-                                width={1}
-                            />,
-                        ]}
-                    </VirtualizedTable>
+                    <div className="bp-ArchiveExplorer-table">
+                        <AutoSizer disableWidth>
+                            {({ height }) => (
+                                <VirtualizedTable
+                                    height={height}
+                                    rowData={itemList}
+                                    rowGetter={this.getRowData(itemList)}
+                                    sort={this.handleSort}
+                                    sortBy={sortBy}
+                                    sortDirection={sortDirection}
+                                >
+                                    {intl => [
+                                        <Column
+                                            key={KEY_NAME}
+                                            cellRenderer={itemNameCellRenderer(intl, this.handleItemClick)}
+                                            dataKey={KEY_NAME}
+                                            flexGrow={3}
+                                            headerRenderer={sortableColumnHeaderRenderer}
+                                            label={__('filename')}
+                                            width={1}
+                                        />,
+                                        <Column
+                                            key={KEY_MODIFIED_AT}
+                                            cellRenderer={readableTimeCellRenderer}
+                                            dataKey={KEY_MODIFIED_AT}
+                                            flexGrow={2}
+                                            headerRenderer={sortableColumnHeaderRenderer}
+                                            label={__('last_modified_date')}
+                                            width={1}
+                                        />,
+                                        <Column
+                                            key={KEY_SIZE}
+                                            cellRenderer={sizeCellRenderer()}
+                                            dataKey={KEY_SIZE}
+                                            flexGrow={1}
+                                            headerRenderer={sortableColumnHeaderRenderer}
+                                            label={__('size')}
+                                            width={1}
+                                        />,
+                                    ]}
+                                </VirtualizedTable>
+                            )}
+                        </AutoSizer>
+                    </div>
                 </div>
             </Internationalize>
         );

diff --git a/src/lib/viewers/archive/ArchiveExplorer.scss b/src/lib/viewers/archive/ArchiveExplorer.scss
@@ -4,3 +4,7 @@
     width: 100%;
     height: 100%;
 }
+
+.bp-ArchiveExplorer-table {
+    height: 100%;
+}
diff --git a/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js b/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
@@ -59,7 +59,6 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {
             expect(component.find('SearchBar').length).to.equal(1);
             expect(component.find('Breadcrumbs').length).to.equal(1);
             expect(component.find('Internationalize').length).to.equal(1);
-            expect(component.find('InjectIntl(VirtualizedTable)').length).to.equal(1);
         });
     });