@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/Input/InputField.js

@@ -1,340 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import Box from '../Box'
-import { getBoxSize } from '../system'
-import {
-  deselectCurrentTextRange,
-  getTextWidth,
-  selectFullTextRange,
-} from '../utils'
-
-import InputContext from './InputContext'
-import { inputs, inputLabels } from './utils'
-
-const resetStyles = {
-  appearance: 'none',
-  outline: 0,
-  boxShadow: 'none',
-  MozAppearance: 'textfield',
-  '::-ms-clear': {
-    display: 'none',
-  },
-  '::-webkit-clear-button': {
-    display: 'none',
-  },
-  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
-    display: 'none',
-  },
-  '::-webkit-search-cancel-button': {
-    display: 'none',
-  },
-}
-
-export type InputFieldProps = {
-  /**
-   * Gain access to the internal ref
-   */
-  innerRef?: any,
-
-  /**
-   * Sets the input's width to the exact size of the text plus padding and cursor.
-   * Allows a string to be passed for measuring if input value is different from displayed value.
-   */
-  autoWidth: boolean | number | string,
-
-  /**
-   * Determines how the size is applied. Either through `width` or `flexBasis`.
-   */
-  autoWidthType: 'width' | 'basis' | 'both',
-
-  /**
-   * Easily set the placeholder color of the input.
-   */
-  placeholderColor: string,
-
-  /**
-   * Forces the input text to stay fully selected while interacting with it.
-   */
-  highlightOnInteraction: boolean,
-
-  /**
-   * Size of the input font-size, and line-height. Based on [theming sizes](/theming#boxsizes).
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-
-  /**
-   * Pass styles to base Box component.
-   */
-  size?: object,
-
-  /**
-   * Disables the input.
-   */
-  disabled?: boolean,
-
-  /**
-   * Maps to the input's `onChange` prop.
-   */
-  onChange?: () => null,
-
-  /**
-   * Maps to the input's `onFocus` prop.
-   */
-  onFocus?: () => null,
-
-  /**
-   * Maps to the input's `onBlur` prop.
-   */
-  onBlur?: () => null,
-
-  onKeyDown?: Funtion,
-}
-
-class InputField extends Component<InputFieldProps> {
-  static defaultProps = {
-    placeholderColor: 'foregroundTertiary',
-    autoWidthType: 'both',
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isHovered: false,
-    }
-    this.shouldUpdateWidth = false
-
-    if (props.id) {
-      inputs[props.id] = this
-    }
-  }
-
-  componentDidMount() {
-    if (this.props.autoWidth !== undefined) {
-      const autoWidthValue = this.getAutoWidthValue(
-        this.props.defaultValue !== undefined
-          ? this.props.defaultValue
-          : this.props.placeholder
-      )
-      if (autoWidthValue !== undefined) {
-        this.setWidth(autoWidthValue)
-      }
-    }
-  }
-
-  componentDidUpdate(lastProps) {
-    if (
-      this.shouldUpdateWidth ||
-      (this.props.autoWidth !== undefined &&
-        this.props.value !== undefined &&
-        this.props.value !== lastProps.value)
-    ) {
-      this.setWidth(this.getAutoWidthValue(this.props.placeholder))
-      this.shouldUpdateWidth = false
-    }
-    if (this.canHighlight && this.props.highlightOnInteraction) {
-      selectFullTextRange(this.node)
-      this.canHighlight = false
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.id) {
-      delete inputs[this.props.id]
-    }
-  }
-
-  setNode = (node) => {
-    this.node = node
-    if (this.props.innerRef) {
-      this.props.innerRef(node)
-    }
-  }
-
-  setWidth(text) {
-    const { autoWidthType } = this.props
-    const textWidth = getTextWidth(text, this.node)
-    if (textWidth !== this._lastTextWidth) {
-      const cursorWidth = 1
-      const {
-        borderLeftWidth,
-        borderRightWidth,
-        paddingLeft,
-        paddingRight,
-      } = getComputedStyle(this.node)
-      const totalWidth = [
-        borderLeftWidth,
-        borderRightWidth,
-        cursorWidth,
-        paddingLeft,
-        paddingRight,
-        textWidth,
-      ].reduce((total, val) => total + parseInt(val, 10), 0)
-      if (autoWidthType === 'width' || autoWidthType === 'both') {
-        this.node.style.width = `${totalWidth}px`
-      }
-      if (autoWidthType === 'basis' || autoWidthType === 'both') {
-        this.node.style.flexBasis = `${totalWidth}px`
-      }
-      this._lastTextWidth = textWidth
-    }
-  }
-
-  getAutoWidthValue = (defaultValue) => {
-    return this.props.autoWidth === true
-      ? this.props.value !== null && this.props.value !== undefined
-        ? this.props.value
-        : defaultValue
-      : this.props.autoWidth
-  }
-
-  preventFocus = (event) => {
-    if (
-      this.props.highlightOnInteraction &&
-      event.target === document.activeElement
-    ) {
-      event.preventDefault()
-      selectFullTextRange(event.target)
-    }
-  }
-
-  handleChange = (event) => {
-    if (this.props.autoWidth !== undefined) {
-      if (this.props.autoWidth === true) {
-        this.setWidth(event.target.value)
-      } else {
-        this.shouldUpdateWidth = true
-      }
-    }
-    if (this.props.onChange) {
-      this.props.onChange(event)
-    }
-    this.canHighlight = true
-  }
-
-  handleKeyDown = (event) => {
-    this.canHighlight = true
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(event)
-    }
-  }
-
-  handleFocus = (event) => {
-    if (this.props.highlightOnInteraction) {
-      selectFullTextRange(event.target)
-    }
-    if (this.inputBox) {
-      this.inputBox.setState({ isFocused: true })
-    }
-    if (this.props.onFocus) {
-      this.props.onFocus(event)
-    }
-  }
-
-  handleBlur = (event) => {
-    this.canHighlight = false
-    if (this.props.highlightOnInteraction) {
-      deselectCurrentTextRange()
-    }
-    if (this.inputBox) {
-      this.inputBox.setState({ isFocused: false })
-    }
-    if (
-      this.props.autoWidth !== undefined &&
-      this.props.placeholder !== undefined &&
-      event.target.value === ''
-    ) {
-      this.setWidth(this.props.placeholder)
-    }
-    if (this.props.onBlur) {
-      this.props.onBlur(event)
-    }
-  }
-
-  focus = () => {
-    this.node.focus()
-  }
-
-  blur = () => {
-    this.node.blur()
-  }
-
-  render() {
-    const {
-      autoWidth,
-      autoWidthType,
-      css,
-      disabled,
-      innerRef,
-      onBlur,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onMouseDown,
-      onMouseUp,
-      placeholderColor,
-      highlightOnInteraction,
-      size,
-      ...restProps
-    } = this.props
-    const placeholderColorStyles = {
-      '::placeholder': {
-        color: placeholderColor,
-      },
-      '::-webkit-input-placeholder': {
-        color: placeholderColor,
-      },
-      ':-moz-placeholder': {
-        color: placeholderColor,
-      },
-      ':-ms-input-placeholder': {
-        color: placeholderColor,
-      },
-    }
-    return (
-      <InputContext.Consumer>
-        {(inputBox) => {
-          const { fontSize, lineHeight } = inputBox
-            ? inputBox.getBoxStyles()
-            : getBoxSize(size)
-          if (!this.inputBox) {
-            this.inputBox = inputBox
-          }
-          if (inputLabels[this.props.id]) {
-            restProps['aria-labelledby'] = `${this.props.id}-label`
-          }
-          if (this.state.isHovered && restProps.hover) {
-            Object.assign(restProps, restProps.hover)
-          }
-          return (
-            <Box
-              as="input"
-              innerRef={this.setNode}
-              disabled={disabled}
-              grow={1}
-              padding={0}
-              textOverflow="ellipsis"
-              whiteSpace="nowrap"
-              fontSize={fontSize}
-              lineHeight={lineHeight}
-              minHeight={lineHeight}
-              onFocus={this.handleFocus}
-              onBlur={this.handleBlur}
-              onChange={this.handleChange}
-              onKeyDown={this.handleKeyDown}
-              onMouseDown={this.preventFocus}
-              onMouseUp={this.preventFocus}
-              css={[resetStyles, placeholderColorStyles, css]}
-              {...restProps}
-            />
-          )
-        }}
-      </InputContext.Consumer>
-    )
-  }
-}
-
-InputField.displayName = 'Input.InputField'
-
-export default InputField

package/src/Input/InputField.mdx

@@ -1,11 +0,0 @@
----
-title: Input.InputField
-category: Forms
-summary: The base component used in Input as well as Input.Inline and Combobox.Input. Provides a clean input base to build on top of.
-propsSummary: Accepts [Box](/box) props.
-parent: Input
----
-
-```jsx live
-render(<Input.InputField placeholder="Naked input" />)
-```

package/src/Input/InputLabel.js

@@ -1,68 +0,0 @@
-// @flow
-import React, { useCallback, useRef, useEffect } from 'react'
-
-import { getColor } from '../system'
-import Text from '../Text'
-import { useThemeProps } from '../system'
-
-import { inputs, inputLabels } from './utils'
-
-export type InputLabelProps = {
-  /**
-   * The `id` of the input to control. Compatible with all Tapestry-React form components.
-   */
-  controls?: string,
-
-  /**
-   * The current state of the label. Should match corresponding `Input`'s state prop.
-   */
-  state?: 'warning' | 'error' | 'success',
-}
-
-function InputLabel({ controls, state, ...restProps }: InputLabelProps) {
-  const { ...themeProps } = useThemeProps('inputLabel', restProps)
-
-  const input = useRef(null)
-
-  if (controls) {
-    themeProps.id = `${controls}-label`
-  }
-  if (state) {
-    themeProps.color = getColor(state)
-  }
-
-  useEffect(() => {
-    input.current = inputs[controls]
-    inputLabels[controls] = true
-
-    return () => {
-      delete inputLabels[controls]
-    }
-  }, [])
-
-  const focusInput = useCallback(() => {
-    input.current && input.current.focus()
-  }, [input])
-
-  const handleMouseOver = useCallback(() => {
-    input.current && input.current.setState({ isHovered: true })
-  }, [input])
-
-  const handleMouseOut = useCallback(() => {
-    input.current && input.current.setState({ isHovered: false })
-  }, [input])
-
-  return (
-    <Text
-      as="label"
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      onClick={focusInput}
-      {...themeProps}
-    />
-  )
-}
-
-InputLabel.displayName = 'Input.InputLabel'
-
-export default InputLabel

package/src/Input/InputLabel.mdx

@@ -1,21 +0,0 @@
----
-title: Input.InputLabel
-category: Forms
-summary: Provides accessibility as well as usability improvements for mouse users by allowing the user to click the <InputLabel/> component to focus the respective control. This mimics the browsers native label tag, but allows use with custom components like <Select/>.
-propsSummary: Accepts [Text](/text) props.
-parent: Input
-themeKey: inputLabel
----
-
-```jsx live
-render(
-  <StackView spacing={1}>
-    <Input.InputLabel controls="my-select-menu">My Label</Input.InputLabel>
-    <Select id="my-select-menu">
-      <Select.Option value="one">One</Select.Option>
-      <Select.Option value="two">Two</Select.Option>
-      <Select.Option value="three">Three</Select.Option>
-    </Select>
-  </StackView>
-)
-```

package/src/Input/index.js

@@ -1,10 +0,0 @@
-import Inline from './Inline'
-import Input from './Input'
-import InputBox from './InputBox'
-import InputField from './InputField'
-import InputLabel from './InputLabel'
-Input.Inline = Inline
-Input.InputBox = InputBox
-Input.InputField = InputField
-Input.InputLabel = InputLabel
-export default Input

package/src/Input/utils.js

@@ -1,10 +0,0 @@
-export const inputs = {}
-
-export const inputLabels = {}
-
-export function isTabbable(node) {
-  return (
-    ['BUTTON', 'INPUT'].indexOf(node.tagName) > -1 ||
-    parseInt(node.getAttribute('tabindex'), 10) > -1
-  )
-}

package/src/ItemList/ItemList.js

@@ -1,238 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import ItemListContext from './ItemListContext'
-import {
-  isComboKey,
-  isLetterKey,
-  isNumberKey,
-  isSpecialKey,
-  modulo,
-  scrollIntoView,
-} from './utils'
-
-let itemListId = 0
-
-type Props = {
-  onHighlight?: Function,
-  onSelect?: Function,
-  selected?: string | Function,
-}
-
-class ItemList extends Component<Props> {
-  controllers = []
-
-  highlightedIndex = null
-
-  id = `item-list-${itemListId++}`
-
-  items = []
-
-  searchString = ''
-
-  getItemId = (index) => {
-    return index === null ? null : `${this.id}-item-${index}`
-  }
-
-  getItemNode = (index) => {
-    return index === null ? null : this.items[index].getNode()
-  }
-
-  getItemByText = (text) => {
-    for (let index = 0; index < this.items.length; index++) {
-      const item = this.items[index]
-      const itemText = item.props.text || String(item.props.data)
-      if (!item.props.disabled && itemText.toLowerCase().indexOf(text) === 0) {
-        return item
-      }
-    }
-    return null
-  }
-
-  subscribeController = (controllerInstance) => {
-    this.controllers.push(controllerInstance)
-    return () => {
-      this.controllers.splice(this.controllers.indexOf(controllerInstance), 1)
-    }
-  }
-
-  subscribeItem = (itemInstance) => {
-    this.items.push(itemInstance)
-    return () => {
-      // if item was highlighted we need to null the highlightedIndex on unsubscribe
-      if (itemInstance.props.index === this.highlightedIndex) {
-        this.highlightedIndex = null
-      }
-      this.items.splice(this.items.indexOf(itemInstance), 1)
-    }
-  }
-
-  scrollItemIntoViewByIndex = (index) => {
-    const itemNode = this.getItemNode(index)
-    if (itemNode) {
-      scrollIntoView(itemNode)
-    }
-  }
-
-  // String Search
-  stringSearch = (event, delay = 300) => {
-    return new Promise((resolve) => {
-      if (
-        (isNumberKey(event) || isLetterKey(event) || isSpecialKey(event)) &&
-        !isComboKey(event)
-      ) {
-        event.preventDefault()
-        this.addToSearchString(event.key)
-        this.startSearchStringRefreshTimer(delay)
-        resolve(this.searchString)
-      }
-    })
-  }
-
-  addToSearchString = (letter) => {
-    this.searchString += letter.toLowerCase()
-  }
-
-  clearSearchString = () => {
-    this.searchString = ''
-  }
-
-  startSearchStringRefreshTimer = (delay) => {
-    this.clearSearchStringRefreshTimer()
-    this.stringSearchTimer = setTimeout(() => {
-      this.clearSearchString()
-    }, delay)
-  }
-
-  clearSearchStringRefreshTimer = () => {
-    clearTimeout(this.stringSearchTimer)
-  }
-
-  // Highlight
-  getHighlightedIndex = () => {
-    return this.highlightedIndex
-  }
-
-  getHighlightedItemId = () => {
-    return this.highlightedItemId
-  }
-
-  setHighlightedIndex = (
-    index,
-    { focus = false, maybeScrollIntoView = true } = {}
-  ) => {
-    const event = {
-      lastIndex: this.highlightedIndex,
-      newIndex: index,
-    }
-    const item = this.items[index]
-    if (this.items.length === 0) {
-      return
-    }
-    if (item && item.props.disabled) {
-      index = null
-    }
-    if (index !== null) {
-      const itemNode = this.getItemNode(index)
-      if (maybeScrollIntoView) {
-        scrollIntoView(itemNode)
-      }
-      if (focus) {
-        itemNode.focus()
-      }
-    }
-    if (this.props.onHighlight) {
-      this.props.onHighlight(event)
-    }
-    this.items.forEach((itemInstance) => {
-      if (itemInstance.props.index === index) {
-        itemInstance.highlighted = true
-        itemInstance.forceUpdate()
-      } else if (itemInstance.highlighted) {
-        itemInstance.highlighted = false
-        itemInstance.forceUpdate()
-      } else {
-        itemInstance.highlighted = false
-      }
-    })
-    this.controllers.forEach((controllerInstance) => {
-      controllerInstance.highlightedItemId = this.getItemId(index)
-      controllerInstance.forceUpdate()
-    })
-    this.highlightedIndex = index
-    this.highlightedItemId = this.getItemId(index)
-  }
-
-  moveHighlightedIndex = (
-    amount,
-    { contain = true, focus, maybeScrollIntoView } = {}
-  ) => {
-    const itemCount = this.items.length
-    let index = this.highlightedIndex
-    if (index === null) {
-      index = amount >= 0 ? 0 : itemCount - 1
-    } else {
-      index += amount
-      if (index < 0 || index >= itemCount) {
-        index = contain
-          ? modulo(this.highlightedIndex + amount, itemCount)
-          : null
-      }
-    }
-    const item = this.items[index]
-    if (item && item.props.disabled) {
-      this.highlightedIndex = index
-      this.moveHighlightedIndex(amount, {
-        contain,
-        focus,
-        maybeScrollIntoView,
-      })
-    } else {
-      this.setHighlightedIndex(index, { focus, maybeScrollIntoView })
-    }
-  }
-
-  clearHighlightedIndex = () => {
-    this.setHighlightedIndex(null)
-  }
-
-  // Select
-  selectItemByIndex = (index) => {
-    const item = this.items[index]
-    if (item) {
-      this.props.onSelect(item.props.data, {
-        index: item.props.index,
-        node: item.node,
-      })
-      if (item.props.onSelect) {
-        item.props.onSelect(item.node)
-      }
-    }
-  }
-
-  selectItem = (index) => {
-    this.selectItemByIndex(index)
-  }
-
-  selectHighlightedItem = () => {
-    if (this.highlightedIndex !== null) {
-      this.selectItemByIndex(this.highlightedIndex)
-    }
-  }
-
-  isItemSelected = (data) => {
-    const { selected } = this.props
-    return typeof selected === 'function' ? selected(data) : selected === data
-  }
-
-  render() {
-    const { children } = this.props
-    return (
-      <ItemListContext.Provider value={this}>
-        {typeof children === 'function' ? children(this) : children}
-      </ItemListContext.Provider>
-    )
-  }
-}
-
-export default ItemList

package/src/ItemList/ItemListContext.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-const ItemListContext = createContext()
-export default ItemListContext