react-native-paper-dates 0.22.14 → 0.22.16

package/src/Time/AnalogClock.tsx

@@ -17,12 +17,18 @@ import {
   hourTypes,
   PossibleClockTypes,
 } from './timeUtils'
-import * as React from 'react'
-import { useLatest } from '../utils'
+import { useLatest } from '../shared/utils'
 import AnalogClockHours from './AnalogClockHours'
 import AnimatedClockSwitcher from './AnimatedClockSwitcher'
 import AnalogClockMinutes from './AnalogClockMinutes'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
+import { memo, useCallback, useContext, useRef } from 'react'
+import React from 'react'
+
+function returnTrue() {
+  return true
+}
+
 function AnalogClock({
   hours,
   minutes,
@@ -40,11 +46,15 @@ function AnalogClock({
     focused?: undefined | PossibleClockTypes
   }) => any
 }) {
+  const shortPointer = hours >= 12 && is24Hour
+
   const theme = useTheme()
-  const { mode } = React.useContext(DisplayModeContext)
+
+  const { mode } = useContext(DisplayModeContext)
+
   // used to make pointer shorter if hours are selected and above 12
-  const shortPointer = hours >= 12 && is24Hour
-  const clockRef = React.useRef<View | null>(null)
+  const clockRef = useRef<View | null>(null)
+
   // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
   const hoursRef = useLatest(hours)
@@ -53,7 +63,8 @@ function AnalogClock({
   const focusedRef = useLatest(focused)
   const is24HourRef = useLatest(is24Hour)
   const modeRef = useLatest(mode)
-  const onPointerMove = React.useCallback(
+
+  const onPointerMove = useCallback(
     (e: GestureResponderEvent, final: boolean) => {
       let x = e.nativeEvent.locationX
       let y = e.nativeEvent.locationY
@@ -105,7 +116,7 @@ function AnalogClock({
     },
     [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]
   )
-  const panResponder = React.useRef(
+  const panResponder = useRef(
     PanResponder.create({
       onPanResponderGrant: (e) => onPointerMove(e, false),
       onPanResponderMove: (e) => onPointerMove(e, false),
@@ -118,6 +129,7 @@ function AnalogClock({
       onShouldBlockNativeResponder: returnTrue,
     })
   ).current
+
   const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0
   const pointerNumber = focused === clockTypes.hours ? hours : minutes
   const degreesPerNumber = focused === clockTypes.hours ? 30 : 6
@@ -188,36 +200,38 @@ function AnalogClock({
     </View>
   )
 }
+
 const styles = StyleSheet.create({
-  clock: {
-    height: circleSize,
-    width: circleSize,
-    position: 'relative',
+  center: {
+    alignItems: 'center',
     justifyContent: 'center',
+  },
+  clock: {
     alignItems: 'center',
     borderRadius: circleSize / 2,
+    height: circleSize,
+    justifyContent: 'center',
+    position: 'relative',
+    width: circleSize,
   },
-  middlePoint: {
-    borderRadius: 4,
-    height: 8,
-    width: 8,
-  },
-  center: { justifyContent: 'center', alignItems: 'center' },
   endPoint: {
     borderRadius: 24,
+    bottom: -23,
     height: 48,
-    width: 48,
     position: 'absolute',
     right: 0,
-    bottom: -23,
+    width: 48,
   },
   line: {
-    position: 'absolute',
+    borderRadius: 4,
     height: 2,
+    position: 'absolute',
+  },
+  middlePoint: {
     borderRadius: 4,
+    height: 8,
+    width: 8,
   },
 })
-function returnTrue() {
-  return true
-}
-export default React.memo(AnalogClock)
+
+export default memo(AnalogClock)

package/src/Time/AnalogClockHours.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './timeUtils'
-import { useTextColorOnPrimary } from '../utils'
+import { useTextColorOnPrimary } from '../shared/utils'
+import React, { memo } from 'react'
 
 function AnalogClockHours({
   is24Hour,
@@ -22,14 +22,14 @@ function AnalogClockHours({
           key={i}
           pointerEvents="none"
           style={[
-            styles.outerHourRoot,
+            styles.hourRoot,
             {
               top: a[1] || 0,
               left: a[0] || 0,
             },
           ]}
         >
-          <View style={styles.outerHourInner}>
+          <View style={styles.hourInner}>
             {/* Display 00 instead of 12 for AM hours */}
             <Text
               maxFontSizeMultiplier={1.5}
@@ -54,14 +54,14 @@ function AnalogClockHours({
               key={i}
               pointerEvents="none"
               style={[
-                styles.innerHourRoot,
+                styles.hourRoot,
                 {
                   top: a[1] || 0,
                   left: a[0] || 0,
                 },
               ]}
             >
-              <View style={styles.innerHourInner}>
+              <View style={styles.hourInner}>
                 <Text
                   maxFontSizeMultiplier={1.5}
                   selectable={false}
@@ -83,30 +83,20 @@ function AnalogClockHours({
 }
 
 const styles = StyleSheet.create({
-  outerHourRoot: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 20,
-    width: 48,
-    height: 48,
-    marginLeft: -24,
-    marginTop: -24,
+  hourInner: {
     borderRadius: 24,
   },
-  outerHourInner: { borderRadius: 24 },
-  innerHourRoot: {
+  hourRoot: {
     position: 'absolute',
-    zIndex: 20,
     justifyContent: 'center',
     alignItems: 'center',
+    zIndex: 20,
     width: 48,
     height: 48,
     marginLeft: -24,
     marginTop: -24,
     borderRadius: 24,
   },
-  innerHourInner: { borderRadius: 24 },
 })
 
 function getHourNumbers(
@@ -131,4 +121,4 @@ function getHourNumbers(
     })
 }
 
-export default React.memo(AnalogClockHours)
+export default memo(AnalogClockHours)

package/src/Time/AnalogClockMinutes.tsx

@@ -1,12 +1,13 @@
-import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './timeUtils'
-import { useTextColorOnPrimary } from '../utils'
+import { useTextColorOnPrimary } from '../shared/utils'
+import React, { memo } from 'react'
 
 function AnalogClockMinutes({ minutes }: { minutes: number }) {
   const range = getMinuteNumbers(circleSize, 12)
   const color = useTextColorOnPrimary()
+
   return (
     <>
       {range.map((a, i) => {
@@ -46,35 +47,6 @@ function AnalogClockMinutes({ minutes }: { minutes: number }) {
   )
 }
 
-const styles = StyleSheet.create({
-  outerHourRoot: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 20,
-    width: 48,
-    height: 48,
-    marginLeft: -24,
-    marginTop: -24,
-    borderRadius: 24,
-  },
-  outerHourInner: { borderRadius: 24 },
-  innerHourRoot: {
-    position: 'absolute',
-    zIndex: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 40,
-    height: 40,
-    marginLeft: -20,
-    marginTop: -20,
-    borderRadius: 20,
-  },
-  innerHourInner: { borderRadius: 20 },
-  innerHourText: { fontSize: 13 },
-  textWhite: { color: '#fff' },
-})
-
 function getMinuteNumbers(size: number, count: number) {
   let angle = 0
   let step = (2 * Math.PI) / count
@@ -92,4 +64,19 @@ function getMinuteNumbers(size: number, count: number) {
     })
 }
 
-export default React.memo(AnalogClockMinutes)
+const styles = StyleSheet.create({
+  outerHourRoot: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 20,
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24,
+  },
+  outerHourInner: { borderRadius: 24 },
+})
+
+export default memo(AnalogClockMinutes)

package/src/Time/AnimatedClockSwitcher.tsx

@@ -1,6 +1,8 @@
-import * as React from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
 import { clockTypes, PossibleClockTypes } from './timeUtils'
+import React, { ReactElement, useEffect, useRef } from 'react'
+import AnalogClockHours from './AnalogClockHours'
+import AnalogClockMinutes from './AnalogClockMinutes'
 
 export default function AnimatedClockSwitcher({
   focused,
@@ -8,14 +10,16 @@ export default function AnimatedClockSwitcher({
   minutes,
 }: {
   focused: PossibleClockTypes
-  hours: any
-  minutes: any
+  hours: ReactElement<typeof AnalogClockHours>
+  minutes: ReactElement<typeof AnalogClockMinutes>
 }) {
   const collapsed = focused === clockTypes.hours
-  const animatedCollapsed = React.useRef<Animated.Value>(
+
+  const animatedCollapsed = useRef<Animated.Value>(
     new Animated.Value(collapsed ? 1 : 0)
   )
-  React.useEffect(() => {
+
+  useEffect(() => {
     Animated.timing(animatedCollapsed.current, {
       toValue: collapsed ? 1 : 0,
       duration: 250,

package/src/Time/TimeInput.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   View,
   TextInput,
@@ -15,6 +14,9 @@ import {
   PossibleInputTypes,
   useInputColors,
 } from './timeUtils'
+import { forwardRef, useEffect, useState } from 'react'
+import React from 'react'
+import { sharedStyles } from '../shared/styles'
 
 interface TimeInputProps
   extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {
@@ -40,9 +42,18 @@ function TimeInput(
   }: TimeInputProps,
   ref: any
 ) {
-  const [controlledValue, setControlledValue] = React.useState<string>(
-    `${value}`
-  )
+  const theme = useTheme()
+  const [inputFocused, setInputFocused] = useState<boolean>(false)
+
+  const [controlledValue, setControlledValue] = useState(`${value}`)
+
+  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused
+
+  const { color, backgroundColor } = useInputColors(highlighted)
+
+  useEffect(() => {
+    setControlledValue(`${value}`)
+  }, [value])
 
   const onInnerChange = (text: string) => {
     setControlledValue(text)
@@ -51,17 +62,6 @@ function TimeInput(
     }
   }
 
-  React.useEffect(() => {
-    setControlledValue(`${value}`)
-  }, [value])
-
-  const theme = useTheme()
-  const [inputFocused, setInputFocused] = React.useState<boolean>(false)
-
-  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused
-
-  const { color, backgroundColor } = useInputColors(highlighted)
-
   let formattedValue = controlledValue
   if (!inputFocused) {
     formattedValue =
@@ -107,7 +107,7 @@ function TimeInput(
         <TouchableRipple
           style={[
             StyleSheet.absoluteFill,
-            styles.buttonOverlay,
+            sharedStyles.overflowHidden,
             {
               borderRadius: theme.roundness,
             },
@@ -128,13 +128,16 @@ function TimeInput(
 }
 
 const styles = StyleSheet.create({
-  root: { position: 'relative', height: 80, width: 96 },
   input: {
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96,
   },
-  buttonOverlay: { overflow: 'hidden' },
+  root: {
+    height: 80,
+    position: 'relative',
+    width: 96,
+  },
 })
 
-export default React.forwardRef(TimeInput)
+export default forwardRef(TimeInput)

package/src/Time/TimeInputs.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   View,
   StyleSheet,
@@ -16,9 +15,12 @@ import {
 } from './timeUtils'
 import TimeInput from './TimeInput'
 import AmPmSwitcher from './AmPmSwitcher'
-import { useLatest } from '../utils'
+import { useLatest } from '../shared/utils'
 import Color from 'color'
 import { getTranslation } from '../translations/utils'
+import { memo, useCallback, useRef } from 'react'
+import React from 'react'
+import { sharedStyles } from '../shared/styles'
 
 function TimeInputs({
   hours,
@@ -45,24 +47,25 @@ function TimeInputs({
   inputFontSize?: number
   locale?: string
 }) {
-  const startInput = React.useRef<TextInputNative | null>(null)
-  const endInput = React.useRef<TextInputNative | null>(null)
+  const theme = useTheme()
+
+  const startInput = useRef<TextInputNative | null>(null)
+  const endInput = useRef<TextInputNative | null>(null)
   const dimensions = useWindowDimensions()
   const isLandscape = dimensions.width > dimensions.height
-  const theme = useTheme()
+  const minutesRef = useLatest(minutes)
 
-  const onSubmitStartInput = React.useCallback(() => {
+  const onSubmitStartInput = useCallback(() => {
     if (endInput.current) {
       endInput.current.focus()
     }
   }, [endInput])
 
-  const onSubmitEndInput = React.useCallback(() => {
+  const onSubmitEndInput = useCallback(() => {
     // TODO: close modal and persist time
   }, [])
 
-  const minutesRef = useLatest(minutes)
-  const onChangeHours = React.useCallback(
+  const onChangeHours = useCallback(
     (newHours: number) => {
       onChange({
         hours: newHours,
@@ -74,12 +77,7 @@ function TimeInputs({
   )
 
   return (
-    <View
-      style={[
-        styles.inputContainer,
-        isLandscape && styles.inputContainerLandscape,
-      ]}
-    >
+    <View style={[styles.inputContainer, isLandscape && sharedStyles.root]}>
       <View style={styles.column}>
         <TimeInput
           ref={startInput}
@@ -127,7 +125,7 @@ function TimeInputs({
           { marginBottom: inputType === 'keyboard' ? 24 : 0 },
         ]}
       >
-        <View style={styles.spaceDot} />
+        <View style={sharedStyles.root} />
         <View
           style={[
             styles.dot,
@@ -149,7 +147,7 @@ function TimeInputs({
             },
           ]}
         />
-        <View style={styles.spaceDot} />
+        <View style={sharedStyles.root} />
       </View>
       <View style={styles.column}>
         <TimeInput
@@ -200,33 +198,29 @@ function TimeInputs({
 }
 
 const styles = StyleSheet.create({
+  betweenDot: {
+    height: 12,
+  },
   column: {
     flexDirection: 'column',
   },
-  spaceBetweenInputsAndSwitcher: { width: 12 },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  inputContainerLandscape: {
-    flex: 1,
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 7 / 2,
   },
   hoursAndMinutesSeparator: {
     fontSize: 65,
     width: 24,
     alignItems: 'center',
   },
-  spaceDot: {
-    flex: 1,
-  },
-  dot: {
-    width: 7,
-    height: 7,
-    borderRadius: 7 / 2,
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  betweenDot: {
-    height: 12,
+  spaceBetweenInputsAndSwitcher: {
+    width: 12,
   },
 })
 
-export default React.memo(TimeInputs)
+export default memo(TimeInputs)

package/src/Time/TimePicker.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
 import { View, StyleSheet, useWindowDimensions } from 'react-native'
-
+import React, { memo } from 'react'
 import {
   inputTypes,
   PossibleClockTypes,
@@ -13,6 +12,7 @@ import AnalogClock from './AnalogClock'
 import { circleSize } from './timeUtils'
 import TimeInputs from './TimeInputs'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 type onChangeFunc = ({
   hours,
@@ -45,14 +45,15 @@ function TimePicker({
   use24HourClock?: boolean
   inputFontSize?: number
 }) {
-  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(
-    undefined
-  )
   const dimensions = useWindowDimensions()
   const isLandscape = dimensions.width > dimensions.height
 
+  const [displayMode, setDisplayMode] = useState<'AM' | 'PM' | undefined>(
+    undefined
+  )
+
   // method to check whether we have 24 hours in clock or 12
-  const is24Hour = React.useMemo(() => {
+  const is24Hour = useMemo(() => {
     if (use24HourClock !== undefined) {
       return use24HourClock
     }
@@ -66,7 +67,7 @@ function TimePicker({
   }, [locale, use24HourClock])
 
   // Initialize display Mode according the hours value
-  React.useEffect(() => {
+  useEffect(() => {
     if (hours >= 12) {
       setDisplayMode('PM')
     } else {
@@ -75,7 +76,7 @@ function TimePicker({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const onInnerChange = React.useCallback<onChangeFunc>(
+  const onInnerChange = useCallback<onChangeFunc>(
     (params) => {
       params.hours = toHourOutputFormat(params.hours, hours, is24Hour)
       onChange(params)
@@ -133,6 +134,11 @@ function TimePicker({
 }
 
 const styles = StyleSheet.create({
+  clockContainer: {
+    paddingTop: 36,
+    paddingLeft: 12,
+    paddingRight: 12,
+  },
   rootLandscape: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -142,7 +148,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },
 })
 
-export default React.memo(TimePicker)
+export default memo(TimePicker)