@spaced-out/ui-design-system/lib/components/Table/Table.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import type {TableRow} from './DefaultRow';
import type {GenericHeaderItems} from './DefaultTableHeader';
import type {SortDirection} from './hooks';
import {useSortableEntries} from './hooks';
import {StaticTable} from './StaticTable';

// type ClassNames = $ReadOnly<{wrapper?: string}>;

export type GenericObject = {
  // the + here (not well doc'd by flow) makes all object properties covariant
  // meaning that the value of any string-keyed property is allowed to have a more
  // specific type than `mixed` (i.e. string, number fn, etc)
  // (ie. the likely case for all real instances of GenericObject)
  // learn more here https://flow.org/blog/2016/10/04/Property-Variance/
  +[key: string]: mixed,
};

type ClassNames = $ReadOnly<{
  wrapper?: string,
  table?: string,
  tableHeader?: string,
  tableBody?: string,
  tableRow?: string,
  checkbox?: string,
}>;

export type TableProps<T, U> = {
  classNames?: ClassNames,
  className?: string,
  TableRow?: TableRow<T, U>,
  headers: GenericHeaderItems<T, U>,
  entries: Array<T>,
  extras?: U,
  sortable?: boolean,
  showHeader?: boolean,
  tableHeaderClassName?: string,
  headerIconClassName?: string,
  defaultSortKey?: string,
  defaultSortDirection?: 'asc' | 'desc' | 'original',
  // Please start using this prop if you want internal sorting to work in the table
  enableInternalSorting?: boolean,

  selectedKeys?: string[],
  disabledKeys?: string[],
  onSelect?: (keys: string[]) => mixed,

  idName?: $Keys<T>,
  onSort?: (key: $Keys<T>, direction: SortDirection) => void,
  isLoading?: boolean,
  emptyText?: React.Node,
  disabled?: boolean,
  customLoader?: React.Node,
  borderRadius?: string,

  // For this to work the table wrapper should be scrollable
  stickyHeader?: boolean,
};

/**
 * Table
 * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>
 * @param {string} className - string
 *
 **/

/**
 * Table
 * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>
 * @param {string} className - string
 *
 */
export function Table<Data: GenericObject, Extras: GenericObject>(
  props: TableProps<Data, Extras>,
): React.Node {
  const {
    // eslint-disable-next-line unused-imports/no-unused-vars
    className,
    // eslint-disable-next-line unused-imports/no-unused-vars
    classNames,
    // eslint-disable-next-line unused-imports/no-unused-vars
    TableRow,
    entries,
    // eslint-disable-next-line unused-imports/no-unused-vars
    extras,
    // eslint-disable-next-line unused-imports/no-unused-vars
    headers,
    // eslint-disable-next-line unused-imports/no-unused-vars
    showHeader = true,
    // eslint-disable-next-line unused-imports/no-unused-vars
    tableHeaderClassName,
    sortable = true,
    defaultSortKey,
    defaultSortDirection = 'original',
    onSort,
    enableInternalSorting,

    // eslint-disable-next-line unused-imports/no-unused-vars
    isLoading,
    idName = 'id',
    // eslint-disable-next-line unused-imports/no-unused-vars
    emptyText,
  } = props;

  /**
   *
   */
  // eslint-disable-next-line unused-imports/no-unused-vars
  const {sortedEntries, sortedKeys, ...sortableProps} = useSortableEntries(
    entries,
    idName,
    {
      defaultSortKey,
      defaultSortDirection,
      onSort,
      enableInternalSorting,
    },
  );

  return (
    <StaticTable
      {...props}
      {...sortableProps}
      sortable={sortable}
      entries={entries}
      rowKeys={sortedKeys}
    />
  );
}