feat: move asset preview to horizontal

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

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

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

@@ -187,22 +187,13 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                         icon={"fa-lock"}
                         handler={this.handleCtrlTagHotKey} />);
                 })}
-                <SplitPane split="vertical"
-                    defaultSize={this.state.thumbnailSize.width}
+                <SplitPane split="horizontal"
                     minSize={100}
                     maxSize={400}
                     paneStyle={{ display: "flex" }}
                     onChange={this.onSideBarResize}
-                    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>
+                    onDragFinished={this.onSideBarResizeComplete}
+                    primary={"second"}>
                     <div className="editor-page-content" onClick={this.onPageClick}>
                         <div className="editor-page-content-main">
                             <div className="editor-page-content-main-header">
@@ -259,6 +250,15 @@ 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, List } from "react-virtualized";
+import { AutoSizer, Grid } 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(List).exists()).toBe(true);
+        expect(wrapper.find(Grid).exists()).toBe(true);
     });
 
     it("Initializes state without asset selected", () => {
@@ -117,8 +117,8 @@ describe("Editor SideBar", () => {
         };
 
         const wrapper = createComponent(props);
-        const list = wrapper.find(List).instance() as List;
-        const recomputeRowHeightsSpy = jest.spyOn(list, "recomputeRowHeights");
+        const grid = wrapper.find(Grid).instance() as Grid;
+        const recomputeGridSizeSpy = jest.spyOn(grid, "recomputeGridSize");
 
         wrapper.setProps({
             thumbnailSize: {
@@ -127,6 +127,27 @@ describe("Editor SideBar", () => {
             },
         });
 
-        expect(recomputeRowHeightsSpy).toBeCalled();
+        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);
     });
 });

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

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