refactor(grid-view): migrate GridView from Flow to TypeScript (#4734)

Author: bonchevskyi

src/components/grid-view/GridView.js src/components/grid-view/GridView.js.flowsrc/components/grid-view/GridView.js renamed to src/components/grid-view/GridView.js.flow

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { CellMeasurer, CellMeasurerCache } from '@box/react-virtualized/dist/es/CellMeasurer';
+import Table, { Column } from '@box/react-virtualized/dist/es/Table';
+import getProp from 'lodash/get';
+import GridViewSlot from './GridViewSlot';
+import type { Collection } from '../../common/types/core';
+
+import '@box/react-virtualized/styles.css';
+import './GridView.scss';
+
+interface TableCellRendererParams {
+    /** Data key associated with the rendered table column */
+    dataKey: string;
+    /** Parent virtualized grid passed to CellMeasurer */
+    parent: unknown;
+    /** Index of the row being rendered */
+    rowIndex: number;
+}
+
+export interface GridViewProps {
+    /** Number of item columns displayed in each row */
+    columnCount: number;
+    /** Collection containing the items rendered in the grid */
+    currentCollection: Collection;
+    /** Height of the virtualized grid */
+    height: number;
+    /** Row to scroll into view */
+    scrollToRow?: number;
+    /** Renders the contents of a grid slot */
+    slotRenderer: (slotIndex: number) => React.ReactElement | null | undefined;
+    /** Width of the virtualized grid */
+    width: number;
+}
+
+interface RowGetterParams {
+    index: number;
+}
+
+class GridView extends React.Component<GridViewProps> {
+    cache = new CellMeasurerCache({
+        defaultHeight: 300,
+        defaultWidth: 400,
+        fixedWidth: true,
+    });
+
+    componentDidUpdate({ columnCount: prevColumnCount, width: prevWidth }: GridViewProps) {
+        const { columnCount, width } = this.props;
+
+        // The React Virtualized Table must be notified whenever the heights of rows
+        // could potentially change. If omitted, rows are sized
+        // incorrectly resulting in gaps or content overlap.
+        if (columnCount !== prevColumnCount || width !== prevWidth) {
+            this.cache.clearAll();
+            this.forceUpdate();
+        }
+    }
+
+    cellRenderer = ({ dataKey, parent, rowIndex }: TableCellRendererParams) => {
+        const { columnCount, currentCollection, slotRenderer } = this.props;
+        const count = getProp(currentCollection, 'items.length', 0);
+        const contents = [];
+
+        const startingIndex = rowIndex * columnCount;
+        const maxSlotIndex = Math.min(startingIndex + columnCount, count);
+
+        for (let slotIndex = startingIndex; slotIndex < maxSlotIndex; slotIndex += 1) {
+            const { id, selected } = getProp(currentCollection, `items[${slotIndex}]`);
+
+            // using item's id as key is important for renrendering.  React Virtualized Table rerenders
+            // on every 1px scroll, so using improper key would lead to image flickering in each
+            // card of the grid view when scrolling.
+            contents.push(
+                <GridViewSlot
+                    key={id}
+                    selected={selected}
+                    slotIndex={slotIndex}
+                    slotRenderer={slotRenderer}
+                    slotWidth={`${(100 / columnCount).toFixed(4)}%`}
+                />,
+            );
+        }
+
+        return (
+            <CellMeasurer key={dataKey} cache={this.cache} columnIndex={0} parent={parent} rowIndex={rowIndex}>
+                <div className="bdl-GridView-row">{contents}</div>
+            </CellMeasurer>
+        );
+    };
+
+    rowGetter = ({ index }: RowGetterParams) => {
+        return index;
+    };
+
+    render() {
+        const { columnCount, currentCollection, height, scrollToRow = 0, width } = this.props;
+        const count = getProp(currentCollection, 'items.length', 0);
+        const rowCount = Math.ceil(count / columnCount);
+
+        return (
+            <Table
+                className="bdl-GridView"
+                disableHeader
+                height={height}
+                rowCount={rowCount}
+                rowGetter={this.rowGetter}
+                rowHeight={this.cache.rowHeight}
+                width={width}
+                gridClassName="bdl-GridView-body"
+                rowClassName="bdl-GridView-tableRow"
+                scrollToIndex={scrollToRow}
+                sortDirection="ASC"
+            >
+                <Column cellRenderer={this.cellRenderer} dataKey="" flexGrow={1} width={400} />
+            </Table>
+        );
+    }
+}
+
+export default GridView;

src/components/grid-view/GridView.tsx

@@ -7,10 +7,15 @@ import './GridViewSlider.scss';
 import messages from '../../elements/common/messages';
 
 export interface GridViewSliderProps {
+    /** Current number of columns displayed in the grid */
     columnCount: number;
+    /** Maximum number of columns supported by the grid */
     gridMaxColumns: number;
+    /** Minimum number of columns supported by the grid */
     gridMinColumns: number;
+    /** Maximum number of columns available at the current viewport size */
     maxColumnCount: number;
+    /** Called when the selected column count changes */
     onChange: (newSliderValue: number) => void;
 }
 

src/components/grid-view/GridViewSlider.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import './GridViewSlot.scss';
+
+export interface GridViewSlotProps {
+    /** Whether the item rendered in this slot is selected */
+    selected: boolean;
+    /** Index of the item rendered in this slot */
+    slotIndex: number;
+    /** Renders the contents of the slot */
+    slotRenderer: (slotIndex: number) => React.ReactElement | null | undefined;
+    /** Width assigned to the slot */
+    slotWidth: string;
+}
+
+const GridViewSlot = ({ selected, slotIndex, slotRenderer, slotWidth }: GridViewSlotProps) => (
+    <div className="bdl-GridViewSlot" style={{ maxWidth: slotWidth, flexBasis: slotWidth }}>
+        <div
+            className={classNames('bdl-GridViewSlot-content', {
+                'bdl-GridViewSlot-content--selected': selected,
+            })}
+        >
+            {slotRenderer(slotIndex)}
+        </div>
+    </div>
+);
+
+export default GridViewSlot;

src/components/grid-view/GridViewSlot.js …omponents/grid-view/GridViewSlot.js.flowsrc/components/grid-view/GridViewSlot.js renamed to src/components/grid-view/GridViewSlot.js.flow src/components/grid-view/GridViewSlot.js renamed to src/components/grid-view/GridViewSlot.js.flow

@@ -1,18 +1,17 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 
 import GridView from '../GridView';
 
 describe('components/grid-view/GridView', () => {
     test('should render()', () => {
-        const collection = { items: [{ type: 'folder', id: '001', name: 'Example Folder' }] };
+        const collection = { items: [{ type: 'folder', id: '001', name: 'Example Folder' }] } as const;
         const wrapper = shallow(
             <GridView
                 columnCount={5}
                 currentCollection={collection}
                 height={600}
-                onItemClick={() => {}}
-                onItemSelect={() => {}}
-                slotRenderer={index => <div> {index} </div>}
+                slotRenderer={(index: number) => <div> {index} </div>}
                 width={400}
             />,
         );