HighTable.tsx

import { type ReactNode } from 'react'

import { columnWidthsSuffix } from '../helpers/constants.js'
import styles from '../HighTable.module.css'
import { CellConfigurationProvider } from '../providers/CellConfigurationProvider.js'
import { CellNavigationProvider } from '../providers/CellNavigationProvider.js'
import { ColumnParametersProvider } from '../providers/ColumnParametersProvider.js'
import { ColumnsVisibilityProvider } from '../providers/ColumnsVisibilityProvider.js'
import { ColumnWidthsProvider } from '../providers/ColumnWidthsProvider.js'
import { DataProvider } from '../providers/DataProvider.js'
import { OrderByProvider } from '../providers/OrderByProvider.js'
import { ScrollProvider } from '../providers/ScrollProvider.js'
import { SelectionProvider } from '../providers/SelectionProvider.js'
import { TableCornerSizeProvider } from '../providers/TableCornerSizeProvider.js'
import { ViewportSizeProvider } from '../providers/ViewportSizeProvider.js'
import type { HighTableProps } from '../types.js'
import Scroller from './Scroller.js'
import Slice from './Slice.js'
import Table from './Table.js'
import Wrapper from './Wrapper.js'

export default function HighTable({ data, ...props }: HighTableProps) {
  return (
    // Part of the DataProvider is remounted on data change, so everything inside is recreated.
    // TODO(SL): if this becomes a performance issue, we can revisit this behavior, and update the
    // state more granularly.
    <DataProvider data={data}>
      <State {...props}>
        <DOM {...props} />
      </State>
    </DataProvider>
  )
}

type StateProps = Pick<HighTableProps, 'columnConfiguration' | 'cacheKey' | 'cellPosition' | 'columnsVisibility' | 'focus' | 'numRowsPerPage' | 'orderBy' | 'overscan' | 'padding' | 'selection' | 'onCellPositionChange' | 'onColumnsVisibilityChange' | 'onDoubleClickCell' | 'onError' | 'onKeyDownCell' | 'onMouseDownCell' | 'onOrderByChange' | 'onSelectionChange' | 'renderCellContent' | 'stringify'>
  & { children: ReactNode }

function State({
  children,
  columnConfiguration,
  cacheKey,
  cellPosition,
  columnsVisibility,
  focus,
  numRowsPerPage,
  orderBy,
  overscan,
  padding,
  selection,
  onCellPositionChange,
  onColumnsVisibilityChange,
  onDoubleClickCell,
  onError,
  onKeyDownCell,
  onMouseDownCell,
  onOrderByChange,
  onSelectionChange,
  renderCellContent,
  stringify,
}: StateProps) {
  return (
    /* The state is handled with contexts, even if it creates a "Providers hell". No need for state library for now. */
    <ViewportSizeProvider>
      <TableCornerSizeProvider>
        <CellConfigurationProvider
          onDoubleClickCell={onDoubleClickCell}
          onKeyDownCell={onKeyDownCell}
          onMouseDownCell={onMouseDownCell}
          renderCellContent={renderCellContent}
          stringify={stringify}
        >
          <ColumnParametersProvider columnConfiguration={columnConfiguration}>
            <ColumnWidthsProvider
            // Recreate a context if a new cacheKey is provided.
              key={cacheKey}
              // TODO(SL): pass cacheKey, memoize
              localStorageKey={cacheKey ? `${cacheKey}${columnWidthsSuffix}` : undefined}
            >
              <ColumnsVisibilityProvider
                columnsVisibility={columnsVisibility}
                onColumnsVisibilityChange={onColumnsVisibilityChange}
              >
                <OrderByProvider
                  orderBy={orderBy}
                  onOrderByChange={onOrderByChange}
                >
                  <SelectionProvider
                    selection={selection}
                    onError={onError}
                    onSelectionChange={onSelectionChange}
                  >
                    <CellNavigationProvider
                      cellPosition={cellPosition}
                      focus={focus}
                      numRowsPerPage={numRowsPerPage}
                      onCellPositionChange={onCellPositionChange}
                    >
                      <ScrollProvider padding={padding} onError={onError} overscan={overscan}>
                        {children}
                      </ScrollProvider>
                    </CellNavigationProvider>
                  </SelectionProvider>
                </OrderByProvider>
              </ColumnsVisibilityProvider>
            </ColumnWidthsProvider>
          </ColumnParametersProvider>
        </CellConfigurationProvider>
      </TableCornerSizeProvider>
    </ViewportSizeProvider>
  )
}

type DOMProps = Pick<HighTableProps, 'className' | 'maxRowNumber' | 'styled'>

function DOM({
  className = '',
  maxRowNumber,
  styled = true,
}: DOMProps) {
  return (
    <Wrapper styled={styled} maxRowNumber={maxRowNumber} className={className}>
      <div className={styles.topBorder} role="presentation" />

      <Scroller>
        <Slice>
          <Table />
        </Slice>
      </Scroller>

      {/* puts a background behind the row labels column */}
      <div className={styles.mockRowLabel}>&nbsp;</div>
    </Wrapper>
  )
}