Time picker enhancements to input + tab and onEnter to next input

Author: RichardLindhout

src/Date/CalendarEdit.tsx

@@ -9,6 +9,7 @@ import {
 import { CalendarDate, ModeType } from './Calendar'
 import { LocalState } from './DatePickerModal'
 import TextInputWithMask from '../TextInputMask'
+import { useTheme } from 'react-native-paper'
 
 function CalendarEdit({
   mode,
@@ -55,6 +56,20 @@ function CalendarEdit({
     }
   }, [mode, startInput, endInput, dateInput, collapsed])
 
+  const onSubmitStartInput = React.useCallback(() => {
+    if (endInput.current) {
+      endInput.current.focus()
+    }
+  }, [endInput])
+
+  const onSubmitEndInput = React.useCallback(() => {
+    // TODO: close modal and persist range
+  }, [])
+
+  const onSubmitInput = React.useCallback(() => {
+    // TODO: close modal and persist range
+  }, [])
+
   return (
     <View style={styles.root}>
       <View style={styles.inner}>
@@ -64,6 +79,7 @@ function CalendarEdit({
             label={label}
             value={state.date}
             onChange={(date) => onChange({ ...state, date })}
+            onSubmitEditing={onSubmitInput}
           />
         ) : null}
         {mode === 'range' ? (
@@ -73,6 +89,8 @@ function CalendarEdit({
               label={startLabel}
               value={state.startDate}
               onChange={(startDate) => onChange({ ...state, startDate })}
+              returnKeyType={'next'}
+              onSubmitEditing={onSubmitStartInput}
             />
             <View style={styles.separator} />
             <CalendarInput
@@ -81,6 +99,7 @@ function CalendarEdit({
               value={state.endDate}
               onChange={(endDate) => onChange({ ...state, endDate })}
               isEndDate
+              onSubmitEditing={onSubmitEndInput}
             />
           </>
         ) : null}
@@ -95,14 +114,19 @@ function CalendarInputPure(
     value,
     onChange,
     isEndDate,
+    returnKeyType,
+    onSubmitEditing,
   }: {
     label: string
     value: CalendarDate
     onChange: (d: Date | undefined) => any
     isEndDate?: boolean
+    returnKeyType?: string
+    onSubmitEditing?: () => any
   },
   ref: any
 ) {
+  const theme = useTheme()
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(undefined, {
       month: '2-digit',
@@ -141,10 +165,13 @@ function CalendarInputPure(
       value={formattedValue}
       style={styles.input}
       label={`${label} (${inputFormat})`}
-      keyboardType={'numeric'}
+      keyboardType={'number-pad'}
       placeholder={inputFormat}
       mask={inputFormat}
       onChangeText={onChangeText}
+      returnKeyType={returnKeyType}
+      onSubmitEditing={onSubmitEditing}
+      keyboardAppearance={theme.dark ? 'dark' : 'default'}
     />
   )
 }

src/Time/TimeInput.tsx

@@ -10,54 +10,76 @@ interface TimeInputProps
   extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {
   value: number
   clockType: PossibleClockTypes
-  onFocus: (type: PossibleClockTypes) => any
-  focused: boolean
-
+  onPress?: (type: PossibleClockTypes) => any
+  pressed?: boolean
+  onChanged: (n: number) => any
   inputType: PossibleInputTypes
 }
 
-export default function TimeInput({
-  value,
-  clockType,
-  focused,
-  onFocus,
+function TimeInput(
+  {
+    value,
+    clockType,
+    pressed,
+    onPress,
+    onChanged,
+    inputType,
+    ...rest
+  }: TimeInputProps,
+  ref: any
+) {
+  const [controlledValue, setControlledValue] = React.useState<string>(
+    `${value}`
+  )
 
-  inputType,
-  ...rest
-}: TimeInputProps) {
-  const theme = useTheme()
+  const onInnerChange = (text: string) => {
+    setControlledValue(text)
+    if (text !== '' && text !== '0') {
+      onChanged(Number(text))
+    }
+  }
 
-  // 2-digit does not work on all devices..
+  React.useEffect(() => {
+    setControlledValue(`${value}`)
+  }, [value])
 
-  const formattedValue = `${value}`.length === 1 ? `0${value}` : `${value}`
-  const onInnerFocus = () => {
-    onFocus(clockType)
-  }
+  const theme = useTheme()
+  const [inputFocused, setInputFocused] = React.useState<boolean>(false)
 
+  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused
   const backgroundColor = useMemo<string>(() => {
     if (theme.dark) {
-      if (focused) {
+      if (highlighted) {
         return Color(theme.colors.primary).hex()
       }
       return Color(theme.colors.surface).lighten(1.2).hex()
     }
 
-    if (focused) {
+    if (highlighted) {
       return Color(theme.colors.primary).lighten(1).hex()
     }
     return Color(theme.colors.surface).darken(0.1).hex()
-  }, [focused, theme])
+  }, [highlighted, theme])
 
   const color = useMemo<string>(() => {
-    if (focused && !theme.dark) {
+    if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
     return theme.colors.text
-  }, [focused, theme])
+  }, [highlighted, theme])
+
+  let formattedValue = controlledValue
+  if (!inputFocused) {
+    formattedValue =
+      controlledValue.length === 1
+        ? `0${controlledValue}`
+        : `${controlledValue}`
+  }
 
   return (
     <View style={styles.root}>
       <TextInput
+        ref={ref}
         style={[
           styles.input,
           {
@@ -68,12 +90,14 @@ export default function TimeInput({
         ]}
         value={formattedValue}
         maxLength={2}
-        onFocus={onInnerFocus}
+        onFocus={() => setInputFocused(true)}
+        onBlur={() => setInputFocused(false)}
         keyboardAppearance={theme.dark ? 'dark' : 'default'}
         keyboardType="number-pad"
+        onChangeText={onInnerChange}
         {...rest}
       />
-      {inputType === inputTypes.picker ? (
+      {onPress && inputType === inputTypes.picker ? (
         <TouchableRipple
           style={[
             StyleSheet.absoluteFill,
@@ -84,7 +108,7 @@ export default function TimeInput({
             },
           ]}
           rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
-          onPress={() => onFocus(clockType)}
+          onPress={() => onPress(clockType)}
         >
           <View />
         </TouchableRipple>
@@ -104,3 +128,5 @@ const styles = StyleSheet.create({
   },
   buttonOverlay: { overflow: 'hidden' },
 })
+
+export default React.forwardRef(TimeInput)

src/Time/TimeInputs.tsx

@@ -0,0 +1,150 @@
+// @typescript-eslint/no-unused-vars
+// WORK IN PROGRESS
+
+import * as React from 'react'
+import {
+  View,
+  StyleSheet,
+  useWindowDimensions,
+  TextInput as TextInputNative,
+} from 'react-native'
+import { useTheme } from 'react-native-paper'
+
+import {
+  clockTypes,
+  inputTypes,
+  PossibleClockTypes,
+  PossibleInputTypes,
+} from './timeUtils'
+import TimeInput from './TimeInput'
+import AmPmSwitcher from './AmPmSwitcher'
+import AnalogClock, { circleSize } from './AnalogClock'
+
+function TimeInputs({
+  hours,
+  minutes,
+  onFocusInput,
+  focused,
+  inputType,
+  onChange,
+  is24Hour,
+}: {
+  inputType: PossibleInputTypes
+  focused: PossibleClockTypes
+  hours: number
+  minutes: number
+  onFocusInput: (type: PossibleClockTypes) => any
+  onChange: ({
+    hours,
+    minutes,
+    focused,
+  }: {
+    hours: number
+    minutes: number
+    focused?: undefined | PossibleClockTypes
+  }) => any
+  is24Hour: boolean
+}) {
+  const startInput = React.useRef<TextInputNative | null>(null)
+  const endInput = React.useRef<TextInputNative | null>(null)
+  const dimensions = useWindowDimensions()
+  const isLandscape = dimensions.width > dimensions.height
+  const theme = useTheme()
+
+  const onSubmitStartInput = React.useCallback(() => {
+    if (endInput.current) {
+      endInput.current.focus()
+    }
+  }, [endInput])
+
+  const onSubmitEndInput = React.useCallback(() => {
+    // TODO: close modal and persist time
+  }, [])
+
+  return (
+    <View
+      style={[
+        styles.inputContainer,
+        isLandscape && styles.inputContainerLandscape,
+      ]}
+    >
+      <TimeInput
+        ref={startInput}
+        placeholder={'00'}
+        value={hours}
+        clockType={clockTypes.hours}
+        pressed={focused === clockTypes.hours}
+        onPress={onFocusInput}
+        inputType={inputType}
+        returnKeyType={'next'}
+        onSubmitEditing={onSubmitStartInput}
+        blurOnSubmit={false}
+        onChanged={(newHours) =>
+          onChange({
+            hours: newHours,
+            minutes,
+          })
+        }
+        // onChangeText={onChangeStartInput}
+      />
+      <View style={styles.hoursAndMinutesSeparator}>
+        <View style={styles.spaceDot} />
+        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />
+        <View style={styles.betweenDot} />
+        <View style={[styles.dot, { backgroundColor: theme.colors.text }]} />
+        <View style={styles.spaceDot} />
+      </View>
+      <TimeInput
+        ref={endInput}
+        placeholder={'00'}
+        value={minutes}
+        clockType={clockTypes.minutes}
+        pressed={focused === clockTypes.minutes}
+        onPress={onFocusInput}
+        inputType={inputType}
+        onSubmitEditing={onSubmitEndInput}
+        onChanged={(newMinutes) =>
+          onChange({
+            hours,
+            minutes: newMinutes,
+          })
+        }
+      />
+      {!is24Hour && (
+        <>
+          <View style={styles.spaceBetweenInputsAndSwitcher} />
+          <AmPmSwitcher />
+        </>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  spaceBetweenInputsAndSwitcher: { width: 12 },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputContainerLandscape: {
+    flex: 1,
+  },
+  hoursAndMinutesSeparator: {
+    fontSize: 65,
+    width: 24,
+    alignItems: 'center',
+  },
+  spaceDot: {
+    flex: 1,
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 7 / 2,
+  },
+  betweenDot: {
+    height: 12,
+  },
+})
+
+export default React.memo(TimeInputs)