Fixed am/pm switch + onConfirm

Author: RichardLindhout

example/src/App.tsx

@@ -10,10 +10,9 @@ import {
   DarkTheme,
   useTheme,
 } from 'react-native-paper';
-import { DatePickerModal } from '../../src';
+import { DatePickerModal, TimePickerModal } from '../../src';
 import { Platform } from 'react-native';
 
-import TimePickerModal from '../../src/Time/TimePickerModal';
 import DatePickerInput from '../../src/Date/DatePickerInput';
 import DateRangeInput from '../../src/Date/DateRangeInput';
 
@@ -118,7 +117,14 @@ function App({
           label={'Select date'} // optional
         />
 
-        <TimePickerModal visible={timeOpen} onDismiss={onDismissTime} />
+        <TimePickerModal
+          visible={timeOpen}
+          onDismiss={onDismissTime}
+          onConfirm={({ hours, minutes }) => {
+            setTimeOpen(false);
+            console.log({ hours, minutes });
+          }}
+        />
       </View>
     </ScrollView>
   );
@@ -131,7 +137,13 @@ export default function AppWithProviders() {
   };
 
   return (
-    <PaperProvider theme={dark ? DarkTheme : DefaultTheme}>
+    <PaperProvider
+      theme={
+        dark
+          ? { ...DarkTheme, roundness: 10 }
+          : { ...DefaultTheme, roundness: 10 }
+      }
+    >
       <React.Fragment>
         {Platform.OS === 'web' ? (
           <style type="text/css">{`

src/Date/DateRangeInput.tsx

@@ -29,7 +29,14 @@ export default function DateRangeInput() {
         />
         <Text>Van</Text>
       </View>
-      <Text style={{ fontSize: 24, marginLeft: 6, marginRight: 6 }}>-</Text>
+      <View>
+        <Text style={{ fontSize: 16, marginLeft: 12, marginRight: 12 }}>
+          to
+        </Text>
+        <Text style={{ opacity: 0 }} accessible={false}>
+          tot
+        </Text>
+      </View>
       <View style={{ flex: 1 }}>
         <TextInputWithMask
           value={''}

src/Date/Swiper.tsx

@@ -167,7 +167,7 @@ function Swiper({
         initialScrollIndex={startAtIndex}
         keyExtractor={keyExtractor}
         getItemLayout={getItemLayout}
-        windowSize={3}
+        windowSize={scrollMode === 'horizontal' ? 1 : 3}
         getItem={getItem}
         renderItem={renderPage}
         style={styles.viewPager}

src/Time/AmPmSwitcher.tsx

@@ -1,60 +1,119 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { useMemo } from 'react'
+import Color from 'color'
+import {
+  getHourType,
+  hourTypes,
+  useInputColors,
+  useSwitchColors,
+} from './timeUtils'
 
-export default function AmPmSwitcher() {
+export default function AmPmSwitcher({
+  hours,
+  onChange,
+}: {
+  hours: number
+  onChange: (hours: number) => any
+}) {
   const theme = useTheme()
+  const backgroundColor = useMemo<string>(() => {
+    if (theme.dark) {
+      return Color(theme.colors.surface).lighten(1.2).hex()
+    }
+    return Color(theme.colors.surface).darken(0.1).hex()
+  }, [theme])
+
+  const hourType = getHourType(hours)
+  const isAM = hourType === hourTypes.am
+  const isPM = hourType === hourTypes.pm
+
   return (
     <View
       style={[
         styles.root,
         {
-          borderColor: theme.colors.backdrop,
+          borderColor: backgroundColor,
           borderRadius: theme.roundness,
         },
       ]}
     >
-      <SwitchButton label="AM" onPress={() => {}} />
-      <View
-        style={[
-          styles.switchSeparator,
-          { backgroundColor: theme.colors.backdrop },
-        ]}
+      <SwitchButton
+        label="AM"
+        onPress={isAM ? undefined : () => onChange(hours - 12)}
+        selected={isAM}
+        disabled={isAM}
+      />
+      <View style={[styles.switchSeparator, { backgroundColor }]} />
+      <SwitchButton
+        label="PM"
+        onPress={isPM ? undefined : () => onChange(hours + 12)}
+        selected={isPM}
+        disabled={isPM}
       />
-      <SwitchButton label="PM" onPress={() => {}} />
     </View>
   )
 }
 
 function SwitchButton({
   label,
   onPress,
+  selected,
+  disabled,
 }: {
   label: string
-  onPress: () => any
+  onPress: (() => any) | undefined
+  selected: boolean
+  disabled: boolean
 }) {
   const theme = useTheme()
+  const { backgroundColor, color } = useSwitchColors(selected)
+  console.log({ backgroundColor, color })
   return (
-    <TouchableRipple onPress={onPress} style={styles.switchButton}>
-      <Text selectable={false} style={{ ...theme.fonts.medium }}>
-        {label}
-      </Text>
+    <TouchableRipple
+      onPress={onPress}
+      style={styles.switchButton}
+      accessibilityLabel={label}
+      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+    >
+      <View style={[styles.switchButtonInner, { backgroundColor }]}>
+        <Text
+          selectable={false}
+          style={[
+            {
+              ...theme.fonts.medium,
+              color: color,
+            },
+          ]}
+        >
+          {label}
+        </Text>
+      </View>
     </TouchableRipple>
   )
 }
 
 const styles = StyleSheet.create({
   root: {
     width: 50,
-    height: 96,
+    height: 80,
     borderWidth: 1,
+    overflow: 'hidden',
   },
   switchSeparator: {
     height: 1,
-    width: 41,
+    width: 48,
   },
   switchButton: {
     flex: 1,
+  },
+  switchButtonInner: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },

src/Time/AnalogClock.tsx

@@ -11,8 +11,10 @@ import {
   clockTypes,
   getAngle,
   getHours,
+  getHourType,
+  getHourTypeFromOffset,
   getMinutes,
-  isPM,
+  hourTypes,
   PossibleClockTypes,
 } from './timeUtils'
 import * as React from 'react'
@@ -23,6 +25,7 @@ import AnalogClockHours from './AnalogClockHours'
 import AnimatedClockSwitcher from './AnimatedClockSwitcher'
 import AnalogClockMinutes from './AnalogClockMinutes'
 
+// 250? when bigger?
 export const circleSize = 215
 
 function AnalogClock({
@@ -48,11 +51,14 @@ function AnalogClock({
 }) {
   const theme = useTheme()
 
+  // 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 elementX = React.useRef<number>(0)
   const elementY = React.useRef<number>(0)
 
-  // Hooks are nice, sometimes :-)..
+  // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
   const hoursRef = useLatest(hours)
   const onChangeRef = useLatest(onChange)
@@ -67,8 +73,15 @@ function AnalogClock({
 
       let angle = getAngle(x, y, circleSize)
       if (focusedRef.current === clockTypes.hours) {
-        let pickedHours = getHours(angle)
-        if (is24HourRef.current && isPM(x, y, circleSize)) {
+        let previousHourType = getHourType(hoursRef.current)
+        let pickedHours = getHours(angle, previousHourType)
+
+        // TODO: check which mode is switched on am/pm
+        if (
+          (is24HourRef.current &&
+            getHourTypeFromOffset(x, y, circleSize) === hourTypes.pm) ||
+          (!is24HourRef.current && previousHourType === hourTypes.pm)
+        ) {
           pickedHours += 12
         }
         if (hoursRef.current !== pickedHours || final) {
@@ -120,8 +133,7 @@ function AnalogClock({
     [elementX, elementY]
   )
 
-  // used to make pointer shorter if hours are selected and above 12
-  const dynamicSize = focused === clockTypes.hours && hours > 12 ? 33 : 0
+  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0
   const pointerNumber = focused === clockTypes.hours ? hours : minutes
   const degreesPerNumber = focused === clockTypes.hours ? 30 : 6
   return (

src/Time/TimeInput.tsx

@@ -3,15 +3,19 @@ import { View, TextInput, TextInputProps, StyleSheet } from 'react-native'
 import { useTheme, TouchableRipple } from 'react-native-paper'
 
 import Color from 'color'
-import { inputTypes, PossibleClockTypes, PossibleInputTypes } from './timeUtils'
-import { useMemo } from 'react'
+import {
+  inputTypes,
+  PossibleClockTypes,
+  PossibleInputTypes,
+  useInputColors,
+} from './timeUtils'
 
 interface TimeInputProps
   extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {
   value: number
   clockType: PossibleClockTypes
   onPress?: (type: PossibleClockTypes) => any
-  pressed?: boolean
+  pressed: boolean
   onChanged: (n: number) => any
   inputType: PossibleInputTypes
 }
@@ -47,26 +51,8 @@ function TimeInput(
   const [inputFocused, setInputFocused] = React.useState<boolean>(false)
 
   const highlighted = inputType === inputTypes.picker ? pressed : inputFocused
-  const backgroundColor = useMemo<string>(() => {
-    if (theme.dark) {
-      if (highlighted) {
-        return Color(theme.colors.primary).hex()
-      }
-      return Color(theme.colors.surface).lighten(1.2).hex()
-    }
-
-    if (highlighted) {
-      return Color(theme.colors.primary).lighten(1).hex()
-    }
-    return Color(theme.colors.surface).darken(0.1).hex()
-  }, [highlighted, theme])
 
-  const color = useMemo<string>(() => {
-    if (highlighted && !theme.dark) {
-      return theme.colors.primary
-    }
-    return theme.colors.text
-  }, [highlighted, theme])
+  const { color, backgroundColor } = useInputColors(highlighted)
 
   let formattedValue = controlledValue
   if (!inputFocused) {

src/Time/TimeInputs.tsx

@@ -19,6 +19,7 @@ import {
 import TimeInput from './TimeInput'
 import AmPmSwitcher from './AmPmSwitcher'
 import AnalogClock, { circleSize } from './AnalogClock'
+import { useLatest } from '../utils'
 
 function TimeInputs({
   hours,
@@ -61,6 +62,18 @@ function TimeInputs({
     // TODO: close modal and persist time
   }, [])
 
+  const minutesRef = useLatest(minutes)
+  const onChangeHours = React.useCallback(
+    (newHours: number) => {
+      onChange({
+        hours: newHours,
+        minutes: minutesRef.current,
+        focused: clockTypes.hours,
+      })
+    },
+    [onChange, minutesRef]
+  )
+
   return (
     <View
       style={[
@@ -113,7 +126,7 @@ function TimeInputs({
       {!is24Hour && (
         <>
           <View style={styles.spaceBetweenInputsAndSwitcher} />
-          <AmPmSwitcher />
+          <AmPmSwitcher hours={hours} onChange={onChangeHours} />
         </>
       )}
     </View>

src/Time/TimePicker.tsx

@@ -41,6 +41,7 @@ function TimePicker({
     })
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))
     return formatted.includes('23')
+    // return false
   }, [])
 
   return (

src/Time/TimePickerModal.tsx

@@ -32,9 +32,11 @@ const supportedOrientations: any[] = [
 export function TimePickerModal({
   visible,
   onDismiss,
+  onConfirm,
 }: {
   visible: boolean
   onDismiss: () => any
+  onConfirm: ({ hours, minutes }: { hours: number; minutes: number }) => any
 }) {
   const theme = useTheme()
   let date = new Date()
@@ -80,7 +82,7 @@ export function TimePickerModal({
       <>
         <KeyboardAvoidingView
           style={styles.keyboardView}
-          behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         >
           <TouchableWithoutFeedback onPress={onDismiss}>
             <View
@@ -130,7 +132,9 @@ export function TimePickerModal({
                 />
                 <View style={styles.fill} />
                 <Button onPress={onDismiss}>Cancel</Button>
-                <Button onPress={() => {}}>Ok</Button>
+                <Button onPress={() => onConfirm({ hours, minutes })}>
+                  Ok
+                </Button>
               </View>
             </Animated.View>
           </View>