@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/DataTable/hooks/useColumnWidths.js

@@ -0,0 +1,86 @@
+import { useLayoutEffect, useRef } from 'react'
+
+import useRefManager from './useRefManager'
+
+function useColumnWidths({ columns, data, loading, bodyRef }) {
+  const [columnRefs, getColumnRef] = useRefManager()
+  const columnWidths = useRef([])
+
+  useLayoutEffect(() => {
+    const nextColumnWidths = []
+    const cells = []
+    let paddingDelta = 0
+
+    // build cells collection
+    for (let key in columnRefs.current) {
+      const [columnIndex, rowIndex, parentRowIndex] = key.split('.')
+      const column = columns[columnIndex]
+      const node = columnRefs.current[key]
+      const isSubColumn = parentRowIndex !== undefined
+
+      // skip sub columns unless specifically enabled
+      if (!column.includeSubCellWidth && isSubColumn) {
+        continue
+      }
+
+      // this is a naive padding calculation, but getComputedStyle is expensive
+      // and all cells should use the same padding so it should be ok
+      // alternatively, we could use a first-class padding API to avoid getComputedStyle
+      if (!paddingDelta) {
+        const computedStyle = getComputedStyle(node)
+        paddingDelta =
+          parseInt(computedStyle.paddingLeft, 10) +
+          parseInt(computedStyle.paddingRight, 10)
+      }
+
+      // only collect widths for undefined column.width
+      if (column.width) {
+        node.style.width = column.width + 'px'
+        if (!nextColumnWidths[columnIndex]) {
+          nextColumnWidths[columnIndex] = column.width
+        }
+      } else {
+        // set cell widths to "auto" so we can take an accurate measurement
+        node.style.width = 'auto'
+
+        // store cell data so it's easier to work with below
+        cells.push({ column, columnIndex, node })
+      }
+    }
+
+    // collect the largest width from the header and body cells
+    for (let index = 0; index < cells.length; index++) {
+      const { column, columnIndex, node } = cells[index]
+      let width = Math.max(
+        Math.ceil(node.getBoundingClientRect().width) - paddingDelta,
+        nextColumnWidths[columnIndex] || 0
+      )
+      if (column.minWidth) {
+        width = Math.max(width, column.minWidth)
+      }
+      if (column.maxWidth) {
+        width = Math.min(width, column.maxWidth)
+      }
+      nextColumnWidths[columnIndex] = width
+    }
+
+    // apply widths back to cells
+    for (let index = 0; index < cells.length; index++) {
+      const { columnIndex, node } = cells[index]
+      node.style.width = nextColumnWidths[columnIndex] + 'px'
+    }
+
+    // apply row widths
+    const minRowWidth = bodyRef.current.scrollWidth
+    for (let index = 0; index < bodyRef.current.children.length; index++) {
+      bodyRef.current.children[index].style.minWidth = minRowWidth + 'px'
+    }
+
+    // update column widths for sub rows
+    columnWidths.current = nextColumnWidths
+  }, [columns, data, loading])
+
+  return { columnWidths, getColumnRef }
+}
+
+export default useColumnWidths

package/src/DataTable/hooks/useHoverFocus.js

@@ -0,0 +1,16 @@
+import { useState } from 'react'
+
+function useHoverFocus() {
+  const [isHoverFocus, setHoverFocus] = useState()
+  return {
+    isHoverFocus,
+    bind: {
+      onFocus: () => setHoverFocus(true),
+      onBlur: () => setHoverFocus(false),
+      onMouseEnter: () => setHoverFocus(true),
+      onMouseLeave: () => setHoverFocus(false),
+    },
+  }
+}
+
+export default useHoverFocus

package/src/DataTable/hooks/useRefManager.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from 'react'
+
+function useRefManager() {
+  const storedRefs = useRef({})
+  const refCallbacks = useRef({})
+  const getRef = useCallback((id) => {
+    if (!refCallbacks.current[id]) {
+      refCallbacks.current[id] = (ref) => {
+        if (!storedRefs.current[id] && ref) {
+          storedRefs.current[id] = ref
+        } else if (!ref) {
+          delete storedRefs.current[id]
+        }
+      }
+    }
+    return refCallbacks.current[id]
+  }, [])
+  return [storedRefs, getRef]
+}
+
+export default useRefManager

package/src/DataTable/hooks/useScrollShadows.js

@@ -0,0 +1,82 @@
+import React, { Fragment, useLayoutEffect, useRef, useState } from 'react'
+import { interpolate } from '@popmotion/popcorn'
+
+import { useMeasure } from '../../hooks'
+import { supportsPassiveEvents } from '../../utils'
+
+const getLeftScrollShadow = interpolate([0, 0.2], [0, 1])
+const getRightScrollShadow = interpolate([0.8, 1], [1, 0])
+const listenerOptions = supportsPassiveEvents
+  ? { capture: true, passive: false }
+  : true
+const shadowStyle = {
+  width: 10,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  zIndex: 30,
+  pointerEvents: 'none',
+}
+
+function getProgress(offset, maxOffset) {
+  return !offset || !maxOffset ? 0 : offset / maxOffset
+}
+
+function getBackground(direction) {
+  const rotate = 90 * direction
+  return `linear-gradient(${rotate}deg, transparent 4px, rgba(125, 125, 125, 0.15))`
+}
+
+function setShadowStyles({ leftNode, rightNode, offset, progress }) {
+  leftNode.style.left = offset + 'px'
+  leftNode.style.background = getBackground(-1)
+  leftNode.style.opacity = getLeftScrollShadow(progress)
+  rightNode.style.right = offset + 'px'
+  rightNode.style.background = getBackground(1)
+  rightNode.style.opacity = getRightScrollShadow(progress)
+}
+
+function useScrollShadows(ref) {
+  const leftShadow = useRef()
+  const rightShadow = useRef()
+  const [canScroll, setCanScroll] = useState(false)
+  const [maxOffset, setMaxOffset] = useState(null)
+  const [useMeasureRef, useMeasureEffect] = useMeasure()
+
+  useMeasureRef(ref)
+
+  useMeasureEffect(([node]) => {
+    setCanScroll(node.scrollWidth > node.offsetWidth)
+    setMaxOffset(node.scrollWidth - node.offsetWidth)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (leftShadow.current && rightShadow.current) {
+      const node = ref.current
+      function handleScroll() {
+        setShadowStyles({
+          leftNode: leftShadow.current,
+          rightNode: rightShadow.current,
+          progress: getProgress(node.scrollLeft, maxOffset),
+          offset: 0,
+        })
+      }
+      handleScroll()
+      node.addEventListener('scroll', handleScroll, listenerOptions)
+      return () => {
+        node.removeEventListener('scroll', handleScroll, listenerOptions)
+      }
+    }
+  }, [maxOffset])
+
+  return (
+    canScroll && (
+      <Fragment>
+        <div ref={leftShadow} style={shadowStyle} aria-hidden />
+        <div ref={rightShadow} style={shadowStyle} aria-hidden />
+      </Fragment>
+    )
+  )
+}
+
+export default useScrollShadows

package/src/DataTable/hooks/useScrollSync.js

@@ -0,0 +1,55 @@
+import { useCallback, useLayoutEffect, useRef } from 'react'
+
+function useScrollSync(...refs) {
+  const timeoutId = useRef()
+  const handleScroll = useCallback(
+    (event) => {
+      const syncedRefs = refs.filter((ref) => ref.current !== event.target)
+      const targetScrollLeft = event.target.scrollLeft
+
+      clearTimeout(timeoutId.current)
+
+      syncedRefs.forEach((ref) => {
+        removeEvent(ref)
+        ref.current.style.willChange = 'scroll-position'
+        ref.current.scrollLeft = targetScrollLeft
+      })
+
+      timeoutId.current = setTimeout(() => {
+        syncedRefs.forEach((ref) => {
+          addEvent(ref)
+          ref.current.style.willChange = ''
+        })
+      }, 120)
+    },
+    [refs]
+  )
+
+  const addEvent = useCallback(
+    (ref) => {
+      ref.current.addEventListener('scroll', handleScroll, {
+        passive: true,
+      })
+    },
+    [handleScroll]
+  )
+
+  const removeEvent = useCallback(
+    (ref) => {
+      ref.current.removeEventListener('scroll', handleScroll, {
+        passive: true,
+      })
+    },
+    [handleScroll]
+  )
+
+  useLayoutEffect(() => {
+    refs.forEach(addEvent)
+    return () => {
+      clearTimeout(timeoutId.current)
+      refs.forEach(removeEvent)
+    }
+  }, [])
+}
+
+export default useScrollSync

package/src/DataTable/hooks/useVariants.js

@@ -0,0 +1,13 @@
+import { defaultVariant } from '../utils/variants'
+
+export default function useVariants(variants) {
+  const parsedVariants = [
+    defaultVariant,
+    ...(Array.isArray(variants) ? variants : [variants]).filter(Boolean),
+  ]
+  return (key, context) => {
+    return parsedVariants.map((variant) =>
+      typeof variant[key] === 'function' ? variant[key](context) : variant[key]
+    )
+  }
+}

package/src/DataTable/index.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react'
+
+import { CheckboxCell, ColumnPicker } from './components'
+import DataTable from './DataTable'
+import { variants } from './utils'
+
+const ForwardRefDataTable = forwardRef((props, ref) => (
+  <DataTable dataTableRef={ref} {...props} />
+))
+
+ForwardRefDataTable.CheckboxCell = CheckboxCell
+ForwardRefDataTable.ColumnPicker = ColumnPicker
+ForwardRefDataTable.variants = variants
+
+export default ForwardRefDataTable

package/src/DataTable/utils/getCell.js

@@ -0,0 +1,9 @@
+function getCell(cell, { rowData, rowIndex, columnIndex, _dragHandleProps }) {
+  if (typeof cell === 'string') {
+    return rowData[cell]
+  } else if (cell) {
+    return cell(rowData, { rowIndex, columnIndex, _dragHandleProps })
+  }
+}
+
+export default getCell

package/src/DataTable/utils/getParsedColumns.js

@@ -0,0 +1,142 @@
+import React from 'react'
+
+import Box from '../../Box'
+import Tooltip from '../../Tooltip'
+import {
+  useCollapsibleRowsStore,
+  useSubRowOpen,
+  useAnySubRowsOpen,
+} from '../hooks/useCollapsibleRows'
+
+import Icon from '../components/Icon'
+
+const buttonStyles = {
+  appearance: 'none',
+  display: 'flex',
+  alignSelf: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 1,
+  margin: 0,
+  border: 'none',
+  borderRadius: 3,
+  backgroundColor: 'hsla(0, 0%, 0%, 0)',
+  fill: 'foreground',
+  cursor: 'pointer',
+  ' &:focus ': {
+    outline: 0,
+  },
+  ' &:hover ': {
+    backgroundColor: 'highlight',
+  },
+}
+
+function CollapseHeader({ accessibility }) {
+  const callbacks = useCollapsibleRowsStore((state) => state.callbacks)
+  const anySubRowsOpen = useAnySubRowsOpen()
+  const tooltipTitle = accessibility.toggleAllSubRowsTooltipTitle(
+    anySubRowsOpen
+  )
+  return (
+    <Tooltip title={tooltipTitle} placement="bottom-start">
+      <Box
+        as="button"
+        display="flex"
+        aria-label={tooltipTitle}
+        css={buttonStyles}
+        onClick={(event) => {
+          event.preventDefault()
+          callbacks.toggleAllSubRows()
+        }}
+      >
+        <Icon
+          name="arrow-down"
+          size="sm"
+          style={{
+            transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
+            transition: 'transform 180ms ease',
+          }}
+        />
+      </Box>
+    </Tooltip>
+  )
+}
+
+function CollapseCell({ rowIndex }) {
+  const callbacks = useCollapsibleRowsStore((state) => state.callbacks)
+  const isSubRowOpen = useSubRowOpen(rowIndex)
+  return (
+    <Box
+      as="button"
+      css={buttonStyles}
+      onClick={(event) => {
+        event.preventDefault()
+        callbacks.toggleSubRowAtIndex(rowIndex)
+      }}
+    >
+      <Icon
+        name="arrow-down"
+        size="sm"
+        style={{
+          transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
+          transition: 'transform 180ms ease',
+        }}
+      />
+    </Box>
+  )
+}
+
+function getParsedColumns({
+  accessibility,
+  columns,
+  hasSubRows,
+  hiddenColumnIds,
+  draggable,
+}) {
+  const nextColumns = columns.filter(
+    (column) =>
+      column !== null &&
+      column !== false &&
+      column !== undefined &&
+      (column.alwaysVisible || hiddenColumnIds.indexOf(column.id) === -1)
+  )
+  if (hasSubRows) {
+    nextColumns.unshift({
+      header: <CollapseHeader accessibility={accessibility} />,
+      cell: (_, { rowIndex }) => <CollapseCell rowIndex={rowIndex} />,
+      subCell: null,
+      width: 32,
+      css: {
+        paddingLeft: draggable ? 0 : undefined,
+        '@media print': { display: 'none !important' },
+      },
+    })
+  }
+  if (draggable) {
+    nextColumns.unshift({
+      cell: (_, { _dragHandleProps }) => (
+        <Box
+          css={buttonStyles}
+          onClick={(event) => event.preventDefault()}
+          {..._dragHandleProps}
+        >
+          <Icon
+            name="drag-handle"
+            size="sm"
+            color="foregroundTertiary"
+            style={{ cursor: 'grab' }}
+          />
+        </Box>
+      ),
+      subCell: null,
+      width: 32,
+      css: {
+        paddingRight: hasSubRows ? 0 : undefined,
+        '@media print': { display: 'none !important' },
+      },
+    })
+  }
+  return nextColumns
+}
+
+export default getParsedColumns

package/src/DataTable/utils/getRowLinkProps.js

@@ -0,0 +1,5 @@
+function getRowLinkProps({ getRowLink, data, isSubRow }) {
+  return getRowLink ? { href: getRowLink(data, isSubRow) } : {}
+}
+
+export default getRowLinkProps

package/src/DataTable/utils/index.js

@@ -0,0 +1,4 @@
+export { default as getCell } from './getCell'
+export { default as getParsedColumns } from './getParsedColumns'
+export { default as getRowLinkProps } from './getRowLinkProps'
+export { variants } from './variants'

package/src/DataTable/utils/variants.js

@@ -0,0 +1,146 @@
+const scrollStyles = {
+  overflowX: 'auto',
+  scrollbarWidth: 'none',
+  msOverflowStyle: 'none',
+  '@media print': {
+    position: 'relative',
+    overflowX: 'visible',
+  },
+  '::-webkit-scrollbar': {
+    width: 0,
+    height: 0,
+  },
+}
+
+export const defaultVariant = {
+  header: {
+    backgroundColor: 'surfaceSecondary',
+    borderBottomColor: 'separatorTertiary',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 1,
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
+    ...scrollStyles,
+  },
+  headerRow: {
+    display: 'flex',
+    minHeight: '48px',
+    backgroundColor: 'inherit',
+  },
+  headerCell: ({ isSortable }) => ({
+    boxSizing: 'content-box',
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    padding: '0 16px',
+    backgroundColor: 'inherit',
+    cursor: isSortable ? 'pointer' : 'default',
+    outline: 0,
+  }),
+  footer: {
+    backgroundColor: 'surfaceSecondary',
+    borderTopColor: 'separatorTertiary',
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    ...scrollStyles,
+  },
+  footerRow: {
+    display: 'flex',
+    backgroundColor: 'inherit',
+  },
+  footerCell: {
+    boxSizing: 'content-box',
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    padding: '0 16px',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'inherit',
+    fontSize: 14,
+  },
+  body: {
+    overflowX: 'auto',
+    WebkitOverflowScrolling: 'touch',
+    '@media print': {
+      overflowX: 'visible',
+    },
+  },
+  bodyRow: ({ firstRow, isLink }) => ({
+    display: 'flex',
+    minHeight: '64px',
+    color: 'inherit',
+    backgroundColor: 'surface',
+    borderTopColor: firstRow ? undefined : 'separatorTertiary',
+    borderTopStyle: firstRow ? undefined : 'solid',
+    borderTopWidth: firstRow ? undefined : 1,
+    cursor: isLink ? 'pointer' : undefined,
+    '&:focus': { outline: 'none' },
+    '&:hover': isLink ? { backgroundColor: 'linkBackground' } : undefined,
+  }),
+  bodyCell: {
+    boxSizing: 'content-box',
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    padding: '0 16px',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'inherit',
+    fontSize: 14,
+  },
+  bodySubRow: ({ isLink }) => ({
+    display: 'flex',
+    minHeight: '44px',
+    color: 'inherit',
+    borderTopColor: 'separatorTertiary',
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    backgroundColor: 'surfaceSecondary',
+    cursor: isLink ? 'pointer' : undefined,
+    '&:focus': { outline: 'none' },
+    '&:hover': isLink ? { backgroundColor: 'linkBackground' } : {},
+  }),
+  bodySubCell: ({
+    firstRow,
+    lastCell,
+    rowIndex,
+    columnIndex,
+    columnWidth,
+  }) => ({
+    boxSizing: 'content-box',
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    width: columnWidth + 'px',
+    padding: '12px 16px',
+    backgroundColor: 'inherit',
+    fontSize: 14,
+  }),
+}
+
+export const variants = {
+  condensed: {
+    headerCell: {
+      padding: '0 8px',
+    },
+    bodyRow: {
+      minHeight: '40px',
+    },
+    bodyCell: {
+      padding: '0 8px',
+    },
+    bodySubRow: {
+      minHeight: '28px',
+    },
+    bodySubCell: {
+      padding: '4px 8px',
+    },
+  },
+}