@planningcenter/tapestry-react 2.9.0-rc.1 → 2.9.0-rc.3

package/src/TimeField/TimeField.test.tsx

@@ -15,11 +15,11 @@ interface TimeProps {
 
 const TestApp = ({ value: initialValue, ...props }: TimeProps) => {
   const [value, setValue] = useState(initialValue)
-  return <TimeField {...props } value={value} onChange={setValue}/>
+  return <TimeField {...props} value={value} onChange={setValue} />
 }
 
-const setup = ({ hours, minutes, ...props } : TimeProps) => {
-  const testApp = render(<TestApp {...props } value={[hours, minutes]}/>)
+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')
@@ -110,7 +110,11 @@ it('changes the meridiem on arrow key', () => {
 })
 
 it('does not change the meridiem on arrow key if arrow keys are ignored', () => {
-  const { meridiemInput } = setup({ hours: 13, minutes: 42, ignoredKeys: ['ArrowUp', 'ArrowDown'] })
+  const { meridiemInput } = setup({
+    hours: 13,
+    minutes: 42,
+    ignoredKeys: ['ArrowUp', 'ArrowDown'],
+  })
 
   expect(meridiemInput).toHaveValue('PM')
 
@@ -122,79 +126,79 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', () =>
 })
 
 it('increment hour on arrow up', () => {
-  const { hourInput } = setup( { hours: 1, minutes: 42 })
+  const { hourInput } = setup({ hours: 1, minutes: 42 })
 
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
   userEvent.type(hourInput, '{arrowup}')
-  expect(hourInput).toHaveValue("02")
+  expect(hourInput).toHaveValue('02')
 })
 
 it('increment hour if arrow up on minutes exceeds max value', () => {
-  const { hourInput, minuteInput } = setup( { hours: 1, minutes: 59 })
+  const { hourInput, minuteInput } = setup({ hours: 1, minutes: 59 })
 
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
   userEvent.type(minuteInput, '{arrowup}')
-  expect(hourInput).toHaveValue("02")
+  expect(hourInput).toHaveValue('02')
 })
 
 it('decrement hour on arrow down', () => {
-  const { hourInput } = setup( { hours: 2, minutes: 42 })
+  const { hourInput } = setup({ hours: 2, minutes: 42 })
 
-  expect(hourInput).toHaveValue("02")
+  expect(hourInput).toHaveValue('02')
   userEvent.type(hourInput, '{arrowdown}')
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
 })
 
 it('decrement hour if arrow down on minutes exceeds min value', () => {
-  const { hourInput, minuteInput } = setup( { hours: 2, minutes: 0 })
+  const { hourInput, minuteInput } = setup({ hours: 2, minutes: 0 })
 
-  expect(hourInput).toHaveValue("02")
+  expect(hourInput).toHaveValue('02')
   userEvent.type(minuteInput, '{arrowdown}')
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
 })
 
 it('increment minute on arrow up', () => {
-  const { minuteInput } = setup( { hours: 1, minutes: 42 })
+  const { minuteInput } = setup({ hours: 1, minutes: 42 })
 
-  expect(minuteInput).toHaveValue("42")
+  expect(minuteInput).toHaveValue('42')
   userEvent.type(minuteInput, '{arrowup}')
-  expect(minuteInput).toHaveValue("43")
+  expect(minuteInput).toHaveValue('43')
 })
 
 it('decrement minute on arrow down', () => {
-  const { minuteInput } = setup( { hours: 2, minutes: 43 })
+  const { minuteInput } = setup({ hours: 2, minutes: 43 })
 
-  expect(minuteInput).toHaveValue("43")
+  expect(minuteInput).toHaveValue('43')
   userEvent.type(minuteInput, '{arrowdown}')
-  expect(minuteInput).toHaveValue("42")
+  expect(minuteInput).toHaveValue('42')
 })
 
 it('set minute to min value if arrow up on minutes exceeds max value', () => {
-  const { minuteInput } = setup( { hours: 1, minutes: 59 })
+  const { minuteInput } = setup({ hours: 1, minutes: 59 })
 
-  expect(minuteInput).toHaveValue("59")
+  expect(minuteInput).toHaveValue('59')
   userEvent.type(minuteInput, '{arrowup}')
-  expect(minuteInput).toHaveValue("00")
+  expect(minuteInput).toHaveValue('00')
 })
 
 it('set minute to max value if arrow down on minutes exceeds min value', () => {
-  const { minuteInput } = setup( { hours: 1, minutes: 0 })
+  const { minuteInput } = setup({ hours: 1, minutes: 0 })
 
-  expect(minuteInput).toHaveValue("00")
+  expect(minuteInput).toHaveValue('00')
   userEvent.type(minuteInput, '{arrowdown}')
-  expect(minuteInput).toHaveValue("59")
+  expect(minuteInput).toHaveValue('59')
 })
 
 it('toggle meridiem if arrow up on hour exceeds eleven', () => {
-  const { hourInput, meridiemInput } = setup( { hours: 11 })
-  
+  const { hourInput, meridiemInput } = setup({ hours: 11 })
+
   expect(meridiemInput).toHaveValue('AM')
   userEvent.type(hourInput, '{arrowup}')
   expect(meridiemInput).toHaveValue('PM')
 })
 
 it('toggle meridiem if arrow down on hour exceeds min value', () => {
-  const { hourInput, meridiemInput } = setup( { hours: 1 })
+  const { hourInput, meridiemInput } = setup({ hours: 0 })
 
   expect(meridiemInput).toHaveValue('AM')
   userEvent.type(hourInput, '{arrowdown}')
@@ -202,60 +206,72 @@ it('toggle meridiem if arrow down on hour exceeds min value', () => {
 })
 
 it('set 12 hour clock to min value if arrow up on hour exceeds max value', () => {
-  const { hourInput } = setup( { hours: 12 })
+  const { hourInput } = setup({ hours: 12 })
 
-  expect(hourInput).toHaveValue("12")
+  expect(hourInput).toHaveValue('12')
   userEvent.type(hourInput, '{arrowup}')
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
 })
 
 it('set 24 hour clock to min value if arrow up on hour exceeds max value', () => {
-  const { hourInput } = setup( { hours: 23, twelveHourClock: false })
+  const { hourInput } = setup({ hours: 23, twelveHourClock: false })
 
-  expect(hourInput).toHaveValue("23")
+  expect(hourInput).toHaveValue('23')
   userEvent.type(hourInput, '{arrowup}')
-  expect(hourInput).toHaveValue("00")
+  expect(hourInput).toHaveValue('00')
 })
 
 it('set 12 hour clock to max value if arrow down on hour exceeds min value', () => {
-  const { hourInput } = setup( { hours: 1 })
+  const { hourInput } = setup({ hours: 1 })
 
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
   userEvent.type(hourInput, '{arrowdown}')
-  expect(hourInput).toHaveValue("12")
+  expect(hourInput).toHaveValue('12')
 })
 
 it('set 24 hour clock to max value if arrow down on hour exceeds min value', () => {
-  const { hourInput } = setup( { hours: 0, twelveHourClock: false })
+  const { hourInput } = setup({ hours: 0, twelveHourClock: false })
 
-  expect(hourInput).toHaveValue("00")
+  expect(hourInput).toHaveValue('00')
   userEvent.type(hourInput, '{arrowdown}')
-  expect(hourInput).toHaveValue("23")
+  expect(hourInput).toHaveValue('23')
 })
 
 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'] })
+  const { hourInput } = setup({
+    hours: 1,
+    minutes: 42,
+    ignoredKeys: ['ArrowUp', 'ArrowDown'],
+  })
 
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
   userEvent.type(hourInput, '{arrowup}')
-  expect(hourInput).toHaveValue("01")
+  expect(hourInput).toHaveValue('01')
   userEvent.type(hourInput, '{arrowdown}')
-  expect(hourInput).toHaveValue("01")
+  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'] })
+  const { minuteInput } = setup({
+    hours: 1,
+    minutes: 42,
+    ignoredKeys: ['ArrowUp', 'ArrowDown'],
+  })
 
-  expect(minuteInput).toHaveValue("42")
+  expect(minuteInput).toHaveValue('42')
   userEvent.type(minuteInput, '{arrowup}')
-  expect(minuteInput).toHaveValue("42")
+  expect(minuteInput).toHaveValue('42')
   userEvent.type(minuteInput, '{arrowdown}')
-  expect(minuteInput).toHaveValue("42")
+  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 { container, hourInput, minuteInput, meridiemInput } = setup({
+    isIOS: true,
+    hours: 13,
+    minutes: 42,
+  })
   const singleTimeInput = container.querySelector('[type=time]')
 
   expect(singleTimeInput).toHaveValue('13:42')

package/src/TimeField/TimeField.tsx

@@ -0,0 +1,339 @@
+import React, { useEffect, useRef, useState, KeyboardEvent } 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 { noop, padNumber } from '../utils'
+
+import {
+  addHoursToTime,
+  addMinutesToTime,
+  addTimeToDate,
+  getTimeFromDate,
+} from './utils'
+
+type TimeFieldProps = {
+  /**
+   * An array of keys to ignore when pushed.
+   * ex: ["ArrowUp", "ArrowDown"].
+   */
+  ignoredKeys?: string[]
+
+  interval?: number
+
+  /**
+   * Render native time input, defaults to `true` if user platform is an iOS device, otherwise `false`.
+   */
+  isIOS?: boolean
+
+  max?: number
+
+  min?: number
+
+  /**
+   * Receives new time from typing or navigating with up and down arrow keys.
+   */
+  onChange: (event: any) => void
+
+  /**
+   * 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: [number, number]
+}
+
+const isMobile =
+  typeof window !== 'undefined'
+    ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      )
+    : false
+
+const TimeField = ({
+  ignoredKeys,
+  interval,
+  isIOS = false,
+  max,
+  min,
+  onChange,
+  twelveHourClock = true,
+  value,
+  ...restProps
+}: TimeFieldProps) => {
+  const ref = useRef(null)
+  const [hours, setHours] = useState(value[0])
+  const [minutes, setMinutes] = useState(value[1])
+  const [meridiem, setMeridiem] = useState(hours < 12 ? 'AM' : 'PM')
+  const [hoursDisplay, setHoursDisplay] = useState(
+    twelveHourClock && hours > 12 ? hours - 12 : hours
+  )
+
+  const decrementHoursBy = (amount: number) => {
+    const updatedHours = hours - amount
+
+    if (twelveHourClock) {
+      if (updatedHours > 12) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours - 12)
+      } else if (updatedHours <= 12 && updatedHours > 0) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      } else if (updatedHours === 0) {
+        setHours(updatedHours)
+        setHoursDisplay(12)
+      } else {
+        setHours(23)
+        setHoursDisplay(11)
+      }
+    } else {
+      if (updatedHours < 0) {
+        setHours(23)
+        setHoursDisplay(23)
+      } else {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      }
+    }
+  }
+
+  const incrementHoursBy = (amount: number) => {
+    const updatedHours = hours + amount
+
+    if (twelveHourClock) {
+      if (updatedHours > 0 && updatedHours <= 12) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      } else if (updatedHours > 12 && updatedHours < 24) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours - 12)
+      } else {
+        setHours(0)
+        setHoursDisplay(12)
+      }
+    } else {
+      if (updatedHours < 24) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      } else {
+        setHours(0)
+        setHoursDisplay(0)
+      }
+    }
+  }
+
+  const decrementMinutesBy = (amount: number) => {
+    const updatedMinutes = minutes - amount
+
+    if (updatedMinutes >= 0) {
+      setMinutes(updatedMinutes)
+    } else {
+      setMinutes(59)
+      decrementHoursBy(1)
+    }
+  }
+
+  const incrementMinutesBy = (amount: number) => {
+    const updatedMinutes = minutes + amount
+
+    if (updatedMinutes <= 59) {
+      setMinutes(updatedMinutes)
+    } else {
+      setMinutes(0)
+      incrementHoursBy(1)
+    }
+  }
+
+  const toggleMeridiem = () => {
+    if (meridiem === 'AM') {
+      setMeridiem('PM')
+      if (hours >= 0 && hours <= 12) {
+        setHours(hours + 12)
+      }
+    } else {
+      setMeridiem('AM')
+      if (hours >= 12 && hours < 24) {
+        setHours(hours - 12)
+      }
+    }
+  }
+
+  const handleHoursKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return
+    }
+    if (event.key === 'Backspace') {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[2].focus()
+    }
+    if (event.key === 'ArrowUp') {
+      incrementHoursBy(1)
+    }
+    if (event.key === 'ArrowDown') {
+      decrementHoursBy(1)
+    }
+  }
+
+  const handleHoursChange = (e: any) => {
+    setHoursDisplay(e)
+    !twelveHourClock && setHours(e)
+  }
+
+  const handleHoursBlur = (e: any) => {
+    const updatedHoursValue = parseInt(e.target.value)
+
+    if (twelveHourClock) {
+      if (updatedHoursValue === 0) {
+        setHours(0)
+        setHoursDisplay(12)
+      } else if (hours <= 12) {
+        setHours(updatedHoursValue)
+        setHoursDisplay(updatedHoursValue)
+      } else {
+        setHours(updatedHoursValue + 12)
+        setHoursDisplay(updatedHoursValue)
+      }
+    } else {
+      setHours(updatedHoursValue)
+      setHoursDisplay(updatedHoursValue)
+    }
+  }
+
+  const handleMinutesKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[0].focus()
+    }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[3].focus()
+    }
+    if (event.key === 'ArrowUp') {
+      incrementMinutesBy(1)
+    }
+    if (event.key === 'ArrowDown') {
+      decrementMinutesBy(1)
+    }
+  }
+
+  const handleAMPMKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return
+    }
+    if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[2].focus()
+    }
+    if (
+      (event.key.toLowerCase() === 'a' && meridiem === 'PM') ||
+      (event.key.toLowerCase() === 'p' && meridiem === 'AM') ||
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown'
+    ) {
+      toggleMeridiem()
+    }
+  }
+
+  const updateTime = (time: [number, number]) => {
+    const [hours, minutes] = time
+
+    return onChange([hours, minutes])
+  }
+
+  const handleMobileChange = (event: any) => {
+    const [hours, minutes] = event.target.value.split(':')
+
+    if (hours || minutes) {
+      setHours(hours)
+      setMinutes(minutes)
+    } else {
+      setHours(0)
+      setMinutes(0)
+    }
+  }
+
+  useEffect(() => {
+    if (hours < 12) {
+      setMeridiem('AM')
+    } else {
+      setMeridiem('PM')
+    }
+    updateTime([hours, minutes])
+  }, [hours, minutes])
+
+  return isMobile || isIOS ? (
+    <Input
+      {...restProps}
+      type="time"
+      autoWidth={`${hours}:${padNumber(minutes, 2)} ${meridiem}`}
+      value={`${padNumber(hours, 2)}:${padNumber(minutes, 2)}`}
+      onChange={handleMobileChange}
+    />
+  ) : (
+    <InputBox ref={ref} inline {...restProps}>
+      <NumberField
+        autoWidth={false}
+        fontVariantNumeric="tabular-nums"
+        moveFocusOnMax
+        value={hoursDisplay}
+        min={0}
+        max={twelveHourClock ? 12 : 23}
+        pad={2}
+        grow={0}
+        width="2ch"
+        textAlign="center"
+        aria-label="Hours"
+        onChange={handleHoursChange}
+        onKeyDown={handleHoursKeyDown}
+        onBlur={handleHoursBlur}
+        {...{ 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={(e) => setMinutes(e)}
+        onKeyDown={handleMinutesKeyDown}
+        {...{ ignoredKeys }}
+      />
+      {twelveHourClock && (
+        <InputField
+          highlightOnInteraction
+          value={meridiem}
+          grow={0}
+          width="2em"
+          textAlign="center"
+          aria-label="AM/PM"
+          onChange={noop}
+          onKeyDown={handleAMPMKeyDown}
+        />
+      )}
+    </InputBox>
+  )
+}
+
+TimeField.addHoursToTime = addHoursToTime
+TimeField.addMinutesToTime = addMinutesToTime
+TimeField.addTimeToDate = addTimeToDate
+TimeField.getTimeFromDate = getTimeFromDate
+
+export default TimeField

package/src/TimeField/{TimeField.js → legacy_TimeField.js}

@@ -118,11 +118,7 @@ class TimeField extends Component<Props> {
   }
 
   handleHoursChange = (hours) => {
-    if (this.twelveHourClock && hours === 0) {
-      this.updateTime({ hours: 12 })
-    } else {
-      this.updateTime({ hours })
-    }
+    this.updateTime({ hours })
   }
 
   handleHoursKeyDown = (event) => {
@@ -232,7 +228,7 @@ class TimeField extends Component<Props> {
           value={
             twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours
           }
-          min={0}
+          min={twelveHourClock ? 1 : 0}
           max={twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1}
           pad={2}
           grow={0}

package/src/TimeField/utils.js

@@ -12,17 +12,19 @@ export function addHoursToTime(time, hoursToAdd) {
 }
 
 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]
+  const [hours, minutes] = time
+  const totalTimeInMinutes = hours * 60 + minutes
+  const totalMinutesInDay = 24 * 60
+  const newTime = parseInt(totalTimeInMinutes) + parseInt(minutesToAdd)
+
+  const newHours =
+    newTime > totalMinutesInDay
+      ? Math.floor(newTime / 60) - 24
+      : Math.floor(newTime / 60)
+
+  const newMinutes = newTime % 60
+
+  return [newHours, newMinutes]
 }
 
 export function addTimeToDate(date, time) {

package/src/utils.js

@@ -353,6 +353,13 @@ function isFunction(value) {
   return value && value.constructor === Function
 }
 
+/**
+ * Determines if value is a number
+ */
+function isNumber(value) {
+  return /^[0-9]$/i.test(value)
+}
+
 /**
  * Determines if a value is present in an array by
  * performing a shallow equal check on each item.
@@ -787,6 +794,7 @@ export {
   isElementInteractive,
   isFunction,
   isIOS,
+  isNumber,
   isValueInArray,
   joinChildren,
   lockScroll,