@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Input/InputField.js

@@ -0,0 +1,308 @@
+// @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 = {
+  /**
+   * 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',
+}
+
+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

@@ -0,0 +1,9 @@
+---
+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.
+---
+
+```jsx live
+render(<Input.InputField placeholder="Naked input" />)
+```

package/src/Input/InputLabel.js

@@ -0,0 +1,65 @@
+// @flow
+import React, { Component } from 'react'
+
+import { getColor } from '../system'
+import Text from '../Text'
+
+import { inputs, inputLabels } from './utils'
+
+export type InputLabelProps = {
+  /**
+   * The `id` of the input to control. Compatible with all UI kit form components.
+   */
+  controls: string,
+
+  /**
+   * The current state of the label. Should match corresponding `Input`'s state prop.
+   */
+  state: 'warning' | 'error' | 'success',
+}
+
+class InputLabel extends Component<InputLabelProps> {
+  componentDidMount() {
+    this.input = inputs[this.props.controls]
+    inputLabels[this.props.controls] = true
+  }
+
+  componentWillUnmount() {
+    delete inputLabels[this.props.controls]
+  }
+
+  focusInput = () => {
+    this.input && this.input.focus()
+  }
+
+  handleMouseOver = () => {
+    this.input && this.input.setState({ isHovered: true })
+  }
+
+  handleMouseOut = () => {
+    this.input && this.input.setState({ isHovered: false })
+  }
+
+  render() {
+    const { controls, state, ...restProps } = this.props
+    if (controls) {
+      restProps.id = `${controls}-label`
+    }
+    if (state) {
+      restProps.color = getColor(state)
+    }
+    return (
+      <Text
+        as="label"
+        onMouseOver={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+        onClick={this.focusInput}
+        {...restProps}
+      />
+    )
+  }
+}
+
+InputLabel.displayName = 'Input.InputLabel'
+
+export default InputLabel

package/src/Input/InputLabel.mdx

@@ -0,0 +1,18 @@
+---
+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/>.
+---
+
+```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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,238 @@
+// @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

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

package/src/ItemList/ItemListController.js

@@ -0,0 +1,34 @@
+// @flow
+import React, { Component } from 'react'
+
+import ItemListContext from './ItemListContext'
+
+class ItemListController extends Component {
+  highlightedItemId = null
+
+  componentDidMount() {
+    this.unsubsribeController = this.itemList.subscribeController(this)
+  }
+
+  componentWillUnmount() {
+    this.unsubsribeController()
+  }
+
+  render() {
+    return (
+      <ItemListContext.Consumer>
+        {(itemList) => {
+          if (!this.itemList) {
+            this.itemList = itemList
+          }
+          return this.props.children({
+            ...itemList,
+            highlightedItemId: this.highlightedItemId,
+          })
+        }}
+      </ItemListContext.Consumer>
+    )
+  }
+}
+
+export default ItemListController