sanity-plugin-recurring-dates 1.0.0

package/src/components/DateInputs/DateTimeInput.tsx

@@ -0,0 +1,122 @@
+import {format, parse} from '@sanity/util/legacyDateFormat'
+import {getMinutes, parseISO, setMinutes} from 'date-fns'
+import React, {useCallback} from 'react'
+
+import {CommonDateTimeInput} from './CommonDateTimeInput'
+import {ParseResult} from './types'
+import {isValidDate} from './utils'
+
+interface ParsedOptions {
+  dateFormat: string
+  timeFormat: string
+  timeStep: number
+  calendarTodayLabel: string
+}
+
+interface SchemaOptions {
+  dateFormat?: string
+  timeFormat?: string
+  timeStep?: number
+  calendarTodayLabel?: string
+}
+
+type DateTimeInputProps = {
+  id: string
+  onChange: (date: string | null) => void
+  disabled?: boolean
+  value: number | Date | null
+  type: {
+    name: string
+    title: string
+    description?: string
+    options?: SchemaOptions
+    placeholder?: string
+  }
+}
+
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD'
+const DEFAULT_TIME_FORMAT = 'HH:mm'
+
+function parseOptions(options: SchemaOptions = {}): ParsedOptions {
+  return {
+    dateFormat: options.dateFormat || DEFAULT_DATE_FORMAT,
+    timeFormat: options.timeFormat || DEFAULT_TIME_FORMAT,
+    timeStep: ('timeStep' in options && Number(options.timeStep)) || 1,
+    calendarTodayLabel: options.calendarTodayLabel || 'Today',
+  }
+}
+
+function serialize(date: Date) {
+  return date.toISOString()
+}
+function deserialize(isoString: string): ParseResult {
+  const deserialized = new Date(isoString)
+  if (isValidDate(deserialized)) {
+    return {isValid: true, date: deserialized}
+  }
+  return {isValid: false, error: `Invalid date value: "${isoString}"`}
+}
+
+// enforceTimeStep takes a dateString and datetime schema options and enforces the time
+// to be within the configured timeStep
+function enforceTimeStep(dateString: string, timeStep: number) {
+  if (!timeStep || timeStep === 1) {
+    return dateString
+  }
+
+  const date = parseISO(dateString)
+  const minutes = getMinutes(date)
+  const leftOver = minutes % timeStep
+  if (leftOver !== 0) {
+    return serialize(setMinutes(date, minutes - leftOver))
+  }
+
+  return serialize(date)
+}
+
+/**
+ * @hidden
+ * @beta */
+export function DateTimeInput(props: DateTimeInputProps) {
+  const {id, onChange, type, value, disabled, ...rest} = props
+
+  const {dateFormat, timeFormat, timeStep} = parseOptions(type.options)
+
+  const handleChange = useCallback(
+    (nextDate: string | null) => {
+      let date = nextDate
+      if (date !== null && timeStep > 1) {
+        date = enforceTimeStep(date, timeStep)
+      }
+
+      onChange(date)
+    },
+    [onChange, timeStep],
+  )
+
+  const formatInputValue = React.useCallback(
+    (date: Date) => format(date, `${dateFormat} ${timeFormat}`),
+    [dateFormat, timeFormat],
+  )
+
+  const parseInputValue = React.useCallback(
+    (inputValue: string) => parse(inputValue, `${dateFormat} ${timeFormat}`),
+    [dateFormat, timeFormat],
+  )
+
+  return (
+    <CommonDateTimeInput
+      id={id}
+      {...rest}
+      onChange={handleChange}
+      deserialize={deserialize}
+      formatInputValue={formatInputValue}
+      parseInputValue={parseInputValue}
+      selectTime
+      serialize={serialize}
+      timeStep={timeStep}
+      value={value}
+      readOnly={disabled}
+    />
+  )
+}

package/src/components/DateInputs/base/DatePicker.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {Calendar} from './calendar/Calendar'
+
+export const DatePicker = React.forwardRef(function DatePicker(
+  props: Omit<React.ComponentProps<'div'>, 'onChange'> & {
+    value?: Date
+    onChange: (nextDate: Date) => void
+    selectTime?: boolean
+    timeStep?: number
+  },
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {value = new Date(), onChange, ...rest} = props
+  const [focusedDate, setFocusedDay] = React.useState<Date>()
+
+  const handleSelect = React.useCallback(
+    (nextDate: any) => {
+      onChange(nextDate)
+      setFocusedDay(undefined)
+    },
+    [onChange]
+  )
+
+  return (
+    <Calendar
+      {...rest}
+      ref={ref}
+      selectedDate={value}
+      onSelect={handleSelect}
+      focusedDate={focusedDate || value}
+      onFocusedDateChange={setFocusedDay}
+    />
+  )
+})

package/src/components/DateInputs/base/DateTimeInput.tsx

@@ -0,0 +1,104 @@
+import React, {forwardRef, useCallback, useRef, useState} from 'react'
+import FocusLock from 'react-focus-lock'
+import {Box, Button, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
+import {CalendarIcon} from '@sanity/icons'
+import {DatePicker} from './DatePicker'
+import {LazyTextInput} from './LazyTextInput'
+
+export interface DateTimeInputProps {
+  customValidity?: string
+  id?: string
+  inputValue?: string
+  onChange: (date: Date | null) => void
+  onInputChange?: (event: React.FocusEvent<HTMLInputElement>) => void
+  placeholder?: string
+  readOnly?: boolean
+  selectTime?: boolean
+  timeStep?: number
+  value?: Date
+}
+
+export const DateTimeInput = forwardRef(function DateTimeInput(
+  props: DateTimeInputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const {value, inputValue, onInputChange, onChange, selectTime, timeStep, ...rest} = props
+  const [popoverRef, setPopoverRef] = useState<HTMLElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
+  const buttonRef = useRef(null)
+
+  const [isPickerOpen, setPickerOpen] = useState(false)
+
+  useClickOutside(() => setPickerOpen(false), [popoverRef])
+
+  const handleDeactivation = useCallback(() => {
+    forwardedRef.current?.focus()
+    forwardedRef.current?.select()
+  }, [forwardedRef])
+
+  const handleKeyUp = useCallback((e: any) => {
+    if (e.key === 'Escape') {
+      setPickerOpen(false)
+    }
+  }, [])
+
+  const handleClick = useCallback(() => setPickerOpen(true), [])
+
+  const suffix = (
+    <Box padding={1}>
+      <Button
+        ref={buttonRef}
+        icon={CalendarIcon}
+        mode="bleed"
+        padding={2}
+        onClick={handleClick}
+        style={{display: 'block'}}
+        data-testid="select-date-button"
+      />
+    </Box>
+  )
+
+  return (
+    <LazyTextInput
+      ref={forwardedRef}
+      {...rest}
+      value={inputValue}
+      onChange={onInputChange}
+      suffix={
+        isPickerOpen ? (
+          // Note: we're conditionally inserting the popover here due to an
+          // issue with popovers rendering incorrectly on subsequent renders
+          // see https://github.com/sanity-io/design/issues/519
+          <LayerProvider zOffset={1000}>
+            <Popover
+              constrainSize
+              data-testid="date-input-dialog"
+              portal
+              content={
+                <Box overflow="auto">
+                  <FocusLock onDeactivation={handleDeactivation}>
+                    <DatePicker
+                      selectTime={selectTime}
+                      timeStep={timeStep}
+                      onKeyUp={handleKeyUp}
+                      value={value}
+                      onChange={onChange}
+                    />
+                  </FocusLock>
+                </Box>
+              }
+              open
+              placement="bottom"
+              ref={setPopoverRef}
+              radius={2}
+            >
+              {suffix}
+            </Popover>
+          </LayerProvider>
+        ) : (
+          suffix
+        )
+      }
+    />
+  )
+})

package/src/components/DateInputs/base/LazyTextInput.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {TextInput} from '@sanity/ui'
+
+type TextInputProps = React.ComponentProps<typeof TextInput>
+
+// todo: delete this when v0.34 of @sanity/ui is out
+type Workaround = any
+
+type Props = Workaround &
+  Omit<TextInputProps, 'onChange'> & {
+    onChange?: (
+      event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>
+    ) => void
+  }
+
+/**
+ * A TextInput that only emit onChange when it has to
+ * By default it will only emit onChange when: 1) user hits enter or 2) user leaves the
+ * field (e.g. onBlur) and the input value at this time is different from the given `value` prop
+ */
+export const LazyTextInput = React.forwardRef(function LazyTextInput(
+  {onChange, onBlur, onKeyPress, value, ...rest}: Props,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>
+) {
+  const [inputValue, setInputValue] = React.useState<string>()
+
+  const handleChange = React.useCallback((event: any) => {
+    setInputValue(event.currentTarget.value)
+  }, [])
+
+  const checkEvent = React.useCallback(
+    (event: any) => {
+      const currentValue = event.currentTarget.value
+      if (currentValue !== `${value}`) {
+        if (onChange) {
+          onChange(event)
+        }
+      }
+      setInputValue(undefined)
+    },
+    [onChange, value]
+  )
+
+  const handleBlur = React.useCallback(
+    (e: any) => {
+      checkEvent(e)
+      if (onBlur) {
+        onBlur(e)
+      }
+    },
+    [checkEvent, onBlur]
+  )
+
+  const handleKeyPress = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        checkEvent(e)
+      }
+      if (onKeyPress) {
+        onKeyPress(e)
+      }
+    },
+    [checkEvent, onKeyPress]
+  )
+
+  return (
+    <TextInput
+      {...rest}
+      data-testid="date-input"
+      ref={forwardedRef}
+      value={inputValue === undefined ? value : inputValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyPress={handleKeyPress}
+    />
+  )
+})