Revert "feat: move asset preview to horizontal (#870)" (#874)

This reverts commit 5e25dc5.

src/react/components/pages/editorPage/editorPage.scss

@@ -8,13 +8,11 @@
   overflow: hidden;
   position: relative;
 
-  &-bottombar {
+  &-sidebar {
     display: flex;
     flex-grow: 1;
-    flex-direction: row;
 
     &-nav {
-      height: 100%;
       width: 100%;
 
       .asset-list {

src/react/components/pages/editorPage/editorPage.tsx

@@ -187,13 +187,22 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                         icon={"fa-lock"}
                         handler={this.handleCtrlTagHotKey} />);
                 })}
-                <SplitPane split="horizontal"
+                <SplitPane split="vertical"
+                    defaultSize={this.state.thumbnailSize.width}
                     minSize={100}
                     maxSize={400}
                     paneStyle={{ display: "flex" }}
                     onChange={this.onSideBarResize}
-                    onDragFinished={this.onSideBarResizeComplete}
-                    primary={"second"}>
+                    onDragFinished={this.onSideBarResizeComplete}>
+                    <div className="editor-page-sidebar bg-lighter-1">
+                        <EditorSideBar
+                            assets={rootAssets}
+                            selectedAsset={selectedAsset ? selectedAsset.asset : null}
+                            onBeforeAssetSelected={this.onBeforeAssetSelected}
+                            onAssetSelected={this.selectAsset}
+                            thumbnailSize={this.state.thumbnailSize}
+                        />
+                    </div>
                     <div className="editor-page-content" onClick={this.onPageClick}>
                         <div className="editor-page-content-main">
                             <div className="editor-page-content-main-header">
@@ -250,15 +259,6 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                             confirmButtonColor="danger"
                             onConfirm={this.onTagDeleted} />
                     </div>
-                    <div className="editor-page-bottombar bg-lighter-1">
-                        <EditorSideBar
-                            assets={rootAssets}
-                            selectedAsset={selectedAsset ? selectedAsset.asset : null}
-                            onBeforeAssetSelected={this.onBeforeAssetSelected}
-                            onAssetSelected={this.selectAsset}
-                            thumbnailSize={this.state.thumbnailSize}
-                        />
-                    </div>
                 </SplitPane>
                 <Alert show={this.state.showInvalidRegionWarning}
                     title={strings.editorPage.messages.enforceTaggedRegions.title}

src/react/components/pages/editorPage/editorSideBar.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import EditorSideBar, { IEditorSideBarProps, IEditorSideBarState } from "./editorSideBar";
 import { ReactWrapper, mount } from "enzyme";
-import { AutoSizer, Grid } from "react-virtualized";
+import { AutoSizer, List } from "react-virtualized";
 import MockFactory from "../../../../common/mockFactory";
 
 describe("Editor SideBar", () => {
@@ -21,7 +21,7 @@ describe("Editor SideBar", () => {
         const wrapper = createComponent(props);
         expect(wrapper.exists()).toBe(true);
         expect(wrapper.find(AutoSizer).exists()).toBe(true);
-        expect(wrapper.find(Grid).exists()).toBe(true);
+        expect(wrapper.find(List).exists()).toBe(true);
     });
 
     it("Initializes state without asset selected", () => {
@@ -117,8 +117,8 @@ describe("Editor SideBar", () => {
         };
 
         const wrapper = createComponent(props);
-        const grid = wrapper.find(Grid).instance() as Grid;
-        const recomputeGridSizeSpy = jest.spyOn(grid, "recomputeGridSize");
+        const list = wrapper.find(List).instance() as List;
+        const recomputeRowHeightsSpy = jest.spyOn(list, "recomputeRowHeights");
 
         wrapper.setProps({
             thumbnailSize: {
@@ -127,27 +127,6 @@ describe("Editor SideBar", () => {
             },
         });
 
-        expect(recomputeGridSizeSpy).toBeCalled();
-    });
-
-    it("Correctly computes Grid column size", () => {
-        const props: IEditorSideBarProps = {
-            assets: testAssets,
-            onAssetSelected: onSelectAssetHandler,
-            thumbnailSize: {
-                width: 175,
-                height: 155,
-            },
-        };
-
-        const wrapper = createComponent(props);
-        const grid = wrapper.find(Grid).instance() as Grid;
-        const autoSizer = wrapper.find(AutoSizer).instance() as AutoSizer;
-        autoSizer.setState({
-            width: 150,
-            height: 91,
-        });
-
-        expect(grid.props.columnWidth()).toBe(100);
+        expect(recomputeRowHeightsSpy).toBeCalled();
     });
 });

src/react/components/pages/editorPage/editorSideBar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AutoSizer, Grid } from "react-virtualized";
+import { AutoSizer, List } from "react-virtualized";
 import { IAsset, AssetState, ISize } from "../../../../models/applicationState";
 import { AssetPreview } from "../../common/assetPreview/assetPreview";
 import { strings } from "../../../../common/strings";
@@ -38,24 +38,23 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
             : 0,
     };
 
-    private listRef: React.RefObject<Grid> = React.createRef();
+    private listRef: React.RefObject<List> = React.createRef();
 
     public render() {
         return (
             <div className="editor-page-sidebar-nav">
                 <AutoSizer>
                     {({ height, width }) => (
-                        <Grid
+                        <List
                             ref={this.listRef}
                             className="asset-list"
-                            cellRenderer={this.rowRenderer}
-                            columnCount={this.props.assets.length}
-                            columnWidth={() => this.getColumnWidth(height)}
                             height={height}
                             width={width}
-                            rowCount={1}
-                            rowHeight={height}
+                            rowCount={this.props.assets.length}
+                            rowHeight={() => this.getRowHeight(width)}
                             rowRenderer={this.rowRenderer}
+                            overscanRowCount={2}
+                            scrollToIndex={this.state.scrollToIndex}
                         />
                     )}
                 </AutoSizer>
@@ -65,7 +64,7 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
 
     public componentDidUpdate(prevProps: IEditorSideBarProps) {
         if (prevProps.thumbnailSize !== this.props.thumbnailSize) {
-            this.listRef.current.recomputeGridSize();
+            this.listRef.current.recomputeRowHeights();
         }
 
         if (!prevProps.selectedAsset && !this.props.selectedAsset) {
@@ -78,11 +77,8 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         }
     }
 
-    private getColumnWidth = (height: number) => {
-        const padding = 16;
-        const aspectRatio = 4 / 3;
-
-        return (height - padding) * aspectRatio;
+    private getRowHeight = (width: number) => {
+        return width / (4 / 3) + 16;
     }
 
     private selectAsset = (selectedAsset: IAsset): void => {
@@ -91,7 +87,7 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         this.setState({
             scrollToIndex,
         }, () => {
-            this.listRef.current.forceUpdate();
+            this.listRef.current.forceUpdateGrid();
         });
     }
 
@@ -106,8 +102,8 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         this.props.onAssetSelected(asset);
     }
 
-    private rowRenderer = ({ columnIndex, key, style }): JSX.Element => {
-        const asset = this.props.assets[columnIndex];
+    private rowRenderer = ({ key, index, style }): JSX.Element => {
+        const asset = this.props.assets[index];
         const selectedAsset = this.props.selectedAsset;
 
         return (