@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/src/SegmentedTabs/SegmentedTabs.js

@@ -1,8 +1,9 @@
 // @flow
-import React, { Component } from 'react'
+import React, { useCallback, useState, useEffect } from 'react'
 
 import Text from '../Text'
 import StackView from '../StackView'
+import { useThemeProps } from '../system'
 
 function Tab({ isSelected, selectedColor, onSelect, ...restProps }) {
   return (
@@ -37,33 +38,17 @@ type Props = {
   tabProps: object,
 }
 
-class SegmentedTabs extends Component<Props> {
-  static defaultProps = {
-    color: 'primary',
-    getTabLabel: (tab) => tab,
-  }
-
-  constructor(props: Props) {
-    super(props)
-    this.state = {
-      activeIndex: this.getActiveIndex(props),
-    }
-  }
-
-  componentDidUpdate(lastProps) {
-    if (this.props.activeTab) {
-      const lastActiveIndex = this.getActiveIndex(lastProps)
-      const nextActiveIndex = this.getActiveIndex(this.props)
-      if (
-        lastActiveIndex !== nextActiveIndex ||
-        this.state.activeIndex !== nextActiveIndex
-      ) {
-        this.setState({ activeIndex: nextActiveIndex })
-      }
-    }
-  }
-
-  getActiveIndex({ activeTab, tabs }) {
+function SegmentedTabs(props: Props) {
+  const {
+    activeTab,
+    color = 'primary',
+    getTabLabel = (tab) => tab,
+    onChange,
+    tabs,
+    tabProps,
+    ...restProps
+  } = useThemeProps('segmentedTabs', props)
+  const getActiveIndex = useCallback(({ activeTab, tabs }) => {
     let index
     if (typeof activeTab === 'function') {
       index = tabs.reduce((searchIndex, tab, index) => {
@@ -76,53 +61,48 @@ class SegmentedTabs extends Component<Props> {
       index = activeTab === undefined ? 0 : tabs.indexOf(activeTab)
     }
     return index
-  }
+  })
+  const [activeIndex, setActiveIndex] = useState(getActiveIndex(props))
 
-  setIndex = (index) => {
-    if (this.props.activeTab === undefined) {
-      this.setState({
-        activeIndex: index,
-      })
+  const setIndex = useCallback((index) => {
+    if (activeTab === undefined) {
+      setActiveIndex(index)
+    }
+    if (onChange) {
+      onChange(tabs[index])
     }
-    if (this.props.onChange) {
-      this.props.onChange(this.props.tabs[index])
+  })
+
+  useEffect(() => {
+    const newActiveIndex = getActiveIndex(props)
+
+    if (activeIndex !== newActiveIndex) {
+      setActiveIndex(newActiveIndex)
     }
-  }
+  }, [activeTab])
 
-  render() {
-    const {
-      activeTab,
-      color,
-      getTabLabel,
-      onChange,
-      tabs,
-      tabProps,
-      ...restProps
-    } = this.props
-    const { activeIndex } = this.state
-    return (
-      <StackView
-        role="group"
-        axis="horizontal"
-        distribution="fill"
-        position="relative"
-        {...restProps}
-      >
-        {tabs.map((tab, index) => (
-          <Tab
-            key={index}
-            index={index}
-            isSelected={index === activeIndex}
-            selectedColor={color}
-            onSelect={() => this.setIndex(index)}
-            {...tabProps}
-          >
-            {getTabLabel(tab)}
-          </Tab>
-        ))}
-      </StackView>
-    )
-  }
+  return (
+    <StackView
+      role="group"
+      axis="horizontal"
+      distribution="fill"
+      position="relative"
+      {...restProps}
+    >
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          index={index}
+          isSelected={index === activeIndex}
+          selectedColor={color}
+          onSelect={() => setIndex(index)}
+          {...tabProps}
+        >
+          {getTabLabel(tab)}
+        </Tab>
+      ))}
+    </StackView>
+  )
 }
 
 export default SegmentedTabs

package/src/SegmentedTabs/SegmentedTabs.mdx

@@ -2,6 +2,7 @@
 title: SegmentedTabs
 category: General
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: segmentedTabs
 ---
 
 ```jsx live

package/src/Tabs/Tab.js

@@ -3,11 +3,13 @@ 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 } = props
+  const { axis, children, disabled, id, isActive, ...restProps } =
+    useThemeProps('tabs.tab', props)
   const { hover, hoverProps } = useHover()
   const hovered = !disabled && hover
   const borderSize = 2

package/src/Tabs/TabList.js

@@ -1,73 +1,67 @@
 // @flow
-import React, { Component, Children, cloneElement } from 'react'
+import React, { Children, cloneElement } from 'react'
 
 import StackView from '../StackView'
+import { useThemeProps } from '../system'
 
 export const TABLIST_DISPLAY_NAME = 'TabList'
 
 type Props = { activeIndex?: number }
 
-class TabList extends Component<Props> {
-  static displayName = TABLIST_DISPLAY_NAME
-
-  static defaultProps = {
-    axis: 'horizontal',
-  }
-
-  render() {
-    const {
-      activeIndex,
-      axis,
-      children,
-      id,
-      moveTabFocus,
-      setActiveIndex,
-      ...restProps
-    } = this.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>
-    )
-  }
+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

@@ -2,11 +2,12 @@
 import React from 'react'
 
 import Box from '../Box'
+import { useThemeProps } from '../system'
 
 export type Props = { activeId?: any }
 
 function TabPanel(props: Props) {
-  const { activeId, ...restProps } = props
+  const { activeId, ...restProps } = useThemeProps('tabs.tabPanel', props)
   return (
     <Box
       role="tabpanel"

package/src/Tabs/TabPanels.js

@@ -1,26 +1,25 @@
 // @flow
-import React, { Component, cloneElement } from 'react'
+import React, { cloneElement } from 'react'
 
 import Box from '../Box'
+import { useThemeProps } from '../system'
 
 export const TABPANELS_DISPLAY_NAME = 'TabPanels'
 
 type Props = { activeIndex?: number }
 
-class TabPanels extends Component<Props> {
-  static displayName = TABPANELS_DISPLAY_NAME
-
-  render() {
-    const { activeIndex, children, id, ...restProps } = this.props
-    const child = children[activeIndex]
-    return (
-      <Box {...restProps}>
-        {child
-          ? cloneElement(child, { activeId: `${id}-${activeIndex}` })
-          : null}
-      </Box>
-    )
-  }
+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

package/src/Tabs/Tabs.js

@@ -1,13 +1,12 @@
 // @flow
-import React, { Component, Children } from 'react'
+import React, { useState, useRef, useCallback, Children } from 'react'
 
 import StackView from '../StackView'
 import { generateId } from '../utils'
+import { useThemeProps } from '../system'
 
-import Tab from './Tab'
-import TabList, { TABLIST_DISPLAY_NAME } from './TabList'
-import TabPanel from './TabPanel'
-import TabPanels, { TABPANELS_DISPLAY_NAME } from './TabPanels'
+import { TABLIST_DISPLAY_NAME } from './TabList'
+import { TABPANELS_DISPLAY_NAME } from './TabPanels'
 
 type Props = {
   /**
@@ -31,103 +30,83 @@ type Props = {
   onChange?: Function,
 }
 
-class Tabs extends Component<Props> {
-  static Tab = Tab
-
-  static TabList = TabList
-
-  static TabPanel = TabPanel
-
-  static TabPanels = TabPanels
-
-  static defaultProps = {
-    activeIndex: null,
-    defaultActiveIndex: 0,
-  }
-
-  id = generateId('tabs')
-
-  state = {
-    activeIndex: this.props.defaultActiveIndex,
-  }
-
-  setTabList = (node) => {
-    if (node) {
-      this.tabList = node.querySelector('[role="tablist"]')
+function Tabs(props: Props) {
+  const {
+    activeIndex = null,
+    children,
+    defaultActiveIndex = 0,
+    onChange,
+    ...restProps
+  } = useThemeProps('tabs', props)
+
+  const id = generateId('tabs')
+  const [localActiveIndex, setLocalActiveIndex] = useState(defaultActiveIndex)
+  const tabListRef = useRef(null)
+
+  const setActiveIndex = useCallback((index) => {
+    if (onChange) {
+      onChange(index)
     }
-  }
-
-  setActiveIndex = (activeIndex) => {
-    if (this.props.onChange) {
-      this.props.onChange(activeIndex)
+    if (activeIndex === null) {
+      setLocalActiveIndex(index)
     }
-    if (this.props.activeIndex === null) {
-      this.setState({ activeIndex })
-    }
-  }
+  })
 
-  getActiveIndex = () => {
-    return this.props.activeIndex === null
-      ? this.state.activeIndex
-      : this.props.activeIndex
-  }
+  const getActiveIndex = useCallback(() => {
+    return activeIndex === null ? localActiveIndex : activeIndex
+  })
 
-  getNextTab = (startIndex, direction) => {
-    const tabCount = this.tabList.children.length
+  const getNextTab = useCallback((startIndex, direction) => {
+    const tabCount = tabListRef.current.children.length
     let nextIndex = startIndex + direction
     if (nextIndex < 0) {
       nextIndex = tabCount - 1
     } else if (nextIndex >= tabCount) {
       nextIndex = 0
     }
-    const nextTab = this.tabList.children[nextIndex]
+    const nextTab = tabListRef.current.children[nextIndex]
     if (nextTab.getAttribute('aria-disabled') === 'true') {
-      return this.getNextTab(nextIndex, direction)
+      return getNextTab(nextIndex, direction)
     } else {
       return nextTab
     }
-  }
+  })
 
-  moveTabFocus = (direction) => {
-    const nextTab = this.getNextTab(this.getActiveIndex(), direction)
+  const moveTabFocus = useCallback((direction) => {
+    const nextTab = getNextTab(getActiveIndex(), direction)
     if (nextTab) {
       nextTab.focus()
     }
-  }
-
-  render() {
-    const {
-      activeIndex,
-      children,
-      defaultActiveIndex,
-      onChange,
-      ...restProps
-    } = this.props
-    return (
-      <StackView innerRef={this.setTabList} {...restProps}>
-        {Children.map(children, (child, index) => {
-          if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
-            return React.cloneElement(child, {
-              id: this.id,
-              activeIndex: this.getActiveIndex(),
-              moveTabFocus: this.moveTabFocus,
-              setActiveIndex: this.setActiveIndex,
-            })
-          } else if (
-            child &&
-            child.type.displayName === TABPANELS_DISPLAY_NAME
-          ) {
-            return React.cloneElement(child, {
-              id: this.id,
-              activeIndex: this.getActiveIndex(),
-            })
-          } else {
-            return child
-          }
-        })}
-      </StackView>
-    )
-  }
+  })
+
+  return (
+    <StackView
+      innerRef={(node) => {
+        if (node) {
+          tabListRef.current = node.querySelector('[role="tablist"]')
+        }
+      }}
+      {...restProps}
+    >
+      {Children.map(children, (child, index) => {
+        if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
+          return React.cloneElement(child, {
+            id,
+            activeIndex: getActiveIndex(),
+            moveTabFocus,
+            setActiveIndex,
+          })
+        } else if (child && child.type.displayName === TABPANELS_DISPLAY_NAME) {
+          return React.cloneElement(child, {
+            id,
+            activeIndex: getActiveIndex(),
+          })
+        } else {
+          return child
+        }
+      })}
+    </StackView>
+  )
 }
 
 export default Tabs

package/src/Tabs/Tabs.mdx

@@ -3,48 +3,47 @@ title: Tabs
 category: General
 summary: A single content area with multiple panels, each associated with a header in a list.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: tabs
 ---
 
 ```jsx live
-const { Tab, TabList, TabPanel, TabPanels } = Tabs
 const tabs = [1, 2, 3, 4]
 render(
   <Tabs>
-    <TabList minWidth={60}>
+    <Tabs.TabList minWidth={60}>
       {tabs.map((tab, index) => (
-        <Tab key={tab} disabled={index === 2}>
+        <Tabs.Tab key={tab} disabled={index === 2}>
           Tab {tab}
-        </Tab>
+        </Tabs.Tab>
       ))}
-    </TabList>
-    <TabPanels>
+    </Tabs.TabList>
+    <Tabs.TabPanels>
       {tabs.map((tab) => (
-        <TabPanel key={tab} padding={2}>
+        <Tabs.TabPanel key={tab} padding={2}>
           Content for tab {tab}
-        </TabPanel>
+        </Tabs.TabPanel>
       ))}
-    </TabPanels>
+    </Tabs.TabPanels>
   </Tabs>
 )
 ```
 
 ```jsx live
-const { Tab, TabList, TabPanel, TabPanels } = Tabs
 const tabs = [1, 2, 3, 4]
 render(
   <Card as={Tabs} axis="horizontal">
-    <TabList axis="vertical" distribution="start" minWidth={20}>
+    <Tabs.TabList axis="vertical" distribution="start" minWidth={20}>
       {tabs.map((tab) => (
-        <Tab key={tab}>Tab {tab}</Tab>
+        <Tabs.Tab key={tab}>Tab {tab}</Tabs.Tab>
       ))}
-    </TabList>
-    <TabPanels>
+    </Tabs.TabList>
+    <Tabs.TabPanels>
       {tabs.map((tab) => (
-        <TabPanel key={tab} padding={2}>
+        <Tabs.TabPanel key={tab} padding={2}>
           Content for tab {tab}
-        </TabPanel>
+        </Tabs.TabPanel>
       ))}
-    </TabPanels>
+    </Tabs.TabPanels>
   </Card>
 )
 ```

package/src/Tabs/index.js

@@ -1,2 +1,10 @@
 import Tabs from './Tabs'
+import Tab from './Tab'
+import TabList from './TabList'
+import TabPanel from './TabPanel'
+import TabPanels from './TabPanels'
+Tabs.Tab = Tab
+Tabs.TabList = TabList
+Tabs.TabPanel = TabPanel
+Tabs.TabPanels = TabPanels
 export default Tabs

package/src/ThemeProvider/ThemeProvider.tsx

@@ -25,7 +25,7 @@ export const themeInitializerScript = `
 try {
   var theme = window.localStorage.getItem('${STORAGE_KEY}')
   if (theme) {
-    document.body.dataset.theme = theme
+    document.documentElement.dataset.theme = theme
   }
 } catch (e) {}
 `