react-native-paper-dates 0.11.14 → 0.12.0

package/src/Time/AnalogClock.tsx

@@ -43,7 +43,7 @@ function AnalogClock({
   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
+  const shortPointer = hours >= 12 && is24Hour
   const clockRef = React.useRef<View | null>(null)
   // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
@@ -74,17 +74,18 @@ function AnalogClock({
         if (hours12AndPm || hours24AndPM) {
           pickedHours += 12
         }
-        if (modeRef.current === 'AM' && pickedHours === 12) {
+        if ((modeRef.current === 'AM' || hours24) && pickedHours === 12) {
           pickedHours = 0
         }
 
-        if (
-          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||
-          pickedHours === 24
-        ) {
+        if (!hours24 && modeRef.current === 'AM' && pickedHours === 12) {
           pickedHours = 0
         }
 
+        if (pickedHours === 24) {
+          pickedHours = 12
+        }
+
         if (hoursRef.current !== pickedHours || final) {
           onChangeRef.current({
             hours: pickedHours,

package/src/Time/AnalogClockHours.tsx

@@ -3,7 +3,6 @@ import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './timeUtils'
 import { useTextColorOnPrimary } from '../utils'
-import { DisplayModeContext } from './TimePicker'
 
 function AnalogClockHours({
   is24Hour,
@@ -12,7 +11,6 @@ function AnalogClockHours({
   is24Hour: boolean
   hours: number
 }) {
-  const { mode } = React.useContext(DisplayModeContext)
   const outerRange = getHourNumbers(false, circleSize, 12, 12)
   const innerRange = getHourNumbers(true, circleSize, 12, 12)
   const color = useTextColorOnPrimary()
@@ -34,11 +32,17 @@ function AnalogClockHours({
           <View style={styles.outerHourInner}>
             {/* Display 00 instead of 12 for AM hours */}
             <Text
-              style={hours === i + 1 ? { color } : null}
+              style={
+                (!is24Hour && i + 1 === hours) ||
+                (hours === i + 1 && hours !== 12) ||
+                (i + 1 === 12 && hours === 0)
+                  ? { color }
+                  : null
+              }
               variant="bodyLarge"
               selectable={false}
             >
-              {mode === 'AM' && is24Hour && i + 1 === 12 ? '00' : i + 1}
+              {is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
         </View>
@@ -60,13 +64,13 @@ function AnalogClockHours({
                 <Text
                   selectable={false}
                   style={[
-                    i + 13 === hours || (i + 13 === 24 && hours === 0)
+                    i + 13 === hours || (i + 13 === 24 && hours === 12)
                       ? { color }
                       : null,
                   ]}
                   variant="bodyLarge"
                 >
-                  {i + 13 === 24 ? '00' : i + 13}
+                  {i + 13 === 24 ? '12' : i + 13}
                 </Text>
               </View>
             </View>

package/src/Time/TimeInput.tsx

@@ -24,6 +24,7 @@ interface TimeInputProps
   pressed: boolean
   onChanged: (n: number) => any
   inputType: PossibleInputTypes
+  inputFontSize?: number
 }
 
 function TimeInput(
@@ -34,6 +35,7 @@ function TimeInput(
     onPress,
     onChanged,
     inputType,
+    inputFontSize = 57,
     ...rest
   }: TimeInputProps,
   ref: any
@@ -77,6 +79,7 @@ function TimeInput(
           // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
+            fontSize: inputFontSize,
             backgroundColor,
             borderRadius: theme.roundness * 2,
             borderColor:
@@ -123,7 +126,6 @@ function TimeInput(
 const styles = StyleSheet.create({
   root: { position: 'relative', height: 80, width: 96 },
   input: {
-    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96,

package/src/Time/TimeInputs.tsx

@@ -27,6 +27,7 @@ function TimeInputs({
   inputType,
   onChange,
   is24Hour,
+  inputFontSize,
 }: {
   inputType: PossibleInputTypes
   focused: PossibleClockTypes
@@ -39,6 +40,7 @@ function TimeInputs({
     focused?: undefined | PossibleClockTypes
   }) => any
   is24Hour: boolean
+  inputFontSize?: number
 }) {
   const startInput = React.useRef<TextInputNative | null>(null)
   const endInput = React.useRef<TextInputNative | null>(null)
@@ -78,6 +80,7 @@ function TimeInputs({
       <View style={styles.column}>
         <TimeInput
           ref={startInput}
+          inputFontSize={inputFontSize}
           placeholder={'00'}
           value={toHourInputFormat(hours, is24Hour)}
           clockType={clockTypes.hours}
@@ -145,6 +148,7 @@ function TimeInputs({
       <View style={styles.column}>
         <TimeInput
           ref={endInput}
+          inputFontSize={inputFontSize}
           placeholder={'00'}
           value={minutes}
           clockType={clockTypes.minutes}

package/src/Time/TimePicker.tsx

@@ -36,6 +36,8 @@ function TimePicker({
   inputType,
   onChange,
   locale,
+  use24HourClock,
+  inputFontSize,
 }: {
   locale?: undefined | string
   inputType: PossibleInputTypes
@@ -44,6 +46,8 @@ function TimePicker({
   minutes: number
   onFocusInput: (type: PossibleClockTypes) => any
   onChange: onChangeFunc
+  use24HourClock?: boolean
+  inputFontSize?: number
 }) {
   const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(
     undefined
@@ -53,6 +57,9 @@ function TimePicker({
 
   // method to check whether we have 24 hours in clock or 12
   const is24Hour = React.useMemo(() => {
+    if (use24HourClock !== undefined) {
+      return use24HourClock
+    }
     const formatter = new Intl.DateTimeFormat(locale, {
       hour: '2-digit',
       minute: '2-digit',
@@ -60,7 +67,7 @@ function TimePicker({
     })
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))
     return formatted.includes('23')
-  }, [locale])
+  }, [locale, use24HourClock])
 
   // Initialize display Mode according the hours value
   React.useEffect(() => {
@@ -104,6 +111,7 @@ function TimePicker({
       >
         <TimeInputs
           inputType={inputType}
+          inputFontSize={inputFontSize}
           hours={hours}
           minutes={minutes}
           is24Hour={is24Hour}

package/src/Time/TimePickerModal.tsx

@@ -55,6 +55,8 @@ export function TimePickerModal({
   locale,
   keyboardIcon = 'keyboard-outline',
   clockIcon = 'clock-outline',
+  use24HourClock,
+  inputFontSize,
 }: {
   locale?: undefined | string
   label?: string
@@ -69,6 +71,8 @@ export function TimePickerModal({
   animationType?: 'slide' | 'fade' | 'none'
   keyboardIcon?: string
   clockIcon?: string
+  use24HourClock?: boolean
+  inputFontSize?: number
 }) {
   const theme = useTheme()
 
@@ -188,6 +192,8 @@ export function TimePickerModal({
                 <TimePicker
                   locale={locale}
                   inputType={inputType}
+                  use24HourClock={use24HourClock}
+                  inputFontSize={inputFontSize}
                   focused={focused}
                   hours={localHours}
                   minutes={localMinutes}