Merge pull request #244 from cbernier2/master

feat: Enable changing the input font size and the 24 hour mode

Author: RichardLindhout

docusaurus/docs/time-picker.md

@@ -105,3 +105,11 @@ The icon used to toggle between the OS input. Defaults to `keyboard-outline`. Yo
 **clockIcon**  
 `Type: string | undefined`  
 The icon used to toggle between time picker and input. Defaults to `clock-outline`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
+
+**use24HourClock**
+`Type: boolean | undefined`
+Flag indicating if the time input should use the 24 hours clock. Defaults to the system clock.
+
+**inputFontSize**
+`Type: number | undefined`
+Font size of the time input. Defaults to 57. Useful when using a custom font.

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,

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}

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,14 +57,17 @@ 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',
       timeZone: 'UTC',
     })
     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}

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}