@planningcenter/tapestry-react 2.1.2 → 2.2.0

package/src/Combobox/ComboboxInput.js

@@ -1,8 +1,16 @@
 // @flow
-import React, { Component } from 'react'
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useContext,
+  useEffect,
+} from 'react'
 
 import Input from '../Input'
-import { ItemListController } from '../ItemList'
+import ItemListContext from '../ItemList/ItemListContext'
+import { useThemeProps } from '../system'
 
 type Props = {
   isOpen?: boolean,
@@ -11,126 +19,124 @@ type Props = {
   onClear?: Function | boolean,
 }
 
-class ComboboxInput extends Component<Props> {
-  static displayName = 'Combobox.Input'
+function ComboboxInput(props: Props, ref) {
+  const {
+    autoFocus,
+    defaultValue,
+    disabled,
+    innerRef,
+    isOpen,
+    isLoading,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    onClear,
+    onClose,
+    onKeyDown,
+    onKeyUp,
+    placeholder,
+    readOnly,
+    size,
+    type,
+    value,
+    ...restProps
+  } = useThemeProps('combobox.input', props)
+  const inputNode = useRef(null)
 
-  componentDidUpdate(lastProps) {
-    if (lastProps.value !== this.props.value) {
-      // needs to be called after items have been sorted, there's probably a better way to fix this
-      setTimeout(() => {
-        this.itemList.setHighlightedIndex(0)
-      })
-    }
-  }
+  const focus = useCallback(
+    function () {
+      inputNode.current.focus()
+    },
+    [inputNode]
+  )
+
+  const blur = useCallback(
+    function () {
+      inputNode.current.blur()
+    },
+    [inputNode]
+  )
+
+  useImperativeHandle(ref, () => ({
+    focus,
+    blur,
+  }))
+
+  const itemList = useContext(ItemListContext)
+  const { highlightedItemId, id } = itemList
 
-  setInputNode = (node) => {
-    this.inputNode = node
-  }
+  useEffect(() => {
+    setTimeout(() => {
+      itemList.setHighlightedIndex(0)
+    })
+  }, [itemList.items])
 
-  handleKeyDown = (e) => {
+  const handleKeyDown = useCallback((e) => {
     if (e.key === 'ArrowUp') {
       e.preventDefault()
-      this.itemList.moveHighlightedIndex(-1, { contain: false })
+      itemList.moveHighlightedIndex(-1, { contain: false })
     }
     if (e.key === 'ArrowDown') {
       e.preventDefault()
-      this.itemList.moveHighlightedIndex(1, { contain: false })
+      itemList.moveHighlightedIndex(1, { contain: false })
     }
     if (e.key === 'Enter') {
       e.preventDefault()
-      this.itemList.selectHighlightedItem()
+      itemList.selectHighlightedItem()
     }
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(e)
+    if (onKeyDown) {
+      onKeyDown(e)
     }
-    if (this.props.onClose && e.key === 'Tab') {
-      this.props.onClose()
+    if (onClose && e.key === 'Tab') {
+      onClose()
     }
-  }
+  })
 
-  handleDocumentKeyDown = (e) => {
-    if (this.props.onClear && e.key === 'Escape') {
-      this.props.onClear()
+  const handleDocumentKeyDown = useCallback((e) => {
+    if (onClear && e.key === 'Escape') {
+      onClear()
     }
-  }
+  })
 
-  focus() {
-    this.inputNode.focus()
-  }
-
-  blur() {
-    this.inputNode.blur()
-  }
-
-  render() {
-    const {
-      autoFocus,
-      defaultValue,
-      disabled,
-      innerRef,
-      isOpen,
-      isLoading,
-      name,
-      onBlur,
-      onChange,
-      onFocus,
-      onClear,
-      onClose,
-      onKeyDown,
-      onKeyUp,
-      placeholder,
-      readOnly,
-      size,
-      type,
-      value,
-      ...restProps
-    } = this.props
-    return (
-      <ItemListController>
-        {(itemList) => {
-          const { highlightedItemId, id } = itemList
-          if (!this.itemList) {
-            this.itemList = itemList
-          }
-          return (
-            <Input.InputBox
-              innerRef={innerRef}
-              size={size}
-              disabled={disabled}
-              isLoading={isLoading}
-              onClear={onClear}
-              {...restProps}
-              grow={1}
-            >
-              <Input.InputField
-                innerRef={this.setInputNode}
-                grow={1}
-                role="combobox"
-                autoComplete="off"
-                aria-autocomplete="list"
-                aria-controls={id}
-                aria-expanded={isOpen}
-                aria-activedescendant={highlightedItemId}
-                autoFocus={autoFocus}
-                type={type}
-                name={name}
-                disabled={disabled}
-                readOnly={readOnly}
-                placeholder={placeholder}
-                defaultValue={defaultValue}
-                value={value}
-                onChange={onChange}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onKeyDown={this.handleKeyDown}
-                onKeyUp={onKeyUp}
-              />
-            </Input.InputBox>
-          )
+  return (
+    <Input.InputBox
+      innerRef={innerRef}
+      size={size}
+      disabled={disabled}
+      isLoading={isLoading}
+      onClear={onClear}
+      {...restProps}
+      grow={1}
+    >
+      <Input.InputField
+        innerRef={(node) => {
+          inputNode.current = node
         }}
-      </ItemListController>
-    )
-  }
+        grow={1}
+        role="combobox"
+        autoComplete="off"
+        aria-autocomplete="list"
+        aria-controls={id}
+        aria-expanded={isOpen}
+        aria-activedescendant={highlightedItemId}
+        autoFocus={autoFocus}
+        type={type}
+        name={name}
+        disabled={disabled}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        value={value}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={handleKeyDown}
+        onKeyUp={onKeyUp}
+      />
+    </Input.InputBox>
+  )
 }
-
+ComboboxInput = forwardRef(ComboboxInput)
+ComboboxInput.displayName = 'Combobox.Input'
 export default ComboboxInput

package/src/Combobox/ComboboxItem.js

@@ -1,33 +1,33 @@
-import React, { Component } from 'react'
+import React from 'react'
 
 import { ItemListItem } from '../ItemList'
 import Menu from '../Menu'
+import { useThemeProps } from '../system'
 
-class ComboboxItem extends Component {
-  static displayName = 'Combobox.Item'
-
-  render() {
-    const { value, index, text, disabled = false, ...restProps } = this.props
-    return (
-      <ItemListItem data={value} disabled={disabled} index={index} text={text}>
-        {({ id, highlight, highlighted, clearHighlight, select }) => (
-          <Menu.Item
-            disabled={disabled}
-            id={id}
-            isHighlighted={highlighted}
-            onMouseOver={highlight}
-            onMouseOut={clearHighlight}
-            onClick={(event) => {
-              event.stopPropagation()
-              event.nativeEvent.stopImmediatePropagation()
-              select()
-            }}
-            {...restProps}
-          />
-        )}
-      </ItemListItem>
-    )
-  }
+function ComboboxItem(props) {
+  const { value, index, text, disabled = false, ...restProps } = useThemeProps(
+    'combobox.item',
+    props
+  )
+  return (
+    <ItemListItem data={value} disabled={disabled} index={index} text={text}>
+      {({ id, highlight, highlighted, clearHighlight, select }) => (
+        <Menu.Item
+          disabled={disabled}
+          id={id}
+          isHighlighted={highlighted}
+          onMouseOver={highlight}
+          onMouseOut={clearHighlight}
+          onClick={(event) => {
+            event.stopPropagation()
+            event.nativeEvent.stopImmediatePropagation()
+            select()
+          }}
+          {...restProps}
+        />
+      )}
+    </ItemListItem>
+  )
 }
-
+ComboboxItem.displayName = 'Combobox.Item'
 export default ComboboxItem

package/src/Combobox/ComboboxItems.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component, Children } from 'react'
+import React, { useState, Children, useEffect } from 'react'
 import { matchSorter } from 'match-sorter'
 
 import Box from '../Box'
@@ -7,7 +7,7 @@ import Menu from '../Menu'
 import HeadingUppercase from '../HeadingUppercase'
 import StackView from '../StackView'
 import Text from '../Text'
-import { shallowEqual } from '../utils'
+import { useThemeProps } from '../system'
 
 import ComboboxItem from './ComboboxItem'
 
@@ -56,66 +56,44 @@ type Props = {
   renderItem?: (item: mixed, index: number) => null,
 }
 
-class ComboboxItems extends Component<Props> {
-  static displayName = 'Combobox.Items'
-
-  static defaultProps = {
-    value: '',
-    renderEmpty: defaultRenderEmpty,
-    renderItem: defaultRenderItem,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      sortedItems: this.getSortedItems(props),
-    }
-  }
-
-  componentDidUpdate(lastProps) {
-    if (
-      lastProps.value !== this.props.value ||
-      !shallowEqual(lastProps.items, this.props.items) ||
-      !shallowEqual(lastProps.filter, this.props.filter)
-    ) {
-      this.setState({
-        sortedItems: this.getSortedItems(this.props),
-      })
-    }
-  }
-
-  getSortedItems({ items, value, filter }) {
+function ComboboxItems(props: Props) {
+  const {
+    filter,
+    items,
+    renderEmpty = defaultRenderEmpty,
+    renderItem = defaultRenderItem,
+    title,
+    value = '',
+    ...restProps
+  } = useThemeProps('combobox.items', props)
+  const [sortedItems, setSortedItems] = useState(
+    getSortedItems({ items, value, filter })
+  )
+
+  function getSortedItems({ items, value, filter }) {
     return matchSorter(items, value.length > 0 ? value : '', filter)
   }
 
-  render() {
-    const {
-      filter,
-      items,
-      renderEmpty,
-      renderItem,
-      title,
-      value,
-      ...restProps
-    } = this.props
-    const { sortedItems } = this.state
-    return (
-      <Box {...restProps}>
-        {title && (
-          <StackView paddingHorizontal={1} paddingVertical={0.5}>
-            <HeadingUppercase>{title}</HeadingUppercase>
-          </StackView>
-        )}
-        {Children.toArray(
-          sortedItems.length > 0
-            ? sortedItems.map((item, index) => renderItem(item, index))
-            : typeof renderEmpty === 'function'
-            ? renderEmpty(value)
-            : renderEmpty
-        )}
-      </Box>
-    )
-  }
+  useEffect(() => {
+    setSortedItems(getSortedItems({ items, value, filter }))
+  }, [items, value, filter])
+
+  return (
+    <Box {...restProps}>
+      {title && (
+        <StackView paddingHorizontal={1} paddingVertical={0.5}>
+          <HeadingUppercase>{title}</HeadingUppercase>
+        </StackView>
+      )}
+      {Children.toArray(
+        sortedItems.length > 0
+          ? sortedItems.map((item, index) => renderItem(item, index))
+          : typeof renderEmpty === 'function'
+          ? renderEmpty(value)
+          : renderEmpty
+      )}
+    </Box>
+  )
 }
-
+ComboboxItems.displayName = 'Combobox.Items'
 export default ComboboxItems

package/src/Combobox/index.js

@@ -1,2 +1,10 @@
 import Combobox from './Combobox'
+import ComboboxInput from './ComboboxInput'
+import ComboboxItem from './ComboboxItem'
+import ComboboxItems from './ComboboxItems'
+import ComboboxPopover from './ComboboxPopover'
+Combobox.Input = ComboboxInput
+Combobox.Item = ComboboxItem
+Combobox.Items = ComboboxItems
+Combobox.Popover = ComboboxPopover
 export default Combobox

package/src/DateField/DateField.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react'
+import React, { useState, useCallback, useRef } from 'react'
 import { format } from 'date-fns'
 
 import Card from '../Card'
@@ -9,6 +9,7 @@ import Icon from '../Icon'
 import Input from '../Input/Input'
 import Popover from '../Popover'
 import { generateId } from '../utils'
+import { useThemeProps } from '../system'
 
 export type DateFieldProps = {
   /**
@@ -56,127 +57,130 @@ export type DateFieldProps = {
    */
   keepInView?: boolean,
 
+  /**
+   * Accepts any valid [Calendar](/calendar) props.
+   */
+  calendarProps?: object,
+
   /**
    * Accepts any valid [Popover](/popover) props.
    */
   popoverProps?: object,
 }
 
-class DateField extends Component<DateFieldProps> {
-  canClosePopover = true
-
-  static defaultProps = {
-    defaultOpen: false,
-    lockScrollWhileOpen: true,
-    formatValue: 'MMMM dd, yyyy',
-  }
-
-  state = {
-    isPopoverOpen: this.props.defaultOpen,
-  }
-
-  id = generateId('datefield')
-
-  openPopover = () => {
-    this.setState({ isPopoverOpen: true })
-  }
-
-  closePopover = () => {
-    if (this.canClosePopover) {
-      this.setState({ isPopoverOpen: false })
+function DateField({
+  formatValue = 'MMMM dd, yyyy',
+  defaultOpen = false,
+  keepInView,
+  lockScrollWhileOpen = true,
+  minDate,
+  maxDate,
+  onChange,
+  placement,
+  value,
+  ...props
+}: DateFieldProps) {
+  const {
+    calendarProps,
+    color,
+    popoverProps,
+    sizes,
+    thickness: sizeThickness,
+    trackColor,
+    ...restProps
+  } = useThemeProps('dateField', props)
+  let canClosePopover = true
+  const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
+  const id = generateId('datefield')
+  const popover = useRef(null)
+  const inputWrapper = useRef(null)
+
+  const openPopover = useCallback(() => {
+    setIsPopoverOpen(true)
+  })
+
+  const closePopover = useCallback(() => {
+    if (canClosePopover) {
+      setIsPopoverOpen(false)
     }
-  }
+  })
 
-  togglePopover = () => {
-    if (this.state.isPopoverOpen) {
-      this.closePopover()
+  const togglePopover = useCallback(() => {
+    if (isPopoverOpen) {
+      closePopover()
     } else {
-      this.openPopover()
+      openPopover()
     }
-  }
+  })
 
-  handleDateSelect = (date) => {
-    const input = this.inputWrapper.querySelector('input')
+  const handleDateSelect = useCallback((date) => {
+    const input = inputWrapper.current.querySelector('input')
     if (input.focus) {
       input.focus()
     }
-    if (this.props.onChange) {
-      this.props.onChange(date)
+    if (onChange) {
+      onChange(date)
     }
-    this.closePopover()
-  }
-
-  render() {
-    const {
-      formatValue,
-      defaultOpen,
-      keepInView,
-      lockScrollWhileOpen,
-      minDate,
-      maxDate,
-      onChange,
-      placement,
-      value,
-      popoverProps,
-      ...restProps
-    } = this.props
-    const { isPopoverOpen } = this.state
-    return (
-      <FocusGroup onBlur={this.closePopover}>
-        {({ requestBlur, setRef }) => (
-          <Popover
-            {...popoverProps}
-            ref={(component) => {
-              this.popover = component
-            }}
-            innerRef={(node) => {
-              setRef(`${this.id}-popover`)(node)
-            }}
-            as={Card}
-            tabIndex={-1}
-            elevation={2}
-            onBlur={requestBlur}
-            keepInView={keepInView}
-            lockScrollWhileOpen={lockScrollWhileOpen}
-            placement={placement}
-            open={isPopoverOpen}
-            onRequestClose={this.closePopover}
-            anchorElement={
-              <Input
-                innerRef={(node) => {
-                  this.inputWrapper = node
-                  setRef(`${this.id}-input`)(node)
-                }}
-                readOnly
-                value={value ? format(value, formatValue) : ''}
-                renderRight={
-                  <Icon name="general.calendar" color="foregroundTertiary" />
+    closePopover()
+  })
+
+  return (
+    <FocusGroup onBlur={closePopover}>
+      {({ requestBlur, setRef }) => (
+        <Popover
+          {...popoverProps}
+          ref={(component) => {
+            popover.current = component
+          }}
+          innerRef={(node) => {
+            popover.current = node
+            setRef(`${id}-popover`)(node)
+          }}
+          as={Card}
+          tabIndex={-1}
+          elevation={2}
+          onBlur={requestBlur}
+          keepInView={keepInView}
+          lockScrollWhileOpen={lockScrollWhileOpen}
+          placement={placement}
+          open={isPopoverOpen}
+          onRequestClose={closePopover}
+          anchorElement={
+            <Input
+              innerRef={(node) => {
+                inputWrapper.current = node
+                setRef(`${id}-input`)(node)
+              }}
+              readOnly
+              value={value ? format(value, formatValue) : ''}
+              renderRight={
+                <Icon name="general.calendar" color="foregroundTertiary" />
+              }
+              onClick={togglePopover}
+              onBlur={requestBlur}
+              onKeyDown={(event) => {
+                if (event.key === ' ') {
+                  event.preventDefault()
+                  togglePopover()
                 }
-                onClick={this.togglePopover}
-                onBlur={requestBlur}
-                onKeyDown={(event) => {
-                  if (event.key === ' ') {
-                    event.preventDefault()
-                    this.togglePopover()
-                  }
-                }}
-                {...restProps}
-              />
-            }
-          >
-            <Calendar
-              size="sm"
-              initialDate={value}
-              selected={value}
-              minDate={minDate}
-              maxDate={maxDate}
-              onDateSelect={this.handleDateSelect}
+              }}
+              {...restProps}
             />
-          </Popover>
-        )}
-      </FocusGroup>
-    )
-  }
+          }
+        >
+          <Calendar
+            size="sm"
+            {...calendarProps}
+            initialDate={value}
+            selected={value}
+            minDate={minDate}
+            maxDate={maxDate}
+            onDateSelect={handleDateSelect}
+          />
+        </Popover>
+      )}
+    </FocusGroup>
+  )
 }
 
 export default DateField