@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/DataTable/DataTable.js

@@ -0,0 +1,523 @@
+// @flow
+import React, { Fragment, useMemo, useRef, useImperativeHandle } from 'react'
+
+import DragDrop from '../DragDrop'
+import Pagination from '../Pagination'
+import Spinner from '../Spinner'
+import StackView from '../StackView'
+import Summary from '../Summary'
+import { useCss } from '../system'
+import { useId } from '../hooks'
+import { reorderArray } from '../utils'
+
+import { BodyRows, HeaderCell } from './components'
+import {
+  CollapsibleRowsContext,
+  useCollapsibleRows,
+  useColumnSort,
+  useColumnWidths,
+  useScrollShadows,
+  useScrollSync,
+  useVariants,
+} from './hooks'
+import { getParsedColumns } from './utils'
+
+const defaultAccessibility = {
+  toggleAllSubRowsTooltipTitle: (allSubRowsOpen) => {
+    return allSubRowsOpen ? 'Close all sub rows' : 'Open all sub rows'
+  },
+}
+
+export type Props = {
+  /**
+   * Provides the ability to change accessible labels used throughout the `DataTable` component.
+   */
+  accessibility?: { toggleAllSubRowsTooltipTitle?: Function },
+
+  /**
+   * `(bodyRef: object) => void`
+   *
+   * Used to gain access to the internal `bodyRef`.
+   */
+  innerBodyRef?: Function,
+
+  /**
+   * Controls whether or not sub-rows can be collapsed.
+   */
+  canCollapseSubRows?: boolean,
+
+  /**
+   * Determines how the incoming data is rendered as columns. Please note for optimal performance
+   * identity should not change between every render and should be static or memoized.
+   */
+  columns?: Array<{
+    /**
+     * Forces the column to always be visible regardless of [`hiddenColumnIds`](#hiddenColumnIds).
+     * This is also used to build a list of eligible columns for the ColumnPicker component.
+     */
+    alwaysVisible?: boolean,
+
+    /**
+     * `(row: object<mixed>, data: array<object>) => void`
+     *
+     * Controls how the incoming row data is rendered in a cell. Accepts a string
+     * that will be used as an accessor of the row data or a function that returns
+     * the row data as well as extra information about the row and column.
+     */
+    cell?: string | Function,
+
+    /**
+     * Controls the column header rendering. Accepts a string, element, component
+     * or function.
+     */
+    header?: any,
+
+    /**
+     * Similar to `column.header`. Controls the column footer rendering.
+     */
+    footer?: any,
+
+    /**
+     * Used to identify a column. Required when using `onRowSort` or `hiddenColumnIds`.
+     */
+    id?: string | number,
+
+    /**
+     * Used to describe a column in `ColumnPicker` when `header` doesn't display
+     * any text like checkbox or icon.
+     */
+    label?: string,
+
+    /**
+     * Determines if a column can be sorted or not. Defaults to `false`. See
+     * [`onColumnSort`](#onColumnSort) below for details on controlling sorting.
+     */
+    sortable?: boolean,
+
+    /**
+     * Overrides [defaultSort.direction](#defaultSort) for this specific column.
+     * Defaults to `ASC` if neither values are provided.
+     */
+    defaultSortDirection?: 'ASC' | 'DESC',
+
+    /**
+     * Determines how a sub row cell is rendered. Uses cell as the default accessor
+     * if nothing is provided.
+     */
+    subCell?: string | Function,
+
+    /**
+     * Specifies how wide a column is. If omitted, cell will be measured and
+     * calculated based on the largest column's cell width.
+     */
+    width?: number,
+
+    /**
+     * The minimum size a column must be.
+     */
+    minWidth?: number,
+
+    /**
+     * The maximum size a column can be.
+     */
+    maxWidth?: number,
+
+    /**
+     * Includes sub cells when calculating auto column widths.
+     */
+    includeSubCellWidth?: boolean,
+  }>,
+
+  /**
+   * Accepts an array of data to be rendered. Data cells are ordered by the
+   * columns array.
+   */
+  data?: Array<Object>,
+
+  /**
+   * Controls whether or not sub-rows are open by default.
+   */
+  defaultAllSubRowsOpen?: boolean,
+
+  /**
+   * Default sorting for columns. Please note this only affects controls and
+   * requires you to manage sorting the data yourself. See [`onColumnSort`](#onColumnSort)
+   * below for details on controlling sorting.
+   */
+  defaultSort?: {
+    columnId?: string | number,
+    direction?: 'ASC' | 'DESC',
+  },
+
+  /**
+   * Droppable identifier used for internal [DragDrop](/dragdrop) component.
+   */
+  droppableId?: string,
+
+  /**
+   * Provide an empty state when the table has no data.
+   */
+  empty?: any,
+
+  /**
+   * `(rowData: object, rowIndex: number) => number`
+   *
+   * Used to identify rows. Defaults to `rowData.id` if available, otherwise uses `rowIndex`.
+   */
+  getRowId?: Function,
+
+  /**
+   * `(rowData: object) => string`
+   *
+   * Turns each row or sub-row into an anchor link.
+   */
+  getRowLink?: Function,
+
+  /**
+   * `(rowData: object) => array<object>`
+   *
+   * Controls rendering of collapsible sub row content.
+   */
+  getSubData?: Function,
+
+  /**
+   * Hide specific columns by their id.
+   */
+  hiddenColumnIds?: Array<string | number>,
+
+  /**
+   * Accepts an object of keyboard shortcuts that can be performed when hovering
+   * a row. e.g. `{ 'a': ({ rowData }) => addUser(rowData.id) }`.
+   * See the [mousetrap library](https://craig.is/killing/mice#api.bind) for
+   * valid key combinations.
+   */
+  keyboardShortcuts?: Object<Function>,
+
+  /**
+   * Puts the table in a loading state and shows a spinner in the middle of the table.
+   */
+  loading?: boolean,
+
+  /**
+   * Provide an accompanying title to the spinner while loading data.
+   */
+  loadingTitle?: string,
+
+  /**
+   * `(sortedColumns: { columnId, direction }) => void`
+   *
+   * Callback when a column header has been pressed.
+   */
+  onColumnSort?: Function,
+
+  /**
+   * `(rowData: any, rowIndex: number) => void`
+   *
+   * Callback when a row has been clicked.
+   */
+  onRowClick?: Function,
+
+  /**
+   * `(sortedData: array) => void`
+   *
+   * Callback when a row has been sorted.
+   */
+  onRowSort?: Function,
+
+  /**
+   * Provides the ability to change styles used throughout the `DataTable` component.
+   */
+  variant?:
+    | {
+        header?: Object,
+
+        headerRow?: Object,
+
+        /**
+         * `({ columnIndex, isSortable }) => object`
+         */
+        headerCell?: Object | Function,
+
+        body?: Object,
+
+        /**
+         * `({ isLink, firstRow, lastRow, evenRow, oddRow, rowData, rowIndex }) => object`
+         */
+        bodyRow?: Object | Function,
+
+        /**
+         * `({ firstRow, lastRow, firstCell, lastCell, rowData, rowIndex, columnIndex }) => object`
+         */
+        bodyCell?: Object | Function,
+
+        /**
+         * `({ isLink, firstRow, lastRow, evenRow, oddRow, rowData, rowIndex, parentRowIndex }) => object`
+         */
+        bodySubRow?: Object | Function,
+
+        /**
+         * `({ firstRow, lastRow, firstCell, lastCell, rowData, rowIndex, columnIndex, columnWidth }) => object`
+         */
+        bodySubCell?: Object | Function,
+      }
+    | Array<Object | boolean>,
+}
+
+const defaultHiddenColumnIds = []
+
+const DataTable = (props: Props) => {
+  const {
+    accessibility = defaultAccessibility,
+    innerBodyRef,
+    canCollapseSubRows = true,
+    columns,
+    currentPage,
+    data,
+    dataTableRef,
+    defaultSort,
+    defaultAllSubRowsOpen,
+    droppableId,
+    empty,
+    getRowId = (rowData, rowIndex) =>
+      rowData.id ||
+      (droppableId === undefined ? rowIndex : `${droppableId}-${rowIndex}`),
+    getRowLink,
+    getSubData,
+    hiddenColumnIds = defaultHiddenColumnIds,
+    keyboardShortcuts,
+    loading,
+    loadingTitle,
+    onColumnSort,
+    onDragStart,
+    onDragEnd,
+    onDrop,
+    onPageChange,
+    onRowClick,
+    onRowSort,
+    sourceOnly,
+    totalPages,
+    variant = {},
+  } = props
+
+  const css = useCss()
+  const tableId = useId('table')
+  const hasParentDragDrop = DragDrop.useDragDrop()
+  const isLoadingOrEmpty = loading || data.length <= 0
+  const headerRef = useRef()
+  const bodyRef = useRef()
+  const footerRef = useRef()
+  const scrollRefs = [headerRef, bodyRef]
+  const draggable = sourceOnly || onRowSort || onDrop
+  const getVariant = useVariants(variant)
+  const collapsibleRows = useCollapsibleRows(data, defaultAllSubRowsOpen)
+  const hasSubRows = Boolean(canCollapseSubRows && getSubData)
+  const parsedColumns = useMemo(
+    () =>
+      getParsedColumns({
+        accessibility,
+        hasSubRows,
+        columns,
+        hiddenColumnIds,
+        draggable,
+      }),
+    [columns, hasSubRows, hiddenColumnIds, draggable]
+  )
+  const hasFooterColumns = parsedColumns
+    .map(Object.keys)
+    .some((keys) => keys.some((key) => key === 'footer'))
+  const { columnWidths, getColumnRef } = useColumnWidths({
+    columns: parsedColumns,
+    data,
+    loading,
+    bodyRef,
+  })
+  const columnSort = useColumnSort({
+    defaultSort,
+    onColumnSort,
+  })
+  const shadowsToRender = useScrollShadows(bodyRef)
+  const bodyRowsProps = {
+    columns: parsedColumns,
+    collapsibleRows,
+    columnWidths,
+    data,
+    draggable,
+    getColumnRef,
+    getRowId,
+    getRowLink,
+    getSubData,
+    getVariant,
+    keyboardShortcuts,
+    onRowClick,
+  }
+  let bodyToRender
+
+  if (hasFooterColumns) {
+    scrollRefs.push(footerRef)
+  }
+
+  useScrollSync(...scrollRefs)
+
+  useImperativeHandle(dataTableRef, () => collapsibleRows)
+
+  if (typeof innerBodyRef === 'function') {
+    innerBodyRef(bodyRef)
+  }
+
+  if (hasParentDragDrop || draggable) {
+    bodyToRender = (
+      <DragDrop.Provider
+        onDragEnd={({ source, destination }) => {
+          if (onRowSort && destination) {
+            onRowSort(
+              reorderArray({
+                list: data,
+                startIndex: source.index,
+                endIndex: destination.index,
+              })
+            )
+          }
+        }}
+      >
+        <DragDrop.Droppable
+          droppableId={droppableId === undefined ? tableId : droppableId}
+          sourceOnly={sourceOnly}
+          onDragStart={onDragStart}
+          onDragEnd={onDragEnd}
+          onDrop={onDrop}
+        >
+          {(provided) => (
+            <div
+              ref={(ref) => {
+                bodyRef.current = ref
+                provided.innerRef(ref)
+              }}
+              role="rowgroup"
+              className={css(getVariant('body'))}
+              {...provided.droppableProps}
+            >
+              <BodyRows {...bodyRowsProps} />
+              {provided.placeholder}
+            </div>
+          )}
+        </DragDrop.Droppable>
+      </DragDrop.Provider>
+    )
+  } else {
+    bodyToRender = (
+      <div ref={bodyRef} role="rowgroup" className={css(getVariant('body'))}>
+        <BodyRows {...bodyRowsProps} />
+      </div>
+    )
+  }
+
+  return (
+    <Fragment>
+      {isLoadingOrEmpty && (
+        <StackView
+          grow={1}
+          alignment="center"
+          distribution="center"
+          minHeight="100%"
+          paddingVertical={8}
+        >
+          {loading ? (
+            <Summary image={<Spinner size="xl" />} title={loadingTitle} />
+          ) : (
+            empty
+          )}
+        </StackView>
+      )}
+      <CollapsibleRowsContext.Provider value={collapsibleRows}>
+        <div
+          role={getRowLink ? undefined : 'grid'}
+          style={isLoadingOrEmpty ? { display: 'none' } : undefined}
+          className={`uikit-reset ${css({ position: 'relative' })}`}
+        >
+          <div
+            ref={headerRef}
+            role="rowgroup"
+            className={css(getVariant('header'))}
+          >
+            <div role="row" className={css(getVariant('headerRow'))}>
+              {parsedColumns.map((column, columnIndex) => {
+                const cellVariantClassName = getVariant('headerCell', {
+                  columnIndex,
+                  isSortable: column.sortable,
+                })
+                return (
+                  <HeaderCell
+                    key={columnIndex}
+                    cellRef={getColumnRef(`${columnIndex}.0`)}
+                    column={column}
+                    columnIndex={columnIndex}
+                    columnSort={columnSort}
+                    className={`uikit-reset ${css([
+                      ...cellVariantClassName,
+                      column.css,
+                    ])}`}
+                  />
+                )
+              })}
+            </div>
+          </div>
+          {bodyToRender}
+          {hasFooterColumns && (
+            <div
+              ref={footerRef}
+              role="rowgroup"
+              className={css(getVariant('footer'))}
+            >
+              <div role="row" className={css(getVariant('footerRow'))}>
+                {parsedColumns.map((column, columnIndex) => {
+                  const cellVariantClassName = getVariant('footerCell', {
+                    columnIndex,
+                    isSortable: column.sortable,
+                  })
+                  return (
+                    <div
+                      key={columnIndex}
+                      role="cell"
+                      ref={getColumnRef(`${columnIndex}.${data.length + 1}`)}
+                      className={`uikit-reset ${css([
+                        ...cellVariantClassName,
+                        column.css,
+                      ])}`}
+                    >
+                      {typeof column.footer === 'string' ||
+                      React.isValidElement(column.footer)
+                        ? column.footer
+                        : column.footer
+                        ? React.createElement(column.footer, { columnIndex })
+                        : null}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+          {shadowsToRender}
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+            position="sticky"
+            bottom={0}
+            zIndex={35}
+            marginTop="-1px"
+            backgroundColor="white"
+            borderTopWidth={1}
+            borderTopColor="grey-3"
+            className={css({
+              '@media print': {
+                position: 'relative',
+              },
+            })}
+          />
+        </div>
+      </CollapsibleRowsContext.Provider>
+    </Fragment>
+  )
+}
+
+export default DataTable