refactor(content-picker): convert Content to TypeScript

src/elements/content-picker/Content.js → src/elements/content-picker/Content.js.flow

@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-// $FlowFixMe TypeScript file
 import EmptyView from '../common/empty-view';
 import ProgressBar from '../common/progress-bar';
 import ItemList from './ItemList';
@@ -48,17 +47,15 @@ function isEmpty(view: View, currentCollection: Collection): boolean {
 const Content = ({
     view,
     rootId,
-    isSmall,
     rootElement,
-    focusedRow,
-    hasHitSelectionLimit,
-    selectableType,
     currentCollection,
     tableRef,
-    canSetShareAccess,
+    isSmall,
     isSingleSelect,
-    onItemClick,
+    hasHitSelectionLimit,
+    canSetShareAccess,
     onItemSelect,
+    onItemClick,
     onShareAccessChange,
     onFocusChange,
     extensionsWhitelist,
@@ -68,24 +65,22 @@ const Content = ({
             <ProgressBar percent={currentCollection.percentLoaded} />
         )}
         {isEmpty(view, currentCollection) ? (
-            <EmptyView view={view} isLoading={currentCollection.percentLoaded !== 100} />
+            <EmptyView />
         ) : (
             <ItemList
                 view={view}
                 rootId={rootId}
-                isSmall={isSmall}
                 rootElement={rootElement}
-                focusedRow={focusedRow}
                 currentCollection={currentCollection}
                 tableRef={tableRef}
-                canSetShareAccess={canSetShareAccess}
-                hasHitSelectionLimit={hasHitSelectionLimit}
+                isSmall={isSmall}
                 isSingleSelect={isSingleSelect}
-                selectableType={selectableType}
+                hasHitSelectionLimit={hasHitSelectionLimit}
+                canSetShareAccess={canSetShareAccess}
                 onItemSelect={onItemSelect}
                 onItemClick={onItemClick}
-                onFocusChange={onFocusChange}
                 onShareAccessChange={onShareAccessChange}
+                onFocusChange={onFocusChange}
                 extensionsWhitelist={extensionsWhitelist}
             />
         )}

src/elements/content-picker/Content.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import EmptyView from '../common/empty-view';
+import ProgressBar from '../common/progress-bar';
+import ItemList from './ItemList';
+import { VIEW_ERROR, VIEW_SELECTED } from '../../constants';
+import { Collection, View } from '../../common/types/core';
+
+import './Content.scss';
+
+export interface ContentProps {
+    canSetShareAccess: boolean;
+    currentCollection: Collection;
+    extensionsWhitelist: string[];
+    focusedRow: number;
+    hasHitSelectionLimit: boolean;
+    isSingleSelect: boolean;
+    isSmall: boolean;
+    onFocusChange: (row: number) => void;
+    onItemClick: (item: Record<string, unknown>) => void;
+    onItemSelect: (item: Record<string, unknown>) => void;
+    onShareAccessChange: (access: string) => void;
+    rootElement?: HTMLElement;
+    rootId: string;
+    selectableType: string;
+    tableRef: (ref: HTMLElement) => void;
+    view: View;
+}
+
+/**
+ * Determines if we should show the empty state
+ *
+ * @param {string} view the current view
+ * @param {Object} currentCollection the current collection
+ * @return {boolean} empty or not
+ */
+const isEmpty = (view: View, currentCollection: Collection): boolean => {
+    const { items = [] } = currentCollection;
+    return view === VIEW_ERROR || items.length === 0;
+};
+
+const Content = ({
+    view,
+    rootId,
+    isSmall,
+    rootElement,
+    focusedRow,
+    hasHitSelectionLimit,
+    selectableType,
+    currentCollection,
+    tableRef,
+    canSetShareAccess,
+    isSingleSelect,
+    onItemClick,
+    onItemSelect,
+    onShareAccessChange,
+    onFocusChange,
+    extensionsWhitelist,
+}: ContentProps): React.ReactElement => (
+    <div className="bcp-content">
+        {view === VIEW_ERROR || view === VIEW_SELECTED ? null : (
+            <ProgressBar percent={currentCollection.percentLoaded} />
+        )}
+        {isEmpty(view, currentCollection) ? (
+            <EmptyView view={view} isLoading={currentCollection.percentLoaded !== 100} />
+        ) : (
+            <ItemList
+                view={view}
+                rootId={rootId}
+                isSmall={isSmall}
+                rootElement={rootElement}
+                focusedRow={focusedRow}
+                currentCollection={currentCollection}
+                tableRef={tableRef}
+                canSetShareAccess={canSetShareAccess}
+                hasHitSelectionLimit={hasHitSelectionLimit}
+                isSingleSelect={isSingleSelect}
+                selectableType={selectableType}
+                onItemSelect={onItemSelect}
+                onItemClick={onItemClick}
+                onFocusChange={onFocusChange}
+                onShareAccessChange={onShareAccessChange}
+                extensionsWhitelist={extensionsWhitelist}
+            />
+        )}
+    </div>
+);
+
+export default Content;