@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/NumberField/NumberField.mdx

@@ -0,0 +1,75 @@
+---
+title: NumberField
+category: Forms
+summary: Number stepper input used to collect numeric information from users.
+---
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(0)
+  return (
+    <Input.InputBox>
+      <NumberField value={value} onChange={(value) => setValue(value)} />
+    </Input.InputBox>
+  )
+})
+```
+
+### With Controls
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(0)
+  return (
+    <Input.InputBox>
+      <NumberField value={value} onChange={(value) => setValue(value)} hasControls={true} />
+    </Input.InputBox>
+  )
+})
+```
+
+### Inline
+```jsx live
+render(() => {
+  const [month, setMonth] = React.useState(4)
+  const [day, setDay] = React.useState(24)
+  const [year, setYear] = React.useState(2022)
+  return (
+    <StackView axis="horizontal" alignment="center">
+      <NumberField
+        as={Input.Inline}
+        moveFocusOnMax
+        fontSize={1}
+        pad={2}
+        min={1}
+        max={12}
+        value={month}
+        onChange={(month) => setMonth(month)}
+      />
+      <Text fontSize={1} marginHorizontal={0.5}>
+        /
+      </Text>
+      <NumberField
+        as={Input.Inline}
+        moveFocusOnMax
+        fontSize={1}
+        pad={2}
+        min={1}
+        max={31}
+        value={day}
+        onChange={(day) => setDay(day)}
+      />
+      <Text fontSize={1} marginHorizontal={0.5}>
+        /
+      </Text>
+      <NumberField
+        as={Input.Inline}
+        fontSize={1}
+        pad={4}
+        min={0}
+        value={year}
+        onChange={(year) => setYear(year)}
+      />
+    </StackView>
+  )
+})
+```

package/src/NumberField/NumberField.test.tsx

@@ -0,0 +1,262 @@
+import React, { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import userEvent from '@testing-library/user-event'
+import NumberField from './NumberField'
+
+describe('value', () => {
+  const TestApp = ({ value: initialValue, ...props }) => {
+    const [value, setValue] = useState(initialValue)
+    const defaultProps = {
+      pad: 0,
+      highlightOnInteraction: false,
+      placeholder: '',
+      autoWidth: false,
+      ...props,
+    }
+    return (
+      <NumberField
+        data-testid="test"
+        value={value}
+        onChange={setValue}
+        {...defaultProps}
+      />
+    )
+  }
+  const setup = (props) => {
+    const { getByTestId } = render(<TestApp {...props} />)
+    return getByTestId('test')
+  }
+
+  it('renders', () => {
+    const numberField = setup({ value: 5 })
+    expect(numberField).toHaveValue('5')
+  })
+
+  it('pads if asked to', () => {
+    const numberField = setup({ value: 5, pad: 2 })
+    expect(numberField).toHaveValue('05')
+  })
+
+  it('uses placeholder when empty', () => {
+    const placeholder = 'pick something!'
+    const numberField = setup({ placeholder })
+    expect(numberField).toHaveAttribute('placeholder', placeholder)
+  })
+
+  describe('min', () => {
+    it('is used if typed value is lower after blur', () => {
+      const numberField = setup({ value: 2, min: 1 })
+      userEvent.type(numberField, '{backspace}0')
+      userEvent.tab()
+      expect(numberField).toHaveValue('1')
+    })
+
+    it('prevents arrow down from going below', () => {
+      const numberField = setup({ value: 1, min: 1 })
+      userEvent.type(numberField, '{arrowdown}')
+      expect(numberField).toHaveValue('1')
+    })
+  })
+
+  describe('max', () => {
+    it('is used if typed value is higher after blur', () => {
+      const numberField = setup({ value: 0, max: 1 })
+      userEvent.type(numberField, '2')
+      userEvent.tab()
+      expect(numberField).toHaveValue('1')
+    })
+
+    it('prevents arrow up from going above', () => {
+      const numberField = setup({ value: 1, max: 1 })
+      userEvent.type(numberField, '{arrowup}')
+      expect(numberField).toHaveValue('1')
+    })
+  })
+
+  describe('pad', () => {
+    it('add appropriate pad', () => {
+      const numberField = setup({ value: 0, pad: 2 })
+      userEvent.type(numberField, '12{backspace}')
+      expect(numberField).toHaveValue('01')
+    })
+  })
+})
+
+describe('moveFocusOnMax', () => {
+  const TestApp = (props) => {
+    const [value, setValue] = useState(0)
+
+    return (
+      <>
+        <NumberField
+          {...props}
+          data-testid="test-a"
+          value={value}
+          onChange={setValue}
+        />
+        <input data-testid="test-b" />
+      </>
+    )
+  }
+
+  const setup = () => {
+    const props = { max: 12, pad: 2, moveFocusOnMax: true }
+    const { getByTestId } = render(<TestApp {...props} />)
+    return [getByTestId('test-a'), getByTestId('test-b')]
+  }
+
+  it('moves focus when any further input would exceed max', () => {
+    const [numberField, nextTabbable] = setup()
+
+    userEvent.type(numberField, '2')
+    jest.runAllTimers()
+    expect(nextTabbable).toHaveFocus()
+  })
+
+  it('does not move focus when some further input is possible without exceeding max', () => {
+    const [numberField, nextTabbable] = setup()
+
+    userEvent.type(numberField, '1') // (10, 11, 12) are still possible
+    jest.runAllTimers()
+    expect(numberField).toHaveFocus()
+  })
+})
+
+describe('ignoredKeys', () => {
+  const TestApp = (props) => {
+    const [value, setValue] = useState(1)
+
+    return (
+      <NumberField
+        {...props}
+        data-testid="test"
+        value={value}
+        onChange={setValue}
+      />
+    )
+  }
+
+  const setup = () => {
+    const props = { ignoredKeys: ['ArrowUp', 'ArrowDown'] }
+    const { getByTestId } = render(<TestApp {...props} />)
+    return getByTestId('test')
+  }
+
+  it('prevents specified keys from changing values', () => {
+    const numberField = setup()
+
+    userEvent.type(numberField, '{arrowup}')
+    jest.runAllTimers()
+    expect(numberField).toHaveValue('1')
+
+    userEvent.type(numberField, '{arrowdown}')
+    jest.runAllTimers()
+    expect(numberField).toHaveValue('1')
+  })
+
+  it('allows other keys from change the value', () => {
+    const numberField = setup()
+
+    userEvent.type(numberField, '2')
+    jest.runAllTimers()
+    expect(numberField).toHaveValue('12')
+  })
+})
+
+describe('use buttons to increment/decrement value', () => {
+  const TestApp = (props) => {
+    const [value, setValue] = useState(1)
+
+    return (
+      <NumberField
+        {...props}
+        data-testid="test"
+        hasControls={true}
+        onChange={setValue}
+        value={value}
+      />
+    )
+  }
+
+  it('user input: pointer', () => {
+    const { container } = render(<TestApp step={1} />)
+    const input = container.querySelector('input')
+    const decrementButton = container.querySelector(
+      '[aria-label="Decrement by 1"]'
+    )
+    const incrementButton = container.querySelector(
+      '[aria-label="Increment by 1"]'
+    )
+
+    expect(decrementButton).toBeInTheDocument()
+    expect(incrementButton).toBeInTheDocument()
+    expect(input).toHaveValue('1')
+
+    userEvent.click(incrementButton)
+    expect(input).toHaveValue('2')
+
+    userEvent.click(incrementButton)
+    expect(input).toHaveValue('3')
+
+    userEvent.click(decrementButton)
+    expect(input).toHaveValue('2')
+
+    userEvent.click(decrementButton)
+    expect(input).toHaveValue('1')
+  })
+
+  it('user input: keyboard', () => {
+    const { container } = render(<TestApp step={1} />)
+    const input = container.querySelector('input')
+    const decrementButton = container.querySelector(
+      '[aria-label="Decrement by 1"]'
+    )
+    const incrementButton = container.querySelector(
+      '[aria-label="Increment by 1"]'
+    )
+
+    expect(decrementButton).toBeInTheDocument()
+    expect(incrementButton).toBeInTheDocument()
+    expect(input).toHaveValue('1')
+
+    userEvent.tab() // focus on input
+    userEvent.tab() // focus on "increment button"
+    userEvent.keyboard('{enter}')
+    expect(input).toHaveValue('2')
+
+    userEvent.keyboard('{enter}')
+    expect(input).toHaveValue('3')
+
+    userEvent.tab() // focus on "decrement button"
+    userEvent.keyboard('{enter}')
+    expect(input).toHaveValue('2')
+  })
+
+  it('user input: pointer w/ custom step', () => {
+    const { container } = render(<TestApp step={5} />)
+    const input = container.querySelector('input')
+    const decrementButton = container.querySelector(
+      '[aria-label="Decrement by 5"]'
+    )
+    const incrementButton = container.querySelector(
+      '[aria-label="Increment by 5"]'
+    )
+
+    expect(decrementButton).toBeInTheDocument()
+    expect(incrementButton).toBeInTheDocument()
+    expect(input).toHaveValue('1')
+
+    userEvent.click(incrementButton)
+    expect(input).toHaveValue('6')
+
+    userEvent.click(incrementButton)
+    expect(input).toHaveValue('11')
+
+    userEvent.click(decrementButton)
+    expect(input).toHaveValue('6')
+
+    userEvent.click(decrementButton)
+    expect(input).toHaveValue('1')
+  })
+})

package/src/NumberField/NumberField.tsx

@@ -0,0 +1,358 @@
+import React, { createElement, Component } from 'react'
+
+import InputField from '../Input/InputField'
+import StackView from '../StackView'
+import Button from '../Button'
+import { padNumber, getTabbableSiblings } from '../utils'
+
+type NumberFieldProps = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
+  as?: any
+
+  /**
+   * Add controls to increment/decrement the value
+   */
+  hasControls?: boolean
+
+  /**
+   * An array of keys to ignore when pushed.
+   * ex: ["ArrowUp", "ArrowDown"].
+   */
+  ignoredKeys: string[]
+
+  /**
+   * Maximum number that can be entered.
+   */
+  max: number
+
+  /**
+   * Minimum number that can be entered.
+   */
+  min: number
+
+  /**
+   * Called when the input's onInput is called with a valid value
+   * or when the arrow keys are used to increment/decrement the value.
+   * Please note traditional onInput/onChange events are not supported
+   * since this component takes control of them.
+   */
+  onChange: (value: string) => void
+
+  /**
+   * Maps to the input's `onBlur` prop.
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+
+  onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+
+  onKeyDown?: Function
+
+  /**
+   * The amount of 0s to pad the value with.
+   */
+  pad: number
+
+  /**
+   * Forces the input text to stay fully selected while interacting with it.
+   */
+  highlightOnInteraction: boolean
+
+  /**
+   * String to display when value is empty.
+   */
+  placeholder: string
+
+  /**
+   * The amount to step up/down from the value when using the arrow keys
+   * defaults to `1`
+   */
+  step: number
+
+  /**
+   * The value of the input.
+   */
+  value: number
+
+  autoWidth: boolean
+  moveFocusOnMax: boolean
+}
+
+const MIN_VALUE = -Infinity
+const MAX_VALUE = Infinity
+const ACCEPTED_KEYS = [
+  'Backspace',
+  'Delete',
+  'Tab',
+  'Enter',
+  'Home',
+  'End',
+  'ArrowLeft',
+  'ArrowRight',
+  '-',
+  '.',
+]
+
+function getPadStringSize(pad) {
+  let str = ''
+  for (let i = 0; i < pad; i++) {
+    str += '0'
+  }
+  return str
+}
+
+function isNotAcceptedNumberKey(event) {
+  return (
+    !event.metaKey &&
+    event.key !== 'v' &&
+    isNaN(parseInt(event.key, 10)) &&
+    ACCEPTED_KEYS.indexOf(event.key) === -1
+  )
+}
+
+class NumberField extends Component<NumberFieldProps> {
+  static defaultProps = {
+    as: InputField,
+    hasControls: false,
+    ignoredKeys: [],
+    min: MIN_VALUE,
+    max: MAX_VALUE,
+    step: 1,
+    moveFocusOnMax: false,
+  }
+
+  firstTouch = true
+
+  getParsedValues = (value) => {
+    return {
+      value: Number.parseFloat(value),
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
+      minValue: Number.parseFloat(this.props.min),
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
+      maxValue: Number.parseFloat(this.props.max),
+    }
+  }
+
+  clampValue = (valueToCheck) => {
+    const { value, minValue } = this.getParsedValues(valueToCheck)
+    return isNaN(value) ? (minValue === MIN_VALUE ? 0 : minValue) : value
+  }
+
+  isValueValid = (valueToCheck) => {
+    const { value, minValue, maxValue } = this.getParsedValues(valueToCheck)
+    return value >= minValue && value <= maxValue
+  }
+
+  changeIfValid = (value) => {
+    if (this.isValueValid(value)) {
+      this.props.onChange(value)
+    }
+  }
+
+  handleBlur = (event) => {
+    const { minValue, maxValue } = this.getParsedValues(event.target.value)
+    let value = Number.parseFloat(event.target.value)
+
+    if (value < minValue) {
+      this.props.onChange(minValue.toString())
+    } else if (value > maxValue) {
+      this.props.onChange(maxValue.toString())
+    } else if (isNaN(value)) {
+      value = this.clampValue(value)
+      this.props.onChange(value.toString())
+    }
+    if (this.props.onBlur) {
+      this.props.onBlur(event)
+    }
+    this.firstTouch = true
+  }
+
+  stepValue = (baseValue, step) => {
+    const increment = step
+    const nextValue = this.clampValue(baseValue + increment)
+    const parsedValue = Number.parseFloat(
+      baseValue.toString().indexOf('.') > -1
+        ? nextValue.toFixed(2)
+        : nextValue.toString()
+    )
+    if (this.isValueValid(parsedValue)) {
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
+      this.props.onChange(parsedValue)
+    }
+  }
+
+  incrementValue = (baseValue) => this.stepValue(baseValue, this.props.step)
+
+  decrementValue = (baseValue) => this.stepValue(baseValue, -this.props.step)
+
+  handleKeyDown = (event) => {
+    if (this.props.ignoredKeys.includes(event.key)) {
+      return
+    }
+    const { pad } = this.props
+    const { value } = this.getParsedValues(event.target.value)
+    if (
+      isNotAcceptedNumberKey(event) ||
+      (pad && (event.key === 'ArrowLeft' || event.key === 'ArrowRight'))
+    ) {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowUp') {
+      this.incrementValue(value)
+    } else if (event.key === 'ArrowDown') {
+      this.decrementValue(value)
+    }
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(event)
+    }
+  }
+
+  handleInput = (event) => {
+    const { maxValue } = this.getParsedValues(event.target.value)
+    if (this.props.pad) {
+      const deleteKeyPressed = event.target.value === ''
+      const targetValue = deleteKeyPressed
+        ? event.target.value
+        : parseFloat(event.target.value)
+
+      if (deleteKeyPressed) {
+        const nextValue = `${this.props.value}`.slice(0, -1)
+        this.props.onChange(padNumber(nextValue, this.props.pad))
+      } else {
+        let nextValue = this.clampValue(targetValue)
+        const paddedValue = parseFloat(`${this.props.value}${targetValue}`)
+        if (
+          !this.firstTouch &&
+          !isNaN(targetValue) &&
+          this.isValueValid(paddedValue)
+        ) {
+          nextValue = paddedValue
+        }
+        this.firstTouch = false
+
+        if (this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          const { next } = getTabbableSiblings(event.target)
+          if (next) {
+            setTimeout(() => next.focus())
+          }
+        }
+
+        this.changeIfValid(nextValue)
+      }
+    } else {
+      this.props.onChange(event.target.value)
+    }
+  }
+
+  getAutoWidthValue(value) {
+    const { autoWidth, pad, placeholder } = this.props
+    const isValueEmpty = value === ''
+    return (
+      autoWidth ||
+      (pad && isValueEmpty
+        ? getPadStringSize(pad)
+        : isValueEmpty && placeholder !== undefined
+        ? placeholder
+        : value)
+    )
+  }
+
+  renderInput(restProps) {
+    const { as, highlightOnInteraction, pad, value } = this.props
+    const parsed = this.getParsedValues(value)
+    let numberValue = value === null ? '' : value
+
+    if (pad && numberValue !== '') {
+      numberValue = padNumber(numberValue, pad)
+    }
+
+    if (parsed.minValue !== MIN_VALUE) {
+      restProps.min = this.props.min
+    }
+
+    if (parsed.maxValue !== MAX_VALUE) {
+      restProps.max = this.props.max
+    }
+
+    if (this.props.autoWidth !== false) {
+      restProps.autoWidth = this.getAutoWidthValue(numberValue)
+      if (restProps.autoWidth === undefined) {
+        restProps.autoWidth = true
+      }
+    }
+
+    return createElement(as, {
+      ...restProps,
+      textOverflow: undefined,
+      autoComplete: 'off',
+      value: numberValue,
+      highlightOnInteraction: highlightOnInteraction || pad,
+      onBlur: this.handleBlur,
+      onInput: this.handleInput,
+      onKeyDown: this.handleKeyDown,
+    })
+  }
+
+  renderInputWithControls(restProps) {
+    const inputElement = this.renderInput(restProps)
+
+    if (this.props.hasControls) {
+      return (
+        <>
+          {inputElement}
+          <StackView marginRight={-1} marginLeft={1}>
+            <Button
+              icon={{ name: 'general.upCaret' }}
+              hover={{ backgroundColor: 'grey-1' }}
+              minHeight={1}
+              onClick={() => this.incrementValue(this.props.value)}
+              paddingVertical={0.25}
+              // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+              size="xs"
+              title={`Increment by ${this.props.step}`}
+              variant="naked"
+            />
+            <Button
+              icon={{ name: 'general.downCaret' }}
+              hover={{ backgroundColor: 'grey-1' }}
+              minHeight={1}
+              onClick={() => this.decrementValue(this.props.value)}
+              paddingVertical={0.25}
+              // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+              size="xs"
+              title={`Decrement by ${this.props.step}`}
+              variant="naked"
+            />
+          </StackView>
+        </>
+      )
+    }
+    return inputElement
+  }
+
+  render() {
+    const {
+      autoWidth,
+      as,
+      hasControls,
+      highlightOnInteraction,
+      ignoredKeys,
+      min,
+      max,
+      moveFocusOnMax,
+      onChange,
+      onBlur,
+      onInput,
+      onKeyDown,
+      pad,
+      value,
+      ...restProps
+    } = this.props
+
+    return this.props.hasControls
+      ? this.renderInputWithControls(restProps)
+      : this.renderInput(restProps)
+  }
+}
+
+export default NumberField

package/src/NumberField/index.js

@@ -0,0 +1,2 @@
+import NumberField from './NumberField'
+export default NumberField