@planningcenter/tapestry-react 2.1.2 → 2.2.0

package/src/Tooltip/Tooltip.js

@@ -1,9 +1,18 @@
 // @flow
-import React, { Component, Children, cloneElement } from 'react'
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useState,
+  useCallback,
+  useImperativeHandle,
+  useEffect,
+} from 'react'
 import mitt from 'mitt'
 
 import Popover from '../Popover'
 import { composeEvents, pageViewChange } from '../utils'
+import { useThemeProps } from '../system'
 
 export type Props = {
   /**
@@ -96,191 +105,164 @@ function clearGlobalTimeout() {
   clearTimeout(globalTimeoutId)
 }
 
-class Tooltip extends Component<Props> {
-  static defaultProps = {
-    openDelay: 500,
-    closeDelay: 300,
-    keepInView: true,
-    triggerOnFocus: true,
-    triggerOnHover: true,
-    defaultOpen: false,
-  }
-
-  state = {
-    isPopoverOpen: this.props.defaultOpen,
-  }
-
-  isPageInView = true
-
-  isFocused = false
-
-  isMouseDown = false
-
-  openTimeoutId = null
-
-  closeTimeoutId = null
+function Tooltip(props: Props, ref) {
+  const {
+    children,
+    openDelay = 500,
+    closeDelay = 300,
+    defaultOpen = false,
+    keepInView = true,
+    placement,
+    popoverProps,
+    renderTo,
+    title,
+    triggerOnFocus = true,
+    triggerOnHover = true,
+    ...childProps
+  } = useThemeProps('tooltip', props)
+
+  let isPageInView = true
+  let isFocused = false
+  let isMouseDown = false
+  let openTimeoutId = null
+  let closeTimeoutId = null
 
   // prevents tooltips showing when focused and navigating back to a page after leaving
-  cleanupPageViewChange = pageViewChange((inView) =>
-    setTimeout(() => (this.isPageInView = inView))
+  const cleanupPageViewChange = useCallback(
+    pageViewChange((inView) => setTimeout(() => (isPageInView = inView)))
   )
+  const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
+
+  useEffect(() => {
+    emitter.on('CLOSE_OPEN_TOOLTIPS', close)
+    return () => {
+      emitter.off('CLOSE_OPEN_TOOLTIPS', close)
+      clearTimeout(openTimeoutId)
+      clearTimeout(closeTimeoutId)
+      cleanupPageViewChange()
+    }
+  }, [])
 
-  componentDidMount() {
-    emitter.on('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips)
+  const open = () => {
+    clearTimeout(closeTimeoutId)
+    closeTimeoutId = null
+    setIsPopoverOpen(true)
   }
 
-  componentDidUpdate(lastProps) {
-    if (
-      (lastProps.triggerOnFocus !== this.props.triggerOnFocus &&
-        this.props.triggerOnFocus === false) ||
-      (lastProps.triggerOnHover !== this.props.triggerOnHover &&
-        this.triggerOnHover === false)
-    ) {
-      this.close()
-    }
+  const close = () => {
+    clearTimeout(openTimeoutId)
+    openTimeoutId = null
+    setIsPopoverOpen(false)
   }
 
-  componentWillUnmount() {
-    emitter.off('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips)
-    clearTimeout(this.openTimeoutId)
-    clearTimeout(this.closeTimeoutId)
-    this.cleanupPageViewChange()
+  const toggle = () => {
+    setIsPopoverOpen(!isPopoverOpen)
   }
 
-  handleCloseOpenTooltips = (instance) => {
-    if (this !== instance) {
-      this.close()
+  useImperativeHandle(ref, () => ({
+    open,
+    close,
+    toggle,
+  }))
+
+  useEffect(() => {
+    if (triggerOnFocus === false) {
+      close()
     }
-  }
+  }, [triggerOnFocus])
 
-  createOpenTimeout = () => {
+  useEffect(() => {
+    if (triggerOnHover === false) {
+      close()
+    }
+  }, [triggerOnHover])
+
+  const createOpenTimeout = useCallback(() => {
     clearGlobalTimeout()
-    if (this.openTimeoutId === null) {
-      clearTimeout(this.closeTimeoutId)
-      this.closeTimeoutId = null
-      if (this.state.isPopoverOpen === false) {
+    if (openTimeoutId === null) {
+      clearTimeout(closeTimeoutId)
+      closeTimeoutId = null
+      if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS')
-        this.openTimeoutId = setTimeout(
-          () => this.open(),
-          instantDelay ? 0 : this.props.openDelay
-        )
+        openTimeoutId = setTimeout(() => open(), instantDelay ? 0 : openDelay)
       }
     }
-  }
+  })
 
-  createCloseTimeout = () => {
+  const createCloseTimeout = useCallback(() => {
     startGlobalTimeout()
-    if (this.closeTimeoutId === null) {
-      clearTimeout(this.openTimeoutId)
-      this.openTimeoutId = null
-      this.closeTimeoutId = setTimeout(() => {
-        this.close()
-      }, this.props.closeDelay)
+    if (closeTimeoutId === null) {
+      clearTimeout(openTimeoutId)
+      openTimeoutId = null
+      closeTimeoutId = setTimeout(() => {
+        close()
+      }, closeDelay)
     }
-  }
+  })
 
-  open = () => {
-    clearTimeout(this.closeTimeoutId)
-    this.closeTimeoutId = null
-    this.setState({ isPopoverOpen: true })
-  }
-
-  close = () => {
-    clearTimeout(this.openTimeoutId)
-    this.openTimeoutId = null
-    this.setState({ isPopoverOpen: false })
-  }
-
-  toggle = () => {
-    this.setState((state) => ({ isPopoverOpen: !state.isPopoverOpen }))
-  }
-
-  handleFocus = () => {
-    if (this.isPageInView && !this.isMouseDown) {
-      this.open()
+  const handleFocus = useCallback(() => {
+    if (isPageInView && !isMouseDown) {
+      open()
     }
+  })
+
+  const handleMouseDown = useCallback(() => {
+    isMouseDown = true
+    close()
+  })
+
+  const handleMouseUp = useCallback(() => {
+    isMouseDown = false
+  })
+
+  const child = Children.only(children)
+  const {
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onMouseUp,
+  } = child.props
+
+  if (!title) {
+    return cloneElement(child, childProps)
   }
 
-  handleMouseDown = () => {
-    this.isMouseDown = true
-    this.close()
+  if (triggerOnFocus) {
+    childProps.onFocus = composeEvents(handleFocus, onFocus)
+    childProps.onBlur = composeEvents(close, onBlur)
+    childProps.onMouseDown = composeEvents(handleMouseDown, onMouseDown)
+    childProps.onMouseUp = composeEvents(handleMouseUp, onMouseUp)
   }
 
-  handleMouseUp = () => {
-    this.isMouseDown = false
+  if (triggerOnHover) {
+    childProps.onMouseEnter = composeEvents(createOpenTimeout, onMouseEnter)
+    childProps.onMouseLeave = composeEvents(createCloseTimeout, onMouseLeave)
   }
 
-  render() {
-    const {
-      children,
-      openDelay,
-      closeDelay,
-      defaultOpen,
-      keepInView,
-      placement,
-      popoverProps,
-      renderTo,
-      title,
-      triggerOnFocus,
-      triggerOnHover,
-      ...childProps
-    } = this.props
-    const { isPopoverOpen } = this.state
-    const child = Children.only(children)
-    const {
-      onFocus,
-      onBlur,
-      onMouseEnter,
-      onMouseLeave,
-      onMouseDown,
-      onMouseUp,
-    } = child.props
-
-    if (!title) {
-      return cloneElement(child, childProps)
-    }
-
-    if (triggerOnFocus) {
-      childProps.onFocus = composeEvents(this.handleFocus, onFocus)
-      childProps.onBlur = composeEvents(this.close, onBlur)
-      childProps.onMouseDown = composeEvents(this.handleMouseDown, onMouseDown)
-      childProps.onMouseUp = composeEvents(this.handleMouseUp, onMouseUp)
-    }
-
-    if (triggerOnHover) {
-      childProps.onMouseEnter = composeEvents(
-        this.createOpenTimeout,
-        onMouseEnter
-      )
-      childProps.onMouseLeave = composeEvents(
-        this.createCloseTimeout,
-        onMouseLeave
-      )
-    }
-
-    return (
-      <Popover
-        shouldFlip
-        paddingHorizontal={0.75}
-        paddingVertical={0.25}
-        fontSize={5}
-        textAlign="center"
-        radius={2}
-        backgroundColor="grey-9"
-        color="rgba(255,255,255,0.94)"
-        zIndex={9999}
-        {...popoverProps}
-        anchorElement={cloneElement(child, childProps)}
-        onMouseEnter={this.createOpenTimeout}
-        onMouseLeave={this.createCloseTimeout}
-        keepInView={keepInView}
-        placement={placement}
-        renderTo={renderTo}
-        children={title}
-        open={isPopoverOpen}
-      />
-    )
-  }
+  return (
+    <Popover
+      shouldFlip
+      paddingHorizontal={0.75}
+      paddingVertical={0.25}
+      fontSize={5}
+      textAlign="center"
+      radius={2}
+      backgroundColor="grey-9"
+      color="rgba(255,255,255,0.94)"
+      zIndex={9999}
+      {...popoverProps}
+      anchorElement={cloneElement(child, childProps)}
+      onMouseEnter={createOpenTimeout}
+      onMouseLeave={createCloseTimeout}
+      keepInView={keepInView}
+      placement={placement}
+      renderTo={renderTo}
+      children={title}
+      open={isPopoverOpen}
+    />
+  )
 }
-
+Tooltip = forwardRef(Tooltip)
 export default Tooltip

package/src/Tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ title: Tooltip
 category: Overlays
 summary: Used to display a minimal amount of helpful information.
 propsSummary: Accepts [Popover](/popover) props.
+themeKey: tooltip
 ---
 
 ```jsx live

package/src/Wizard/Wizard.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Children, Component } from 'react'
+import React, { Children, useCallback, useReducer, useState } from 'react'
 
 import Button from '../Button'
 import Card from '../Card'
@@ -8,8 +8,8 @@ import StackView from '../StackView'
 import PagerView from '../PagerView'
 import StepperProgress from '../StepperProgress'
 import Text from '../Text'
+import { useThemeProps } from '../system'
 
-import Step from './Step'
 import WizardContext from './WizardContext'
 
 export type Props = {
@@ -73,181 +73,152 @@ export type Props = {
   }) => null,
 }
 
-class Wizard extends Component<Props> {
-  static Step = Step
-
-  static defaultProps = {
-    autoFocus: true,
-    initialPayload: {},
-    nextButtonTitle: ({ activeStepIndex, steps, totalSteps }) =>
+function Wizard(props: Props) {
+  const {
+    autoFocus = true,
+    backButtonProps,
+    buttonProps,
+    cancelButtonProps,
+    children,
+    footerProps,
+    initialPayload = {},
+    nextButtonProps,
+    nextButtonTitle = ({ activeStepIndex, steps, totalSteps }) =>
       activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next',
-  }
-
-  state = {
-    activeStepIndex: 0,
-    payload: this.props.initialPayload,
-    steps: [],
-    totalSteps: -1,
-    sendingPayload: false,
-  }
-
-  setPayload = (newPayload, cb) => {
-    this.setState(
-      (state) => ({
-        payload: {
-          ...state.payload,
-          ...newPayload,
-        },
-      }),
-      cb
-    )
-  }
-
-  setSteps = (getSteps) => {
-    this.setState((state) => {
-      const nextSteps = getSteps(state.steps)
-      return {
-        steps: nextSteps,
-        totalSteps: nextSteps.length,
+    onCancel,
+    onSubmit,
+    renderProgress,
+    ...restProps
+  } = useThemeProps('wizard', props)
+  const [activeStepIndex, setActiveStepIndex] = useState(0)
+  const [steps, setSteps] = useState([])
+  const [sendingPayload, setSendingPayload] = useState(false)
+  const totalSteps = steps.length
+  const [payload, setPayload] = useReducer(
+    (prevState, updatedProperty) => ({
+      ...prevState,
+      ...updatedProperty,
+    }),
+    initialPayload
+  )
+
+  const addStep = useCallback(
+    (step) => {
+      setSteps((steps) => [...steps, step])
+      return () => {
+        setSteps((steps) =>
+          steps.filter((previousStep) => previousStep.name !== step.name)
+        )
       }
-    })
-  }
-
-  addStep = (step) => {
-    this.setSteps((steps) => [...steps, step])
-    return () => {
-      this.setSteps((steps) =>
-        steps.filter((previousStep) => previousStep.name !== step.name)
-      )
-    }
-  }
-
-  isCurrentStepValid() {
-    const { activeStepIndex, payload, steps } = this.state
-    const currentStep = steps[activeStepIndex]
-    return currentStep && currentStep.valid ? currentStep.valid(payload) : true
-  }
-
-  handleSubmit = () => {
-    if (this.props.onSubmit) {
-      const complete = () => this.setState({ sendingPayload: false })
-      this.setState({ sendingPayload: true })
-      this.props.onSubmit(this.state.payload, complete)
+    },
+    [steps]
+  )
+
+  const isCurrentStepValid = useCallback(
+    function () {
+      const currentStep = steps[activeStepIndex]
+      return currentStep && currentStep.valid
+        ? currentStep.valid(payload)
+        : true
+    },
+    [activeStepIndex, steps, payload]
+  )
+
+  const handleSubmit = useCallback(() => {
+    if (onSubmit) {
+      const complete = () => setSendingPayload(false)
+      setSendingPayload(true)
+      onSubmit(payload, complete)
     }
-  }
-
-  render() {
-    const {
-      autoFocus,
-      backButtonProps,
-      buttonProps,
-      cancelButtonProps,
-      children,
-      footerProps,
-      initialPayload,
-      nextButtonProps,
-      nextButtonTitle,
-      onCancel,
-      onSubmit,
-      renderProgress,
-      ...restProps
-    } = this.props
-    const { activeStepIndex, sendingPayload, steps, totalSteps } = this.state
-    return (
-      <WizardContext.Provider
-        value={{
-          activeStepIndex: this.state.activeStepIndex,
-          addStep: this.addStep,
-          setPayload: this.setPayload,
-          payload: this.state.payload,
-          totalSteps: this.state.totalSteps,
-        }}
-      >
-        <StackView
-          alignment="center"
-          minWidth={48}
-          maxWidth={96}
-          {...restProps}
-        >
-          {renderProgress ? (
-            renderProgress({ activeStepIndex, steps, totalSteps })
-          ) : (
-            <StepperProgress
-              width="80%"
-              paddingTop={6}
-              paddingBottom={4}
-              activeStepIndex={activeStepIndex}
-            >
-              {steps.map((step, index) => (
-                <StepperProgress.Step
-                  key={index}
-                  renderEnd={
-                    <Text align="center" marginTop={2}>
-                      {step.name}
-                    </Text>
-                  }
-                />
-              ))}
-            </StepperProgress>
-          )}
-          <Card spacing={<Divider />} elevation={1}>
-            <PagerView activeViewIndex={activeStepIndex} autoFocus={autoFocus}>
-              {Children.map(children, (child, index) => (
-                <PagerView.View key={index}>{child}</PagerView.View>
-              ))}
-            </PagerView>
-            <StackView
-              axis="horizontal"
-              distribution={activeStepIndex > 0 ? 'space-between' : 'end'}
-              padding={1}
-              spacing={1}
-              {...footerProps}
-            >
-              {activeStepIndex === 0 && onCancel && (
-                <Button
-                  disabled={sendingPayload}
-                  onClick={onCancel}
-                  size="lg"
-                  title="Cancel"
-                  variant="naked"
-                  {...buttonProps}
-                  {...cancelButtonProps}
-                />
-              )}
-              {activeStepIndex > 0 && (
-                <Button
-                  disabled={sendingPayload}
-                  iconLeft={{ name: 'general.leftChevron', size: 'sm' }}
-                  onClick={() =>
-                    this.setState({ activeStepIndex: activeStepIndex - 1 })
-                  }
-                  size="lg"
-                  title="Back"
-                  variant="naked"
-                  {...buttonProps}
-                  {...backButtonProps}
-                />
-              )}
-              <Button
-                disabled={!this.isCurrentStepValid()}
-                onClick={() =>
-                  activeStepIndex >= totalSteps - 1
-                    ? this.handleSubmit()
-                    : this.setState({ activeStepIndex: activeStepIndex + 1 })
+  }, [payload])
+
+  return (
+    <WizardContext.Provider
+      value={{
+        activeStepIndex,
+        addStep,
+        setPayload,
+        payload,
+        totalSteps,
+      }}
+    >
+      <StackView alignment="center" minWidth={48} maxWidth={96} {...restProps}>
+        {renderProgress ? (
+          renderProgress({ activeStepIndex, steps, totalSteps })
+        ) : (
+          <StepperProgress
+            width="80%"
+            paddingTop={6}
+            paddingBottom={4}
+            activeStepIndex={activeStepIndex}
+          >
+            {steps.map((step, index) => (
+              <StepperProgress.Step
+                key={index}
+                renderEnd={
+                  <Text align="center" marginTop={2}>
+                    {step.name}
+                  </Text>
                 }
+              />
+            ))}
+          </StepperProgress>
+        )}
+        <Card spacing={<Divider />} elevation={1}>
+          <PagerView activeViewIndex={activeStepIndex} autoFocus={autoFocus}>
+            {Children.map(children, (child, index) => (
+              <PagerView.View key={index}>{child}</PagerView.View>
+            ))}
+          </PagerView>
+          <StackView
+            axis="horizontal"
+            distribution={activeStepIndex > 0 ? 'space-between' : 'end'}
+            padding={1}
+            spacing={1}
+            {...footerProps}
+          >
+            {activeStepIndex === 0 && onCancel && (
+              <Button
+                disabled={sendingPayload}
+                onClick={onCancel}
+                size="lg"
+                title="Cancel"
+                variant="naked"
+                {...buttonProps}
+                {...cancelButtonProps}
+              />
+            )}
+            {activeStepIndex > 0 && (
+              <Button
+                disabled={sendingPayload}
+                iconLeft={{ name: 'general.leftChevron', size: 'sm' }}
+                onClick={() => setActiveStepIndex(activeStepIndex - 1)}
                 size="lg"
-                spinner={sendingPayload}
-                theme="primary"
-                title={nextButtonTitle({ activeStepIndex, steps, totalSteps })}
+                title="Back"
+                variant="naked"
                 {...buttonProps}
-                {...nextButtonProps}
+                {...backButtonProps}
               />
-            </StackView>
-          </Card>
-        </StackView>
-      </WizardContext.Provider>
-    )
-  }
+            )}
+            <Button
+              disabled={!isCurrentStepValid()}
+              onClick={() =>
+                activeStepIndex >= totalSteps - 1
+                  ? handleSubmit()
+                  : setActiveStepIndex(activeStepIndex + 1)
+              }
+              size="lg"
+              spinner={sendingPayload}
+              theme="primary"
+              title={nextButtonTitle({ activeStepIndex, steps, totalSteps })}
+              {...buttonProps}
+              {...nextButtonProps}
+            />
+          </StackView>
+        </Card>
+      </StackView>
+    </WizardContext.Provider>
+  )
 }
 
 export default Wizard