@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/TimeField/TimeField.js

@@ -0,0 +1,245 @@
+// @flow
+import React, { Component } from 'react'
+
+import Box from '../Box'
+import Input from '../Input/Input'
+import InputBox from '../Input/InputBox'
+import InputField from '../Input/InputField'
+import NumberField from '../NumberField'
+import { isIOS, noop, padNumber } from '../utils'
+
+import {
+  HOURS_TO_NOON,
+  HOURS_IN_DAY,
+  addHoursToTime,
+  addMinutesToTime,
+  addTimeToDate,
+  getMeridiem,
+  getTimeFromDate,
+} from './utils'
+
+type Props = {
+  /**
+   * An array of keys to ignore when pushed.
+   * ex: ["ArrowUp", "ArrowDown"].
+   */
+  ignoredKeys: string[],
+
+  /**
+   * Render native time input, defaults to `true` if user platform is an iOS device, otherwise `false`.
+   */
+  isIOS: boolean,
+
+  /**
+   * Receives new time from typing or navigating with up and down arrow keys.
+   */
+  onChange: (time: string) => null,
+
+  /**
+   * Displays time based on a 12 hour clock, `true` by default.
+   */
+  twelveHourClock: boolean,
+
+  /**
+   * The controlled value passed to the internal input.
+   * Accepts an array of [hours, minutes] based on a 24 hour clock.
+   */
+  value: Array<number, number>,
+}
+
+class TimeField extends Component<Props> {
+  static addHoursToTime = addHoursToTime
+
+  static addMinutesToTime = addMinutesToTime
+
+  static addTimeToDate = addTimeToDate
+
+  static getTimeFromDate = getTimeFromDate
+
+  static defaultProps = {
+    twelveHourClock: true,
+    ignoredKeys: [],
+    isIOS,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      meridiem: getMeridiem(props.value),
+    }
+  }
+
+  componentDidUpdate(lastProps) {
+    if (lastProps.value[0] !== this.props.value[0]) {
+      this.setState({
+        meridiem: getMeridiem(this.props.value),
+      })
+    }
+  }
+
+  setInputBoxRef = (component) => {
+    this.inputBox = component
+  }
+
+  updateTime = (time = {}) => {
+    let [hours, minutes] = this.props.value
+    if (time.hours !== undefined) {
+      hours = time.hours
+    }
+    if (time.minutes !== undefined) {
+      minutes = time.minutes
+    }
+    if (this.props.twelveHourClock && !this.props.isIOS) {
+      if (hours > 11 && this.state.meridiem === 'AM') {
+        hours -= 12
+      } else if (hours < 12 && this.state.meridiem === 'PM') {
+        hours += 12
+      }
+    }
+    this.props.onChange([hours, minutes])
+  }
+
+  updateHours = (amount) => {
+    this.props.onChange(addHoursToTime(this.props.value, amount))
+  }
+
+  updateMinutes = (amount) => {
+    this.props.onChange(addMinutesToTime(this.props.value, amount))
+  }
+
+  toggleMeridiem = () => {
+    this.setState(
+      (state) => ({ meridiem: state.meridiem === 'AM' ? 'PM' : 'AM' }),
+      this.updateTime
+    )
+  }
+
+  handleHoursChange = (hours) => {
+    this.updateTime({ hours })
+  }
+
+  handleHoursKeyDown = (event) => {
+    if (event.key === 'ArrowRight') {
+      this.inputBox.focus(1)
+    }
+  }
+
+  handleMinutesChange = (minutes) => {
+    this.updateTime({ minutes })
+  }
+
+  handleMinutesKeyDown = (event) => {
+    if (this.props.ignoredKeys.includes(event.key)) {
+      return
+    }
+    if (event.key === 'ArrowLeft') {
+      this.inputBox.focus(0)
+    }
+    if (event.key === 'ArrowRight') {
+      this.inputBox.focus(2)
+    }
+  }
+
+  handleAMPMKeyDown = (event) => {
+    if (this.props.ignoredKeys.includes(event.key)) {
+      return
+    }
+    if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowLeft') {
+      this.inputBox.focus(1)
+    }
+    if (
+      (event.key.toLowerCase() === 'a' && this.state.meridiem === 'PM') ||
+      (event.key.toLowerCase() === 'p' && this.state.meridiem === 'AM') ||
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown'
+    ) {
+      this.toggleMeridiem()
+    }
+  }
+
+  handleIOSChange = (event) => {
+    const [hours, minutes] = event.target.value.split(':')
+    this.updateTime({ hours: +hours, minutes: +minutes })
+  }
+
+  render() {
+    const {
+      ignoredKeys,
+      value,
+      min,
+      max,
+      interval,
+      onChange,
+      twelveHourClock,
+      isIOS,
+      ...restProps
+    } = this.props
+    const [hours, minutes] = value
+    return isIOS ? (
+      <Input
+        {...restProps}
+        type="time"
+        autoWidth={`${hours}:${padNumber(minutes, 2)} ${this.state.meridiem}`}
+        value={`${padNumber(hours, 2)}:${padNumber(minutes, 2)}`}
+        onChange={this.handleIOSChange}
+      />
+    ) : (
+      <InputBox ref={this.setInputBoxRef} inline {...restProps}>
+        <NumberField
+          autoWidth={false}
+          fontVariantNumeric="tabular-nums"
+          moveFocusOnMax
+          value={
+            twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours
+          }
+          min={twelveHourClock ? 1 : 0}
+          max={twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1}
+          pad={2}
+          grow={0}
+          width="2ch"
+          textAlign="center"
+          aria-label="Hours"
+          onChange={this.handleHoursChange}
+          onKeyDown={this.handleHoursKeyDown}
+          {...{ ignoredKeys }}
+        />
+        <Box as="span" width={0.5} textAlign="center" userSelect="none">
+          :
+        </Box>
+        <NumberField
+          autoWidth={false}
+          fontVariantNumeric="tabular-nums"
+          moveFocusOnMax
+          value={minutes}
+          min={0}
+          max={59}
+          pad={2}
+          grow={0}
+          width="2ch"
+          textAlign="center"
+          aria-label="Minutes"
+          onChange={this.handleMinutesChange}
+          onKeyDown={this.handleMinutesKeyDown}
+          {...{ ignoredKeys }}
+        />
+        {twelveHourClock && (
+          <InputField
+            highlightOnInteraction
+            value={this.state.meridiem}
+            grow={0}
+            width={3}
+            textAlign="center"
+            aria-label="AM/PM"
+            onChange={noop} // prevent React warnings
+            onKeyDown={this.handleAMPMKeyDown}
+          />
+        )}
+      </InputBox>
+    )
+  }
+}
+
+export default TimeField

package/src/TimeField/TimeField.mdx

@@ -0,0 +1,94 @@
+---
+title: TimeField
+category: Forms
+---
+
+```jsx live
+render(() => {
+  const [time, setTime] = React.useState([9, 30])
+  return <TimeField value={time} onChange={(time) => setTime(time)} />
+})
+```
+
+```jsx live
+const START_OF_TODAY = dateFns.startOfDay(new Date())
+const END_OF_TODAY = dateFns.endOfDay(new Date())
+render(() => {
+  const [date, setDate] = React.useState(START_OF_TODAY)
+  const [startTime, setStartTime] = React.useState([11, 45])
+  const [endTime, setEndTime] = React.useState(
+    TimeField.getTimeFromDate(END_OF_TODAY)
+  )
+  const [twelveHourClock, setTwelveHourClock] = React.useState(true)
+  const [minutesToAdd, setMinutesToAdd] = React.useState(30)
+  return (
+    <StackView spacing={1}>
+      <StackView axis="horizontal" spacing={1}>
+        <DateField
+          value={date}
+          onChange={(date) => {
+            console.log({ date })
+            setDate(date)
+          }}
+        />
+        <TimeField
+          twelveHourClock={twelveHourClock}
+          value={startTime}
+          onChange={(time) => {
+            console.log(time)
+            setStartTime(time)
+          }}
+        />
+        <TimeField
+          twelveHourClock={twelveHourClock}
+          value={endTime}
+          onChange={(time) => {
+            console.log(time)
+            setEndTime(time)
+          }}
+        />
+      </StackView>
+      <Card spacing={<Divider />}>
+        <StackView axis="horizontal" alignment="center" padding={1} spacing={1}>
+          <Checkbox
+            label="Twelve hour clock"
+            checked={twelveHourClock}
+            onChange={(event) => setTwelveHourClock(event.target.checked)}
+          />
+          <Input.InputBox marginLeft="auto">
+            <NumberField value={minutesToAdd} onChange={setMinutesToAdd} />
+          </Input.InputBox>
+          <Button
+            title="Add minutes"
+            variant="outline"
+            onClick={() => {
+              setStartTime(TimeField.addMinutesToTime(startTime, minutesToAdd))
+              setEndTime(TimeField.addMinutesToTime(endTime, minutesToAdd))
+            }}
+          />
+        </StackView>
+        <StackView alignment="center" padding={1} spacing={1}>
+          <Text>
+            <Text inline weight="bold" marginRight={1}>
+              Start Date:
+            </Text>
+            {dateFns.format(
+              TimeField.addTimeToDate(date, startTime),
+              'MM/dd/yyyy h:mm a'
+            )}
+          </Text>
+          <Text>
+            <Text inline weight="bold" marginRight={1}>
+              End Date:
+            </Text>
+            {dateFns.format(
+              TimeField.addTimeToDate(date, endTime),
+              'MM/dd/yyyy hh:mm a'
+            )}
+          </Text>
+        </StackView>
+      </Card>
+    </StackView>
+  )
+})
+```

package/src/TimeField/TimeField.test.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react'
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import TimeField from './TimeField'
+
+interface TimeProps {
+  hours?: number
+  ignoredKeys?: string[]
+  minutes?: number
+  twelveHourClock?: boolean
+  value?: any
+  isIOS?: boolean
+}
+
+const TestApp = ({ value: initialValue, ...props }: TimeProps) => {
+  const [value, setValue] = useState(initialValue)
+  return <TimeField {...props } value={value} onChange={setValue}/>
+}
+
+const setup = ({ hours, minutes, ...props } : TimeProps) => {
+  const testApp = render(<TestApp {...props } value={[hours, minutes]}/>)
+  const hourInput = testApp.queryByLabelText('Hours')
+  const minuteInput = testApp.queryByLabelText('Minutes')
+  const meridiemInput = testApp.queryByLabelText('AM/PM')
+
+  return { hourInput, minuteInput, meridiemInput, ...testApp }
+}
+
+// 0 padding
+it('left pads 0 for single digit hours', () => {
+  const { hourInput } = setup({ hours: 1 })
+  expect(hourInput).toHaveValue('01')
+})
+
+it('doesnt pad double digit hours', () => {
+  const { hourInput } = setup({ hours: 11 })
+  expect(hourInput).toHaveValue('11')
+})
+
+it('left pads 0 for single digit minutes', () => {
+  const { minuteInput } = setup({ minutes: 3 })
+  expect(minuteInput).toHaveValue('03')
+})
+
+it('doesnt pad double digit minutes', () => {
+  const { minuteInput } = setup({ minutes: 35 })
+  expect(minuteInput).toHaveValue('35')
+})
+
+// hour display
+it('displays 13 hours as 01 hours for 12 hour clock', () => {
+  const { hourInput } = setup({ hours: 13 })
+  expect(hourInput).toHaveValue('01')
+})
+
+it('displays 0 hours as 12 hours for 12 hour clock', () => {
+  const { hourInput } = setup({ hours: 13 })
+  expect(hourInput).toHaveValue('01')
+})
+
+it('displays 13 hours as 13 hours for 24 hour clock', () => {
+  const { hourInput } = setup({ hours: 13, twelveHourClock: false })
+  expect(hourInput).toHaveValue('13')
+})
+
+// meridiem
+it('displays the meridiem for 12 hour clock', () => {
+  const { meridiemInput } = setup({ hours: 13 })
+  expect(meridiemInput).toHaveValue('PM')
+})
+
+it('does not display the meridiem for 24 hour clock', () => {
+  const { meridiemInput } = setup({ hours: 13, twelveHourClock: false })
+  expect(meridiemInput).not.toBeInTheDocument()
+})
+
+// arrow key events
+it('changes focus to minutes from hours on arrow right', () => {
+  const { hourInput, minuteInput } = setup({ hours: 1, minutes: 30 })
+
+  userEvent.type(hourInput, '{arrowright}')
+  expect(minuteInput).toHaveFocus()
+})
+
+it('changes focus to hours from minutes on arrow left', () => {
+  const { hourInput, minuteInput } = setup({ hours: 1, minutes: 30 })
+
+  userEvent.type(minuteInput, '{arrowleft}')
+  expect(hourInput).toHaveFocus()
+})
+
+it('changes focus to meridiem from minutes on arrow right for 12 hour clock', () => {
+  const { minuteInput, meridiemInput } = setup({ hours: 1, minutes: 30 })
+
+  userEvent.type(minuteInput, '{arrowright}')
+  expect(meridiemInput).toHaveFocus()
+})
+
+it('changes the meridiem on arrow key', () => {
+  const { meridiemInput } = setup({ hours: 13, minutes: 42 })
+
+  expect(meridiemInput).toHaveValue('PM')
+
+  userEvent.type(meridiemInput, '{arrowdown}')
+  expect(meridiemInput).toHaveValue('AM')
+
+  userEvent.type(meridiemInput, '{arrowup}')
+  expect(meridiemInput).toHaveValue('PM')
+})
+
+it('does not change the meridiem on arrow key if arrow keys are ignored', () => {
+  const { meridiemInput } = setup({ hours: 13, minutes: 42, ignoredKeys: ['ArrowUp', 'ArrowDown'] })
+
+  expect(meridiemInput).toHaveValue('PM')
+
+  userEvent.type(meridiemInput, '{arrowdown}')
+  expect(meridiemInput).toHaveValue('PM')
+
+  userEvent.type(meridiemInput, '{arrowup}')
+  expect(meridiemInput).toHaveValue('PM')
+})
+
+it('changes the value of hours on arrow up or arrow down', () => {
+  const { hourInput } = setup( { hours: 1, minutes: 42 })
+
+  expect(hourInput).toHaveValue("01")
+  userEvent.type(hourInput, '{arrowup}')
+  expect(hourInput).toHaveValue("02")
+})
+
+it('does not change the value of hours on arrow up or arrow down if ignored', () => {
+  const { hourInput } = setup( { hours: 1, minutes: 42, ignoredKeys: ['ArrowUp', 'ArrowDown'] })
+
+  expect(hourInput).toHaveValue("01")
+  userEvent.type(hourInput, '{arrowup}')
+  expect(hourInput).toHaveValue("01")
+  userEvent.type(hourInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("01")
+})
+
+it('does not change the value of minutes on arrow up or arrow down if ignored', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 42, ignoredKeys: ['ArrowUp', 'ArrowDown'] })
+
+  expect(minuteInput).toHaveValue("42")
+  userEvent.type(minuteInput, '{arrowup}')
+  expect(minuteInput).toHaveValue("42")
+  userEvent.type(minuteInput, '{arrowdown}')
+  expect(minuteInput).toHaveValue("42")
+})
+
+// ios
+it('renders iOS as a single input', () => {
+  const { container, hourInput, minuteInput, meridiemInput } = setup({ isIOS: true, hours: 13, minutes: 42 })
+  const singleTimeInput = container.querySelector('[type=time]')
+
+  expect(singleTimeInput).toHaveValue('13:42')
+  expect(hourInput).not.toBeInTheDocument()
+  expect(minuteInput).not.toBeInTheDocument()
+  expect(meridiemInput).not.toBeInTheDocument()
+})

package/src/TimeField/index.js

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

package/src/TimeField/utils.js

@@ -0,0 +1,44 @@
+import { addHours, addMinutes, getHours, getMinutes } from 'date-fns'
+
+export const HOURS_IN_DAY = 24
+
+export const HOURS_TO_NOON = HOURS_IN_DAY / 2
+
+export const MINUTES_IN_HOUR = 60
+
+export function addHoursToTime(time, hoursToAdd) {
+  let [hours, minutes] = time
+  return [modulo(hours + hoursToAdd, HOURS_IN_DAY), minutes]
+}
+
+export function addMinutesToTime(time, minutesToAdd) {
+  let [hours, minutes] = time
+  const nextMinutes = minutes + minutesToAdd
+  const remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR)
+  if (remainderMinutes >= 0) {
+    const nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR)
+    hours = modulo(nextHours, HOURS_IN_DAY)
+    minutes = remainderMinutes
+  } else {
+    minutes = nextMinutes
+  }
+  return [hours, minutes]
+}
+
+export function addTimeToDate(date, time) {
+  const [hours, minutes] = time
+  return addHours(addMinutes(date, minutes), hours)
+}
+
+export function getMeridiem(time) {
+  const [hours] = time
+  return hours <= 11 ? 'AM' : 'PM'
+}
+
+export function getTimeFromDate(date) {
+  return [getHours(date), getMinutes(date)]
+}
+
+export function modulo(n, m) {
+  return ((n % m) + m) % m
+}

package/src/TokenInput/DefaultToken.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import Badge from '../Badge'
+import Icon from '../Icon'
+
+function DefaultToken({
+  keyboardControls,
+  removeToken,
+  selectFirstToken,
+  selectLastToken,
+  selectPreviousToken,
+  selectNextToken,
+  token,
+  tokenIndex,
+  ...restProps
+}) {
+  return (
+    <Badge
+      size="sm"
+      renderRight={
+        <Icon
+          name="close"
+          size="xs"
+          cursor="pointer"
+          onClick={() => removeToken(false)}
+        />
+      }
+      {...keyboardControls}
+      {...restProps}
+    >
+      {token}
+    </Badge>
+  )
+}
+
+export default DefaultToken