react-native-paper-dates 0.11.15 → 0.12.0

package/lib/module/Time/AnalogClock.js.map

@@ -1 +1 @@
-{"version":3,"names":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","React","useLatest","AnalogClockHours","AnimatedClockSwitcher","AnalogClockMinutes","DisplayModeContext","AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","mode","useContext","shortPointer","clockRef","useRef","hoursRef","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","current","hours24","previousHourType","pickedHours","hours12AndPm","hourTypeFromOffset","hours24AndPM","pm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","isV3","colors","surfaceVariant","dark","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","memo"],"sources":["AnalogClock.tsx"],"sourcesContent":["import Color from 'color'\nimport {\n  GestureResponderEvent,\n  PanResponder,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\nimport {\n  circleSize,\n  clockTypes,\n  getAngle,\n  getHours,\n  getHourType,\n  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\nfunction AnalogClock({\n  hours,\n  minutes,\n  focused,\n  is24Hour,\n  onChange,\n}: {\n  hours: number\n  minutes: number\n  focused: PossibleClockTypes\n  is24Hour: boolean\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n}) {\n  const theme = useTheme()\n  const { mode } = React.useContext(DisplayModeContext)\n  // used to make pointer shorter if hours are selected and above 12\n  const shortPointer = (hours === 0 || hours > 12) && is24Hour\n  const clockRef = React.useRef<View | null>(null)\n  // Hooks are nice, sometimes... :-)..\n  // We need the latest values, since the onPointerMove uses a closure to the function\n  const hoursRef = useLatest(hours)\n  const onChangeRef = useLatest(onChange)\n  const minutesRef = useLatest(minutes)\n  const focusedRef = useLatest(focused)\n  const is24HourRef = useLatest(is24Hour)\n  const modeRef = useLatest(mode)\n  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n      let angle = getAngle(x, y, circleSize)\n      if (focusedRef.current === clockTypes.hours) {\n        let hours24 = is24HourRef.current\n        let previousHourType = getHourType(hoursRef.current)\n        let pickedHours = getHours(angle, previousHourType)\n\n        let hours12AndPm = !hours24 && modeRef.current === 'PM'\n\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n        if (modeRef.current === 'AM' && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (\n          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||\n          pickedHours === 24\n        ) {\n          pickedHours = 0\n        }\n\n        if (hoursRef.current !== pickedHours || final) {\n          onChangeRef.current({\n            hours: pickedHours,\n            minutes: minutesRef.current,\n            focused: final ? clockTypes.minutes : undefined,\n          })\n        }\n      } else if (focusedRef.current === clockTypes.minutes) {\n        let pickedMinutes = getMinutes(angle)\n        if (minutesRef.current !== pickedMinutes) {\n          onChangeRef.current({\n            hours: hoursRef.current,\n            minutes: pickedMinutes,\n          })\n        }\n      }\n    },\n    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]\n  )\n  const panResponder = React.useRef(\n    PanResponder.create({\n      onPanResponderGrant: (e) => onPointerMove(e, false),\n      onPanResponderMove: (e) => onPointerMove(e, false),\n      onPanResponderRelease: (e) => onPointerMove(e, true),\n      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\n  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0\n  const pointerNumber = focused === clockTypes.hours ? hours : minutes\n  const degreesPerNumber = focused === clockTypes.hours ? 30 : 6\n  return (\n    <View\n      ref={clockRef}\n      {...panResponder.panHandlers}\n      style={[\n        styles.clock,\n        {\n          backgroundColor: theme.isV3\n            ? theme.colors.surfaceVariant\n            : theme.dark\n            ? Color(theme.colors.surface).lighten(1.4).hex()\n            : Color(theme.colors.surface).darken(0.1).hex(),\n        },\n      ]}\n      // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506\n      cursor={'pointer'}\n    >\n      <View\n        style={[\n          styles.line,\n          {\n            backgroundColor: theme.colors.primary,\n            transform: [\n              { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },\n              {\n                translateX:\n                  circleSize / 4 -\n                  (focused === clockTypes.hours &&\n                  pointerNumber >= 0 &&\n                  pointerNumber < 13\n                    ? 0\n                    : 4) +\n                  (focused === clockTypes.minutes ? 4 : 0) -\n                  dynamicSize / 2,\n              },\n            ],\n            width: circleSize / 2 - 4 - dynamicSize,\n          },\n        ]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[styles.endPoint, { backgroundColor: theme.colors.primary }]}\n        />\n      </View>\n      <View\n        style={[StyleSheet.absoluteFill, styles.center]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[\n            styles.middlePoint,\n            {\n              backgroundColor: theme.colors.primary,\n            },\n          ]}\n        />\n      </View>\n      <AnimatedClockSwitcher\n        focused={focused}\n        hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}\n        minutes={<AnalogClockMinutes minutes={minutes} />}\n      />\n    </View>\n  )\n}\nconst styles = StyleSheet.create({\n  clock: {\n    height: circleSize,\n    width: circleSize,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: circleSize / 2,\n  },\n  middlePoint: {\n    borderRadius: 4,\n    height: 8,\n    width: 8,\n  },\n  center: { justifyContent: 'center', alignItems: 'center' },\n  endPoint: {\n    borderRadius: 24,\n    height: 48,\n    width: 48,\n    position: 'absolute',\n    right: 0,\n    bottom: -23,\n  },\n  line: {\n    position: 'absolute',\n    height: 2,\n    borderRadius: 4,\n  },\n})\nfunction returnTrue() {\n  return true\n}\nexport default React.memo(AnalogClock)\n"],"mappings":"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"}
+{"version":3,"names":["Color","PanResponder","StyleSheet","View","useTheme","circleSize","clockTypes","getAngle","getHours","getHourType","getHourTypeFromOffset","getMinutes","hourTypes","React","useLatest","AnalogClockHours","AnimatedClockSwitcher","AnalogClockMinutes","DisplayModeContext","AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","mode","useContext","shortPointer","clockRef","useRef","hoursRef","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","current","hours24","previousHourType","pickedHours","hours12AndPm","hourTypeFromOffset","hours24AndPM","pm","undefined","pickedMinutes","panResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","isV3","colors","surfaceVariant","dark","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","memo"],"sources":["AnalogClock.tsx"],"sourcesContent":["import Color from 'color'\nimport {\n  GestureResponderEvent,\n  PanResponder,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport { useTheme } from 'react-native-paper'\nimport {\n  circleSize,\n  clockTypes,\n  getAngle,\n  getHours,\n  getHourType,\n  getHourTypeFromOffset,\n  getMinutes,\n  hourTypes,\n  PossibleClockTypes,\n} from './timeUtils'\nimport * as React from 'react'\nimport { useLatest } from '../utils'\nimport AnalogClockHours from './AnalogClockHours'\nimport AnimatedClockSwitcher from './AnimatedClockSwitcher'\nimport AnalogClockMinutes from './AnalogClockMinutes'\nimport { DisplayModeContext } from './TimePicker'\nfunction AnalogClock({\n  hours,\n  minutes,\n  focused,\n  is24Hour,\n  onChange,\n}: {\n  hours: number\n  minutes: number\n  focused: PossibleClockTypes\n  is24Hour: boolean\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n}) {\n  const theme = useTheme()\n  const { mode } = React.useContext(DisplayModeContext)\n  // used to make pointer shorter if hours are selected and above 12\n  const shortPointer = hours >= 12 && is24Hour\n  const clockRef = React.useRef<View | null>(null)\n  // Hooks are nice, sometimes... :-)..\n  // We need the latest values, since the onPointerMove uses a closure to the function\n  const hoursRef = useLatest(hours)\n  const onChangeRef = useLatest(onChange)\n  const minutesRef = useLatest(minutes)\n  const focusedRef = useLatest(focused)\n  const is24HourRef = useLatest(is24Hour)\n  const modeRef = useLatest(mode)\n  const onPointerMove = React.useCallback(\n    (e: GestureResponderEvent, final: boolean) => {\n      let x = e.nativeEvent.locationX\n      let y = e.nativeEvent.locationY\n      let angle = getAngle(x, y, circleSize)\n      if (focusedRef.current === clockTypes.hours) {\n        let hours24 = is24HourRef.current\n        let previousHourType = getHourType(hoursRef.current)\n        let pickedHours = getHours(angle, previousHourType)\n\n        let hours12AndPm = !hours24 && modeRef.current === 'PM'\n\n        let hourTypeFromOffset = getHourTypeFromOffset(x, y, circleSize)\n        let hours24AndPM = hours24 && hourTypeFromOffset === hourTypes.pm\n\n        // Avoiding the \"24h\"\n        // Should be 12h for 12 hours and PM mode\n\n        if (hours12AndPm || hours24AndPM) {\n          pickedHours += 12\n        }\n        if ((modeRef.current === 'AM' || hours24) && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (!hours24 && modeRef.current === 'AM' && pickedHours === 12) {\n          pickedHours = 0\n        }\n\n        if (pickedHours === 24) {\n          pickedHours = 12\n        }\n\n        if (hoursRef.current !== pickedHours || final) {\n          onChangeRef.current({\n            hours: pickedHours,\n            minutes: minutesRef.current,\n            focused: final ? clockTypes.minutes : undefined,\n          })\n        }\n      } else if (focusedRef.current === clockTypes.minutes) {\n        let pickedMinutes = getMinutes(angle)\n        if (minutesRef.current !== pickedMinutes) {\n          onChangeRef.current({\n            hours: hoursRef.current,\n            minutes: pickedMinutes,\n          })\n        }\n      }\n    },\n    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef, modeRef]\n  )\n  const panResponder = React.useRef(\n    PanResponder.create({\n      onPanResponderGrant: (e) => onPointerMove(e, false),\n      onPanResponderMove: (e) => onPointerMove(e, false),\n      onPanResponderRelease: (e) => onPointerMove(e, true),\n      onStartShouldSetPanResponder: returnTrue,\n      onStartShouldSetPanResponderCapture: () => false,\n      onMoveShouldSetPanResponder: returnTrue,\n      onMoveShouldSetPanResponderCapture: returnTrue,\n      onPanResponderTerminationRequest: returnTrue,\n      onShouldBlockNativeResponder: returnTrue,\n    })\n  ).current\n  const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0\n  const pointerNumber = focused === clockTypes.hours ? hours : minutes\n  const degreesPerNumber = focused === clockTypes.hours ? 30 : 6\n  return (\n    <View\n      ref={clockRef}\n      {...panResponder.panHandlers}\n      style={[\n        styles.clock,\n        {\n          backgroundColor: theme.isV3\n            ? theme.colors.surfaceVariant\n            : theme.dark\n            ? Color(theme.colors.surface).lighten(1.4).hex()\n            : Color(theme.colors.surface).darken(0.1).hex(),\n        },\n      ]}\n      // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506\n      cursor={'pointer'}\n    >\n      <View\n        style={[\n          styles.line,\n          {\n            backgroundColor: theme.colors.primary,\n            transform: [\n              { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },\n              {\n                translateX:\n                  circleSize / 4 -\n                  (focused === clockTypes.hours &&\n                  pointerNumber >= 0 &&\n                  pointerNumber < 13\n                    ? 0\n                    : 4) +\n                  (focused === clockTypes.minutes ? 4 : 0) -\n                  dynamicSize / 2,\n              },\n            ],\n            width: circleSize / 2 - 4 - dynamicSize,\n          },\n        ]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[styles.endPoint, { backgroundColor: theme.colors.primary }]}\n        />\n      </View>\n      <View\n        style={[StyleSheet.absoluteFill, styles.center]}\n        pointerEvents=\"none\"\n      >\n        <View\n          style={[\n            styles.middlePoint,\n            {\n              backgroundColor: theme.colors.primary,\n            },\n          ]}\n        />\n      </View>\n      <AnimatedClockSwitcher\n        focused={focused}\n        hours={<AnalogClockHours is24Hour={is24Hour} hours={hours} />}\n        minutes={<AnalogClockMinutes minutes={minutes} />}\n      />\n    </View>\n  )\n}\nconst styles = StyleSheet.create({\n  clock: {\n    height: circleSize,\n    width: circleSize,\n    position: 'relative',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: circleSize / 2,\n  },\n  middlePoint: {\n    borderRadius: 4,\n    height: 8,\n    width: 8,\n  },\n  center: { justifyContent: 'center', alignItems: 'center' },\n  endPoint: {\n    borderRadius: 24,\n    height: 48,\n    width: 48,\n    position: 'absolute',\n    right: 0,\n    bottom: -23,\n  },\n  line: {\n    position: 'absolute',\n    height: 2,\n    borderRadius: 4,\n  },\n})\nfunction returnTrue() {\n  return true\n}\nexport default React.memo(AnalogClock)\n"],"mappings":"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"}

package/lib/module/Time/AnalogClockHours.js

@@ -3,16 +3,12 @@ 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(_ref) {
   let {
     is24Hour,
     hours
   } = _ref;
-  const {
-    mode
-  } = React.useContext(DisplayModeContext);
   const outerRange = getHourNumbers(false, circleSize, 12, 12);
   const innerRange = getHourNumbers(true, circleSize, 12, 12);
   const color = useTextColorOnPrimary();
@@ -26,12 +22,12 @@ function AnalogClockHours(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.outerHourInner
   }, /*#__PURE__*/React.createElement(Text, {
-    style: hours === i + 1 ? {
+    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 ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(View, {
+  }, is24Hour && i + 1 === 12 ? '00' : i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(View, {
     key: i,
     pointerEvents: "none",
     style: [styles.innerHourRoot, {
@@ -42,11 +38,11 @@ function AnalogClockHours(_ref) {
     style: styles.innerHourInner
   }, /*#__PURE__*/React.createElement(Text, {
     selectable: false,
-    style: [i + 13 === hours || i + 13 === 24 && hours === 0 ? {
+    style: [i + 13 === hours || i + 13 === 24 && hours === 12 ? {
       color
     } : null],
     variant: "bodyLarge"
-  }, i + 13 === 24 ? '00' : i + 13)))) : null);
+  }, i + 13 === 24 ? '12' : i + 13)))) : null);
 }
 
 const styles = StyleSheet.create({

package/lib/module/Time/AnalogClockHours.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","Text","circleSize","useTextColorOnPrimary","DisplayModeContext","AnalogClockHours","is24Hour","hours","mode","useContext","outerRange","getHourNumbers","innerRange","color","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","size","count","arrayLength","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"sources":["AnalogClockHours.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text } from 'react-native-paper'\nimport { circleSize } from './timeUtils'\nimport { useTextColorOnPrimary } from '../utils'\nimport { DisplayModeContext } from './TimePicker'\n\nfunction AnalogClockHours({\n  is24Hour,\n  hours,\n}: {\n  is24Hour: boolean\n  hours: number\n}) {\n  const { mode } = React.useContext(DisplayModeContext)\n  const outerRange = getHourNumbers(false, circleSize, 12, 12)\n  const innerRange = getHourNumbers(true, circleSize, 12, 12)\n  const color = useTextColorOnPrimary()\n\n  return (\n    <>\n      {outerRange.map((a, i) => (\n        <View\n          key={i}\n          pointerEvents=\"none\"\n          style={[\n            styles.outerHourRoot,\n            {\n              top: a[1] || 0,\n              left: a[0] || 0,\n            },\n          ]}\n        >\n          <View style={styles.outerHourInner}>\n            {/* Display 00 instead of 12 for AM hours */}\n            <Text\n              style={hours === i + 1 ? { color } : null}\n              variant=\"bodyLarge\"\n              selectable={false}\n            >\n              {mode === 'AM' && is24Hour && i + 1 === 12 ? '00' : i + 1}\n            </Text>\n          </View>\n        </View>\n      ))}\n      {is24Hour\n        ? innerRange.map((a, i) => (\n            <View\n              key={i}\n              pointerEvents=\"none\"\n              style={[\n                styles.innerHourRoot,\n                {\n                  top: a[1] || 0,\n                  left: a[0] || 0,\n                },\n              ]}\n            >\n              <View style={styles.innerHourInner}>\n                <Text\n                  selectable={false}\n                  style={[\n                    i + 13 === hours || (i + 13 === 24 && hours === 0)\n                      ? { color }\n                      : null,\n                  ]}\n                  variant=\"bodyLarge\"\n                >\n                  {i + 13 === 24 ? '00' : i + 13}\n                </Text>\n              </View>\n            </View>\n          ))\n        : null}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  outerHourInner: { borderRadius: 24 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  innerHourInner: { borderRadius: 24 },\n})\n\nfunction getHourNumbers(\n  is24Hour: boolean,\n  size: number,\n  count: number,\n  arrayLength: number\n) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / (is24Hour ? 4 : 2.5)\n\n  angle = (-90 * Math.PI) / 180 + Math.PI / 6\n\n  return Array(arrayLength)\n    .fill(true)\n    .map(() => {\n      let x = Math.round(size / 2 + radius * Math.cos(angle))\n      let y = Math.round(size / 2 + radius * Math.sin(angle))\n      angle += step\n      return [x, y]\n    })\n}\n\nexport default React.memo(AnalogClockHours)\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA,SAASC,IAAT,QAAqB,oBAArB;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,SAASC,qBAAT,QAAsC,UAAtC;AACA,SAASC,kBAAT,QAAmC,cAAnC;;AAEA,SAASC,gBAAT,OAMG;EAAA,IANuB;IACxBC,QADwB;IAExBC;EAFwB,CAMvB;EACD,MAAM;IAAEC;EAAF,IAAWV,KAAK,CAACW,UAAN,CAAiBL,kBAAjB,CAAjB;EACA,MAAMM,UAAU,GAAGC,cAAc,CAAC,KAAD,EAAQT,UAAR,EAAoB,EAApB,EAAwB,EAAxB,CAAjC;EACA,MAAMU,UAAU,GAAGD,cAAc,CAAC,IAAD,EAAOT,UAAP,EAAmB,EAAnB,EAAuB,EAAvB,CAAjC;EACA,MAAMW,KAAK,GAAGV,qBAAqB,EAAnC;EAEA,oBACE,0CACGO,UAAU,CAACI,GAAX,CAAe,CAACC,CAAD,EAAIC,CAAJ,kBACd,oBAAC,IAAD;IACE,GAAG,EAAEA,CADP;IAEE,aAAa,EAAC,MAFhB;IAGE,KAAK,EAAE,CACLC,MAAM,CAACC,aADF,EAEL;MACEC,GAAG,EAAEJ,CAAC,CAAC,CAAD,CAAD,IAAQ,CADf;MAEEK,IAAI,EAAEL,CAAC,CAAC,CAAD,CAAD,IAAQ;IAFhB,CAFK;EAHT,gBAWE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACI;EAApB,gBAEE,oBAAC,IAAD;IACE,KAAK,EAAEd,KAAK,KAAKS,CAAC,GAAG,CAAd,GAAkB;MAAEH;IAAF,CAAlB,GAA8B,IADvC;IAEE,OAAO,EAAC,WAFV;IAGE,UAAU,EAAE;EAHd,GAKGL,IAAI,KAAK,IAAT,IAAiBF,QAAjB,IAA6BU,CAAC,GAAG,CAAJ,KAAU,EAAvC,GAA4C,IAA5C,GAAmDA,CAAC,GAAG,CAL1D,CAFF,CAXF,CADD,CADH,EAyBGV,QAAQ,GACLM,UAAU,CAACE,GAAX,CAAe,CAACC,CAAD,EAAIC,CAAJ,kBACb,oBAAC,IAAD;IACE,GAAG,EAAEA,CADP;IAEE,aAAa,EAAC,MAFhB;IAGE,KAAK,EAAE,CACLC,MAAM,CAACK,aADF,EAEL;MACEH,GAAG,EAAEJ,CAAC,CAAC,CAAD,CAAD,IAAQ,CADf;MAEEK,IAAI,EAAEL,CAAC,CAAC,CAAD,CAAD,IAAQ;IAFhB,CAFK;EAHT,gBAWE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACM;EAApB,gBACE,oBAAC,IAAD;IACE,UAAU,EAAE,KADd;IAEE,KAAK,EAAE,CACLP,CAAC,GAAG,EAAJ,KAAWT,KAAX,IAAqBS,CAAC,GAAG,EAAJ,KAAW,EAAX,IAAiBT,KAAK,KAAK,CAAhD,GACI;MAAEM;IAAF,CADJ,GAEI,IAHC,CAFT;IAOE,OAAO,EAAC;EAPV,GASGG,CAAC,GAAG,EAAJ,KAAW,EAAX,GAAgB,IAAhB,GAAuBA,CAAC,GAAG,EAT9B,CADF,CAXF,CADF,CADK,GA4BL,IArDN,CADF;AAyDD;;AAED,MAAMC,MAAM,GAAGjB,UAAU,CAACwB,MAAX,CAAkB;EAC/BN,aAAa,EAAE;IACbO,QAAQ,EAAE,UADG;IAEbC,cAAc,EAAE,QAFH;IAGbC,UAAU,EAAE,QAHC;IAIbC,MAAM,EAAE,EAJK;IAKbC,KAAK,EAAE,EALM;IAMbC,MAAM,EAAE,EANK;IAObC,UAAU,EAAE,CAAC,EAPA;IAQbC,SAAS,EAAE,CAAC,EARC;IASbC,YAAY,EAAE;EATD,CADgB;EAY/BZ,cAAc,EAAE;IAAEY,YAAY,EAAE;EAAhB,CAZe;EAa/BX,aAAa,EAAE;IACbG,QAAQ,EAAE,UADG;IAEbG,MAAM,EAAE,EAFK;IAGbF,cAAc,EAAE,QAHH;IAIbC,UAAU,EAAE,QAJC;IAKbE,KAAK,EAAE,EALM;IAMbC,MAAM,EAAE,EANK;IAObC,UAAU,EAAE,CAAC,EAPA;IAQbC,SAAS,EAAE,CAAC,EARC;IASbC,YAAY,EAAE;EATD,CAbgB;EAwB/BV,cAAc,EAAE;IAAEU,YAAY,EAAE;EAAhB;AAxBe,CAAlB,CAAf;;AA2BA,SAAStB,cAAT,CACEL,QADF,EAEE4B,IAFF,EAGEC,KAHF,EAIEC,WAJF,EAKE;EACA,IAAIC,KAAK,GAAG,CAAZ;EACA,IAAIC,IAAI,GAAI,IAAIC,IAAI,CAACC,EAAV,GAAgBL,KAA3B;EACA,IAAIM,MAAM,GAAGP,IAAI,IAAI5B,QAAQ,GAAG,CAAH,GAAO,GAAnB,CAAjB;EAEA+B,KAAK,GAAI,CAAC,EAAD,GAAME,IAAI,CAACC,EAAZ,GAAkB,GAAlB,GAAwBD,IAAI,CAACC,EAAL,GAAU,CAA1C;EAEA,OAAOE,KAAK,CAACN,WAAD,CAAL,CACJO,IADI,CACC,IADD,EAEJ7B,GAFI,CAEA,MAAM;IACT,IAAI8B,CAAC,GAAGL,IAAI,CAACM,KAAL,CAAWX,IAAI,GAAG,CAAP,GAAWO,MAAM,GAAGF,IAAI,CAACO,GAAL,CAAST,KAAT,CAA/B,CAAR;IACA,IAAIU,CAAC,GAAGR,IAAI,CAACM,KAAL,CAAWX,IAAI,GAAG,CAAP,GAAWO,MAAM,GAAGF,IAAI,CAACS,GAAL,CAASX,KAAT,CAA/B,CAAR;IACAA,KAAK,IAAIC,IAAT;IACA,OAAO,CAACM,CAAD,EAAIG,CAAJ,CAAP;EACD,CAPI,CAAP;AAQD;;AAED,4BAAejD,KAAK,CAACmD,IAAN,CAAW5C,gBAAX,CAAf"}
+{"version":3,"names":["React","View","StyleSheet","Text","circleSize","useTextColorOnPrimary","AnalogClockHours","is24Hour","hours","outerRange","getHourNumbers","innerRange","color","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","size","count","arrayLength","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","memo"],"sources":["AnalogClockHours.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { Text } from 'react-native-paper'\nimport { circleSize } from './timeUtils'\nimport { useTextColorOnPrimary } from '../utils'\n\nfunction AnalogClockHours({\n  is24Hour,\n  hours,\n}: {\n  is24Hour: boolean\n  hours: number\n}) {\n  const outerRange = getHourNumbers(false, circleSize, 12, 12)\n  const innerRange = getHourNumbers(true, circleSize, 12, 12)\n  const color = useTextColorOnPrimary()\n\n  return (\n    <>\n      {outerRange.map((a, i) => (\n        <View\n          key={i}\n          pointerEvents=\"none\"\n          style={[\n            styles.outerHourRoot,\n            {\n              top: a[1] || 0,\n              left: a[0] || 0,\n            },\n          ]}\n        >\n          <View style={styles.outerHourInner}>\n            {/* Display 00 instead of 12 for AM hours */}\n            <Text\n              style={\n                (!is24Hour && i + 1 === hours) ||\n                (hours === i + 1 && hours !== 12) ||\n                (i + 1 === 12 && hours === 0)\n                  ? { color }\n                  : null\n              }\n              variant=\"bodyLarge\"\n              selectable={false}\n            >\n              {is24Hour && i + 1 === 12 ? '00' : i + 1}\n            </Text>\n          </View>\n        </View>\n      ))}\n      {is24Hour\n        ? innerRange.map((a, i) => (\n            <View\n              key={i}\n              pointerEvents=\"none\"\n              style={[\n                styles.innerHourRoot,\n                {\n                  top: a[1] || 0,\n                  left: a[0] || 0,\n                },\n              ]}\n            >\n              <View style={styles.innerHourInner}>\n                <Text\n                  selectable={false}\n                  style={[\n                    i + 13 === hours || (i + 13 === 24 && hours === 12)\n                      ? { color }\n                      : null,\n                  ]}\n                  variant=\"bodyLarge\"\n                >\n                  {i + 13 === 24 ? '12' : i + 13}\n                </Text>\n              </View>\n            </View>\n          ))\n        : null}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  outerHourInner: { borderRadius: 24 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 48,\n    height: 48,\n    marginLeft: -24,\n    marginTop: -24,\n    borderRadius: 24,\n  },\n  innerHourInner: { borderRadius: 24 },\n})\n\nfunction getHourNumbers(\n  is24Hour: boolean,\n  size: number,\n  count: number,\n  arrayLength: number\n) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / (is24Hour ? 4 : 2.5)\n\n  angle = (-90 * Math.PI) / 180 + Math.PI / 6\n\n  return Array(arrayLength)\n    .fill(true)\n    .map(() => {\n      let x = Math.round(size / 2 + radius * Math.cos(angle))\n      let y = Math.round(size / 2 + radius * Math.sin(angle))\n      angle += step\n      return [x, y]\n    })\n}\n\nexport default React.memo(AnalogClockHours)\n"],"mappings":"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"}

package/lib/module/Time/TimeInput.js

@@ -14,6 +14,7 @@ function TimeInput(_ref, ref) {
     onPress,
     onChanged,
     inputType,
+    inputFontSize = 57,
     ...rest
   } = _ref;
   const [controlledValue, setControlledValue] = React.useState(`${value}`);
@@ -49,6 +50,7 @@ function TimeInput(_ref, ref) {
     style: [styles.input, // eslint-disable-next-line react-native/no-inline-styles
     {
       color,
+      fontSize: inputFontSize,
       backgroundColor,
       borderRadius: theme.roundness * 2,
       borderColor: theme.isV3 && highlighted ? theme.colors.onPrimaryContainer : undefined,
@@ -79,7 +81,6 @@ const styles = StyleSheet.create({
     width: 96
   },
   input: {
-    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96

package/lib/module/Time/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","TextInput","StyleSheet","Platform","useTheme","TouchableRipple","Color","inputTypes","useInputColors","TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","rest","controlledValue","setControlledValue","useState","onInnerChange","text","Number","useEffect","theme","inputFocused","setInputFocused","highlighted","picker","color","backgroundColor","formattedValue","length","styles","root","input","borderRadius","roundness","borderColor","isV3","colors","onPrimaryContainer","undefined","borderWidth","height","keyboard","dark","absoluteFill","buttonOverlay","OS","onSurface","fade","hex","create","position","width","fontSize","textAlign","textAlignVertical","overflow","forwardRef"],"sources":["TimeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  TextInput,\n  TextInputProps,\n  StyleSheet,\n  Platform,\n} from 'react-native'\nimport { useTheme, TouchableRipple } from 'react-native-paper'\n\nimport Color from 'color'\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  useInputColors,\n} from './timeUtils'\n\ninterface TimeInputProps\n  extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {\n  value: number\n  clockType: PossibleClockTypes\n  onPress?: (type: PossibleClockTypes) => any\n  pressed: boolean\n  onChanged: (n: number) => any\n  inputType: PossibleInputTypes\n}\n\nfunction TimeInput(\n  {\n    value,\n    clockType,\n    pressed,\n    onPress,\n    onChanged,\n    inputType,\n    ...rest\n  }: TimeInputProps,\n  ref: any\n) {\n  const [controlledValue, setControlledValue] = React.useState<string>(\n    `${value}`\n  )\n\n  const onInnerChange = (text: string) => {\n    setControlledValue(text)\n    if (text !== '' && text !== '0') {\n      onChanged(Number(text))\n    }\n  }\n\n  React.useEffect(() => {\n    setControlledValue(`${value}`)\n  }, [value])\n\n  const theme = useTheme()\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false)\n\n  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused\n\n  const { color, backgroundColor } = useInputColors(highlighted)\n\n  let formattedValue = controlledValue\n  if (!inputFocused) {\n    formattedValue =\n      controlledValue.length === 1\n        ? `0${controlledValue}`\n        : `${controlledValue}`\n  }\n\n  return (\n    <View style={styles.root}>\n      <TextInput\n        ref={ref}\n        style={[\n          styles.input,\n          // eslint-disable-next-line react-native/no-inline-styles\n          {\n            color,\n            backgroundColor,\n            borderRadius: theme.roundness * 2,\n            borderColor:\n              theme.isV3 && highlighted\n                ? theme.colors.onPrimaryContainer\n                : undefined,\n            borderWidth: theme.isV3 && highlighted ? 2 : 0,\n            height: inputType === inputTypes.keyboard ? 72 : 80,\n          },\n        ]}\n        value={formattedValue}\n        maxLength={2}\n        onFocus={() => setInputFocused(true)}\n        onBlur={() => setInputFocused(false)}\n        keyboardAppearance={theme.dark ? 'dark' : 'default'}\n        keyboardType=\"number-pad\"\n        onChangeText={onInnerChange}\n        {...rest}\n      />\n      {onPress && inputType === inputTypes.picker ? (\n        <TouchableRipple\n          style={[\n            StyleSheet.absoluteFill,\n            styles.buttonOverlay,\n            {\n              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={\n            Platform.OS !== 'ios'\n              ? Color(theme.colors.onSurface).fade(0.7).hex()\n              : undefined\n          }\n          onPress={() => onPress(clockType)}\n          borderless={true}\n        >\n          <View />\n        </TouchableRipple>\n      ) : null}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: { position: 'relative', height: 80, width: 96 },\n  input: {\n    fontSize: 57,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"],"mappings":"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"}
+{"version":3,"names":["React","View","TextInput","StyleSheet","Platform","useTheme","TouchableRipple","Color","inputTypes","useInputColors","TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","inputFontSize","rest","controlledValue","setControlledValue","useState","onInnerChange","text","Number","useEffect","theme","inputFocused","setInputFocused","highlighted","picker","color","backgroundColor","formattedValue","length","styles","root","input","fontSize","borderRadius","roundness","borderColor","isV3","colors","onPrimaryContainer","undefined","borderWidth","height","keyboard","dark","absoluteFill","buttonOverlay","OS","onSurface","fade","hex","create","position","width","textAlign","textAlignVertical","overflow","forwardRef"],"sources":["TimeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  TextInput,\n  TextInputProps,\n  StyleSheet,\n  Platform,\n} from 'react-native'\nimport { useTheme, TouchableRipple } from 'react-native-paper'\n\nimport Color from 'color'\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  useInputColors,\n} from './timeUtils'\n\ninterface TimeInputProps\n  extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'> {\n  value: number\n  clockType: PossibleClockTypes\n  onPress?: (type: PossibleClockTypes) => any\n  pressed: boolean\n  onChanged: (n: number) => any\n  inputType: PossibleInputTypes\n  inputFontSize?: number\n}\n\nfunction TimeInput(\n  {\n    value,\n    clockType,\n    pressed,\n    onPress,\n    onChanged,\n    inputType,\n    inputFontSize = 57,\n    ...rest\n  }: TimeInputProps,\n  ref: any\n) {\n  const [controlledValue, setControlledValue] = React.useState<string>(\n    `${value}`\n  )\n\n  const onInnerChange = (text: string) => {\n    setControlledValue(text)\n    if (text !== '' && text !== '0') {\n      onChanged(Number(text))\n    }\n  }\n\n  React.useEffect(() => {\n    setControlledValue(`${value}`)\n  }, [value])\n\n  const theme = useTheme()\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false)\n\n  const highlighted = inputType === inputTypes.picker ? pressed : inputFocused\n\n  const { color, backgroundColor } = useInputColors(highlighted)\n\n  let formattedValue = controlledValue\n  if (!inputFocused) {\n    formattedValue =\n      controlledValue.length === 1\n        ? `0${controlledValue}`\n        : `${controlledValue}`\n  }\n\n  return (\n    <View style={styles.root}>\n      <TextInput\n        ref={ref}\n        style={[\n          styles.input,\n          // eslint-disable-next-line react-native/no-inline-styles\n          {\n            color,\n            fontSize: inputFontSize,\n            backgroundColor,\n            borderRadius: theme.roundness * 2,\n            borderColor:\n              theme.isV3 && highlighted\n                ? theme.colors.onPrimaryContainer\n                : undefined,\n            borderWidth: theme.isV3 && highlighted ? 2 : 0,\n            height: inputType === inputTypes.keyboard ? 72 : 80,\n          },\n        ]}\n        value={formattedValue}\n        maxLength={2}\n        onFocus={() => setInputFocused(true)}\n        onBlur={() => setInputFocused(false)}\n        keyboardAppearance={theme.dark ? 'dark' : 'default'}\n        keyboardType=\"number-pad\"\n        onChangeText={onInnerChange}\n        {...rest}\n      />\n      {onPress && inputType === inputTypes.picker ? (\n        <TouchableRipple\n          style={[\n            StyleSheet.absoluteFill,\n            styles.buttonOverlay,\n            {\n              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={\n            Platform.OS !== 'ios'\n              ? Color(theme.colors.onSurface).fade(0.7).hex()\n              : undefined\n          }\n          onPress={() => onPress(clockType)}\n          borderless={true}\n        >\n          <View />\n        </TouchableRipple>\n      ) : null}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: { position: 'relative', height: 80, width: 96 },\n  input: {\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,IADF,EAEEC,SAFF,EAIEC,UAJF,EAKEC,QALF,QAMO,cANP;AAOA,SAASC,QAAT,EAAmBC,eAAnB,QAA0C,oBAA1C;AAEA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SACEC,UADF,EAIEC,cAJF,QAKO,aALP;;AAkBA,SAASC,SAAT,OAWEC,GAXF,EAYE;EAAA,IAXA;IACEC,KADF;IAEEC,SAFF;IAGEC,OAHF;IAIEC,OAJF;IAKEC,SALF;IAMEC,SANF;IAOEC,aAAa,GAAG,EAPlB;IAQE,GAAGC;EARL,CAWA;EACA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCrB,KAAK,CAACsB,QAAN,CAC3C,GAAEV,KAAM,EADmC,CAA9C;;EAIA,MAAMW,aAAa,GAAIC,IAAD,IAAkB;IACtCH,kBAAkB,CAACG,IAAD,CAAlB;;IACA,IAAIA,IAAI,KAAK,EAAT,IAAeA,IAAI,KAAK,GAA5B,EAAiC;MAC/BR,SAAS,CAACS,MAAM,CAACD,IAAD,CAAP,CAAT;IACD;EACF,CALD;;EAOAxB,KAAK,CAAC0B,SAAN,CAAgB,MAAM;IACpBL,kBAAkB,CAAE,GAAET,KAAM,EAAV,CAAlB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,MAAMe,KAAK,GAAGtB,QAAQ,EAAtB;EACA,MAAM,CAACuB,YAAD,EAAeC,eAAf,IAAkC7B,KAAK,CAACsB,QAAN,CAAwB,KAAxB,CAAxC;EAEA,MAAMQ,WAAW,GAAGb,SAAS,KAAKT,UAAU,CAACuB,MAAzB,GAAkCjB,OAAlC,GAA4Cc,YAAhE;EAEA,MAAM;IAAEI,KAAF;IAASC;EAAT,IAA6BxB,cAAc,CAACqB,WAAD,CAAjD;EAEA,IAAII,cAAc,GAAGd,eAArB;;EACA,IAAI,CAACQ,YAAL,EAAmB;IACjBM,cAAc,GACZd,eAAe,CAACe,MAAhB,KAA2B,CAA3B,GACK,IAAGf,eAAgB,EADxB,GAEK,GAAEA,eAAgB,EAHzB;EAID;;EAED,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEgB,MAAM,CAACC;EAApB,gBACE,oBAAC,SAAD;IACE,GAAG,EAAE1B,GADP;IAEE,KAAK,EAAE,CACLyB,MAAM,CAACE,KADF,EAEL;IACA;MACEN,KADF;MAEEO,QAAQ,EAAErB,aAFZ;MAGEe,eAHF;MAIEO,YAAY,EAAEb,KAAK,CAACc,SAAN,GAAkB,CAJlC;MAKEC,WAAW,EACTf,KAAK,CAACgB,IAAN,IAAcb,WAAd,GACIH,KAAK,CAACiB,MAAN,CAAaC,kBADjB,GAEIC,SARR;MASEC,WAAW,EAAEpB,KAAK,CAACgB,IAAN,IAAcb,WAAd,GAA4B,CAA5B,GAAgC,CAT/C;MAUEkB,MAAM,EAAE/B,SAAS,KAAKT,UAAU,CAACyC,QAAzB,GAAoC,EAApC,GAAyC;IAVnD,CAHK,CAFT;IAkBE,KAAK,EAAEf,cAlBT;IAmBE,SAAS,EAAE,CAnBb;IAoBE,OAAO,EAAE,MAAML,eAAe,CAAC,IAAD,CApBhC;IAqBE,MAAM,EAAE,MAAMA,eAAe,CAAC,KAAD,CArB/B;IAsBE,kBAAkB,EAAEF,KAAK,CAACuB,IAAN,GAAa,MAAb,GAAsB,SAtB5C;IAuBE,YAAY,EAAC,YAvBf;IAwBE,YAAY,EAAE3B;EAxBhB,GAyBMJ,IAzBN,EADF,EA4BGJ,OAAO,IAAIE,SAAS,KAAKT,UAAU,CAACuB,MAApC,gBACC,oBAAC,eAAD;IACE,KAAK,EAAE,CACL5B,UAAU,CAACgD,YADN,EAELf,MAAM,CAACgB,aAFF,EAGL;MACEZ,YAAY,EAAEb,KAAK,CAACc;IADtB,CAHK,CADT;IAQE,WAAW,EACTrC,QAAQ,CAACiD,EAAT,KAAgB,KAAhB,GACI9C,KAAK,CAACoB,KAAK,CAACiB,MAAN,CAAaU,SAAd,CAAL,CAA8BC,IAA9B,CAAmC,GAAnC,EAAwCC,GAAxC,EADJ,GAEIV,SAXR;IAaE,OAAO,EAAE,MAAM/B,OAAO,CAACF,SAAD,CAbxB;IAcE,UAAU,EAAE;EAdd,gBAgBE,oBAAC,IAAD,OAhBF,CADD,GAmBG,IA/CN,CADF;AAmDD;;AAED,MAAMuB,MAAM,GAAGjC,UAAU,CAACsD,MAAX,CAAkB;EAC/BpB,IAAI,EAAE;IAAEqB,QAAQ,EAAE,UAAZ;IAAwBV,MAAM,EAAE,EAAhC;IAAoCW,KAAK,EAAE;EAA3C,CADyB;EAE/BrB,KAAK,EAAE;IACLsB,SAAS,EAAE,QADN;IAELC,iBAAiB,EAAE,QAFd;IAGLF,KAAK,EAAE;EAHF,CAFwB;EAO/BP,aAAa,EAAE;IAAEU,QAAQ,EAAE;EAAZ;AAPgB,CAAlB,CAAf;AAUA,4BAAe9D,KAAK,CAAC+D,UAAN,CAAiBrD,SAAjB,CAAf"}

package/lib/module/Time/TimeInputs.js

@@ -15,7 +15,8 @@ function TimeInputs(_ref) {
     focused,
     inputType,
     onChange,
-    is24Hour
+    is24Hour,
+    inputFontSize
   } = _ref;
   const startInput = React.useRef(null);
   const endInput = React.useRef(null);
@@ -43,6 +44,7 @@ function TimeInputs(_ref) {
     style: styles.column
   }, /*#__PURE__*/React.createElement(TimeInput, {
     ref: startInput,
+    inputFontSize: inputFontSize,
     placeholder: '00',
     value: toHourInputFormat(hours, is24Hour),
     clockType: clockTypes.hours,
@@ -90,6 +92,7 @@ function TimeInputs(_ref) {
     style: styles.column
   }, /*#__PURE__*/React.createElement(TimeInput, {
     ref: endInput,
+    inputFontSize: inputFontSize,
     placeholder: '00',
     value: minutes,
     clockType: clockTypes.minutes,

package/lib/module/Time/TimeInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","Text","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","Color","TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","useRef","endInput","dimensions","isLandscape","width","height","theme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","onChangeHours","newHours","styles","inputContainer","inputContainerLandscape","column","dark","colors","primary","darken","hex","newHoursFromInput","hoursAndMinutesSeparator","marginBottom","spaceDot","dot","backgroundColor","isV3","onSurface","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { MD2Theme, Text, useTheme } from 'react-native-paper'\n\nimport {\n  clockTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\nimport TimeInput from './TimeInput'\nimport AmPmSwitcher from './AmPmSwitcher'\nimport { useLatest } from '../utils'\nimport Color from 'color'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n}: {\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n  is24Hour: boolean\n}) {\n  const startInput = React.useRef<TextInputNative | null>(null)\n  const endInput = React.useRef<TextInputNative | null>(null)\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n  const theme = useTheme()\n\n  const onSubmitStartInput = React.useCallback(() => {\n    if (endInput.current) {\n      endInput.current.focus()\n    }\n  }, [endInput])\n\n  const onSubmitEndInput = React.useCallback(() => {\n    // TODO: close modal and persist time\n  }, [])\n\n  const minutesRef = useLatest(minutes)\n  const onChangeHours = React.useCallback(\n    (newHours: number) => {\n      onChange({\n        hours: newHours,\n        minutes: minutesRef.current,\n        focused: clockTypes.hours,\n      })\n    },\n    [onChange, minutesRef]\n  )\n\n  return (\n    <View\n      style={[\n        styles.inputContainer,\n        isLandscape && styles.inputContainerLandscape,\n      ]}\n    >\n      <View style={styles.column}>\n        <TimeInput\n          ref={startInput}\n          placeholder={'00'}\n          value={toHourInputFormat(hours, is24Hour)}\n          clockType={clockTypes.hours}\n          pressed={focused === clockTypes.hours}\n          onPress={onFocusInput}\n          inputType={inputType}\n          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          returnKeyType={'next'}\n          onSubmitEditing={onSubmitStartInput}\n          blurOnSubmit={false}\n          onChanged={(newHoursFromInput) => {\n            let newHours = toHourOutputFormat(\n              newHoursFromInput,\n              hours,\n              is24Hour\n            )\n            if (newHoursFromInput > 24) {\n              newHours = 24\n            }\n            onChange({\n              hours: newHours,\n              minutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Hour</Text>\n        ) : null}\n      </View>\n      <View\n        style={[\n          styles.hoursAndMinutesSeparator,\n          // eslint-disable-next-line react-native/no-inline-styles\n          { marginBottom: inputType === 'keyboard' ? 24 : 0 },\n        ]}\n      >\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.betweenDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.spaceDot} />\n      </View>\n      <View style={styles.column}>\n        <TimeInput\n          ref={endInput}\n          placeholder={'00'}\n          value={minutes}\n          clockType={clockTypes.minutes}\n          pressed={focused === clockTypes.minutes}\n          onPress={onFocusInput}\n          inputType={inputType}\n          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          onSubmitEditing={onSubmitEndInput}\n          onChanged={(newMinutesFromInput) => {\n            let newMinutes = newMinutesFromInput\n            if (newMinutesFromInput > 59) {\n              newMinutes = 59\n            }\n            onChange({\n              hours,\n              minutes: newMinutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Minute</Text>\n        ) : null}\n      </View>\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher\n            hours={hours}\n            onChange={onChangeHours}\n            inputType={inputType}\n          />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  column: {\n    flexDirection: 'column',\n  },\n  spaceBetweenInputsAndSwitcher: { width: 12 },\n  inputContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainerLandscape: {\n    flex: 1,\n  },\n  hoursAndMinutesSeparator: {\n    fontSize: 65,\n    width: 24,\n    alignItems: 'center',\n  },\n  spaceDot: {\n    flex: 1,\n  },\n  dot: {\n    width: 7,\n    height: 7,\n    borderRadius: 7 / 2,\n  },\n  betweenDot: {\n    height: 12,\n  },\n})\n\nexport default React.memo(TimeInputs)\n"],"mappings":"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"}
+{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","Text","useTheme","clockTypes","toHourInputFormat","toHourOutputFormat","TimeInput","AmPmSwitcher","useLatest","Color","TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","inputFontSize","startInput","useRef","endInput","dimensions","isLandscape","width","height","theme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","onChangeHours","newHours","styles","inputContainer","inputContainerLandscape","column","dark","colors","primary","darken","hex","newHoursFromInput","hoursAndMinutesSeparator","marginBottom","spaceDot","dot","backgroundColor","isV3","onSurface","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { MD2Theme, Text, useTheme } from 'react-native-paper'\n\nimport {\n  clockTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\nimport TimeInput from './TimeInput'\nimport AmPmSwitcher from './AmPmSwitcher'\nimport { useLatest } from '../utils'\nimport Color from 'color'\n\nfunction TimeInputs({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  is24Hour,\n  inputFontSize,\n}: {\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: (hoursMinutesAndFocused: {\n    hours: number\n    minutes: number\n    focused?: undefined | PossibleClockTypes\n  }) => any\n  is24Hour: boolean\n  inputFontSize?: number\n}) {\n  const startInput = React.useRef<TextInputNative | null>(null)\n  const endInput = React.useRef<TextInputNative | null>(null)\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n  const theme = useTheme()\n\n  const onSubmitStartInput = React.useCallback(() => {\n    if (endInput.current) {\n      endInput.current.focus()\n    }\n  }, [endInput])\n\n  const onSubmitEndInput = React.useCallback(() => {\n    // TODO: close modal and persist time\n  }, [])\n\n  const minutesRef = useLatest(minutes)\n  const onChangeHours = React.useCallback(\n    (newHours: number) => {\n      onChange({\n        hours: newHours,\n        minutes: minutesRef.current,\n        focused: clockTypes.hours,\n      })\n    },\n    [onChange, minutesRef]\n  )\n\n  return (\n    <View\n      style={[\n        styles.inputContainer,\n        isLandscape && styles.inputContainerLandscape,\n      ]}\n    >\n      <View style={styles.column}>\n        <TimeInput\n          ref={startInput}\n          inputFontSize={inputFontSize}\n          placeholder={'00'}\n          value={toHourInputFormat(hours, is24Hour)}\n          clockType={clockTypes.hours}\n          pressed={focused === clockTypes.hours}\n          onPress={onFocusInput}\n          inputType={inputType}\n          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          returnKeyType={'next'}\n          onSubmitEditing={onSubmitStartInput}\n          blurOnSubmit={false}\n          onChanged={(newHoursFromInput) => {\n            let newHours = toHourOutputFormat(\n              newHoursFromInput,\n              hours,\n              is24Hour\n            )\n            if (newHoursFromInput > 24) {\n              newHours = 24\n            }\n            onChange({\n              hours: newHours,\n              minutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Hour</Text>\n        ) : null}\n      </View>\n      <View\n        style={[\n          styles.hoursAndMinutesSeparator,\n          // eslint-disable-next-line react-native/no-inline-styles\n          { marginBottom: inputType === 'keyboard' ? 24 : 0 },\n        ]}\n      >\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.betweenDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onSurface\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.spaceDot} />\n      </View>\n      <View style={styles.column}>\n        <TimeInput\n          ref={endInput}\n          inputFontSize={inputFontSize}\n          placeholder={'00'}\n          value={minutes}\n          clockType={clockTypes.minutes}\n          pressed={focused === clockTypes.minutes}\n          onPress={onFocusInput}\n          inputType={inputType}\n          selectionColor={\n            theme.dark\n              ? Color(theme.colors.primary).darken(0.2).hex()\n              : theme.colors.primary\n          }\n          onSubmitEditing={onSubmitEndInput}\n          onChanged={(newMinutesFromInput) => {\n            let newMinutes = newMinutesFromInput\n            if (newMinutesFromInput > 59) {\n              newMinutes = 59\n            }\n            onChange({\n              hours,\n              minutes: newMinutes,\n            })\n          }}\n        />\n        {inputType === 'keyboard' ? (\n          <Text variant=\"bodySmall\">Minute</Text>\n        ) : null}\n      </View>\n      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher\n            hours={hours}\n            onChange={onChangeHours}\n            inputType={inputType}\n          />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  column: {\n    flexDirection: 'column',\n  },\n  spaceBetweenInputsAndSwitcher: { width: 12 },\n  inputContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainerLandscape: {\n    flex: 1,\n  },\n  hoursAndMinutesSeparator: {\n    fontSize: 65,\n    width: 24,\n    alignItems: 'center',\n  },\n  spaceDot: {\n    flex: 1,\n  },\n  dot: {\n    width: 7,\n    height: 7,\n    borderRadius: 7 / 2,\n  },\n  betweenDot: {\n    height: 12,\n  },\n})\n\nexport default React.memo(TimeInputs)\n"],"mappings":"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"}

package/lib/module/Time/TimePicker.js

@@ -17,13 +17,19 @@ function TimePicker(_ref) {
     focused,
     inputType,
     onChange,
-    locale
+    locale,
+    use24HourClock,
+    inputFontSize
   } = _ref;
   const [displayMode, setDisplayMode] = React.useState(undefined);
   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(() => {
+    if (use24HourClock !== undefined) {
+      return use24HourClock;
+    }
+
     const formatter = new Intl.DateTimeFormat(locale, {
       hour: '2-digit',
       minute: '2-digit',
@@ -31,7 +37,7 @@ function TimePicker(_ref) {
     });
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)));
     return formatted.includes('23');
-  }, [locale]); // Initialize display Mode according the hours value
+  }, [locale, use24HourClock]); // Initialize display Mode according the hours value
 
   React.useEffect(() => {
     if (hours >= 12) {
@@ -56,6 +62,7 @@ function TimePicker(_ref) {
     }] : styles.rootPortrait
   }, /*#__PURE__*/React.createElement(TimeInputs, {
     inputType: inputType,
+    inputFontSize: inputFontSize,
     hours: hours,
     minutes: minutes,
     is24Hour: is24Hour,

package/lib/module/Time/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","inputTypes","toHourInputFormat","toHourOutputFormat","AnalogClock","circleSize","TimeInputs","DisplayModeContext","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","displayMode","setDisplayMode","useState","undefined","dimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","styles","rootLandscape","picker","rootPortrait","clockContainer","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"sources":["TimePicker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet, useWindowDimensions } from 'react-native'\n\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\n\nimport AnalogClock from './AnalogClock'\nimport { circleSize } from './timeUtils'\nimport TimeInputs from './TimeInputs'\n\nexport const DisplayModeContext = React.createContext<{\n  mode: 'AM' | 'PM' | undefined\n  setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>\n}>({ mode: 'AM', setMode: () => {} })\n\ntype onChangeFunc = ({\n  hours,\n  minutes,\n  focused,\n}: {\n  hours: number\n  minutes: number\n  focused?: undefined | PossibleClockTypes\n}) => any\n\nfunction TimePicker({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  locale,\n}: {\n  locale?: undefined | string\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: onChangeFunc\n}) {\n  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(\n    undefined\n  )\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n\n  // method to check whether we have 24 hours in clock or 12\n  const is24Hour = React.useMemo(() => {\n    const formatter = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: 'UTC',\n    })\n    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))\n    return formatted.includes('23')\n  }, [locale])\n\n  // Initialize display Mode according the hours value\n  React.useEffect(() => {\n    if (hours >= 12) {\n      setDisplayMode('PM')\n    } else {\n      setDisplayMode('AM')\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onInnerChange = React.useCallback<onChangeFunc>(\n    (params) => {\n      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)\n      onChange(params)\n    },\n    [onChange, hours, is24Hour]\n  )\n\n  return (\n    <DisplayModeContext.Provider\n      value={{ mode: displayMode, setMode: setDisplayMode }}\n    >\n      <View\n        style={\n          isLandscape\n            ? [\n                styles.rootLandscape,\n                {\n                  width:\n                    24 * 3 +\n                    96 * 2 +\n                    52 +\n                    (inputType === inputTypes.picker\n                      ? circleSize\n                      : -circleSize),\n                },\n              ]\n            : styles.rootPortrait\n        }\n      >\n        <TimeInputs\n          inputType={inputType}\n          hours={hours}\n          minutes={minutes}\n          is24Hour={is24Hour}\n          onChange={onChange}\n          onFocusInput={onFocusInput}\n          focused={focused}\n        />\n        {inputType === inputTypes.picker ? (\n          <View style={styles.clockContainer}>\n            <AnalogClock\n              hours={toHourInputFormat(hours, is24Hour)}\n              minutes={minutes}\n              focused={focused}\n              is24Hour={is24Hour}\n              onChange={onInnerChange}\n            />\n          </View>\n        ) : null}\n      </View>\n    </DisplayModeContext.Provider>\n  )\n}\n\nconst styles = StyleSheet.create({\n  rootLandscape: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  rootPortrait: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"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"}
+{"version":3,"names":["React","View","StyleSheet","useWindowDimensions","inputTypes","toHourInputFormat","toHourOutputFormat","AnalogClock","circleSize","TimeInputs","DisplayModeContext","createContext","mode","setMode","TimePicker","hours","minutes","onFocusInput","focused","inputType","onChange","locale","use24HourClock","inputFontSize","displayMode","setDisplayMode","useState","undefined","dimensions","isLandscape","width","height","is24Hour","useMemo","formatter","Intl","DateTimeFormat","hour","minute","timeZone","formatted","format","Date","UTC","includes","useEffect","onInnerChange","useCallback","params","styles","rootLandscape","picker","rootPortrait","clockContainer","create","flexDirection","alignItems","justifyContent","paddingTop","paddingLeft","paddingRight","memo"],"sources":["TimePicker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet, useWindowDimensions } from 'react-native'\n\nimport {\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  toHourInputFormat,\n  toHourOutputFormat,\n} from './timeUtils'\n\nimport AnalogClock from './AnalogClock'\nimport { circleSize } from './timeUtils'\nimport TimeInputs from './TimeInputs'\n\nexport const DisplayModeContext = React.createContext<{\n  mode: 'AM' | 'PM' | undefined\n  setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>\n}>({ mode: 'AM', setMode: () => {} })\n\ntype onChangeFunc = ({\n  hours,\n  minutes,\n  focused,\n}: {\n  hours: number\n  minutes: number\n  focused?: undefined | PossibleClockTypes\n}) => any\n\nfunction TimePicker({\n  hours,\n  minutes,\n  onFocusInput,\n  focused,\n  inputType,\n  onChange,\n  locale,\n  use24HourClock,\n  inputFontSize,\n}: {\n  locale?: undefined | string\n  inputType: PossibleInputTypes\n  focused: PossibleClockTypes\n  hours: number\n  minutes: number\n  onFocusInput: (type: PossibleClockTypes) => any\n  onChange: onChangeFunc\n  use24HourClock?: boolean\n  inputFontSize?: number\n}) {\n  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(\n    undefined\n  )\n  const dimensions = useWindowDimensions()\n  const isLandscape = dimensions.width > dimensions.height\n\n  // method to check whether we have 24 hours in clock or 12\n  const is24Hour = React.useMemo(() => {\n    if (use24HourClock !== undefined) {\n      return use24HourClock\n    }\n    const formatter = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: 'UTC',\n    })\n    const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))\n    return formatted.includes('23')\n  }, [locale, use24HourClock])\n\n  // Initialize display Mode according the hours value\n  React.useEffect(() => {\n    if (hours >= 12) {\n      setDisplayMode('PM')\n    } else {\n      setDisplayMode('AM')\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onInnerChange = React.useCallback<onChangeFunc>(\n    (params) => {\n      params.hours = toHourOutputFormat(params.hours, hours, is24Hour)\n      onChange(params)\n    },\n    [onChange, hours, is24Hour]\n  )\n\n  return (\n    <DisplayModeContext.Provider\n      value={{ mode: displayMode, setMode: setDisplayMode }}\n    >\n      <View\n        style={\n          isLandscape\n            ? [\n                styles.rootLandscape,\n                {\n                  width:\n                    24 * 3 +\n                    96 * 2 +\n                    52 +\n                    (inputType === inputTypes.picker\n                      ? circleSize\n                      : -circleSize),\n                },\n              ]\n            : styles.rootPortrait\n        }\n      >\n        <TimeInputs\n          inputType={inputType}\n          inputFontSize={inputFontSize}\n          hours={hours}\n          minutes={minutes}\n          is24Hour={is24Hour}\n          onChange={onChange}\n          onFocusInput={onFocusInput}\n          focused={focused}\n        />\n        {inputType === inputTypes.picker ? (\n          <View style={styles.clockContainer}>\n            <AnalogClock\n              hours={toHourInputFormat(hours, is24Hour)}\n              minutes={minutes}\n              focused={focused}\n              is24Hour={is24Hour}\n              onChange={onInnerChange}\n            />\n          </View>\n        ) : null}\n      </View>\n    </DisplayModeContext.Provider>\n  )\n}\n\nconst styles = StyleSheet.create({\n  rootLandscape: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  rootPortrait: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },\n})\n\nexport default React.memo(TimePicker)\n"],"mappings":"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"}

package/lib/module/Time/TimePickerModal.js

@@ -20,7 +20,9 @@ export function TimePickerModal(_ref) {
     animationType = 'none',
     locale,
     keyboardIcon = 'keyboard-outline',
-    clockIcon = 'clock-outline'
+    clockIcon = 'clock-outline',
+    use24HourClock,
+    inputFontSize
   } = _ref;
   const theme = useTheme();
   let textFont;
@@ -92,6 +94,8 @@ export function TimePickerModal(_ref) {
   }, /*#__PURE__*/React.createElement(TimePicker, {
     locale: locale,
     inputType: inputType,
+    use24HourClock: use24HourClock,
+    inputFontSize: inputFontSize,
     focused: focused,
     hours: localHours,
     minutes: localMinutes,

package/lib/module/Time/TimePickerModal.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Modal","StyleSheet","View","Text","Animated","TouchableWithoutFeedback","KeyboardAvoidingView","Button","IconButton","overlay","useTheme","TimePicker","clockTypes","getTimeInputTypeIcon","inputTypes","reverseInputTypes","supportedOrientations","TimePickerModal","visible","onDismiss","onConfirm","hours","minutes","label","uppercase","cancelLabel","confirmLabel","animationType","locale","keyboardIcon","clockIcon","theme","textFont","labelText","isV3","fonts","labelMedium","medium","inputType","setInputType","useState","picker","focused","setFocused","localHours","setLocalHours","getHours","localMinutes","setLocalMinutes","getMinutes","keyboard","useEffect","onFocusInput","useCallback","type","onChange","params","absoluteFill","styles","modalBackground","backgroundColor","colors","backdrop","modalRoot","keyboardView","modalContent","dark","elevation","level3","surface","borderRadius","roundness","labelContainer","color","onSurfaceVariant","text","toUpperCase","timePickerContainer","bottom","inputTypeToggle","fill","undefined","Date","create","justifyContent","alignItems","flex","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","minWidth","paddingVertical","paddingLeft","paddingRight","paddingTop","letterSpacing","fontSize","paddingBottom","flexDirection","padding","margin","memo"],"sources":["TimePickerModal.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  Modal,\n  StyleSheet,\n  View,\n  Text,\n  Animated,\n  TouchableWithoutFeedback,\n  KeyboardAvoidingView,\n} from 'react-native'\n\nimport {\n  Button,\n  IconButton,\n  MD2Theme,\n  overlay,\n  useTheme,\n} from 'react-native-paper'\n\nimport TimePicker from './TimePicker'\nimport {\n  clockTypes,\n  getTimeInputTypeIcon,\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  reverseInputTypes,\n} from './timeUtils'\n\nconst supportedOrientations: (\n  | 'portrait'\n  | 'portrait-upside-down'\n  | 'landscape'\n  | 'landscape-left'\n  | 'landscape-right'\n)[] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\nexport function TimePickerModal({\n  visible,\n  onDismiss,\n  onConfirm,\n  hours,\n  minutes,\n  label = 'Select time',\n  uppercase = true,\n  cancelLabel = 'Cancel',\n  confirmLabel = 'Ok',\n  animationType = 'none',\n  locale,\n  keyboardIcon = 'keyboard-outline',\n  clockIcon = 'clock-outline',\n}: {\n  locale?: undefined | string\n  label?: string\n  uppercase?: boolean\n  cancelLabel?: string\n  confirmLabel?: string\n  hours?: number | undefined\n  minutes?: number | undefined\n  visible: boolean | undefined\n  onDismiss: () => any\n  onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any\n  animationType?: 'slide' | 'fade' | 'none'\n  keyboardIcon?: string\n  clockIcon?: string\n}) {\n  const theme = useTheme()\n\n  let textFont\n  let labelText = label\n\n  if (theme.isV3) {\n    textFont = theme.fonts.labelMedium\n  } else {\n    textFont = (theme as any as MD2Theme)?.fonts.medium\n  }\n\n  const [inputType, setInputType] = React.useState<PossibleInputTypes>(\n    inputTypes.picker\n  )\n  const [focused, setFocused] = React.useState<PossibleClockTypes>(\n    clockTypes.hours\n  )\n  const [localHours, setLocalHours] = React.useState<number>(getHours(hours))\n  const [localMinutes, setLocalMinutes] = React.useState<number>(\n    getMinutes(minutes)\n  )\n\n  if (inputType === inputTypes.keyboard && !label) {\n    labelText = 'Enter time'\n  }\n\n  React.useEffect(() => {\n    setLocalHours(getHours(hours))\n  }, [setLocalHours, hours])\n\n  React.useEffect(() => {\n    setLocalMinutes(getMinutes(minutes))\n  }, [setLocalMinutes, minutes])\n\n  const onFocusInput = React.useCallback(\n    (type: PossibleClockTypes) => setFocused(type),\n    []\n  )\n  const onChange = React.useCallback(\n    (params: {\n      focused?: PossibleClockTypes | undefined\n      hours: number\n      minutes: number\n    }) => {\n      if (params.focused) {\n        setFocused(params.focused)\n      }\n\n      setLocalHours(params.hours)\n      setLocalMinutes(params.minutes)\n    },\n    [setFocused, setLocalHours, setLocalMinutes]\n  )\n  return (\n    <Modal\n      animationType={animationType}\n      transparent={true}\n      visible={visible}\n      onRequestClose={onDismiss}\n      presentationStyle=\"overFullScreen\"\n      supportedOrientations={supportedOrientations}\n      statusBarTranslucent={true}\n    >\n      <>\n        <TouchableWithoutFeedback onPress={onDismiss}>\n          <View\n            style={[\n              StyleSheet.absoluteFill,\n              styles.modalBackground,\n              { backgroundColor: theme.colors?.backdrop },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n        <View\n          style={[StyleSheet.absoluteFill, styles.modalRoot]}\n          pointerEvents=\"box-none\"\n        >\n          <KeyboardAvoidingView\n            style={styles.keyboardView}\n            behavior={'padding'}\n          >\n            <Animated.View\n              style={[\n                styles.modalContent,\n                {\n                  backgroundColor:\n                    theme.dark && theme.isV3\n                      ? theme.colors.elevation.level3\n                      : theme.isV3\n                      ? theme.colors.surface\n                      : theme.dark\n                      ? overlay(10, theme.colors.surface)\n                      : theme.colors.surface,\n                  borderRadius: theme.isV3\n                    ? theme.roundness * 6\n                    : theme.roundness,\n                },\n              ]}\n            >\n              <View style={styles.labelContainer}>\n                <Text\n                  style={[\n                    styles.label,\n                    {\n                      ...textFont,\n                      color: theme?.isV3\n                        ? theme.colors.onSurfaceVariant\n                        : (theme as any as MD2Theme).colors.text,\n                    },\n                  ]}\n                >\n                  {uppercase ? labelText.toUpperCase() : labelText}\n                </Text>\n              </View>\n              <View style={styles.timePickerContainer}>\n                <TimePicker\n                  locale={locale}\n                  inputType={inputType}\n                  focused={focused}\n                  hours={localHours}\n                  minutes={localMinutes}\n                  onChange={onChange}\n                  onFocusInput={onFocusInput}\n                />\n              </View>\n              <View style={styles.bottom}>\n                <IconButton\n                  icon={getTimeInputTypeIcon(inputType, {\n                    keyboard: keyboardIcon,\n                    picker: clockIcon,\n                  })}\n                  onPress={() => setInputType(reverseInputTypes[inputType])}\n                  size={24}\n                  style={styles.inputTypeToggle}\n                  accessibilityLabel=\"toggle keyboard\"\n                />\n                <View style={styles.fill} />\n                <Button onPress={onDismiss} uppercase={uppercase}>\n                  {cancelLabel}\n                </Button>\n                <Button\n                  onPress={() =>\n                    onConfirm({ hours: localHours, minutes: localMinutes })\n                  }\n                  uppercase={uppercase}\n                >\n                  {confirmLabel}\n                </Button>\n              </View>\n            </Animated.View>\n          </KeyboardAvoidingView>\n        </View>\n      </>\n    </Modal>\n  )\n}\n\nfunction getMinutes(minutes: number | undefined | null): number {\n  return minutes === undefined || minutes === null\n    ? new Date().getMinutes()\n    : minutes\n}\nfunction getHours(hours: number | undefined | null): number {\n  return hours === undefined || hours === null ? new Date().getHours() : hours\n}\n\nconst styles = StyleSheet.create({\n  modalRoot: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  keyboardView: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  modalBackground: {\n    flex: 1,\n  },\n  modalContent: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 3,\n    minWidth: 287,\n    paddingVertical: 8,\n  },\n  labelContainer: {\n    justifyContent: 'flex-end',\n    paddingLeft: 24,\n    paddingRight: 24,\n    paddingTop: 16,\n  },\n  label: {\n    letterSpacing: 1,\n    fontSize: 13,\n  },\n  timePickerContainer: {\n    paddingLeft: 24,\n    paddingTop: 20,\n    paddingBottom: 16,\n    paddingRight: 24,\n  },\n  bottom: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 8,\n  },\n  inputTypeToggle: { margin: 4 },\n  fill: { flex: 1 },\n})\n\nexport default React.memo(TimePickerModal)\n"],"mappings":"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"}
+{"version":3,"names":["React","Modal","StyleSheet","View","Text","Animated","TouchableWithoutFeedback","KeyboardAvoidingView","Button","IconButton","overlay","useTheme","TimePicker","clockTypes","getTimeInputTypeIcon","inputTypes","reverseInputTypes","supportedOrientations","TimePickerModal","visible","onDismiss","onConfirm","hours","minutes","label","uppercase","cancelLabel","confirmLabel","animationType","locale","keyboardIcon","clockIcon","use24HourClock","inputFontSize","theme","textFont","labelText","isV3","fonts","labelMedium","medium","inputType","setInputType","useState","picker","focused","setFocused","localHours","setLocalHours","getHours","localMinutes","setLocalMinutes","getMinutes","keyboard","useEffect","onFocusInput","useCallback","type","onChange","params","absoluteFill","styles","modalBackground","backgroundColor","colors","backdrop","modalRoot","keyboardView","modalContent","dark","elevation","level3","surface","borderRadius","roundness","labelContainer","color","onSurfaceVariant","text","toUpperCase","timePickerContainer","bottom","inputTypeToggle","fill","undefined","Date","create","justifyContent","alignItems","flex","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","minWidth","paddingVertical","paddingLeft","paddingRight","paddingTop","letterSpacing","fontSize","paddingBottom","flexDirection","padding","margin","memo"],"sources":["TimePickerModal.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  Modal,\n  StyleSheet,\n  View,\n  Text,\n  Animated,\n  TouchableWithoutFeedback,\n  KeyboardAvoidingView,\n} from 'react-native'\n\nimport {\n  Button,\n  IconButton,\n  MD2Theme,\n  overlay,\n  useTheme,\n} from 'react-native-paper'\n\nimport TimePicker from './TimePicker'\nimport {\n  clockTypes,\n  getTimeInputTypeIcon,\n  inputTypes,\n  PossibleClockTypes,\n  PossibleInputTypes,\n  reverseInputTypes,\n} from './timeUtils'\n\nconst supportedOrientations: (\n  | 'portrait'\n  | 'portrait-upside-down'\n  | 'landscape'\n  | 'landscape-left'\n  | 'landscape-right'\n)[] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\nexport function TimePickerModal({\n  visible,\n  onDismiss,\n  onConfirm,\n  hours,\n  minutes,\n  label = 'Select time',\n  uppercase = true,\n  cancelLabel = 'Cancel',\n  confirmLabel = 'Ok',\n  animationType = 'none',\n  locale,\n  keyboardIcon = 'keyboard-outline',\n  clockIcon = 'clock-outline',\n  use24HourClock,\n  inputFontSize,\n}: {\n  locale?: undefined | string\n  label?: string\n  uppercase?: boolean\n  cancelLabel?: string\n  confirmLabel?: string\n  hours?: number | undefined\n  minutes?: number | undefined\n  visible: boolean | undefined\n  onDismiss: () => any\n  onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any\n  animationType?: 'slide' | 'fade' | 'none'\n  keyboardIcon?: string\n  clockIcon?: string\n  use24HourClock?: boolean\n  inputFontSize?: number\n}) {\n  const theme = useTheme()\n\n  let textFont\n  let labelText = label\n\n  if (theme.isV3) {\n    textFont = theme.fonts.labelMedium\n  } else {\n    textFont = (theme as any as MD2Theme)?.fonts.medium\n  }\n\n  const [inputType, setInputType] = React.useState<PossibleInputTypes>(\n    inputTypes.picker\n  )\n  const [focused, setFocused] = React.useState<PossibleClockTypes>(\n    clockTypes.hours\n  )\n  const [localHours, setLocalHours] = React.useState<number>(getHours(hours))\n  const [localMinutes, setLocalMinutes] = React.useState<number>(\n    getMinutes(minutes)\n  )\n\n  if (inputType === inputTypes.keyboard && !label) {\n    labelText = 'Enter time'\n  }\n\n  React.useEffect(() => {\n    setLocalHours(getHours(hours))\n  }, [setLocalHours, hours])\n\n  React.useEffect(() => {\n    setLocalMinutes(getMinutes(minutes))\n  }, [setLocalMinutes, minutes])\n\n  const onFocusInput = React.useCallback(\n    (type: PossibleClockTypes) => setFocused(type),\n    []\n  )\n  const onChange = React.useCallback(\n    (params: {\n      focused?: PossibleClockTypes | undefined\n      hours: number\n      minutes: number\n    }) => {\n      if (params.focused) {\n        setFocused(params.focused)\n      }\n\n      setLocalHours(params.hours)\n      setLocalMinutes(params.minutes)\n    },\n    [setFocused, setLocalHours, setLocalMinutes]\n  )\n  return (\n    <Modal\n      animationType={animationType}\n      transparent={true}\n      visible={visible}\n      onRequestClose={onDismiss}\n      presentationStyle=\"overFullScreen\"\n      supportedOrientations={supportedOrientations}\n      statusBarTranslucent={true}\n    >\n      <>\n        <TouchableWithoutFeedback onPress={onDismiss}>\n          <View\n            style={[\n              StyleSheet.absoluteFill,\n              styles.modalBackground,\n              { backgroundColor: theme.colors?.backdrop },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n        <View\n          style={[StyleSheet.absoluteFill, styles.modalRoot]}\n          pointerEvents=\"box-none\"\n        >\n          <KeyboardAvoidingView\n            style={styles.keyboardView}\n            behavior={'padding'}\n          >\n            <Animated.View\n              style={[\n                styles.modalContent,\n                {\n                  backgroundColor:\n                    theme.dark && theme.isV3\n                      ? theme.colors.elevation.level3\n                      : theme.isV3\n                      ? theme.colors.surface\n                      : theme.dark\n                      ? overlay(10, theme.colors.surface)\n                      : theme.colors.surface,\n                  borderRadius: theme.isV3\n                    ? theme.roundness * 6\n                    : theme.roundness,\n                },\n              ]}\n            >\n              <View style={styles.labelContainer}>\n                <Text\n                  style={[\n                    styles.label,\n                    {\n                      ...textFont,\n                      color: theme?.isV3\n                        ? theme.colors.onSurfaceVariant\n                        : (theme as any as MD2Theme).colors.text,\n                    },\n                  ]}\n                >\n                  {uppercase ? labelText.toUpperCase() : labelText}\n                </Text>\n              </View>\n              <View style={styles.timePickerContainer}>\n                <TimePicker\n                  locale={locale}\n                  inputType={inputType}\n                  use24HourClock={use24HourClock}\n                  inputFontSize={inputFontSize}\n                  focused={focused}\n                  hours={localHours}\n                  minutes={localMinutes}\n                  onChange={onChange}\n                  onFocusInput={onFocusInput}\n                />\n              </View>\n              <View style={styles.bottom}>\n                <IconButton\n                  icon={getTimeInputTypeIcon(inputType, {\n                    keyboard: keyboardIcon,\n                    picker: clockIcon,\n                  })}\n                  onPress={() => setInputType(reverseInputTypes[inputType])}\n                  size={24}\n                  style={styles.inputTypeToggle}\n                  accessibilityLabel=\"toggle keyboard\"\n                />\n                <View style={styles.fill} />\n                <Button onPress={onDismiss} uppercase={uppercase}>\n                  {cancelLabel}\n                </Button>\n                <Button\n                  onPress={() =>\n                    onConfirm({ hours: localHours, minutes: localMinutes })\n                  }\n                  uppercase={uppercase}\n                >\n                  {confirmLabel}\n                </Button>\n              </View>\n            </Animated.View>\n          </KeyboardAvoidingView>\n        </View>\n      </>\n    </Modal>\n  )\n}\n\nfunction getMinutes(minutes: number | undefined | null): number {\n  return minutes === undefined || minutes === null\n    ? new Date().getMinutes()\n    : minutes\n}\nfunction getHours(hours: number | undefined | null): number {\n  return hours === undefined || hours === null ? new Date().getHours() : hours\n}\n\nconst styles = StyleSheet.create({\n  modalRoot: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  keyboardView: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n  },\n  modalBackground: {\n    flex: 1,\n  },\n  modalContent: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 3,\n    minWidth: 287,\n    paddingVertical: 8,\n  },\n  labelContainer: {\n    justifyContent: 'flex-end',\n    paddingLeft: 24,\n    paddingRight: 24,\n    paddingTop: 16,\n  },\n  label: {\n    letterSpacing: 1,\n    fontSize: 13,\n  },\n  timePickerContainer: {\n    paddingLeft: 24,\n    paddingTop: 20,\n    paddingBottom: 16,\n    paddingRight: 24,\n  },\n  bottom: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 8,\n  },\n  inputTypeToggle: { margin: 4 },\n  fill: { flex: 1 },\n})\n\nexport default React.memo(TimePickerModal)\n"],"mappings":"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"}

package/lib/typescript/Time/TimeInput.d.ts

@@ -8,6 +8,7 @@ interface TimeInputProps extends Omit<Omit<TextInputProps, 'value'>, 'onFocus'>
     pressed: boolean;
     onChanged: (n: number) => any;
     inputType: PossibleInputTypes;
+    inputFontSize?: number;
 }
 declare const _default: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<unknown>>;
 export default _default;

package/lib/typescript/Time/TimeInputs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PossibleClockTypes, PossibleInputTypes } from './timeUtils';
-declare function TimeInputs({ hours, minutes, onFocusInput, focused, inputType, onChange, is24Hour, }: {
+declare function TimeInputs({ hours, minutes, onFocusInput, focused, inputType, onChange, is24Hour, inputFontSize, }: {
     inputType: PossibleInputTypes;
     focused: PossibleClockTypes;
     hours: number;
@@ -12,6 +12,7 @@ declare function TimeInputs({ hours, minutes, onFocusInput, focused, inputType,
         focused?: undefined | PossibleClockTypes;
     }) => any;
     is24Hour: boolean;
+    inputFontSize?: number;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TimeInputs>;
 export default _default;

package/lib/typescript/Time/TimePicker.d.ts

@@ -9,7 +9,7 @@ type onChangeFunc = ({ hours, minutes, focused, }: {
     minutes: number;
     focused?: undefined | PossibleClockTypes;
 }) => any;
-declare function TimePicker({ hours, minutes, onFocusInput, focused, inputType, onChange, locale, }: {
+declare function TimePicker({ hours, minutes, onFocusInput, focused, inputType, onChange, locale, use24HourClock, inputFontSize, }: {
     locale?: undefined | string;
     inputType: PossibleInputTypes;
     focused: PossibleClockTypes;
@@ -17,6 +17,8 @@ declare function TimePicker({ hours, minutes, onFocusInput, focused, inputType,
     minutes: number;
     onFocusInput: (type: PossibleClockTypes) => any;
     onChange: onChangeFunc;
+    use24HourClock?: boolean;
+    inputFontSize?: number;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TimePicker>;
 export default _default;

package/lib/typescript/Time/TimePickerModal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours, minutes, label, uppercase, cancelLabel, confirmLabel, animationType, locale, keyboardIcon, clockIcon, }: {
+export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours, minutes, label, uppercase, cancelLabel, confirmLabel, animationType, locale, keyboardIcon, clockIcon, use24HourClock, inputFontSize, }: {
     locale?: undefined | string;
     label?: string;
     uppercase?: boolean;
@@ -16,6 +16,8 @@ export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours,
     animationType?: 'slide' | 'fade' | 'none';
     keyboardIcon?: string;
     clockIcon?: string;
+    use24HourClock?: boolean;
+    inputFontSize?: number;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TimePickerModal>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.11.15",
+  "version": "0.12.0",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

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,