Bugfixes with am/pm switch

Author: RichardLindhout

src/Time/TimeInputs.tsx

@@ -10,7 +10,13 @@ import {
 } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
-import { clockTypes, PossibleClockTypes, PossibleInputTypes } from './timeUtils'
+import {
+  clockTypes,
+  PossibleClockTypes,
+  PossibleInputTypes,
+  toHourInputFormat,
+  toHourOutputFormat,
+} from './timeUtils'
 import TimeInput from './TimeInput'
 import AmPmSwitcher from './AmPmSwitcher'
 import { useLatest } from '../utils'
@@ -78,7 +84,7 @@ function TimeInputs({
       <TimeInput
         ref={startInput}
         placeholder={'00'}
-        value={toInputFormat(hours, is24Hour)}
+        value={toHourInputFormat(hours, is24Hour)}
         clockType={clockTypes.hours}
         pressed={focused === clockTypes.hours}
         onPress={onFocusInput}
@@ -87,7 +93,7 @@ function TimeInputs({
         onSubmitEditing={onSubmitStartInput}
         blurOnSubmit={false}
         onChanged={(newHoursFromInput) => {
-          let newHours = toOutputFormat(newHoursFromInput, hours, is24Hour)
+          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)
           if (newHoursFromInput > 24) {
             newHours = 24
           }
@@ -135,29 +141,6 @@ function TimeInputs({
   )
 }
 
-function toInputFormat(hours: number, is24Hour: boolean): number {
-  if (is24Hour) {
-    return hours
-  }
-  if (hours > 12) {
-    return hours - 12
-  }
-  return hours
-}
-function toOutputFormat(
-  newHours: number,
-  previousHours: number,
-  is24Hour: boolean
-): number {
-  if (is24Hour) {
-    return newHours
-  }
-  if (previousHours > 12 && newHours <= 12) {
-    return newHours + 12
-  }
-  return newHours
-}
-
 const styles = StyleSheet.create({
   spaceBetweenInputsAndSwitcher: { width: 12 },
   inputContainer: {

src/Time/TimePicker.tsx

@@ -1,11 +1,27 @@
 import * as React from 'react'
 import { View, StyleSheet, useWindowDimensions } from 'react-native'
 
-import { inputTypes, PossibleClockTypes, PossibleInputTypes } from './timeUtils'
+import {
+  inputTypes,
+  PossibleClockTypes,
+  PossibleInputTypes,
+  toHourInputFormat,
+  toHourOutputFormat,
+} from './timeUtils'
 
 import AnalogClock, { circleSize } from './AnalogClock'
 import TimeInputs from './TimeInputs'
 
+type onChangeFunc = ({
+  hours,
+  minutes,
+  focused,
+}: {
+  hours: number
+  minutes: number
+  focused?: undefined | PossibleClockTypes
+}) => any
+
 function TimePicker({
   hours,
   minutes,
@@ -19,32 +35,30 @@ function TimePicker({
   hours: number
   minutes: number
   onFocusInput: (type: PossibleClockTypes) => any
-  onChange: ({
-    hours,
-    minutes,
-    focused,
-  }: {
-    hours: number
-    minutes: number
-    focused?: undefined | PossibleClockTypes
-  }) => any
+  onChange: onChangeFunc
 }) {
   const dimensions = useWindowDimensions()
   const isLandscape = dimensions.width > dimensions.height
 
   // method to check whether we have 24 hours in clock or 12
   const is24Hour = React.useMemo(() => {
-    return false
     const formatter = new Intl.DateTimeFormat(undefined, {
       hour: '2-digit',
       minute: '2-digit',
       timeZone: 'UTC',
     })
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))
     return formatted.includes('23')
-    // return false
   }, [])
 
+  const onInnerChange = React.useCallback<onChangeFunc>(
+    (params) => {
+      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)
+      onChange(params)
+    },
+    [onChange, hours, is24Hour]
+  )
+
   return (
     <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>
       <TimeInputs
@@ -59,11 +73,11 @@ function TimePicker({
       {inputType === inputTypes.picker ? (
         <View style={styles.clockContainer}>
           <AnalogClock
-            hours={hours}
+            hours={toHourInputFormat(hours, is24Hour)}
             minutes={minutes}
             focused={focused}
             is24Hour={is24Hour}
-            onChange={onChange}
+            onChange={onInnerChange}
           />
         </View>
       ) : null}

src/Time/timeUtils.ts

@@ -195,3 +195,27 @@ export function useInputColors(highlighted: boolean) {
 
   return { backgroundColor, color }
 }
+
+export function toHourInputFormat(hours: number, is24Hour: boolean): number {
+  if (is24Hour) {
+    return hours
+  }
+  if (hours > 12) {
+    return hours - 12
+  }
+  return hours
+}
+
+export function toHourOutputFormat(
+  newHours: number,
+  previousHours: number,
+  is24Hour: boolean
+): number {
+  if (is24Hour) {
+    return newHours
+  }
+  if (previousHours > 12 && newHours <= 12) {
+    return newHours + 12
+  }
+  return newHours
+}