@planningcenter/tapestry-react 2.7.0 → 2.8.0

package/src/DateField/parse.ts

@@ -0,0 +1,92 @@
+const monthDayYearFormat = /^(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|\s)(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|,\s)(\d{4})$/i
+const dayMonthYearFormat = /^(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|\s)(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|,\s)(\d{4})$/i
+const yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/
+
+interface Params {
+  /**
+   * The string we want to parse into a date object
+   */
+  date: string
+
+  /**
+   * Format hint for parser
+   * Helps us know if we should parse day/month/year or month/day/year
+   *
+   * Should adhere to [date-fns spec](https://date-fns.org/v2.0.0-alpha.9/docs/format).
+   */
+  format?: string
+}
+
+export const parseDate = ({ date, format }: Params): Date | null => {
+  try {
+    const { year, month, day } = parseDateIntoObject(date, format)
+    return new Date(year, month - 1, day)
+  } catch (e) {
+    return null
+  }
+}
+
+export const isValidDate = (date: string) => {
+  return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date)
+}
+
+export const parseMonth = (monthString: string): number => {
+  const months = {
+    jan: 1,
+    feb: 2,
+    mar: 3,
+    apr: 4,
+    may: 5,
+    jun: 6,
+    jul: 7,
+    aug: 8,
+    sep: 9,
+    oct: 10,
+    nov: 11,
+    dec: 12,
+  }
+
+  const normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3)
+
+  if (/^\d+$/.test(normalizedString)) {
+    const month = parseInt(normalizedString, 10)
+    if (month >= 1 && month <= 12) {
+      return month
+    }
+  } else if (normalizedString in months) {
+    return months[normalizedString]
+  }
+
+  throw new Error(`Invalid month string: ${monthString}`)
+}
+
+const parseDateIntoObject = (date: string, format?: string) => {
+  if (format?.match(/d.*M/) && dayMonthYearFormat.test(date)) {
+    const { 1: day, 2: month, 3: year } = dayMonthYearFormat.exec(date)
+    return {
+      year: parseInt(year, 10),
+      month: parseMonth(month),
+      day: parseInt(day, 10),
+    }
+  }
+
+  if (monthDayYearFormat.test(date)) {
+    const { 1: month, 2: day, 3: year } = monthDayYearFormat.exec(date)
+    return {
+      year: parseInt(year, 10),
+      month: parseMonth(month),
+      day: parseInt(day, 10),
+    }
+  }
+
+  if (yearMonthDayFormat.test(date)) {
+    const { 1: year, 2: month, 3: day } = yearMonthDayFormat.exec(date)
+    return {
+      year: parseInt(year, 10),
+      month: parseMonth(month),
+      day: parseInt(day, 10),
+    }
+  }
+
+  throw new Error(`Invalid date: ${date}`)
+}

package/src/DateField/useArrowKeysToNavigateCalendar.ts

@@ -0,0 +1,54 @@
+import { useCallback } from "react"
+
+interface Props {
+  date: Date
+  calendarIsOpen: boolean
+  openCalendar: () => void
+  onChange: (date: Date) => void
+}
+
+export const useArrowKeysToNavigateCalendar = ({
+  date,
+  calendarIsOpen,
+  openCalendar,
+  onChange,
+}: Props) => {
+  const incrementDate = useCallback(
+    (by: number): void => {
+      if (!date) return
+
+      const newDate = new Date(date)
+      newDate.setDate(newDate.getDate() + by)
+      onChange(newDate)
+    },
+    [date, onChange]
+  )
+
+  const handleInputKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (calendarIsOpen) {
+        if (event.key === 'ArrowUp') {
+          event.preventDefault()
+          incrementDate(-7)
+        } else if (event.key === 'ArrowDown') {
+          event.preventDefault()
+          incrementDate(7)
+        } else if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          incrementDate(-1)
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          incrementDate(1)
+        }
+      } else {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault()
+          openCalendar()
+        }
+      }
+    },
+    [calendarIsOpen, openCalendar, incrementDate]
+  )
+
+  return handleInputKeyDown
+}

package/src/DateField/useEditableDate.ts

@@ -0,0 +1,81 @@
+import { useCallback, useMemo, useState } from "react"
+import { format } from 'date-fns'
+import { parseDate } from "./parse"
+
+interface Params {
+  /**
+   * The currently selected date
+   */
+  date: Date
+
+  /**
+   * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
+   */
+  dateFormat: string
+
+  /**
+   * Custom function that validates date
+   */
+  dateValidator: (date: Date) => boolean
+
+  /**
+   * Called when a valid date is entered
+   */
+  onChange: (date: Date) => void
+}
+
+export const useEditableDate = ({ date, dateFormat, dateValidator, onChange }: Params) => {
+  const [keyBuffer, setKeyBuffer] = useState<string>()
+  const [invalidKeyBuffer, setInvalidKeyBuffer] = useState(false)
+
+  const formattedDate = useMemo(() => {
+    if (keyBuffer !== undefined) {
+      return keyBuffer
+    } else {
+      return date ? format(date, dateFormat) : ''
+    }
+  }, [date, dateFormat, keyBuffer])
+
+  const setKeyBufferAndValidate = useCallback(
+    (value: string) => {
+      setKeyBuffer(value)
+      if (
+        value &&
+        !dateValidator(parseDate({ date: value, format: dateFormat }))
+      ) {
+        setInvalidKeyBuffer(true)
+      } else {
+        setInvalidKeyBuffer(false)
+      }
+    },
+    [dateFormat, dateValidator]
+  )
+
+  const setDate = useCallback(
+    (date: Date | string) => {
+      let newDate: Date
+
+      if (typeof date === 'string') {
+        setKeyBufferAndValidate(date)
+        newDate = parseDate({ date, format: dateFormat })
+      } else {
+        setKeyBufferAndValidate(undefined)
+        newDate = date
+      }
+
+      if (dateValidator(newDate) && onChange) onChange(newDate)
+    },
+    [onChange, setKeyBufferAndValidate, dateValidator, dateFormat]
+  )
+
+  const clearKeyBuffer = useCallback(() => {
+    setKeyBufferAndValidate(undefined)
+  }, [])
+
+  return {
+    formattedDate,
+    setDate,
+    clearKeyBuffer,
+    invalidKeyBuffer,
+  }
+}

package/src/Select/Select.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Select from '.'
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider'
+
+const people = [
+  {
+    first: 'Charlie',
+    last: 'Brown',
+    twitter: 'dancounsell',
+    active: true,
+  },
+  {
+    first: 'Charlotte',
+    last: 'White',
+    twitter: 'mtnmissy',
+    active: true,
+  },
+  {
+    first: 'John',
+    last: 'James',
+    twitter: 'miller',
+    active: false,
+  },
+  {
+    first: 'Travis',
+    last: 'Arnold',
+    twitter: 'souporserious',
+    active: true,
+  },
+]
+
+const selectMock = jest.fn()
+
+test('can click to select item from list', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <ThemeProvider>
+      <Select onChange={selectMock}>
+        {people.map(p => (
+          <Select.Option value={p.twitter} key={p.twitter}>{p.first} {p.last}</Select.Option>
+        ))}
+      </Select>
+    </ThemeProvider>
+  )
+
+  userEvent.click(screen.getByRole('button'))
+  jest.runAllTimers()
+  userEvent.click(screen.getByText('Travis Arnold'))
+
+  expect(selectMock).toHaveBeenCalledWith(
+    { selectedValue: 'souporserious', value: 'souporserious' }
+  )
+
+  jest.useRealTimers()
+})