react-native-paper-dates 0.22.15 → 0.22.16

package/src/Date/DatePickerModal.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   Modal,
   StyleSheet,
@@ -13,6 +12,9 @@ import DatePickerModalContent, {
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
 } from './DatePickerModalContent'
+import React, { memo } from 'react'
+import { sharedStyles } from '../shared/styles'
+import { supportedOrientations } from '../shared/utils'
 
 interface DatePickerModalProps {
   visible: boolean
@@ -41,8 +43,6 @@ export function DatePickerModal(
     | DatePickerModalSingleProps
     | DatePickerModalMultiProps
 ) {
-  const theme = useTheme()
-  const dimensions = useWindowDimensions()
   const {
     visible,
     animationType,
@@ -59,11 +59,13 @@ export function DatePickerModal(
       web: 'none',
       default: 'slide',
     })
-
   const isPageSheet = presentationStyle === 'pageSheet' && Platform.OS === 'ios'
 
+  const theme = useTheme()
+  const dimensions = useWindowDimensions()
+
   return (
-    <View style={[StyleSheet.absoluteFill]} pointerEvents="box-none">
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
       <Modal
         animationType={animationTypeCalculated}
         transparent={!isPageSheet}
@@ -77,7 +79,7 @@ export function DatePickerModal(
           <View
             style={[
               StyleSheet.absoluteFill,
-              styles.modalBackground,
+              sharedStyles.root,
               { backgroundColor: theme.colors.backdrop },
             ]}
           />
@@ -107,23 +109,7 @@ export function DatePickerModal(
   )
 }
 
-const supportedOrientations: any = [
-  'portrait',
-  'portrait-upside-down',
-  'landscape',
-  'landscape-left',
-  'landscape-right',
-]
-
 const styles = StyleSheet.create({
-  modalRoot: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-  },
-  modalBackground: {
-    flex: 1,
-  },
   modalContent: {
     flex: 1,
     width: '100%',
@@ -135,6 +121,11 @@ const styles = StyleSheet.create({
     width: '100%',
     overflow: 'hidden',
   },
+  modalRoot: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
 })
 
-export default React.memo(DatePickerModal)
+export default memo(DatePickerModal)

package/src/Date/DatePickerModalContent.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import Calendar, {
   BaseCalendarProps,
   CalendarDate,
@@ -19,6 +17,7 @@ import CalendarEdit from './CalendarEdit'
 import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'
 import { useTheme } from 'react-native-paper'
 import DatePickerModalStatusBar from './DatePickerModalStatusBar'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 
 export type LocalState = {
   startDate: CalendarDate
@@ -95,18 +94,21 @@ export function DatePickerModalContent(
     statusBarOnTopOfBackdrop,
     startWeekOnMonday,
   } = props
+  const theme = useTheme()
   const anyProps = props as any
+  const defaultUppercase = !theme.isV3
 
   // use local state to add only onConfirm state changes
-  const [state, setState] = React.useState<LocalState>({
+  const [state, setState] = useState<LocalState>({
     date: anyProps.date,
     startDate: anyProps.startDate,
     endDate: anyProps.endDate,
     dates: anyProps.dates,
   })
+  const [collapsed, setCollapsed] = useState(true)
 
   // update local state if changed from outside or if modal is opened
-  React.useEffect(() => {
+  useEffect(() => {
     setState({
       date: anyProps.date,
       startDate: anyProps.startDate,
@@ -115,9 +117,7 @@ export function DatePickerModalContent(
     })
   }, [anyProps.date, anyProps.startDate, anyProps.endDate, anyProps.dates])
 
-  const [collapsed, setCollapsed] = React.useState<boolean>(true)
-
-  const onInnerChange = React.useCallback(
+  const onInnerChange = useCallback(
     (params: any) => {
       onChange && onChange(params)
       setState((prev) => ({ ...prev, ...params }))
@@ -125,7 +125,7 @@ export function DatePickerModalContent(
     [onChange, setState]
   )
 
-  const onInnerConfirm = React.useCallback(() => {
+  const onInnerConfirm = useCallback(() => {
     if (mode === 'single') {
       ;(onConfirm as DatePickerModalContentSingleProps['onConfirm'])({
         date: state.date,
@@ -142,13 +142,10 @@ export function DatePickerModalContent(
     }
   }, [state, mode, onConfirm])
 
-  const onToggleCollapse = React.useCallback(() => {
+  const onToggleCollapse = useCallback(() => {
     setCollapsed((prev) => !prev)
   }, [setCollapsed])
 
-  const theme = useTheme()
-  const defaultUppercase = !theme.isV3
-
   return (
     <>
       <DatePickerModalHeaderBackground>
@@ -222,4 +219,4 @@ export function DatePickerModalContent(
   )
 }
 
-export default React.memo(DatePickerModalContent)
+export default memo(DatePickerModalContent)

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
-import { useHeaderTextColor } from '../utils'
+import { useHeaderTextColor } from '../shared/utils'
 import Color from 'color'
 import { getTranslation } from '../translations/utils'
+import React, { useMemo } from 'react'
+import { sharedStyles } from '../shared/styles'
 
 export interface HeaderPickProps {
   moreLabel?: string
@@ -65,21 +66,17 @@ export default function DatePickerModalContentHeader(
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
-
   const color = useHeaderTextColor()
-
   const isEditingEnabled = allowEditing && mode !== 'multiple'
-
   const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
-
   const textFont = theme?.isV3
     ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
-
   const collapsedIcon = theme.isV3 ? 'pencil-outline' : 'pencil'
   const expandedIcon = theme.isV3 ? 'calendar-blank' : 'calendar'
   const finalCollapsedIcon = editIcon ?? collapsedIcon
   const finalExpandedIcon = calendarIcon ?? expandedIcon
+
   return (
     <View style={styles.header}>
       <View>
@@ -105,7 +102,7 @@ export default function DatePickerModalContentHeader(
           ) : null}
         </View>
       </View>
-      <View style={styles.fill} />
+      <View style={sharedStyles.root} />
       {isEditingEnabled ? (
         <IconButton
           icon={collapsed ? finalCollapsedIcon : finalExpandedIcon}
@@ -129,6 +126,7 @@ export function HeaderContentSingle({
   locale,
 }: HeaderContentProps & { color: string }) {
   const theme = useTheme()
+
   const lighterColor = Color(color).fade(0.5).rgb().toString()
   const dateColor = state.date
     ? theme.isV3
@@ -136,7 +134,7 @@ export function HeaderContentSingle({
       : color
     : lighterColor
 
-  const formatter = React.useMemo(() => {
+  const formatter = useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: 'short',
       day: 'numeric',
@@ -146,7 +144,7 @@ export function HeaderContentSingle({
   return (
     <Text
       maxFontSizeMultiplier={1.5}
-      style={[styles.singleHeaderText, { color: dateColor }]}
+      style={[styles.text, { color: dateColor }]}
     >
       {state.date ? formatter.format(state.date) : emptyLabel}
     </Text>
@@ -161,6 +159,7 @@ export function HeaderContentMulti({
   locale,
 }: HeaderContentProps & { color: string; moreLabel: string | undefined }) {
   const theme = useTheme()
+
   const dateCount = state.dates?.length || 0
   const lighterColor = Color(color).fade(0.5).rgb().toString()
   const dateColor = dateCount
@@ -169,7 +168,7 @@ export function HeaderContentMulti({
       : color
     : lighterColor
 
-  const formatter = React.useMemo(() => {
+  const formatter = useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: 'short',
       day: 'numeric',
@@ -189,7 +188,7 @@ export function HeaderContentMulti({
   return (
     <Text
       maxFontSizeMultiplier={1.5}
-      style={[styles.singleHeaderText, { color: dateColor }]}
+      style={[styles.text, { color: dateColor }]}
     >
       {label}
     </Text>
@@ -205,12 +204,6 @@ export function HeaderContentRange({
   color,
 }: HeaderContentProps & { color: string }) {
   const theme = useTheme()
-  const formatter = React.useMemo(() => {
-    return new Intl.DateTimeFormat(locale, {
-      month: 'short',
-      day: 'numeric',
-    })
-  }, [locale])
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
   const startColorFilled = theme.isV3 ? theme.colors.onSurface : color
@@ -218,11 +211,18 @@ export function HeaderContentRange({
   const startColor = state.startDate ? startColorFilled : lighterColor
   const endColor = state.endDate ? endColorFilled : lighterColor
 
+  const formatter = useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      month: 'short',
+      day: 'numeric',
+    })
+  }, [locale])
+
   return (
     <>
       <Text
         maxFontSizeMultiplier={1.5}
-        style={[styles.rangeHeaderText, { color: startColor }]}
+        style={[styles.text, { color: startColor }]}
       >
         {state.startDate ? formatter.format(state.startDate) : startLabel}
       </Text>
@@ -234,7 +234,7 @@ export function HeaderContentRange({
       </Text>
       <Text
         maxFontSizeMultiplier={1.5}
-        style={[styles.rangeHeaderText, { color: endColor }]}
+        style={[styles.text, { color: endColor }]}
       >
         {state.endDate ? formatter.format(state.endDate) : endLabel}
       </Text>
@@ -243,16 +243,6 @@ export function HeaderContentRange({
 }
 
 const styles = StyleSheet.create({
-  fill: {
-    flex: 1,
-  },
-  animated: {
-    paddingBottom: 0,
-    elevation: 4,
-  },
-  safeContent: {
-    paddingBottom: 0,
-  },
   header: {
     height: 75,
     alignItems: 'center',
@@ -260,15 +250,9 @@ const styles = StyleSheet.create({
     paddingLeft: 24,
     paddingRight: 12,
   },
-  headerContentContainer: { marginTop: 5, flexDirection: 'row' },
-  label: { color: '#fff', letterSpacing: 1, fontSize: 13 },
-  singleHeaderText: { color: '#fff', fontSize: 25 },
-  rangeHeaderText: { color: '#fff', fontSize: 25 },
-  excludeInRangeHeaderText: { fontSize: 25 },
-  excludeInRangeHeaderTextSmall: {
-    fontSize: 14,
-    marginTop: -3,
-    marginLeft: 3,
+  headerContentContainer: {
+    flexDirection: 'row',
+    marginTop: 5,
   },
   headerSeparator: {
     color: 'rgba(255,255,255,1)',
@@ -276,9 +260,13 @@ const styles = StyleSheet.create({
     paddingLeft: 6,
     paddingRight: 6,
   },
-  appbarHeader: {
-    elevation: 0,
+  label: {
+    color: '#fff',
+    fontSize: 13,
+    letterSpacing: 1,
+  },
+  text: {
+    color: '#fff',
+    fontSize: 25,
   },
-  column: { flexDirection: 'column' },
-  row: { flexDirection: 'row' },
 })

package/src/Date/DatePickerModalHeader.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react'
+import React from 'react'
 import { Animated, StyleSheet } from 'react-native'
 import { Appbar, Button, useTheme } from 'react-native-paper'
-
-import { useHeaderTextColor } from '../utils'
+import { useHeaderTextColor } from '../shared/utils'
 import { getTranslation } from '../translations/utils'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -19,12 +18,13 @@ export interface DatePickerModalHeaderProps {
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
-  const theme = useTheme()
   const { locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
   const insets = useSafeAreaInsets()
 
+  const theme = useTheme()
+
   return (
     <>
       <Animated.View
@@ -64,25 +64,6 @@ const styles = StyleSheet.create({
   animated: {
     elevation: 4,
   },
-  header: {
-    height: 75,
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingLeft: 24,
-    paddingRight: 12,
-  },
-  headerContentContainer: { marginTop: 5, flexDirection: 'row' },
-  label: { color: '#fff', letterSpacing: 1, fontSize: 13 },
-  singleHeaderText: { color: '#fff', fontSize: 25 },
-  rangeHeaderText: { color: '#fff', fontSize: 25 },
-  headerTextFilled: { color: 'rgba(255,255,255,1)' },
-  headerTextEmpty: { color: 'rgba(255,255,255,0.5)' },
-  headerSeparator: {
-    color: 'rgba(255,255,255,1)',
-    fontSize: 25,
-    paddingLeft: 6,
-    paddingRight: 6,
-  },
   appbarHeader: {
     elevation: 0,
     backgroundColor: 'transparent',

package/src/Date/DatePickerModalHeaderBackground.tsx

@@ -1,6 +1,6 @@
+import React from 'react'
 import { Animated, StyleSheet } from 'react-native'
-import * as React from 'react'
-import { useHeaderBackgroundColor } from '../utils'
+import { useHeaderBackgroundColor } from '../shared/utils'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export default function DatePickerModalHeaderBackground({
@@ -10,6 +10,7 @@ export default function DatePickerModalHeaderBackground({
 }) {
   const backgroundColor = useHeaderBackgroundColor()
   const insets = useSafeAreaInsets()
+
   return (
     <Animated.View
       style={[

package/src/Date/DatePickerModalStatusBar.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import React, { memo } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { useHeaderBackgroundColor } from '../utils'
+import { useHeaderBackgroundColor } from '../shared/utils'
 import Color from 'color'
 import { Animated, StatusBar, StatusBarStyle } from 'react-native'
 
@@ -15,9 +15,9 @@ function DatePickerModalStatusBar({
 }) {
   const insets = useSafeAreaInsets()
   const headerBackgroundColor = useHeaderBackgroundColor()
+
   const onDarkBackground =
     Color(headerBackgroundColor).isDark() || statusBarOnTopOfBackdrop
-
   const statusBarTheme: StatusBarStyle = onDarkBackground
     ? 'light-content'
     : 'dark-content'
@@ -48,4 +48,4 @@ function DatePickerModalStatusBar({
   )
 }
 
-export default React.memo(DatePickerModalStatusBar)
+export default memo(DatePickerModalStatusBar)

package/src/Date/Day.tsx

@@ -1,15 +1,17 @@
-import * as React from 'react'
 import { MD2Theme, Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
 
-import type { PaperTheme } from '../utils'
+import type { PaperTheme } from '../shared/utils'
+import { memo, useCallback } from 'react'
+import React from 'react'
 
 function EmptyDayPure() {
   return <View style={styles.empty} />
 }
-export const EmptyDay = React.memo(EmptyDayPure)
+
+export const EmptyDay = memo(EmptyDayPure)
 
 function Day(props: {
   theme: PaperTheme
@@ -43,11 +45,6 @@ function Day(props: {
     textColorOnPrimary,
     theme,
   } = props
-  const onPress = React.useCallback(() => {
-    onPressDate(new Date(year, month, day))
-  }, [onPressDate, year, month, day])
-
-  // const borderColorV3 =
   const borderColorFallback = theme.dark ? '#fff' : '#000'
   const selectedOrInRangeDarkMode = selected || (inRange && theme.dark)
   const v2BorderColor = selectedOrInRangeDarkMode
@@ -55,6 +52,10 @@ function Day(props: {
     : borderColorFallback
   const borderColor = theme.isV3 ? theme.colors.primary : v2BorderColor
 
+  const onPress = useCallback(() => {
+    onPressDate(new Date(year, month, day))
+  }, [onPressDate, year, month, day])
+
   // TODO: check if this can be simplified
   // converted with Chat-GPT for now from enormous conditional to if-else
   let baseTextColor
@@ -137,20 +138,6 @@ function Day(props: {
 }
 
 const styles = StyleSheet.create({
-  empty: {
-    flex: 1,
-    flexBasis: 0,
-  },
-  disabled: {
-    opacity: 0.3,
-  },
-  root: {
-    flexBasis: 0,
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-  },
   button: {
     width: daySize,
     height: daySize,
@@ -168,9 +155,20 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'transparent',
   },
-  flex1: {
+  disabled: {
+    opacity: 0.3,
+  },
+  empty: {
+    flex: 1,
+    flexBasis: 0,
+  },
+  root: {
+    flexBasis: 0,
     flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
   },
 })
 
-export default React.memo(Day)
+export default memo(Day)

package/src/Date/DayName.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { memo } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { MD2Theme, Text, useTheme } from 'react-native-paper'
 
@@ -24,8 +24,16 @@ function DayName({ label }: { label: string }) {
     </View>
   )
 }
+
 const styles = StyleSheet.create({
-  dayName: { flex: 1, alignItems: 'center' },
-  dayNameLabel: { fontSize: 14, opacity: 0.7 },
+  dayName: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  dayNameLabel: {
+    fontSize: 14,
+    opacity: 0.7,
+  },
 })
-export default React.memo(DayName)
+
+export default memo(DayName)

package/src/Date/DayNames.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import DayName from './DayName'
 import { useTheme } from 'react-native-paper'
 import { DisableWeekDaysType, showWeekDay } from './dateUtils'
+import React, { memo, useMemo } from 'react'
 
 export const dayNamesHeight = 44
 
@@ -16,7 +16,8 @@ function DayNames({
   startWeekOnMonday: boolean
 }) {
   const theme = useTheme()
-  const shortDayNames = React.useMemo<string[]>(() => {
+
+  const shortDayNames = useMemo<string[]>(() => {
     // TODO: wait for a better Intl api ;-)
     const weekdays = [
       new Date(2020, 7, 2),
@@ -39,7 +40,7 @@ function DayNames({
   return (
     <View
       style={[styles.dayNames, { backgroundColor: theme.colors.surface }]}
-      pointerEvents={'none'}
+      pointerEvents="none"
     >
       {shortDayNames
         .filter((_, dayIndex) => showWeekDay(dayIndex, disableWeekDays))
@@ -51,10 +52,10 @@ function DayNames({
 }
 const styles = StyleSheet.create({
   dayNames: {
-    height: dayNamesHeight,
-    flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#fff',
+    flexDirection: 'row',
+    height: dayNamesHeight,
   },
 })
-export default React.memo(DayNames)
+export default memo(DayNames)

package/src/Date/DayRange.tsx

@@ -1,6 +1,7 @@
-import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { daySize } from './dateUtils'
+import React, { memo } from 'react'
+import { sharedStyles } from '../shared/styles'
 
 function DayRange({
   leftCrop,
@@ -22,7 +23,7 @@ function DayRange({
         pointerEvents="none"
         style={[
           StyleSheet.absoluteFill,
-          styles.rangeRoot,
+          sharedStyles.flexDirectionRow,
           bothWays && styles.rangeRootBoth,
           inRange && !isCrop
             ? {
@@ -35,7 +36,7 @@ function DayRange({
           <>
             <View
               style={[
-                styles.flex1,
+                sharedStyles.root,
                 rightCrop
                   ? {
                       backgroundColor: selectColor,
@@ -56,7 +57,7 @@ function DayRange({
             />
             <View
               style={[
-                styles.flex1,
+                sharedStyles.root,
                 leftCrop
                   ? {
                       backgroundColor: selectColor,
@@ -84,12 +85,6 @@ const styles = StyleSheet.create({
   rangeRootBoth: {
     borderRadius: daySize / 2,
   },
-  flex1: {
-    flex: 1,
-  },
-  rangeRoot: {
-    flexDirection: 'row',
-  },
 })
 
-export default React.memo(DayRange)
+export default memo(DayRange)