@spaced-out/ui-design-system 0.4.12 → 0.4.13

package/lib/components/Table/StaticTable.js.flow

@@ -1,19 +1,25 @@
 // @flow strict
 
 import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {useVirtualizer} from '@tanstack/react-virtual';
 import get from 'lodash/get';
 import xor from 'lodash/xor';
 
 import {useWindowSize} from '../../hooks/useWindowSize';
-import {sizeFluid} from '../../styles/variables/_size';
+import {size48, sizeFluid} from '../../styles/variables/_size';
+import {spaceNone} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
 import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {CircularLoader} from '../CircularLoader';
 
+import type {TableRow} from './DefaultRow';
 import {DefaultRow, EmptyRow} from './DefaultRow';
+import type {GenericHeaderItems} from './DefaultTableHeader';
 import {DefaultTableHeader} from './DefaultTableHeader';
 import type {SortDirection} from './hooks';
-import type {GenericObject, TableProps} from './Table';
+import type {ClassNames, GenericObject, TableProps} from './Table';
 
 import css from './Table.module.css';
 
@@ -26,6 +32,189 @@ export const BasicTable: ClassNameComponent<'table'> = makeClassNameComponent(
 export const BasicTableBody: ClassNameComponent<'tbody'> =
   makeClassNameComponent(css.defaultTableBody, 'tbody');
 
+function useTableWidth(ref): number | void {
+  const {width} = useWindowSize();
+  const [tableWidth, setTableWidth] = React.useState();
+
+  React.useEffect(() => {
+    if (ref.current) {
+      setTableWidth(ref.current.offsetWidth);
+    }
+  }, [width]);
+
+  return tableWidth;
+}
+
+function useMappedKeys<Data: GenericObject>(
+  entries: Data[],
+  rowKeys: ?(string[]),
+  idName: string,
+): string[] {
+  return React.useMemo(
+    () => rowKeys ?? entries.map((e) => get(e, idName)),
+    [entries, idName, rowKeys],
+  );
+}
+
+function useHeaderCheckboxHandler<Data: GenericObject>(
+  selectedKeys: ?(string[]),
+  entries: Data[],
+  idName: string,
+  onSelect?: (string[]) => mixed,
+) {
+  if (!selectedKeys) {
+    return undefined;
+  }
+
+  return ({checked}: {value: string, checked: boolean}) => {
+    const allIds = entries.map((row) => get(row, idName));
+    const newSelection = checked ? allIds : [];
+    onSelect?.(newSelection);
+  };
+}
+
+type TableWrapperProps<T, U> = {
+  tableRef?: {|current: null | HTMLDivElement|},
+  classNames?: ClassNames,
+  className?: string,
+  borderRadius?: string,
+  tableHeaderClassName?: string,
+  children?: React.Node,
+  wrapperStyle?: {[string]: ?string | number},
+  isLoading?: boolean,
+  emptyText?: React.Node,
+  showHeader?: boolean,
+  stickyHeader?: boolean,
+  sortable?: boolean,
+  disabled?: boolean,
+  entriesLength?: number,
+  selectedKeys?: ?(string[]),
+  headers: GenericHeaderItems<T, U>,
+  sortKey?: string,
+  sortDirection?: SortDirection,
+  handleSortClick?: (sortKey: $Keys<T>) => mixed,
+  handleHeaderCheckboxClick?: ({value: string, checked: boolean}) => mixed,
+};
+
+type RowType<T, U> = {
+  TableRow?: TableRow<T, U>,
+  data: T,
+  headers: GenericHeaderItems<T, U>,
+  extras?: U,
+  sortedKeys?: string[],
+  selected?: boolean,
+  disabled?: boolean,
+  keyId: string,
+  classNames?: ClassNames,
+  onSelect?: ({value: string, checked: boolean}) => mixed,
+};
+
+function RowRenderer<Data: GenericObject, Extras: GenericObject>({
+  TableRow,
+  data,
+  headers,
+  extras,
+  sortedKeys,
+  selected,
+  disabled,
+  classNames,
+  keyId,
+  onSelect,
+}: RowType<Data, Extras>): React.Node {
+  return TableRow ? (
+    <TableRow
+      key={keyId}
+      data={data}
+      headers={headers}
+      // extras and rowKeys are both 'optional'
+      extras={extras}
+      sortedKeys={sortedKeys}
+      selected={selected}
+      disabled={disabled}
+    />
+  ) : (
+    <DefaultRow
+      key={keyId}
+      data={data}
+      extras={extras}
+      headers={headers}
+      selected={selected}
+      onSelect={onSelect}
+      disabled={disabled}
+      classNames={{
+        tableRow: classNames?.tableRow,
+        checkbox: classNames?.checkbox,
+      }}
+    />
+  );
+}
+
+function TableWrapper<Data: GenericObject, Extras: GenericObject>({
+  tableRef,
+  classNames,
+  className,
+  tableHeaderClassName,
+  children,
+  wrapperStyle,
+  isLoading = false,
+  emptyText,
+  showHeader = true,
+  stickyHeader = false,
+  sortable,
+  disabled = false,
+  entriesLength = 0,
+  selectedKeys,
+  headers,
+  sortKey,
+  sortDirection,
+  handleSortClick,
+  handleHeaderCheckboxClick,
+}: TableWrapperProps<Data, Extras>): React.Node {
+  return (
+    <div
+      className={classify(css.tableContainer, classNames?.wrapper)}
+      data-id={'table-wrap'}
+      ref={tableRef}
+      style={wrapperStyle}
+    >
+      <BasicTable
+        data-id="basic-table"
+        className={classify(
+          className,
+          {
+            [css.fullHeightTable]: isLoading || (!entriesLength && !!emptyText),
+          },
+          classNames?.table,
+        )}
+      >
+        {showHeader && (
+          <DefaultTableHeader
+            className={classify(tableHeaderClassName, classNames?.tableHeader)}
+            sortable={sortable}
+            columns={headers}
+            handleSortClick={handleSortClick}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            disabled={disabled}
+            handleCheckboxClick={handleHeaderCheckboxClick}
+            stickyHeader={stickyHeader}
+            checked={
+              selectedKeys == null || selectedKeys.length === 0
+                ? 'false'
+                : selectedKeys.length < entriesLength
+                  ? 'mixed'
+                  : 'true'
+            }
+          />
+        )}
+        <BasicTableBody className={classNames?.tableBody}>
+          {children}
+        </BasicTableBody>
+      </BasicTable>
+    </div>
+  );
+}
+
 /**
  * A Static Default Table.
  *
@@ -73,140 +262,315 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
 
   // this is a fallback and honestly probably doesn't need the
   // memo'ing
-  const mappedKeys = React.useMemo(
-    () => rowKeys ?? entries.map((e) => get(e, idName)),
-    [entries, idName, rowKeys],
+  const tableRef = React.useRef(null);
+  const mappedKeys = useMappedKeys(entries, rowKeys, idName);
+  const tableWidth = useTableWidth(tableRef);
+
+  /**
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
+   */
+  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(
+    selectedKeys,
+    entries,
+    idName,
+    onSelect,
   );
 
+  return (
+    <TableWrapper
+      tableRef={tableRef}
+      wrapperStyle={{
+        '--border-radius': borderRadius,
+        '--table-width': tableWidth ? `${tableWidth}px` : sizeFluid,
+      }}
+      classNames={classNames}
+      className={className}
+      tableHeaderClassName={tableHeaderClassName}
+      borderRadius={borderRadius}
+      isLoading={isLoading}
+      emptyText={emptyText}
+      showHeader={showHeader}
+      stickyHeader={stickyHeader}
+      sortable={sortable}
+      disabled={false}
+      entriesLength={entries.length}
+      selectedKeys={selectedKeys}
+      headers={headers}
+      sortKey={sortKey}
+      sortDirection={sortDirection}
+      handleSortClick={handleSortClick}
+      handleHeaderCheckboxClick={handleHeaderCheckboxClick}
+    >
+      {isLoading || !entries.length ? (
+        <EmptyRow
+          isLoading={isLoading}
+          emptyText={emptyText}
+          headersLength={
+            handleHeaderCheckboxClick ? headers.length + 1 : headers.length
+          }
+          customLoader={customLoader}
+        />
+      ) : (
+        mappedKeys.map((key) => {
+          const data = entries.find((e) => get(e, idName) === key);
+          if (data == null) {
+            return null;
+          }
+          const selected =
+            selectedKeys && Array.isArray(selectedKeys)
+              ? selectedKeys.includes(get(data, idName))
+              : undefined;
+          const isRowDisabled =
+            disabledKeys && Array.isArray(disabledKeys)
+              ? disabledKeys.includes(get(data, idName))
+              : false;
+          return (
+            <RowRenderer
+              TableRow={TableRow}
+              keyId={key}
+              data={data}
+              headers={headers}
+              extras={extras}
+              sortedKeys={rowKeys ?? mappedKeys}
+              selected={selected}
+              disabled={disabled || isRowDisabled}
+              classNames={classNames}
+              onSelect={
+                selectedKeys != null
+                  ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
+                  : undefined
+              }
+            />
+          );
+        })
+      )}
+    </TableWrapper>
+  );
+}
+
+export function StaticTableVirtualized<
+  Data: GenericObject,
+  Extras: GenericObject,
+>(props: {
+  ...TableProps<Data, Extras>,
+  handleSortClick?: (sortKey: string) => mixed,
+  sortKey?: string,
+  sortDirection?: SortDirection,
+  rowKeys?: string[],
+}): React.Node {
+  const {
+    classNames,
+    className,
+    TableRow,
+    entries,
+    extras,
+    rowKeys,
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+    sortable,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    defaultSortKey,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    defaultSortDirection = 'original',
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    onSort,
+    handleSortClick,
+    sortKey,
+    sortDirection,
+    selectedKeys,
+    disabledKeys = [],
+    onSelect,
+    isLoading,
+    idName = 'id',
+    emptyText,
+    disabled,
+    customLoader,
+    borderRadius,
+    stickyHeader,
+    virtualizationOptions,
+  } = props;
+
+  const {
+    rowsCount,
+    rowHeight = size48,
+    onEndReached,
+    isEndLoading = false,
+    isAllDataFetched = false,
+  } = virtualizationOptions ?? {};
+
   const tableRef = React.useRef(null);
-  const {width} = useWindowSize();
-  const [tableWidth, setTableWidth] = React.useState();
+
+  // this is a fallback and honestly probably doesn't need the
+  // memo'ing
+  const mappedKeys = useMappedKeys(entries, rowKeys, idName);
+  const tableWidth = useTableWidth(tableRef);
+
+  const virtualizer = useVirtualizer({
+    count: entries.length,
+    getScrollElement: () => tableRef.current,
+    estimateSize: () => parseInt(rowHeight),
+    getItemKey: (index) => entries[index][idName],
+    overscan: 1,
+  });
+
+  const currRows = virtualizer.getVirtualItems();
+
+  const hasTriggeredRef = React.useRef(false);
 
   React.useEffect(() => {
-    if (tableRef.current) {
-      setTableWidth(tableRef.current.offsetWidth);
+    if (!tableRef.current || !onEndReached || isAllDataFetched) {
+      return;
     }
-  }, [width]);
+
+    const scrollElement = tableRef.current;
+
+    const handleScroll = () => {
+      const {scrollTop, scrollHeight, clientHeight} = scrollElement;
+
+      const isAtEnd = scrollTop + clientHeight >= scrollHeight - 100; // buffer
+
+      if (isAtEnd) {
+        if (!hasTriggeredRef.current) {
+          hasTriggeredRef.current = true;
+          onEndReached();
+        }
+      } else {
+        hasTriggeredRef.current = false; // reset when scrolling up
+      }
+    };
+
+    scrollElement.addEventListener('scroll', handleScroll);
+
+    return () => {
+      scrollElement.removeEventListener('scroll', handleScroll);
+    };
+  }, [onEndReached, isAllDataFetched]);
 
   /**
    * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
 
-  const handleHeaderCheckboxClick = selectedKeys
-    ? ({checked}: {value: string, checked: boolean}) => {
-      let selectedRowIds = [];
-      if (selectedKeys) {
-        if (checked === true) {
-          selectedRowIds = entries.map((singleRowObj) =>
-            get(singleRowObj, idName),
-          );
-        }
-        onSelect?.(selectedRowIds);
-      }
-    }
-    : undefined;
-  return (
-    <div
-      className={classify(css.tableContainer, classNames?.wrapper)}
-      data-id="table-wrap"
-      ref={tableRef}
+  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(
+    selectedKeys,
+    entries,
+    idName,
+    onSelect,
+  );
+
+  const VirtualizedStartRow = () => (
+    <tr
       style={{
+        height: virtualizer.getVirtualItems()[0]?.start ?? spaceNone,
+        width: sizeFluid,
+      }}
+    >
+      <td
+        colSpan={headers.length + (handleHeaderCheckboxClick ? 1 : 0)}
+        style={{padding: spaceNone, border: 'none', height: '100%'}}
+      />
+    </tr>
+  );
+
+  const VirtualizedEndRow = () => (
+    <tr
+      style={{
+        height:
+          virtualizer.getTotalSize() -
+          (virtualizer.getVirtualItems().at(-1)?.end ?? spaceNone),
+      }}
+      aria-hidden={true}
+    >
+      <td
+        colSpan={headers.length + (handleHeaderCheckboxClick ? 1 : 0)}
+        style={{padding: spaceNone, border: 'none', height: '100%'}}
+      />
+    </tr>
+  );
+
+  return (
+    <TableWrapper
+      tableRef={tableRef}
+      wrapperStyle={{
         '--border-radius': borderRadius,
         '--table-width': tableWidth ? `${tableWidth}px` : sizeFluid,
+        height: (rowsCount + 1) * parseInt(rowHeight),
+        overflowY: 'auto',
       }}
+      classNames={classNames}
+      className={className}
+      tableHeaderClassName={tableHeaderClassName}
+      borderRadius={borderRadius}
+      isLoading={isLoading}
+      emptyText={emptyText}
+      showHeader={showHeader}
+      stickyHeader={stickyHeader}
+      sortable={sortable}
+      disabled={false}
+      entriesLength={entries.length}
+      selectedKeys={selectedKeys}
+      headers={headers}
+      sortKey={sortKey}
+      sortDirection={sortDirection}
+      handleSortClick={handleSortClick}
+      handleHeaderCheckboxClick={handleHeaderCheckboxClick}
     >
-      <BasicTable
-        data-id="basic-table"
-        className={classify(
-          className,
-          {
-            [css.fullHeightTable]:
-              isLoading || (!entries.length && !!emptyText),
-          },
-          classNames?.table,
-        )}
-      >
-        {showHeader && (
-          <DefaultTableHeader
-            className={classify(tableHeaderClassName, classNames?.tableHeader)}
-            sortable={sortable}
-            columns={headers}
-            handleSortClick={handleSortClick}
-            sortKey={sortKey}
-            sortDirection={sortDirection}
-            disabled={disabled}
-            handleCheckboxClick={handleHeaderCheckboxClick}
-            stickyHeader={stickyHeader}
-            checked={
-              selectedKeys == null || selectedKeys.length === 0
-                ? 'false'
-                : selectedKeys.length < entries.length
-                  ? 'mixed'
-                  : 'true'
-            }
-          />
-        )}
+      <VirtualizedStartRow />
+      {isLoading || !entries.length ? (
+        <EmptyRow
+          isLoading={isLoading}
+          emptyText={emptyText}
+          headersLength={
+            handleHeaderCheckboxClick ? headers.length + 1 : headers.length
+          }
+          customLoader={customLoader}
+        />
+      ) : (
+        currRows.map((virtualRow) => {
+          const key = virtualRow.key;
+          const data = entries[virtualRow.index];
+          if (data == null) {
+            return null;
+          }
+          const selected =
+            selectedKeys && Array.isArray(selectedKeys)
+              ? selectedKeys.includes(get(data, idName))
+              : undefined;
+          const isRowDisabled =
+            disabledKeys && Array.isArray(disabledKeys)
+              ? disabledKeys.includes(get(data, idName))
+              : false;
 
-        <BasicTableBody className={classNames?.tableBody}>
-          {isLoading || !entries.length ? (
-            <EmptyRow
-              isLoading={isLoading}
-              emptyText={emptyText}
-              headersLength={
-                handleHeaderCheckboxClick ? headers.length + 1 : headers.length
+          return (
+            <RowRenderer
+              TableRow={TableRow}
+              keyId={key}
+              data={data}
+              headers={headers}
+              extras={extras}
+              sortedKeys={rowKeys ?? mappedKeys}
+              selected={selected}
+              disabled={disabled || isRowDisabled}
+              classNames={classNames}
+              onSelect={
+                selectedKeys != null
+                  ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
+                  : undefined
               }
-              customLoader={customLoader}
             />
-          ) : (
-            mappedKeys.map((key) => {
-              const data = entries.find((e) => get(e, idName) === key);
-              if (data == null) {
-                return null;
-              }
-              (data: Data);
-              const selected =
-                selectedKeys && Array.isArray(selectedKeys)
-                  ? selectedKeys.includes(get(data, idName))
-                  : undefined;
-              const isRowDisabled =
-                disabledKeys && Array.isArray(disabledKeys)
-                  ? disabledKeys.includes(get(data, idName))
-                  : false;
-
-              return TableRow ? (
-                <TableRow
-                  key={key}
-                  data={data}
-                  headers={headers}
-                  // extras and rowKeys are both 'optional'
-                  extras={extras}
-                  sortedKeys={rowKeys ?? mappedKeys}
-                  selected={selected}
-                  disabled={disabled || isRowDisabled}
-                />
-              ) : (
-                <DefaultRow
-                  key={key}
-                  data={data}
-                  extras={extras}
-                  headers={headers}
-                  selected={selected}
-                  onSelect={
-                    selectedKeys != null
-                      ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
-                      : undefined
-                  }
-                  disabled={disabled || isRowDisabled}
-                  classNames={{
-                    tableRow: classNames?.tableRow,
-                    checkbox: classNames?.checkbox,
-                  }}
-                />
-              );
-            })
-          )}
-        </BasicTableBody>
-      </BasicTable>
-    </div>
+          );
+        })
+      )}
+      <VirtualizedEndRow />
+      {isEndLoading && (
+        <tr>
+          <td colSpan={headers.length + (handleHeaderCheckboxClick ? 1 : 0)}>
+            <div className={css.fetchMoreLoaderContainer}>
+              <CircularLoader />
+            </div>
+          </td>
+        </tr>
+      )}
+    </TableWrapper>
   );
 }