react-native-paper-dates 0.4.5 → 0.6.0

package/src/Date/Month.tsx

@@ -18,8 +18,7 @@ import {
   startAtIndex,
   beginOffset,
   estimatedMonthHeight,
-  isDateWithinOptionalRange,
-  dateToUnix,
+  useRangeChecker,
 } from './dateUtils'
 import { getCalendarHeaderHeight } from './CalendarHeader'
 import type {
@@ -91,35 +90,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
   const textColorOnPrimary = useTextColorOnPrimary()
   const realIndex = getRealIndex(index)
   const isHorizontal = scrollMode === 'horizontal'
-
-  const validRangeStart =
-    validRange?.startDate instanceof Date
-      ? dateToUnix(
-          new Date(
-            validRange?.startDate.getFullYear(),
-            validRange?.startDate.getMonth(),
-            validRange?.startDate.getDate(),
-            0,
-            0,
-            0
-          )
-        )
-      : undefined
-
-  const validRangeEnd =
-    validRange?.endDate instanceof Date
-      ? dateToUnix(
-          new Date(
-            validRange?.endDate.getFullYear(),
-            validRange?.endDate.getMonth(),
-            validRange?.endDate.getDate(),
-            23,
-            59,
-            59
-          )
-        )
-      : undefined
-
+  const { isDisabled, isWithinValidRange } = useRangeChecker(validRange)
   const { monthName, month, year } = React.useMemo(() => {
     const md = addMonths(new Date(), realIndex)
     const y = md.getFullYear()
@@ -151,13 +122,15 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
           const isToday = areDatesOnSameDay(day, today)
 
           let inRange = false
-          let disabled = false
+          let disabled = isDisabled(day)
           let selected = false
+
           let leftCrop = dayOfMonth === 1
           let rightCrop = dayOfMonth === daysInMonth
 
           const isFirstDayOfMonth = dayOfMonth === 1
           const isLastDayOfMonth = dayOfMonth === daysInMonth
+
           if (mode === 'range') {
             const selectedStartDay = areDatesOnSameDay(day, startDate)
             const selectedEndDay = areDatesOnSameDay(day, endDate)
@@ -226,18 +199,13 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                 selected = false
               }
             }
-
-            //
           } else if (mode === 'single') {
             selected = areDatesOnSameDay(day, date)
           }
-          //
-          const isWithinOptionalValidRange = isDateWithinOptionalRange(day, {
-            startUnix: validRangeStart,
-            endUnix: validRangeEnd,
-          })
 
-          if (inRange) {
+          const isWithinOptionalValidRange = isWithinValidRange(day)
+
+          if (inRange && !disabled) {
             disabled = false
           }
 
@@ -267,13 +235,13 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     year,
     month,
     index,
+    isDisabled,
+    mode,
+    isWithinValidRange,
     startDate,
     endDate,
-    date,
     dates,
-    validRangeStart,
-    validRangeEnd,
-    mode,
+    date,
   ])
 
   return (
@@ -298,6 +266,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
               borderRadius: roundness,
             },
           ]}
+          // RN types bug
+          hasTVPreferredFocus={undefined}
+          tvParallaxProperties={undefined}
         >
           <View
             style={[
@@ -317,6 +288,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
               <IconButton
                 onPress={isHorizontal ? () => onPressYear(year) : undefined}
                 icon={selectingYear ? 'chevron-up' : 'chevron-down'}
+                // RN types bug
+                hasTVPreferredFocus={undefined}
+                tvParallaxProperties={undefined}
               />
             </View>
           </View>

package/src/Date/Swiper.tsx

@@ -94,6 +94,7 @@ function VerticalScroller({
   const [visibleIndexes, setVisibleIndexes] = React.useState<number[]>(
     visibleArray(initialIndex)
   )
+  // eslint-disable-next-line no-undef
   const parentRef = React.useRef<HTMLDivElement | null>(null)
 
   useIsomorphicLayoutEffect(() => {

package/src/Date/SwiperUtils.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react'
+import type { MutableRefObject } from 'react'
 import { useLatest } from '../utils'
 import * as React from 'react'
 import {

package/src/Date/YearPicker.tsx

@@ -67,7 +67,7 @@ function YearPure({
 }: {
   year: number
   selected: boolean
-  onPressYear: (year: number) => any
+  onPressYear: (newYear: number) => any
 }) {
   const theme = useTheme()
   return (
@@ -75,6 +75,9 @@ function YearPure({
       <TouchableRipple
         onPress={() => onPressYear(year)}
         style={styles.yearButton}
+        // RN types bug
+        hasTVPreferredFocus={undefined}
+        tvParallaxProperties={undefined}
       >
         <View
           style={[

package/src/Date/dateUtils.tsx

@@ -1,3 +1,7 @@
+import * as React from 'react'
+import { useLatest } from '../utils'
+import type { ValidRangeType } from './Calendar'
+
 export type DisableWeekDaysType = number[]
 
 export function showWeekDay(
@@ -61,15 +65,42 @@ export function getFirstDayOfMonth({
   return new Date(year, month, 1).getDay()
 }
 
-// export function getLastDayOfMonth({
-//   year,
-//   month,
-// }: {
-//   year: number
-//   month: number
-// }): number {
-//   return new Date(year, month, getDaysInMonth({ year, month })).getDay()
-// }
+export function useRangeChecker(validRange: ValidRangeType | undefined) {
+  const validStart = validRange?.startDate
+  const validEnd = validRange?.endDate
+  const startUnix =
+    validStart instanceof Date
+      ? dateToUnix(getStartOfDay(validStart))
+      : undefined
+
+  const endUnix =
+    validEnd instanceof Date ? dateToUnix(getEndOfDay(validEnd)) : undefined
+
+  const validDisabledDatesRef = useLatest(validRange?.disabledDates)
+
+  const isWithinValidRange = React.useCallback(
+    (day: Date) => {
+      return isDateWithinOptionalRange(day, {
+        startUnix: startUnix,
+        endUnix: endUnix,
+      })
+    },
+    [startUnix, endUnix]
+  )
+
+  const isDisabled = React.useCallback(
+    (day: Date) => {
+      return validDisabledDatesRef.current
+        ? validDisabledDatesRef.current.some((disabledDate) =>
+            areDatesOnSameDay(disabledDate, day)
+          )
+        : false
+    },
+    [validDisabledDatesRef]
+  )
+
+  return { isDisabled, isWithinValidRange, validStart, validEnd }
+}
 
 export function areDatesOnSameDay(a: Date, b?: Date | null | undefined) {
   if (!b) {
@@ -117,7 +148,7 @@ export function isDateWithinOptionalRange(
     return false
   }
 
-  // if startUnix is provided and date is after end
+  // if endUnix is provided and date is after end
   if (endUnix && dateUnix > endUnix) {
     return false
   }
@@ -170,6 +201,36 @@ export function getInitialIndex(date: Date | undefined) {
   return startAtIndex + months
 }
 
+export function useInputFormatter({ locale }: { locale: string | undefined }) {
+  return React.useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+    })
+  }, [locale])
+}
+export function getStartOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0)
+}
+export function getEndOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
+}
+export function useInputFormat({
+  formatter,
+}: {
+  formatter: Intl.DateTimeFormat
+}) {
+  return React.useMemo(() => {
+    // TODO: something cleaner and more universal?
+    const inputDate = formatter.format(new Date(2020, 10 - 1, 1))
+    return inputDate
+      .replace('2020', 'YYYY')
+      .replace('10', 'MM')
+      .replace('01', 'DD')
+  }, [formatter])
+}
+
 export function differenceInMonths(firstDate: Date, secondDate: Date) {
   let diffMonths = (secondDate.getFullYear() - firstDate.getFullYear()) * 12
   diffMonths -= firstDate.getMonth()

package/src/Date/inputUtils.ts

@@ -0,0 +1,94 @@
+import { useInputFormat, useInputFormatter, useRangeChecker } from './dateUtils'
+import * as React from 'react'
+import type { ValidRangeType } from './Calendar'
+import { getTranslation } from 'react-native-paper-dates'
+
+export default function useDateInput({
+  locale,
+  value,
+  validRange,
+  inputMode,
+  onChange,
+}: {
+  onChange: (d: Date) => void
+  locale: undefined | string
+  value: Date | undefined
+  validRange: ValidRangeType | undefined
+  inputMode: 'start' | 'end'
+}) {
+  const { isDisabled, isWithinValidRange, validStart, validEnd } =
+    useRangeChecker(validRange)
+  const [error, setError] = React.useState<null | string>(null)
+  const formatter = useInputFormatter({ locale })
+  const inputFormat = useInputFormat({ formatter })
+  const formattedValue = formatter.format(value)
+  const onChangeText = (date: string) => {
+    const dayIndex = inputFormat.indexOf('DD')
+    const monthIndex = inputFormat.indexOf('MM')
+    const yearIndex = inputFormat.indexOf('YYYY')
+
+    const day = Number(date.slice(dayIndex, dayIndex + 2))
+    const year = Number(date.slice(yearIndex, yearIndex + 4))
+    const month = Number(date.slice(monthIndex, monthIndex + 2))
+
+    if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
+      setError(
+        getTranslation(
+          locale,
+          'notAccordingToDateFormat',
+          () => 'notAccordingToDateFormat'
+        )(inputFormat)
+      )
+      return
+    }
+
+    const finalDate =
+      inputMode === 'end'
+        ? new Date(year, month - 1, day, 23, 59, 59)
+        : new Date(year, month - 1, day)
+
+    if (isDisabled(finalDate)) {
+      setError(getTranslation(locale, 'dateIsDisabled'))
+      return
+    }
+    if (!isWithinValidRange(finalDate)) {
+      let errors =
+        validStart && validEnd
+          ? [
+              `${getTranslation(locale, 'mustBeBetween')} ${formatter.format(
+                validStart
+              )} - ${formatter.format(validEnd)}`,
+            ]
+          : [
+              validStart
+                ? `${getTranslation(
+                    locale,
+                    'mustBeHigherThan'
+                  )} ${formatter.format(validStart)}`
+                : '',
+              validEnd
+                ? `${getTranslation(
+                    locale,
+                    'mustBeLowerThan'
+                  )} ${formatter.format(validEnd)}`
+                : '',
+            ]
+      setError(errors.filter((n) => n).join(' '))
+      return
+    }
+
+    setError(null)
+    if (inputMode === 'end') {
+      onChange(finalDate)
+    } else {
+      onChange(finalDate)
+    }
+  }
+  return {
+    onChange,
+    error,
+    formattedValue,
+    onChangeText,
+    inputFormat,
+  }
+}

package/src/TextInputMask.tsx

@@ -67,10 +67,17 @@ function enhanceTextWithMask(
 }
 
 function TextInputWithMask(
-  { onChangeText, value, mask, ...rest }: any,
+  {
+    onChangeText,
+    value,
+    mask,
+    ...rest
+  }: React.ComponentProps<typeof TextInput> & { mask: string },
   ref: any
 ) {
-  const [controlledValue, setControlledValue] = React.useState<string>(value)
+  const [controlledValue, setControlledValue] = React.useState<string>(
+    value || ''
+  )
 
   const onInnerChange = (text: string) => {
     const enhancedText = enhanceTextWithMask(text, mask, controlledValue)
@@ -82,7 +89,7 @@ function TextInputWithMask(
   }
 
   React.useEffect(() => {
-    setControlledValue(value)
+    setControlledValue(value || '')
   }, [value])
 
   return (

package/src/Time/AmPmSwitcher.tsx

@@ -3,15 +3,17 @@ import { View, StyleSheet } from 'react-native'
 import { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { useMemo } from 'react'
 import Color from 'color'
-import { getHourType, hourTypes, useSwitchColors } from './timeUtils'
+import { useSwitchColors } from './timeUtils'
+import { DisplayModeContext } from './TimePicker'
 
 export default function AmPmSwitcher({
-  hours,
   onChange,
+  hours,
 }: {
   hours: number
-  onChange: (hours: number) => any
+  onChange: (newHours: number) => any
 }) {
+  const { setMode, mode } = React.useContext(DisplayModeContext)
   const theme = useTheme()
   const backgroundColor = useMemo<string>(() => {
     if (theme.dark) {
@@ -20,10 +22,7 @@ export default function AmPmSwitcher({
     return Color(theme.colors.surface).darken(0.1).hex()
   }, [theme])
 
-  const hourType = getHourType(hours)
-  const isAM = hourType === hourTypes.am
-  const isPM = hourType === hourTypes.pm
-
+  const isAM = mode === 'AM'
   return (
     <View
       style={[
@@ -36,16 +35,26 @@ export default function AmPmSwitcher({
     >
       <SwitchButton
         label="AM"
-        onPress={isAM ? undefined : () => onChange(hours - 12)}
+        onPress={() => {
+          setMode('AM')
+          if (hours - 12 >= 0) {
+            onChange(hours - 12)
+          }
+        }}
         selected={isAM}
         disabled={isAM}
       />
       <View style={[styles.switchSeparator, { backgroundColor }]} />
       <SwitchButton
         label="PM"
-        onPress={isPM ? undefined : () => onChange(hours + 12)}
-        selected={isPM}
-        disabled={isPM}
+        onPress={() => {
+          setMode('PM')
+          if (hours + 12 <= 24) {
+            onChange(hours + 12)
+          }
+        }}
+        selected={!isAM}
+        disabled={!isAM}
       />
     </View>
   )

package/src/Time/AnalogClock.tsx

@@ -7,13 +7,12 @@ import {
 } from 'react-native'
 import { useTheme } from 'react-native-paper'
 import {
+  circleSize,
   clockTypes,
   getAngle,
   getHours,
   getHourType,
-  getHourTypeFromOffset,
   getMinutes,
-  hourTypes,
   PossibleClockTypes,
 } from './timeUtils'
 import * as React from 'react'
@@ -23,9 +22,7 @@ import AnalogClockHours from './AnalogClockHours'
 
 import AnimatedClockSwitcher from './AnimatedClockSwitcher'
 import AnalogClockMinutes from './AnalogClockMinutes'
-
-// 250? when bigger?
-export const circleSize = 215
+import { DisplayModeContext } from './TimePicker'
 
 function AnalogClock({
   hours,
@@ -38,18 +35,14 @@ function AnalogClock({
   minutes: number
   focused: PossibleClockTypes
   is24Hour: boolean
-  onChange: ({
-    hours,
-    minutes,
-    focused,
-  }: {
+  onChange: (hoursMinutesAndFocused: {
     hours: number
     minutes: number
     focused?: undefined | PossibleClockTypes
   }) => any
 }) {
   const theme = useTheme()
-
+  const { mode } = React.useContext(DisplayModeContext)
   // used to make pointer shorter if hours are selected and above 12
   const shortPointer = (hours === 0 || hours > 12) && is24Hour
 
@@ -62,6 +55,7 @@ function AnalogClock({
   const minutesRef = useLatest(minutes)
   const focusedRef = useLatest(focused)
   const is24HourRef = useLatest(is24Hour)
+  const modeRef = useLatest(mode)
 
   const onPointerMove = React.useCallback(
     (e: GestureResponderEvent, final: boolean) => {
@@ -75,12 +69,10 @@ function AnalogClock({
         let previousHourType = getHourType(hoursRef.current)
         let pickedHours = getHours(angle, previousHourType)
 
-        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)
-        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm
-        let hours12AndPm = !hours24 && previousHourType === hourTypes.pm
-
-        // TODO: check which mode is switched on am/pm
-        if (hours12AndPm || hours24AndPM) {
+        let hours12AndPm = !hours24 && modeRef.current === 'PM'
+        // Avoiding the "24h"
+        // Should be 12h for 12 hours and PM mode
+        if ((hours12AndPm || hours24) && pickedHours + 12 < 24) {
           pickedHours += 12
         }
 
@@ -105,7 +97,7 @@ function AnalogClock({
         }
       }
     },
-    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef]
+    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]
   )
 
   const panResponder = React.useRef(

package/src/Time/AnalogClockHours.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
-import { circleSize } from './AnalogClock'
+import { circleSize } from './timeUtils'
 import { useTextColorOnPrimary } from '../utils'
+import { DisplayModeContext } from './TimePicker'
 
 function AnalogClockHours({
   is24Hour,
@@ -11,9 +12,11 @@ function AnalogClockHours({
   is24Hour: boolean
   hours: number
 }) {
-  const outerRange = getHourNumbers(false, circleSize, 12)
-  const innerRange = getHourNumbers(true, circleSize, 12)
+  const { mode } = React.useContext(DisplayModeContext)
+  const outerRange = getHourNumbers(false, circleSize, 12, 12)
+  const innerRange = getHourNumbers(true, circleSize, 12, 12)
   const color = useTextColorOnPrimary()
+
   return (
     <>
       {outerRange.map((a, i) => (
@@ -29,8 +32,9 @@ function AnalogClockHours({
           ]}
         >
           <View style={styles.outerHourInner}>
+            {/* Display 00 instead of 12 for AM hours */}
             <Text style={hours === i + 1 ? { color } : null} selectable={false}>
-              {i + 1}
+              {mode === 'AM' && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
         </View>
@@ -97,14 +101,19 @@ const styles = StyleSheet.create({
   innerHourText: { fontSize: 13 },
 })
 
-function getHourNumbers(is24Hour: boolean, size: number, count: number) {
+function getHourNumbers(
+  is24Hour: boolean,
+  size: number,
+  count: number,
+  arrayLength: number
+) {
   let angle = 0
   let step = (2 * Math.PI) / count
   let radius = size / (is24Hour ? 4 : 2.5)
 
   angle = (-90 * Math.PI) / 180 + Math.PI / 6
 
-  return Array(12)
+  return Array(arrayLength)
     .fill(true)
     .map(() => {
       let x = Math.round(size / 2 + radius * Math.cos(angle))

package/src/Time/AnalogClockMinutes.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
-import { circleSize } from './AnalogClock'
+import { circleSize } from './timeUtils'
 import { useTextColorOnPrimary } from '../utils'
 
 function AnalogClockMinutes({ minutes }: { minutes: number }) {
@@ -30,7 +30,10 @@ function AnalogClockMinutes({ minutes }: { minutes: number }) {
             ]}
           >
             <View style={styles.outerHourInner}>
-              <Text style={isCurrent ? { color } : null} selectable={false}>
+              <Text
+                style={isCurrent ? { color } : undefined}
+                selectable={false}
+              >
                 {isZero ? '00' : currentMinutes}
               </Text>
             </View>

package/src/Time/TimeInput.tsx

@@ -96,6 +96,9 @@ function TimeInput(
           rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
           onPress={() => onPress(clockType)}
           borderless={true}
+          // RN types bug
+          hasTVPreferredFocus={undefined}
+          tvParallaxProperties={undefined}
         >
           <View />
         </TouchableRipple>

package/src/Time/TimeInputs.tsx

@@ -35,11 +35,7 @@ function TimeInputs({
   hours: number
   minutes: number
   onFocusInput: (type: PossibleClockTypes) => any
-  onChange: ({
-    hours,
-    minutes,
-    focused,
-  }: {
+  onChange: (hoursMinutesAndFocused: {
     hours: number
     minutes: number
     focused?: undefined | PossibleClockTypes