refactor: Remove usages of reactable from TimeTable (#11046)

* Use ListView instead of reactable * Refactor TimeTable * Spark column width fix
apache · Sep 28, 2020 · f01b8a3 · f01b8a3
1 parent a879622
commit f01b8a3
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 126 deletions.
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { t, styled } from '@superset-ui/core';
+import { css } from '@emotion/core';
 import React, { useState } from 'react';
 import { Alert } from 'react-bootstrap';
 import { Empty } from 'src/common/components';
@@ -37,7 +38,11 @@ import {
 } from './types';
 import { ListViewError, useListViewState } from './utils';
 
-const ListViewStyles = styled.div`
+interface ListViewStylesProps {
+  fullHeight: boolean;
+}
+
+const ListViewStyles = styled.div<ListViewStylesProps>`
   text-align: center;
 
   .superset-list-view {
@@ -48,8 +53,12 @@ const ListViewStyles = styled.div`
     padding-bottom: 48px;
 
     .body {
-      overflow: scroll;
-      max-height: 64vh;
+      ${({ fullHeight }) =>
+        !fullHeight &&
+        css`
+          overflow: scroll;
+          max-height: 64vh;
+        `};
     }
   }
 
@@ -202,6 +211,9 @@ export interface ListViewProps<T extends object = any> {
   renderCard?: (row: T & { loading: boolean }) => React.ReactNode;
   cardSortSelectOptions?: Array<CardSortSelectOption>;
   defaultViewMode?: ViewModeType;
+  sticky?: boolean;
+  fullHeight?: boolean;
+  manualSortBy?: boolean;
 }
 
 function ListView<T extends object = any>({
@@ -221,6 +233,9 @@ function ListView<T extends object = any>({
   renderCard,
   cardSortSelectOptions,
   defaultViewMode = 'card',
+  sticky = true,
+  fullHeight = false,
+  manualSortBy = true,
 }: ListViewProps<T>) {
   const {
     getTableProps,
@@ -244,8 +259,10 @@ function ListView<T extends object = any>({
     initialPageSize,
     initialSort,
     initialFilters: filters,
+    manualSortBy,
   });
   const filterable = Boolean(filters.length);
+  const withPagination = Boolean(count);
   if (filterable) {
     const columnAccessors = columns.reduce(
       (acc, col) => ({ ...acc, [col.accessor || col.id]: true }),
@@ -266,7 +283,7 @@ function ListView<T extends object = any>({
   );
 
   return (
-    <ListViewStyles>
+    <ListViewStyles fullHeight={fullHeight}>
       <div className={`superset-list-view ${className}`}>
         <div className="header">
           {cardViewEnabled && (
@@ -350,6 +367,7 @@ function ListView<T extends object = any>({
               rows={rows}
               columns={columns}
               loading={loading}
+              sticky={sticky}
             />
           )}
           {!loading && rows.length === 0 && (
@@ -360,23 +378,25 @@ function ListView<T extends object = any>({
         </div>
       </div>
 
-      <div className="pagination-container">
-        <Pagination
-          totalPages={pageCount || 0}
-          currentPage={pageCount ? pageIndex + 1 : 0}
-          onChange={(p: number) => gotoPage(p - 1)}
-          hideFirstAndLastPageLinks
-        />
-        <div className="row-count-container">
-          {!loading &&
-            t(
-              '%s-%s of %s',
-              pageSize * pageIndex + (rows.length && 1),
-              pageSize * pageIndex + rows.length,
-              count,
-            )}
+      {withPagination && (
+        <div className="pagination-container">
+          <Pagination
+            totalPages={pageCount || 0}
+            currentPage={pageCount ? pageIndex + 1 : 0}
+            onChange={(p: number) => gotoPage(p - 1)}
+            hideFirstAndLastPageLinks
+          />
+          <div className="row-count-container">
+            {!loading &&
+              t(
+                '%s-%s of %s',
+                pageSize * pageIndex + (rows.length && 1),
+                pageSize * pageIndex + rows.length,
+                count,
+              )}
+          </div>
         </div>
-      </div>
+      )}
     </ListViewStyles>
   );
 }

diff --git a/superset-frontend/src/components/ListView/TableCollection.tsx b/superset-frontend/src/components/ListView/TableCollection.tsx
@@ -30,14 +30,19 @@ interface TableCollectionProps {
   rows: TableInstance['rows'];
   columns: TableInstance['column'][];
   loading: boolean;
+  sticky: boolean;
 }
 
-const Table = styled.table`
+interface TableProps {
+  sticky: boolean;
+}
+
+const Table = styled.table<TableProps>`
   border-collapse: separate;
 
   th {
     background: ${({ theme }) => theme.colors.grayscale.light5};
-    position: sticky;
+    position: ${({ sticky }) => sticky && 'sticky'};
     top: 0;
 
     &:first-of-type {
@@ -199,9 +204,10 @@ export default function TableCollection({
   columns,
   rows,
   loading,
+  sticky,
 }: TableCollectionProps) {
   return (
-    <Table {...getTableProps()} className="table table-hover">
+    <Table {...getTableProps()} sticky={sticky} className="table table-hover">
       <thead>
         {headerGroups.map(headerGroup => (
           <tr {...headerGroup.getHeaderGroupProps()}>

diff --git a/superset-frontend/src/components/ListView/utils.ts b/superset-frontend/src/components/ListView/utils.ts
@@ -110,6 +110,7 @@ interface UseListViewConfig {
     Header: (conf: any) => React.ReactNode;
     Cell: (conf: any) => React.ReactNode;
   };
+  manualSortBy: boolean;
 }
 
 export function useListViewState({
@@ -122,6 +123,7 @@ export function useListViewState({
   initialSort = [],
   bulkSelectMode = false,
   bulkSelectColumnConfig,
+  manualSortBy,
 }: UseListViewConfig) {
   const [query, setQuery] = useQueryParams({
     filters: JsonParam,
@@ -177,9 +179,9 @@ export function useListViewState({
       initialState,
       manualFilters: true,
       manualPagination: true,
-      manualSortBy: true,
       autoResetFilters: false,
       pageCount: Math.ceil(count / initialPageSize),
+      manualSortBy,
     },
     useFilters,
     useSortBy,