@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.10

package/src/DataTable/DataTable.js

@@ -1,572 +0,0 @@
-// @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,
-
-  /**
-   * Ref that is passed to `useImperativeHandle` which in turn returns `useCollapsibleRows.
-   */
-  dataTableRef?: any,
-
-  /**
-   * 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>,
-
-  /**
-   * `onDragStart: (event) => void`
-   *
-   * Called at the start of a child `Draggable` drag.
-   */
-  onDragStart?: Function,
-
-  /**
-   * `onDragEnd: (event) => void`
-   *
-   * Called at the end of a child `Draggable` drag.
-   */
-  onDragEnd?: Function,
-
-  /**
-   * `onDrop: (event) => void`
-   *
-   * This function will be called when a `Draggable` has been dropped. Returns the `onDragEnd` event with any `Draggable` `data` attached.
-   */
-  onDrop?: Function,
-
-  /**
-   * This prop controls whether or not the droppable can receive and reorder draggables. If true, draggables may move outside the droppable, but not added.
-   */
-  sourceOnly?: boolean,
-
-  /**
-   * 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, event: React.SyntheticEvent) => 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>,
-
-  /**
-   * Current visible page number for pagination
-   */
-  currentPage: number,
-
-  /**
-   * `(nextPage: number) => undefined`
-   *
-   * Callback when new page is requested for pagination.
-   */
-  onPageChange: Function,
-
-  /**
-   * Total available pages for pagination.
-   */
-  totalPages: number,
-}
-
-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
-              className={css(getVariant('body'))}
-              data-dnd-ignore-scrollable
-              ref={(ref) => {
-                bodyRef.current = ref
-                provided.innerRef(ref)
-              }}
-              role="rowgroup"
-              {...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={`tapestry-react-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={`tapestry-react-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={`tapestry-react-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