react-native-paper-dates 0.22.14 → 0.22.16

package/src/Date/Month.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import {
   Text,
@@ -34,7 +33,10 @@ import type {
   ValidRangeType,
 } from './Calendar'
 import { dayNamesHeight } from './DayNames'
-import { useTextColorOnPrimary } from '../utils'
+import { useTextColorOnPrimary } from '../shared/utils'
+import { memo, useMemo } from 'react'
+import React from 'react'
+import { sharedStyles } from '../shared/styles'
 
 interface BaseMonthProps {
   locale: undefined | string
@@ -50,7 +52,6 @@ interface BaseMonthProps {
   roundness: number
   validRange?: ValidRangeType
   startWeekOnMonday: boolean
-
   // some of these should be required in final implementation
   startDate?: CalendarDate
   endDate?: CalendarDate
@@ -94,12 +95,14 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     validRange,
     startWeekOnMonday,
   } = props
+  const isHorizontal = scrollMode === 'horizontal'
+
   const theme = useTheme()
   const textColorOnPrimary = useTextColorOnPrimary()
   const realIndex = getRealIndex(index)
-  const isHorizontal = scrollMode === 'horizontal'
   const { isDisabled, isWithinValidRange } = useRangeChecker(validRange)
-  const { monthName, month, year } = React.useMemo(() => {
+
+  const { monthName, month, year } = useMemo(() => {
     const md = addMonths(new Date(), realIndex)
     const y = md.getFullYear()
     const m = md.getMonth()
@@ -109,7 +112,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     return { monthName: formatter.format(md), month: m, year: y }
   }, [realIndex, locale])
 
-  const grid = React.useMemo(() => {
+  const grid = useMemo(() => {
     const today = new Date()
 
     const daysInMonth = getDaysInMonth({ year, month })
@@ -267,10 +270,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
 
   return (
     <View
-      style={[
-        styles.month,
-        { height: getMonthHeight(scrollMode, index, startWeekOnMonday) },
-      ]}
+      style={{ height: getMonthHeight(scrollMode, index, startWeekOnMonday) }}
     >
       <View
         style={[
@@ -321,7 +321,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             <View
               style={[
                 styles.iconWrapper,
-                isHorizontal ? styles.opacity1 : styles.opacity0,
+                isHorizontal ? sharedStyles.opacity1 : sharedStyles.opacity0,
               ]}
             >
               <Icon size={24} color={iconColor} source={iconSource} />
@@ -374,26 +374,29 @@ const styles = StyleSheet.create({
   iconWrapper: {
     padding: 8,
   },
+  monthHeader: {
+    height: montHeaderHeight,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  monthLabel: {
+    fontSize: 14,
+    opacity: 0.7,
+  },
   week: {
     flexDirection: 'row',
     marginBottom: weekMargin,
     height: daySize,
   },
-  month: {},
-  monthHeader: {
-    height: montHeaderHeight,
-    justifyContent: 'center',
-    overflow: 'hidden',
+  yearButton: {
+    alignSelf: 'flex-start',
+    marginLeft: 6,
   },
-  monthLabel: { fontSize: 14, opacity: 0.7 },
-  yearButton: { alignSelf: 'flex-start', marginLeft: 6 },
   yearButtonInner: {
     paddingLeft: 16,
     flexDirection: 'row',
     alignItems: 'center',
   },
-  opacity0: { opacity: 0 },
-  opacity1: { opacity: 1 },
 })
 
 const monthGrid = (index: number, startWeekOnMonday: boolean) => {
@@ -487,4 +490,4 @@ export function getMonthHeight(
   return c || 0
 }
 
-export default React.memo(Month)
+export default memo(Month)

package/src/Date/Swiper.native.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -17,15 +16,9 @@ import {
 import { SwiperProps, useYearChange } from './SwiperUtils'
 import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'
 import AutoSizer from './AutoSizer'
-
-const styles = StyleSheet.create({
-  viewPager: {
-    flex: 1,
-  },
-  inner: {
-    position: 'relative',
-  },
-})
+import { memo, useCallback, useRef, useState } from 'react'
+import React from 'react'
+import { sharedStyles } from '../shared/styles'
 
 function getVisibleArray(
   i: number,
@@ -58,15 +51,15 @@ function SwiperInner({
   height,
   startWeekOnMonday,
 }: SwiperProps & { width: number; height: number }) {
-  const idx = React.useRef<number>(initialIndex)
+  const idx = useRef<number>(initialIndex)
   const isHorizontal = scrollMode === 'horizontal'
-  const [visibleIndexes, setVisibleIndexes] = React.useState<number[]>(
+  const [visibleIndexes, setVisibleIndexes] = useState<number[]>(
     getVisibleArray(initialIndex, { isHorizontal, height })
   )
 
-  const parentRef = React.useRef<ScrollView | null>(null)
+  const parentRef = useRef<ScrollView | null>(null)
 
-  const scrollTo = React.useCallback(
+  const scrollTo = useCallback(
     (index: number, animated: boolean) => {
       idx.current = index
       setVisibleIndexes(getVisibleArray(index, { isHorizontal, height }))
@@ -95,19 +88,19 @@ function SwiperInner({
     [parentRef, isHorizontal, width, height, startWeekOnMonday]
   )
 
-  const onPrev = React.useCallback(() => {
+  const onPrev = useCallback(() => {
     scrollTo(idx.current - 1, true)
   }, [scrollTo, idx])
 
-  const onNext = React.useCallback(() => {
+  const onNext = useCallback(() => {
     scrollTo(idx.current + 1, true)
   }, [scrollTo, idx])
 
-  const scrollToInitial = React.useCallback(() => {
+  const scrollToInitial = useCallback(() => {
     scrollTo(idx.current, false)
   }, [scrollTo])
 
-  const onMomentumScrollEnd = React.useCallback(
+  const onMomentumScrollEnd = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const contentOffset = e.nativeEvent.contentOffset
       const viewSize = e.nativeEvent.layoutMeasurement
@@ -155,7 +148,7 @@ function SwiperInner({
         ref={parentRef}
         horizontal={isHorizontal}
         pagingEnabled={isHorizontal}
-        style={styles.viewPager}
+        style={sharedStyles.root}
         onMomentumScrollEnd={onMomentumScrollEnd}
         onScrollEndDrag={onMomentumScrollEnd}
         onLayout={scrollToInitial}
@@ -219,4 +212,10 @@ function SwiperInner({
   )
 }
 
-export default React.memo(Swiper)
+const styles = StyleSheet.create({
+  inner: {
+    position: 'relative',
+  },
+})
+
+export default memo(Swiper)

package/src/Date/Swiper.tsx

@@ -1,17 +1,27 @@
-import * as React from 'react'
-import { StyleSheet, View } from 'react-native'
-
+import { View } from 'react-native'
 import {
   getIndexFromVerticalOffset,
   getMonthHeight,
   getVerticalMonthsOffset,
   montHeaderHeight,
 } from './Month'
-
 import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'
-import { useLatest } from '../utils'
+import { useLatest } from '../shared/utils'
 import { RenderProps, SwiperProps, useYearChange } from './SwiperUtils'
 import AutoSizer from './AutoSizer'
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  UIEvent,
+} from 'react'
+import { sharedStyles } from '../shared/styles'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
 function Swiper({
   scrollMode,
@@ -23,13 +33,14 @@ function Swiper({
   startWeekOnMonday,
 }: SwiperProps) {
   const isHorizontal = scrollMode === 'horizontal'
-  const [index, setIndex] = React.useState(initialIndex)
 
-  const onPrev = React.useCallback(() => {
+  const [index, setIndex] = useState(initialIndex)
+
+  const onPrev = useCallback(() => {
     setIndex((prev) => prev - 1)
   }, [setIndex])
 
-  const onNext = React.useCallback(() => {
+  const onNext = useCallback(() => {
     setIndex((prev) => prev + 1)
   }, [setIndex])
 
@@ -55,7 +66,7 @@ function Swiper({
     <>
       {renderHeader && renderHeader(renderProps)}
       {isHorizontal ? (
-        <View style={styles.flex1}>
+        <View style={sharedStyles.root}>
           {renderItem({ index, onPrev, onNext })}
         </View>
       ) : (
@@ -94,11 +105,12 @@ function VerticalScroller({
   estimatedHeight: number
   startWeekOnMonday: boolean
 }) {
-  const idx = React.useRef<number>(initialIndex)
-  const [visibleIndexes, setVisibleIndexes] = React.useState<number[]>(
+  const [visibleIndexes, setVisibleIndexes] = useState<number[]>(
     visibleArray(initialIndex)
   )
-  const parentRef = React.useRef<HTMLDivElement | null>(null)
+
+  const idx = useRef<number>(initialIndex)
+  const parentRef = useRef<HTMLDivElement | null>(null)
 
   useIsomorphicLayoutEffect(() => {
     const element = parentRef.current
@@ -115,9 +127,9 @@ function VerticalScroller({
 
   const setVisibleIndexesThrottled = useDebouncedCallback(setVisibleIndexes)
 
-  const onScroll = React.useCallback(
-    (e: React.UIEvent) => {
-      const top = e.currentTarget.scrollTop
+  const onScroll = useCallback(
+    (e: UIEvent) => {
+      const top = e.currentTarget?.scrollTop
       if (top === 0) {
         return
       }
@@ -185,18 +197,12 @@ function VerticalScroller({
 
 const empty = () => null
 
-const styles = StyleSheet.create({
-  flex1: {
-    flex: 1,
-  },
-})
-
 export function useDebouncedCallback(callback: any): any {
-  const mounted = React.useRef<boolean>(true)
+  const mounted = useRef<boolean>(true)
+  const timerId = useRef<any>(null)
   const latest = useLatest(callback)
-  const timerId = React.useRef<any>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       mounted.current = false
       if (timerId.current) {
@@ -205,7 +211,7 @@ export function useDebouncedCallback(callback: any): any {
     }
   }, [mounted, timerId])
 
-  return React.useCallback(
+  return useCallback(
     (args: any) => {
       if (timerId.current) {
         window.cancelAnimationFrame(timerId.current)
@@ -220,7 +226,4 @@ export function useDebouncedCallback(callback: any): any {
   )
 }
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
-
-export default React.memo(Swiper)
+export default memo(Swiper)

package/src/Date/SwiperUtils.ts

@@ -1,6 +1,5 @@
-import type { MutableRefObject } from 'react'
-import { useLatest } from '../utils'
-import * as React from 'react'
+import { useEffect, type MutableRefObject } from 'react'
+import { useLatest } from '../shared/utils'
 import {
   addMonths,
   differenceInMonths,
@@ -35,7 +34,7 @@ export function useYearChange(
   }
 ) {
   const onChangeRef = useLatest(onChange)
-  React.useEffect(() => {
+  useEffect(() => {
     if (selectedYear) {
       const currentIndex = currentIndexRef.current || 0
       const currentDate = addMonths(new Date(), getRealIndex(currentIndex))

package/src/Date/YearPicker.tsx

@@ -1,7 +1,9 @@
-import * as React from 'react'
 import { FlatList, StyleSheet, View, ScrollView } from 'react-native'
 import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
-import { range } from '../utils'
+import { range } from '../shared/utils'
+import { memo, useEffect, useRef } from 'react'
+import React from 'react'
+import { sharedStyles } from '../shared/styles'
 
 const ITEM_HEIGHT = 62
 
@@ -19,14 +21,15 @@ export default function YearPicker({
   endYear: number
 }) {
   const theme = useTheme()
-  const flatList = React.useRef<FlatList<number> | null>(null)
+
+  const flatList = useRef<FlatList<number> | null>(null)
   const years = range(
     isNaN(startYear) ? 1800 : startYear,
     isNaN(endYear) ? 2200 : endYear
   )
 
   // scroll to selected year
-  React.useEffect(() => {
+  useEffect(() => {
     if (flatList.current && selectedYear) {
       const indexToGo = selectedYear - startYear
       flatList.current.scrollToOffset({
@@ -42,13 +45,13 @@ export default function YearPicker({
         StyleSheet.absoluteFill,
         styles.root,
         { backgroundColor: theme.colors.surface },
-        selectingYear ? styles.opacity1 : styles.opacity0,
+        selectingYear ? sharedStyles.opacity1 : sharedStyles.opacity0,
       ]}
       pointerEvents={selectingYear ? 'auto' : 'none'}
     >
       <FlatList<number>
         ref={flatList}
-        style={styles.list}
+        style={sharedStyles.root}
         data={years}
         renderScrollComponent={(sProps) => {
           return <ScrollView {...sProps} />
@@ -119,7 +122,6 @@ function YearPure({
     </View>
   )
 }
-const Year = React.memo(YearPure)
 
 const styles = StyleSheet.create({
   root: {
@@ -127,9 +129,6 @@ const styles = StyleSheet.create({
     top: 56,
     zIndex: 100,
   },
-  list: {
-    flex: 1,
-  },
   year: {
     flex: 1,
     marginLeft: 16,
@@ -150,10 +149,6 @@ const styles = StyleSheet.create({
   yearLabel: {
     fontSize: 16,
   },
-  opacity0: {
-    opacity: 0,
-  },
-  opacity1: {
-    opacity: 1,
-  },
 })
+
+const Year = memo(YearPure)

package/src/Date/dateUtils.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { useLatest } from '../utils'
+import { useCallback, useMemo } from 'react'
+import { useLatest } from '../shared/utils'
 import type { ValidRangeType } from './Calendar'
 
 export type DisableWeekDaysType = number[]
@@ -86,7 +86,7 @@ export function useRangeChecker(validRange: ValidRangeType | undefined) {
 
   const validDisabledDatesRef = useLatest(validRange?.disabledDates)
 
-  const isWithinValidRange = React.useCallback(
+  const isWithinValidRange = useCallback(
     (day: Date) => {
       return isDateWithinOptionalRange(day, {
         startUnix: startUnix,
@@ -96,7 +96,7 @@ export function useRangeChecker(validRange: ValidRangeType | undefined) {
     [startUnix, endUnix]
   )
 
-  const isDisabled = React.useCallback(
+  const isDisabled = useCallback(
     (day: Date) => {
       return validDisabledDatesRef.current
         ? validDisabledDatesRef.current.some((disabledDate) =>
@@ -116,9 +116,9 @@ export function areDatesOnSameDay(a: Date, b?: Date | null | undefined) {
   }
 
   return (
-    a.getUTCFullYear() === b.getUTCFullYear() &&
-    a.getUTCMonth() === b.getUTCMonth() &&
-    a.getUTCDate() === b.getUTCDate()
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
   )
 }
 
@@ -210,7 +210,7 @@ export function getInitialIndex(date: Date | undefined) {
 }
 
 export function useInputFormatter({ locale }: { locale: string | undefined }) {
-  return React.useMemo(() => {
+  return useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: '2-digit',
       day: '2-digit',
@@ -218,12 +218,19 @@ export function useInputFormatter({ locale }: { locale: string | undefined }) {
     })
   }, [locale])
 }
+
 export function getStartOfDay(d: Date): Date {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0)
+  const startOfDay = new Date(d)
+  startOfDay.setUTCHours(0, 0, 0, 0)
+  return startOfDay
 }
+
 export function getEndOfDay(d: Date): Date {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
+  const endOfDay = new Date(d)
+  endOfDay.setUTCHours(23, 59, 59, 999)
+  return endOfDay
 }
+
 export function useInputFormat({
   formatter,
   locale,
@@ -231,7 +238,7 @@ export function useInputFormat({
   formatter: Intl.DateTimeFormat
   locale: string | undefined
 }) {
-  return React.useMemo(() => {
+  return useMemo(() => {
     // TODO: something cleaner and more universal?
     const inputDate = formatter.format(new Date(2020, 10 - 1, 1))
     return inputDate

package/src/Date/inputUtils.ts

@@ -1,7 +1,7 @@
 import { useInputFormat, useInputFormatter, useRangeChecker } from './dateUtils'
-import * as React from 'react'
 import type { ValidRangeType } from './Calendar'
 import { getTranslation } from '../translations/utils'
+import { useState } from 'react'
 
 export default function useDateInput({
   locale,
@@ -18,12 +18,15 @@ export default function useDateInput({
   inputMode: 'start' | 'end'
   onValidationError?: ((error: string | null) => void) | undefined
 }) {
-  const { isDisabled, isWithinValidRange, validStart, validEnd } =
-    useRangeChecker(validRange)
-  const [error, setError] = React.useState<null | string>(null)
   const formatter = useInputFormatter({ locale })
   const inputFormat = useInputFormat({ formatter, locale })
   const formattedValue = value ? formatter.format(value) : ''
+
+  const [error, setError] = useState<null | string>(null)
+
+  const { isDisabled, isWithinValidRange, validStart, validEnd } =
+    useRangeChecker(validRange)
+
   const onChangeText = (date: string) => {
     const dayIndex = inputFormat.indexOf('DD')
     const monthIndex = inputFormat.indexOf('MM')
@@ -31,7 +34,6 @@ export default function useDateInput({
       locale === 'pt'
         ? inputFormat.indexOf('AAAA')
         : 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))

package/src/TextInputMask.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+import React, { ComponentProps, ReactNode, useEffect, useState } from 'react'
+import { forwardRef } from 'react'
 import { TextInput } from 'react-native-paper'
 
 const splitCharacters = ['-', '/', '.', '年', ' ']
@@ -20,16 +21,18 @@ function TextInputWithMask(
     mask,
     disabled,
     ...rest
-  }: React.ComponentProps<typeof TextInput> & {
+  }: ComponentProps<typeof TextInput> & {
     mask: string
     value: string
-    inputButton: React.ReactNode
+    inputButton: ReactNode
   },
   ref: any
 ) {
-  const [controlledValue, setControlledValue] = React.useState<string>(
-    value || ''
-  )
+  const [controlledValue, setControlledValue] = useState(value || '')
+
+  useEffect(() => {
+    setControlledValue(value || '')
+  }, [value])
 
   const onInnerChange = (text: string) => {
     const splitCharacter = detectCharacter(mask)
@@ -69,10 +72,6 @@ function TextInputWithMask(
     setControlledValue(trimmedText)
   }
 
-  React.useEffect(() => {
-    setControlledValue(value || '')
-  }, [value])
-
   return (
     <TextInput
       ref={ref}
@@ -89,4 +88,4 @@ function TextInputWithMask(
   )
 }
 
-export default React.forwardRef(TextInputWithMask)
+export default forwardRef(TextInputWithMask)

package/src/Time/AmPmSwitcher.tsx

@@ -1,10 +1,11 @@
-import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
-import { useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import Color from 'color'
 import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
+import React from 'react'
+import { sharedStyles } from '../shared/styles'
 
 export default function AmPmSwitcher({
   onChange,
@@ -15,8 +16,10 @@ export default function AmPmSwitcher({
   onChange: (newHours: number) => any
   inputType: PossibleInputTypes
 }) {
-  const { setMode, mode } = React.useContext(DisplayModeContext)
   const theme = useTheme()
+
+  const { setMode, mode } = useContext(DisplayModeContext)
+
   const backgroundColor = useMemo<string>(() => {
     if (theme.isV3) {
       return theme.colors.outline
@@ -31,6 +34,7 @@ export default function AmPmSwitcher({
   }, [theme])
 
   const isAM = mode === 'AM'
+
   return (
     <View
       style={[
@@ -83,6 +87,7 @@ function SwitchButton({
   disabled: boolean
 }) {
   const theme = useTheme()
+
   const { backgroundColor, color } = useSwitchColors(selected)
 
   let textFont = theme?.isV3
@@ -92,7 +97,7 @@ function SwitchButton({
   return (
     <TouchableRipple
       onPress={onPress}
-      style={styles.switchButton}
+      style={sharedStyles.root}
       accessibilityLabel={label}
       // @ts-ignore old React Native versions
       accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
@@ -130,9 +135,6 @@ const styles = StyleSheet.create({
     height: 1,
     width: 52,
   },
-  switchButton: {
-    flex: 1,
-  },
   switchButtonInner: {
     flex: 1,
     alignItems: 'center',