@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Table/Table.mdx

@@ -0,0 +1,281 @@
+---
+title: Table
+category: General
+---
+
+```jsx live
+const data = generateFakeData(
+  (faker) => ({
+    id: faker.random.uuid(),
+    avatar: faker.image.avatar(),
+    firstName: faker.name.firstName(),
+    lastName: faker.name.lastName(),
+    age: faker.random.number(),
+  }),
+  10
+)
+render(
+  <Table
+    data={data}
+    columns={[
+      {
+        width: 54,
+        cell: (row, state) => {
+          return <Avatar source={row.avatar} />
+        },
+      },
+      {
+        header: 'First Name',
+        cell: 'firstName',
+      },
+      {
+        header: 'Last Name',
+        cell: 'lastName',
+      },
+    ]}
+  />
+)
+```
+
+```jsx live
+const data = generateFakeData(
+  (faker) => ({
+    id: faker.random.uuid(),
+    title: faker.name.title(),
+    bpm: faker.random.number(),
+    subRow: generateFakeData(
+      (faker) => ({
+        id: faker.random.uuid(),
+        title: faker.name.title(),
+        bpm: faker.random.number(),
+      }),
+      3
+    ),
+  }),
+  10
+)
+render(
+  <Table
+    data={data}
+    columns={[
+      {
+        header: <Table.CheckboxCell />,
+        cell: (props) => <Table.CheckboxCell />,
+        subRowCell: null,
+      },
+      {
+        header: 'Title',
+        cell: 'title',
+      },
+      {
+        header: 'BPM',
+        cell: 'bpm',
+      },
+    ]}
+    subRowData={(rowData) => rowData.subRow}
+  />
+)
+```
+
+```jsx live
+function getHiddenColumnIdsFromAPI() {
+  const localHiddenColumnIds =
+    typeof window === 'undefined'
+      ? null
+      : localStorage.getItem('localHiddenColumnIds')
+  return localHiddenColumnIds ? JSON.parse(localHiddenColumnIds) : []
+}
+
+class StatefulCell extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isEditing: false,
+    }
+  }
+  render() {
+    return (
+      <Box>
+        {this.state.isEditing ? (
+          <Select onChange={() => this.setState({ isEditing: false })}>
+            <Select.Option value="1">Value 1</Select.Option>
+          </Select>
+        ) : (
+          <Text
+            wrap={false}
+            truncate
+            onClick={() => this.setState({ isEditing: true })}
+          >
+            {this.props.name}
+          </Text>
+        )}
+      </Box>
+    )
+  }
+}
+
+class TableExample extends React.Component {
+  constructor(props) {
+    super(props)
+
+    const initialAmount = 10
+
+    this.state = {
+      data: this.getData(initialAmount),
+      amount: initialAmount,
+      compactHeader: false,
+      hiddenColumnIds: getHiddenColumnIdsFromAPI(),
+    }
+
+    this.hideColumns = ({ hiddenColumnIds }) => {
+      this.setState({ hiddenColumnIds })
+      localStorage.setItem(
+        'localHiddenColumnIds',
+        JSON.stringify(hiddenColumnIds)
+      )
+    }
+
+    this.loadNewData = () => {
+      this.setState({ data: this.getData(this.state.amount) })
+    }
+  }
+
+  getColumns() {
+    return [
+      {
+        id: 'avatar',
+        width: 54,
+        cell: (row, state) => {
+          return <Avatar source={row.avatar} />
+        },
+        sticky: true,
+      },
+      {
+        id: 'fullName',
+        header: 'Full Name',
+        cell: (row) => (
+          <Text wrap={false}>{row.firstName + ' ' + row.lastName}</Text>
+        ),
+        alwaysVisible: true,
+        // sticky: true,
+      },
+      {
+        id: 'firstName',
+        header: 'First Name',
+        cell: 'firstName',
+        // width: 90,
+        // vertical: true,
+      },
+      {
+        id: 'lastName',
+        sortable: true,
+        header: 'Last Name',
+        cell: 'lastName',
+      },
+      {
+        id: 'company',
+        header: 'Company',
+        cell: (row) => {
+          return <StatefulCell name={row.companyName} />
+        },
+        width: 200,
+        truncate: true,
+      },
+      {
+        id: 'age',
+        width: 64,
+        justifyContent: 'center',
+        marginLeft: 'auto',
+        position: 'sticky',
+        right: 0,
+        header: <Icon name="general.person" />,
+        label: 'Age',
+        cell: 'age',
+      },
+    ]
+  }
+
+  getData(amount) {
+    return generateFakeData(
+      (faker) => ({
+        id: faker.random.uuid(),
+        avatar: faker.image.avatar(),
+        firstName: faker.name.firstName(),
+        lastName: faker.name.lastName(),
+        companyName: faker.company.companyName(),
+        age: faker.random.number(),
+      }),
+      amount
+    )
+  }
+
+  render() {
+    const { amount, data, hiddenColumnIds } = this.state
+    const columns = this.getColumns()
+    return (
+      <Card>
+        <StackView axis="horizontal" alignment="center" padding={2}>
+          <Heading level={3}>{data.length} Results</Heading>
+          <StackView
+            axis="horizontal"
+            alignment="center"
+            marginLeft="auto"
+            spacing={1}
+          >
+            <Group>
+              <Input
+                type="number"
+                min={1}
+                autoWidth
+                value={amount}
+                onChange={(event) =>
+                  this.setState({ amount: +event.target.value })
+                }
+              />
+              <Button
+                title="Reload Data"
+                variant="outline"
+                onClick={this.loadNewData}
+              />
+            </Group>
+            <Button
+              title="Compact header"
+              iconRight={
+                this.state.compactHeader ? { name: 'general.check' } : undefined
+              }
+              variant="outline"
+              onClick={() =>
+                this.setState({ compactHeader: !this.state.compactHeader })
+              }
+            />
+            <Table.ColumnPicker
+              columns={columns.filter((column) => column.id !== 'avatar')}
+              hiddenColumnIds={hiddenColumnIds}
+              onChange={this.hideColumns}
+            />
+          </StackView>
+        </StackView>
+        <Divider margin={0} />
+        <Table
+          headerColor="white"
+          compactHeader={this.state.compactHeader}
+          caption="People in Carlsbad Church"
+          data={data}
+          columns={columns}
+          hiddenColumnIds={hiddenColumnIds}
+          getRowLink={(rowData) =>
+            `https://google.com/search?q=${rowData.companyName}`
+          }
+          onRowSort={(data) => this.setState({ data })}
+          columnDividers={true}
+          rowDividers={true}
+          minHeight="auto"
+          minRowHeight={4}
+        />
+      </Card>
+    )
+  }
+}
+
+render(TableExample)
+```

package/src/Table/TableBase.js

@@ -0,0 +1,166 @@
+import React, { PureComponent } from 'react'
+
+import { Viewport } from '../vendor/react-measure'
+
+import AnimateScroll from './AnimateScroll'
+import Body from './Body'
+import Header from './Header'
+import HeaderRow from './HeaderRow'
+import NavigationArrow from './NavigationArrow'
+import ScrollShadow from './ScrollShadow'
+import TableContainer from './TableContainer'
+
+const BUTTON_WIDTH = 28
+
+class TableBase extends PureComponent {
+  setHeaderRef = (node) => {
+    this.tableHeader = node
+  }
+
+  clearTimers = () => {
+    clearTimeout(this.scrollTimeout)
+    clearInterval(this.scrollInterval)
+  }
+
+  getMouseTouchHandlers = ({ animateScroll, getClosestColumnPosition }) => (
+    direction
+  ) => {
+    const onPressDown = () => {
+      this.clearTimers()
+      this.scrollTimeout = setTimeout(() => {
+        animateScroll.moveScrollX(100 * direction)
+        this.scrollInterval = setInterval(() => {
+          animateScroll.moveScrollX(100 * direction)
+        }, 60)
+      }, 120)
+    }
+    const onPressUp = () => {
+      this.clearTimers()
+      animateScroll.setScrollX(getClosestColumnPosition(direction))
+    }
+    return {
+      onMouseDown: onPressDown,
+      onMouseUp: onPressUp,
+      onMouseLeave: this.clearTimers,
+      onTouchStart: onPressDown,
+      onTouchEnd: onPressUp,
+      onTouchCancel: this.clearTimers,
+    }
+  }
+
+  handleBodyScroll = (event) => {
+    this.tableHeader.scrollLeft = event.target.scrollLeft
+  }
+
+  render() {
+    const {
+      body,
+      caption,
+      columnWidths,
+      header,
+      headerColor,
+      headerHeight,
+      minHeight,
+      offsets,
+      rowWidth,
+      ...restProps
+    } = this.props
+    return (
+      <AnimateScroll>
+        {(animateScroll) => (
+          <Viewport>
+            {(viewport) => {
+              const canScroll = rowWidth > viewport.width
+
+              const progress = canScroll
+                ? viewport.scrollX / (rowWidth - viewport.width)
+                : null
+
+              const getClosestColumnPosition = (direction) => {
+                const currentScrollPosition =
+                  direction === 1
+                    ? viewport.scrollX + viewport.width
+                    : viewport.scrollX
+                let newScrollPosition = 0
+                let totalWidth = 0
+                columnWidths.some((columnWidth) => {
+                  totalWidth += columnWidth
+                  if (totalWidth > currentScrollPosition) {
+                    newScrollPosition =
+                      direction === 1 ? totalWidth : totalWidth - columnWidth
+                    return true
+                  }
+                  return false
+                })
+                return direction === 1
+                  ? newScrollPosition -
+                      viewport.width +
+                      offsets.right +
+                      BUTTON_WIDTH
+                  : newScrollPosition - offsets.left - BUTTON_WIDTH
+              }
+
+              const mouseTouchHandlers = this.getMouseTouchHandlers({
+                animateScroll,
+                getClosestColumnPosition,
+              })
+
+              return (
+                <TableContainer
+                  minHeight={minHeight}
+                  aria-label={caption}
+                  {...restProps}
+                >
+                  {canScroll && (
+                    <ScrollShadow
+                      position="left"
+                      offset={offsets.left}
+                      progress={progress}
+                    />
+                  )}
+                  <Header
+                    innerRef={this.setHeaderRef}
+                    backgroundColor={headerColor}
+                  >
+                    <HeaderRow style={{ minWidth: rowWidth }}>
+                      <NavigationArrow
+                        headerHeight={headerHeight}
+                        offsets={offsets}
+                        progress={progress}
+                        mouseTouchHandlers={mouseTouchHandlers}
+                        direction={-1}
+                      />
+                      {header}
+                      <NavigationArrow
+                        headerHeight={headerHeight}
+                        offsets={offsets}
+                        progress={progress}
+                        mouseTouchHandlers={mouseTouchHandlers}
+                        direction={1}
+                      />
+                    </HeaderRow>
+                  </Header>
+                  <Body
+                    innerRef={viewport.ref(animateScroll.ref)}
+                    onScroll={this.handleBodyScroll}
+                  >
+                    {body}
+                  </Body>
+                  {canScroll && (
+                    <ScrollShadow
+                      position="right"
+                      offset={offsets.right}
+                      progress={progress}
+                    />
+                  )}
+                </TableContainer>
+              )
+            }}
+          </Viewport>
+        )}
+      </AnimateScroll>
+    )
+  }
+}
+
+export default TableBase

package/src/Table/TableContainer.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import Box from '../Box'
+
+const TableContainer = (props) => (
+  <Box
+    role="table"
+    shrink={1}
+    grow={1}
+    backgroundColor="white"
+    position="relative"
+    {...props}
+  />
+)
+
+export default TableContainer

package/src/Table/TableWrapper.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import Box from '../Box'
+
+const TableWrapper = (props) => <Box shrink={1} grow={1} {...props} />
+
+export default TableWrapper

package/src/Table/index.js

@@ -0,0 +1,2 @@
+import Table from './Table'
+export default Table

package/src/Tabs/Tab.js

@@ -0,0 +1,51 @@
+// @flow
+import React from 'react'
+
+import StackView from '../StackView'
+import { useHover } from '../hooks'
+import { useThemeProps } from '../system'
+
+export type Props = { isActive?: boolean }
+
+function Tab(props: Props) {
+  const { axis, children, disabled, id, isActive, ...restProps } =
+    useThemeProps('tabs.tab', props)
+  const { hover, hoverProps } = useHover()
+  const hovered = !disabled && hover
+  const borderSize = 2
+  const borderColor = isActive
+    ? 'primary'
+    : hovered
+    ? 'separator'
+    : 'separatorSecondary'
+  if (axis === 'horizontal') {
+    restProps.borderBottomWidth = borderSize
+    restProps.borderBottomColor = borderColor
+  } else {
+    restProps.borderRightWidth = borderSize
+    restProps.borderRightColor = borderColor
+  }
+  return (
+    <StackView
+      id={id}
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={`${id}-panel`}
+      aria-disabled={disabled}
+      alignment="center"
+      distribution="center"
+      fontSize={4}
+      padding={1}
+      color={isActive || hovered ? 'foreground' : 'foregroundSecondary'}
+      cursor={disabled ? 'not-allowed' : 'pointer'}
+      opacity={disabled ? 0.6 : undefined}
+      {...hoverProps}
+      {...restProps}
+    >
+      {children}
+    </StackView>
+  )
+}
+
+Tab.displayName = 'Tabs.Tab'
+export default Tab

package/src/Tabs/TabList.js

@@ -0,0 +1,67 @@
+// @flow
+import React, { Children, cloneElement } from 'react'
+
+import StackView from '../StackView'
+import { useThemeProps } from '../system'
+
+export const TABLIST_DISPLAY_NAME = 'TabList'
+
+type Props = { activeIndex?: number }
+
+function TabList(props: Props) {
+  const {
+    activeIndex,
+    axis = 'horizontal',
+    children,
+    id,
+    moveTabFocus,
+    setActiveIndex,
+    ...restProps
+  } = useThemeProps('tabs.tabList', props)
+  const backwardKey = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+  const forwardKey = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+  return (
+    <StackView
+      role="tablist"
+      aria-orientation={axis}
+      axis={axis}
+      distribution="fill"
+      {...restProps}
+    >
+      {Children.map(children, (child, index) =>
+        cloneElement(child, {
+          axis,
+          id: `${id}-${index}`,
+          isActive: index === activeIndex,
+          tabIndex: child.props.disabled
+            ? undefined
+            : index !== activeIndex
+            ? -1
+            : 0,
+          onFocus: () => setActiveIndex(index),
+          onKeyDown: (event) => {
+            if (event.key === backwardKey) {
+              event.preventDefault()
+              moveTabFocus(-1)
+            }
+            if (event.key === forwardKey) {
+              event.preventDefault()
+              moveTabFocus(1)
+            }
+            if (event.key === 'Home') {
+              event.preventDefault()
+              moveTabFocus(0)
+            }
+            if (event.key === 'End') {
+              event.preventDefault()
+              moveTabFocus(Children.count(children) - 1)
+            }
+          },
+        })
+      )}
+    </StackView>
+  )
+}
+
+TabList.displayName = TABLIST_DISPLAY_NAME
+export default TabList

package/src/Tabs/TabPanel.js

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import { useThemeProps } from '../system'
+
+export type Props = { activeId?: any }
+
+function TabPanel(props: Props) {
+  const { activeId, ...restProps } = useThemeProps('tabs.tabPanel', props)
+  return (
+    <Box
+      role="tabpanel"
+      id={`${activeId}-panel`}
+      aria-labelledby={activeId}
+      tabIndex={0}
+      {...restProps}
+    />
+  )
+}
+
+export default TabPanel

package/src/Tabs/TabPanels.js

@@ -0,0 +1,25 @@
+// @flow
+import React, { cloneElement } from 'react'
+
+import Box from '../Box'
+import { useThemeProps } from '../system'
+
+export const TABPANELS_DISPLAY_NAME = 'TabPanels'
+
+type Props = { activeIndex?: number }
+
+function TabPanels(props: Props) {
+  const { activeIndex, children, id, ...restProps } = useThemeProps(
+    'tabs.tabPanels',
+    props
+  )
+  const child = children[activeIndex]
+  return (
+    <Box {...restProps}>
+      {child ? cloneElement(child, { activeId: `${id}-${activeIndex}` }) : null}
+    </Box>
+  )
+}
+
+TabPanels.displayName = TABPANELS_DISPLAY_NAME
+export default TabPanels