react-native-paper-dates 0.11.4 → 0.11.6

package/README.md

@@ -1,7 +1,6 @@
 
 <img align="left" width="56" height="56" src="https://user-images.githubusercontent.com/6492229/98982291-70b42480-251f-11eb-8d67-4b0b1b6e917b.png"> react-native-paper-dates
 ---
-
 <br>
 
 <p float="left">

package/lib/commonjs/Time/AmPmSwitcher.js

@@ -26,7 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function AmPmSwitcher(_ref) {
   let {
     onChange,
-    hours
+    hours,
+    inputType
   } = _ref;
   const {
     setMode,
@@ -34,17 +35,20 @@ function AmPmSwitcher(_ref) {
   } = React.useContext(_TimePicker.DisplayModeContext);
   const theme = (0, _reactNativePaper.useTheme)();
   const backgroundColor = (0, React.useMemo)(() => {
-    if (theme.dark) {
-      return (0, _color.default)(theme.colors.surface).lighten(1.2).hex();
+    if (theme.isV3) {
+      return theme.colors.outline;
     }
 
-    return (0, _color.default)(theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface).darken(0.1).hex();
+    return (0, _color.default)(theme.dark ? (0, _color.default)(theme.colors.surface).lighten(1.2).hex() : theme.colors.surface).darken(0.1).hex();
   }, [theme]);
   const isAM = mode === 'AM';
   return /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [styles.root, {
+    style: [styles.root, // eslint-disable-next-line react-native/no-inline-styles
+    {
       borderColor: backgroundColor,
-      borderRadius: theme.roundness
+      borderRadius: theme.roundness * 2,
+      height: inputType === _timeUtils.inputTypes.keyboard ? 72 : 80,
+      marginBottom: inputType === 'keyboard' ? 24 : 0
     }]
   }, /*#__PURE__*/React.createElement(SwitchButton, {
     label: "AM",
@@ -87,7 +91,7 @@ function SwitchButton(_ref2) {
     backgroundColor,
     color
   } = (0, _timeUtils.useSwitchColors)(selected);
-  let textFont = theme !== null && theme !== void 0 && theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;
+  let textFont = theme !== null && theme !== void 0 && theme.isV3 ? theme.fonts.titleMedium : theme.fonts.medium;
   return /*#__PURE__*/React.createElement(_reactNativePaper.TouchableRipple, {
     onPress: onPress,
     style: styles.switchButton,
@@ -115,14 +119,13 @@ function SwitchButton(_ref2) {
 
 const styles = _reactNative.StyleSheet.create({
   root: {
-    width: 50,
-    height: 80,
+    width: 52,
     borderWidth: 1,
     overflow: 'hidden'
   },
   switchSeparator: {
     height: 1,
-    width: 48
+    width: 52
   },
   switchButton: {
     flex: 1

package/lib/commonjs/Time/AmPmSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"names":["AmPmSwitcher","onChange","hours","setMode","mode","React","useContext","DisplayModeContext","theme","useTheme","backgroundColor","useMemo","dark","Color","colors","surface","lighten","hex","isV3","inverseOnSurface","darken","isAM","styles","root","borderColor","borderRadius","roundness","switchSeparator","SwitchButton","label","onPress","selected","disabled","color","useSwitchColors","textFont","fonts","bodyMedium","medium","switchButton","switchButtonInner","StyleSheet","create","width","height","borderWidth","overflow","flex","alignItems","justifyContent"],"sources":["AmPmSwitcher.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'\nimport { useMemo } from 'react'\nimport Color from 'color'\nimport { useSwitchColors } from './timeUtils'\nimport { DisplayModeContext } from './TimePicker'\n\nexport default function AmPmSwitcher({\n  onChange,\n  hours,\n}: {\n  hours: number\n  onChange: (newHours: number) => any\n}) {\n  const { setMode, mode } = React.useContext(DisplayModeContext)\n  const theme = useTheme()\n  const backgroundColor = useMemo<string>(() => {\n    if (theme.dark) {\n      return Color(theme.colors.surface).lighten(1.2).hex()\n    }\n    return Color(\n      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface\n    )\n      .darken(0.1)\n      .hex()\n  }, [theme])\n\n  const isAM = mode === 'AM'\n  return (\n    <View\n      style={[\n        styles.root,\n        {\n          borderColor: backgroundColor,\n          borderRadius: theme.roundness,\n        },\n      ]}\n    >\n      <SwitchButton\n        label=\"AM\"\n        onPress={() => {\n          setMode('AM')\n          if (hours - 12 >= 0) {\n            onChange(hours - 12)\n          }\n        }}\n        selected={isAM}\n        disabled={isAM}\n      />\n      <View style={[styles.switchSeparator, { backgroundColor }]} />\n      <SwitchButton\n        label=\"PM\"\n        onPress={() => {\n          setMode('PM')\n          if (hours + 12 <= 24) {\n            onChange(hours + 12)\n          }\n        }}\n        selected={!isAM}\n        disabled={!isAM}\n      />\n    </View>\n  )\n}\n\nfunction SwitchButton({\n  label,\n  onPress,\n  selected,\n  disabled,\n}: {\n  label: string\n  onPress: (() => any) | undefined\n  selected: boolean\n  disabled: boolean\n}) {\n  const theme = useTheme()\n  const { backgroundColor, color } = useSwitchColors(selected)\n\n  let textFont = theme?.isV3\n    ? theme.fonts.bodyMedium\n    : (theme as any as MD2Theme).fonts.medium\n\n  return (\n    <TouchableRipple\n      onPress={onPress}\n      style={styles.switchButton}\n      accessibilityLabel={label}\n      // @ts-ignore old React Native versions\n      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n      // @ts-ignore old React Native versions\n      accessibilityComponentType=\"button\"\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      disabled={disabled}\n    >\n      <View style={[styles.switchButtonInner, { backgroundColor }]}>\n        <Text\n          selectable={false}\n          style={[\n            {\n              ...textFont,\n              color: color,\n            },\n          ]}\n        >\n          {label}\n        </Text>\n      </View>\n    </TouchableRipple>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: {\n    width: 50,\n    height: 80,\n    borderWidth: 1,\n    overflow: 'hidden',\n  },\n  switchSeparator: {\n    height: 1,\n    width: 48,\n  },\n  switchButton: {\n    flex: 1,\n  },\n  switchButtonInner: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"],"mappings":"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"}
+{"version":3,"names":["AmPmSwitcher","onChange","hours","inputType","setMode","mode","React","useContext","DisplayModeContext","theme","useTheme","backgroundColor","useMemo","isV3","colors","outline","Color","dark","surface","lighten","hex","darken","isAM","styles","root","borderColor","borderRadius","roundness","height","inputTypes","keyboard","marginBottom","switchSeparator","SwitchButton","label","onPress","selected","disabled","color","useSwitchColors","textFont","fonts","titleMedium","medium","switchButton","switchButtonInner","StyleSheet","create","width","borderWidth","overflow","flex","alignItems","justifyContent"],"sources":["AmPmSwitcher.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'\nimport { useMemo } from 'react'\nimport Color from 'color'\nimport { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'\nimport { DisplayModeContext } from './TimePicker'\n\nexport default function AmPmSwitcher({\n  onChange,\n  hours,\n  inputType,\n}: {\n  hours: number\n  onChange: (newHours: number) => any\n  inputType: PossibleInputTypes\n}) {\n  const { setMode, mode } = React.useContext(DisplayModeContext)\n  const theme = useTheme()\n  const backgroundColor = useMemo<string>(() => {\n    if (theme.isV3) {\n      return theme.colors.outline\n    }\n    return Color(\n      theme.dark\n        ? Color(theme.colors.surface).lighten(1.2).hex()\n        : theme.colors.surface\n    )\n      .darken(0.1)\n      .hex()\n  }, [theme])\n\n  const isAM = mode === 'AM'\n  return (\n    <View\n      style={[\n        styles.root,\n        // eslint-disable-next-line react-native/no-inline-styles\n        {\n          borderColor: backgroundColor,\n          borderRadius: theme.roundness * 2,\n          height: inputType === inputTypes.keyboard ? 72 : 80,\n          marginBottom: inputType === 'keyboard' ? 24 : 0,\n        },\n      ]}\n    >\n      <SwitchButton\n        label=\"AM\"\n        onPress={() => {\n          setMode('AM')\n          if (hours - 12 >= 0) {\n            onChange(hours - 12)\n          }\n        }}\n        selected={isAM}\n        disabled={isAM}\n      />\n      <View style={[styles.switchSeparator, { backgroundColor }]} />\n      <SwitchButton\n        label=\"PM\"\n        onPress={() => {\n          setMode('PM')\n          if (hours + 12 <= 24) {\n            onChange(hours + 12)\n          }\n        }}\n        selected={!isAM}\n        disabled={!isAM}\n      />\n    </View>\n  )\n}\n\nfunction SwitchButton({\n  label,\n  onPress,\n  selected,\n  disabled,\n}: {\n  label: string\n  onPress: (() => any) | undefined\n  selected: boolean\n  disabled: boolean\n}) {\n  const theme = useTheme()\n  const { backgroundColor, color } = useSwitchColors(selected)\n\n  let textFont = theme?.isV3\n    ? theme.fonts.titleMedium\n    : (theme as any as MD2Theme).fonts.medium\n\n  return (\n    <TouchableRipple\n      onPress={onPress}\n      style={styles.switchButton}\n      accessibilityLabel={label}\n      // @ts-ignore old React Native versions\n      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n      // @ts-ignore old React Native versions\n      accessibilityComponentType=\"button\"\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      disabled={disabled}\n    >\n      <View style={[styles.switchButtonInner, { backgroundColor }]}>\n        <Text\n          selectable={false}\n          style={[\n            {\n              ...textFont,\n              color: color,\n            },\n          ]}\n        >\n          {label}\n        </Text>\n      </View>\n    </TouchableRipple>\n  )\n}\n\nconst styles = StyleSheet.create({\n  root: {\n    width: 52,\n    borderWidth: 1,\n    overflow: 'hidden',\n  },\n  switchSeparator: {\n    height: 1,\n    width: 52,\n  },\n  switchButton: {\n    flex: 1,\n  },\n  switchButtonInner: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"],"mappings":"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"}

package/lib/commonjs/Time/AnalogClock.js

@@ -118,7 +118,7 @@ function AnalogClock(_ref) {
     ref: clockRef
   }, panResponder.panHandlers, {
     style: [styles.clock, {
-      backgroundColor: theme.dark ? (0, _color.default)(theme.colors.surface).lighten(1.4).hex() : theme.isV3 ? (0, _color.default)(theme.colors.outline).lighten(0.9).hex() : (0, _color.default)(theme.colors.surface).darken(0.1).hex()
+      backgroundColor: theme.isV3 ? theme.colors.surfaceVariant : theme.dark ? (0, _color.default)(theme.colors.surface).lighten(1.4).hex() : (0, _color.default)(theme.colors.surface).darken(0.1).hex()
     }] // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506
     ,
     cursor: 'pointer'
@@ -128,7 +128,7 @@ function AnalogClock(_ref) {
       transform: [{
         rotate: -90 + pointerNumber * degreesPerNumber + 'deg'
       }, {
-        translateX: _timeUtils.circleSize / 4 - 4 - dynamicSize / 2
+        translateX: _timeUtils.circleSize / 4 - (focused === _timeUtils.clockTypes.hours && pointerNumber >= 0 && pointerNumber < 13 ? 0 : 4) + (focused === _timeUtils.clockTypes.minutes ? 4 : 0) - dynamicSize / 2
       }],
       width: _timeUtils.circleSize / 2 - 4 - dynamicSize
     }],
@@ -175,16 +175,15 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: 'center'
   },
   endPoint: {
-    borderRadius: 15,
-    height: 30,
-    width: 30,
+    borderRadius: 24,
+    height: 48,
+    width: 48,
     position: 'absolute',
     right: 0,
-    bottom: -14
+    bottom: -23
   },
   line: {
     position: 'absolute',
-    marginBottom: -1,
     height: 2,
     borderRadius: 4
   }

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

@@ -1 +1 @@
-{"version":3,"names":["AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","useTheme","mode","React","useContext","DisplayModeContext","shortPointer","clockRef","useRef","hoursRef","useLatest","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","getAngle","circleSize","current","clockTypes","hours24","previousHourType","getHourType","pickedHours","getHours","hours12AndPm","hourTypeFromOffset","getHourTypeFromOffset","hours24AndPM","hourTypes","pm","undefined","pickedMinutes","getMinutes","panResponder","PanResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","dark","Color","colors","surface","lighten","hex","isV3","outline","darken","line","primary","transform","rotate","translateX","width","endPoint","StyleSheet","absoluteFill","center","middlePoint","height","position","justifyContent","alignItems","borderRadius","right","bottom","marginBottom","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 === 'AM'\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.dark\n            ? Color(theme.colors.surface).lighten(1.4).hex()\n            : theme.isV3\n            ? Color(theme.colors.outline).lighten(0.9).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: circleSize / 4 - 4 - 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: 15,\n    height: 30,\n    width: 30,\n    position: 'absolute',\n    right: 0,\n    bottom: -14,\n  },\n  line: {\n    position: 'absolute',\n    marginBottom: -1,\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":["AnalogClock","hours","minutes","focused","is24Hour","onChange","theme","useTheme","mode","React","useContext","DisplayModeContext","shortPointer","clockRef","useRef","hoursRef","useLatest","onChangeRef","minutesRef","focusedRef","is24HourRef","modeRef","onPointerMove","useCallback","e","final","x","nativeEvent","locationX","y","locationY","angle","getAngle","circleSize","current","clockTypes","hours24","previousHourType","getHourType","pickedHours","getHours","hours12AndPm","hourTypeFromOffset","getHourTypeFromOffset","hours24AndPM","hourTypes","pm","undefined","pickedMinutes","getMinutes","panResponder","PanResponder","create","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onStartShouldSetPanResponder","returnTrue","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onShouldBlockNativeResponder","dynamicSize","pointerNumber","degreesPerNumber","panHandlers","styles","clock","backgroundColor","isV3","colors","surfaceVariant","dark","Color","surface","lighten","hex","darken","line","primary","transform","rotate","translateX","width","endPoint","StyleSheet","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 === 'AM'\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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"}

package/lib/commonjs/Time/AnalogClockHours.js

@@ -45,6 +45,7 @@ function AnalogClockHours(_ref) {
     style: hours === i + 1 ? {
       color
     } : null,
+    variant: "bodyLarge",
     selectable: false
   }, mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1)))), is24Hour ? innerRange.map((a, i) => /*#__PURE__*/React.createElement(_reactNative.View, {
     key: i,
@@ -57,9 +58,10 @@ function AnalogClockHours(_ref) {
     style: styles.innerHourInner
   }, /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
     selectable: false,
-    style: [styles.innerHourText, i + 13 === hours || i + 13 === 24 && hours === 0 ? {
+    style: [i + 13 === hours || i + 13 === 24 && hours === 0 ? {
       color
-    } : null]
+    } : null],
+    variant: "bodyLarge"
   }, i + 13 === 24 ? '00' : i + 13)))) : null);
 }
 
@@ -69,31 +71,28 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20,
-    width: 50,
-    height: 50,
-    marginLeft: -25,
-    marginTop: -25,
-    borderRadius: 25
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24
   },
   outerHourInner: {
-    borderRadius: 25
+    borderRadius: 24
   },
   innerHourRoot: {
     position: 'absolute',
     zIndex: 20,
     justifyContent: 'center',
     alignItems: 'center',
-    width: 40,
-    height: 40,
-    marginLeft: -20,
-    marginTop: -20,
-    borderRadius: 20
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24
   },
   innerHourInner: {
-    borderRadius: 20
-  },
-  innerHourText: {
-    fontSize: 13
+    borderRadius: 24
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"names":["AnalogClockHours","is24Hour","hours","mode","React","useContext","DisplayModeContext","outerRange","getHourNumbers","circleSize","innerRange","color","useTextColorOnPrimary","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","innerHourText","StyleSheet","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","fontSize","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 style={hours === i + 1 ? { color } : null} selectable={false}>\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                    styles.innerHourText,\n                    i + 13 === hours || (i + 13 === 24 && hours === 0)\n                      ? { color }\n                      : null,\n                  ]}\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: 50,\n    height: 50,\n    marginLeft: -25,\n    marginTop: -25,\n\n    borderRadius: 25,\n  },\n  outerHourInner: { borderRadius: 25 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\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;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,SAASA,gBAAT,OAMG;EAAA,IANuB;IACxBC,QADwB;IAExBC;EAFwB,CAMvB;EACD,MAAM;IAAEC;EAAF,IAAWC,KAAK,CAACC,UAAN,CAAiBC,8BAAjB,CAAjB;EACA,MAAMC,UAAU,GAAGC,cAAc,CAAC,KAAD,EAAQC,qBAAR,EAAoB,EAApB,EAAwB,EAAxB,CAAjC;EACA,MAAMC,UAAU,GAAGF,cAAc,CAAC,IAAD,EAAOC,qBAAP,EAAmB,EAAnB,EAAuB,EAAvB,CAAjC;EACA,MAAME,KAAK,GAAG,IAAAC,4BAAA,GAAd;EAEA,oBACE,0CACGL,UAAU,CAACM,GAAX,CAAe,CAACC,CAAD,EAAIC,CAAJ,kBACd,oBAAC,iBAAD;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,iBAAD;IAAM,KAAK,EAAEE,MAAM,CAACI;EAApB,gBAEE,oBAAC,sBAAD;IAAM,KAAK,EAAElB,KAAK,KAAKa,CAAC,GAAG,CAAd,GAAkB;MAAEJ;IAAF,CAAlB,GAA8B,IAA3C;IAAiD,UAAU,EAAE;EAA7D,GACGR,IAAI,KAAK,IAAT,IAAiB,CAACF,QAAlB,IAA8Bc,CAAC,GAAG,CAAJ,KAAU,EAAxC,GAA6C,IAA7C,GAAoDA,CAAC,GAAG,CAD3D,CAFF,CAXF,CADD,CADH,EAqBGd,QAAQ,GACLS,UAAU,CAACG,GAAX,CAAe,CAACC,CAAD,EAAIC,CAAJ,kBACb,oBAAC,iBAAD;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,iBAAD;IAAM,KAAK,EAAEE,MAAM,CAACM;EAApB,gBACE,oBAAC,sBAAD;IACE,UAAU,EAAE,KADd;IAEE,KAAK,EAAE,CACLN,MAAM,CAACO,aADF,EAELR,CAAC,GAAG,EAAJ,KAAWb,KAAX,IAAqBa,CAAC,GAAG,EAAJ,KAAW,EAAX,IAAiBb,KAAK,KAAK,CAAhD,GACI;MAAES;IAAF,CADJ,GAEI,IAJC;EAFT,GASGI,CAAC,GAAG,EAAJ,KAAW,EAAX,GAAgB,IAAhB,GAAuBA,CAAC,GAAG,EAT9B,CADF,CAXF,CADF,CADK,GA4BL,IAjDN,CADF;AAqDD;;AAED,MAAMC,MAAM,GAAGQ,uBAAA,CAAWC,MAAX,CAAkB;EAC/BR,aAAa,EAAE;IACbS,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;IAUbC,YAAY,EAAE;EAVD,CADgB;EAa/Bd,cAAc,EAAE;IAAEc,YAAY,EAAE;EAAhB,CAbe;EAc/Bb,aAAa,EAAE;IACbK,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,CAdgB;EAyB/BZ,cAAc,EAAE;IAAEY,YAAY,EAAE;EAAhB,CAzBe;EA0B/BX,aAAa,EAAE;IAAEY,QAAQ,EAAE;EAAZ;AA1BgB,CAAlB,CAAf;;AA6BA,SAAS3B,cAAT,CACEP,QADF,EAEEmC,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,IAAInC,QAAQ,GAAG,CAAH,GAAO,GAAnB,CAAjB;EAEAsC,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,EAEJhC,GAFI,CAEA,MAAM;IACT,IAAIiC,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;;4BAEc7C,KAAK,CAAC+C,IAAN,CAAWnD,gBAAX,C"}
+{"version":3,"names":["AnalogClockHours","is24Hour","hours","mode","React","useContext","DisplayModeContext","outerRange","getHourNumbers","circleSize","innerRange","color","useTextColorOnPrimary","map","a","i","styles","outerHourRoot","top","left","outerHourInner","innerHourRoot","innerHourInner","StyleSheet","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":"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"}

package/lib/commonjs/Time/AnalogClockMinutes.js

@@ -47,7 +47,8 @@ function AnalogClockMinutes(_ref) {
       style: isCurrent ? {
         color
       } : undefined,
-      selectable: false
+      selectable: false,
+      variant: "bodyLarge"
     }, isZero ? '00' : currentMinutes)));
   }));
 }
@@ -58,14 +59,14 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20,
-    width: 50,
-    height: 50,
-    marginLeft: -25,
-    marginTop: -25,
-    borderRadius: 25
+    width: 48,
+    height: 48,
+    marginLeft: -24,
+    marginTop: -24,
+    borderRadius: 24
   },
   outerHourInner: {
-    borderRadius: 25
+    borderRadius: 24
   },
   innerHourRoot: {
     position: 'absolute',

package/lib/commonjs/Time/AnalogClockMinutes.js.map

@@ -1 +1 @@
-{"version":3,"names":["AnalogClockMinutes","minutes","range","getMinuteNumbers","circleSize","color","useTextColorOnPrimary","map","a","i","currentMinutes","isZero","isCurrent","styles","outerHourRoot","top","left","outerHourInner","undefined","StyleSheet","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","innerHourRoot","innerHourInner","innerHourText","fontSize","textWhite","size","count","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","React","memo"],"sources":["AnalogClockMinutes.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 AnalogClockMinutes({ minutes }: { minutes: number }) {\n  const range = getMinuteNumbers(circleSize, 12)\n  const color = useTextColorOnPrimary()\n  return (\n    <>\n      {range.map((a, i) => {\n        const currentMinutes = i * 5\n        const isZero = currentMinutes === 0\n        let isCurrent =\n          currentMinutes - 1 <= minutes && currentMinutes + 1 >= minutes\n        if (isZero) {\n          isCurrent = minutes >= 59 || currentMinutes + 1 >= minutes\n        }\n        return (\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              <Text\n                style={isCurrent ? { color } : undefined}\n                selectable={false}\n              >\n                {isZero ? '00' : currentMinutes}\n              </Text>\n            </View>\n          </View>\n        )\n      })}\n    </>\n  )\n}\n\nconst styles = StyleSheet.create({\n  outerHourRoot: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 20,\n    width: 50,\n    height: 50,\n    marginLeft: -25,\n    marginTop: -25,\n\n    borderRadius: 25,\n  },\n  outerHourInner: { borderRadius: 25 },\n  innerHourRoot: {\n    position: 'absolute',\n    zIndex: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\n  textWhite: { color: '#fff' },\n})\n\nfunction getMinuteNumbers(size: number, count: number) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / 2.5\n\n  angle = angle = (-90 * Math.PI) / 180\n\n  return Array(12)\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(AnalogClockMinutes)\n"],"mappings":"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"}
+{"version":3,"names":["AnalogClockMinutes","minutes","range","getMinuteNumbers","circleSize","color","useTextColorOnPrimary","map","a","i","currentMinutes","isZero","isCurrent","styles","outerHourRoot","top","left","outerHourInner","undefined","StyleSheet","create","position","justifyContent","alignItems","zIndex","width","height","marginLeft","marginTop","borderRadius","innerHourRoot","innerHourInner","innerHourText","fontSize","textWhite","size","count","angle","step","Math","PI","radius","Array","fill","x","round","cos","y","sin","React","memo"],"sources":["AnalogClockMinutes.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 AnalogClockMinutes({ minutes }: { minutes: number }) {\n  const range = getMinuteNumbers(circleSize, 12)\n  const color = useTextColorOnPrimary()\n  return (\n    <>\n      {range.map((a, i) => {\n        const currentMinutes = i * 5\n        const isZero = currentMinutes === 0\n        let isCurrent =\n          currentMinutes - 1 <= minutes && currentMinutes + 1 >= minutes\n        if (isZero) {\n          isCurrent = minutes >= 59 || currentMinutes + 1 >= minutes\n        }\n        return (\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              <Text\n                style={isCurrent ? { color } : undefined}\n                selectable={false}\n                variant=\"bodyLarge\"\n              >\n                {isZero ? '00' : currentMinutes}\n              </Text>\n            </View>\n          </View>\n        )\n      })}\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: 40,\n    height: 40,\n    marginLeft: -20,\n    marginTop: -20,\n    borderRadius: 20,\n  },\n  innerHourInner: { borderRadius: 20 },\n  innerHourText: { fontSize: 13 },\n  textWhite: { color: '#fff' },\n})\n\nfunction getMinuteNumbers(size: number, count: number) {\n  let angle = 0\n  let step = (2 * Math.PI) / count\n  let radius = size / 2.5\n\n  angle = angle = (-90 * Math.PI) / 180\n\n  return Array(12)\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(AnalogClockMinutes)\n"],"mappings":"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"}

package/lib/commonjs/Time/TimeInput.js

@@ -63,10 +63,14 @@ function TimeInput(_ref, ref) {
     style: styles.root
   }, /*#__PURE__*/React.createElement(_reactNative.TextInput, _extends({
     ref: ref,
-    style: [styles.input, {
+    style: [styles.input, // eslint-disable-next-line react-native/no-inline-styles
+    {
       color,
       backgroundColor,
-      borderRadius: theme.roundness
+      borderRadius: theme.roundness * 2,
+      borderColor: theme.isV3 && highlighted ? theme.colors.onPrimaryContainer : undefined,
+      borderWidth: theme.isV3 && highlighted ? 2 : 0,
+      height: inputType === _timeUtils.inputTypes.keyboard ? 72 : 80
     }],
     value: formattedValue,
     maxLength: 2,
@@ -77,10 +81,9 @@ function TimeInput(_ref, ref) {
     onChangeText: onInnerChange
   }, rest)), onPress && inputType === _timeUtils.inputTypes.picker ? /*#__PURE__*/React.createElement(_reactNativePaper.TouchableRipple, {
     style: [_reactNative.StyleSheet.absoluteFill, styles.buttonOverlay, {
-      // backgroundColor: 'blue',
       borderRadius: theme.roundness
     }],
-    rippleColor: (0, _color.default)(theme.colors.primary).fade(0.7).hex(),
+    rippleColor: _reactNative.Platform.OS !== 'ios' ? (0, _color.default)(theme.colors.onSurface).fade(0.7).hex() : undefined,
     onPress: () => onPress(clockType),
     borderless: true
   }, /*#__PURE__*/React.createElement(_reactNative.View, null)) : null);
@@ -93,11 +96,10 @@ const styles = _reactNative.StyleSheet.create({
     width: 96
   },
   input: {
-    fontSize: 50,
+    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
-    width: 96,
-    height: 80
+    width: 96
   },
   buttonOverlay: {
     overflow: 'hidden'

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

@@ -1 +1 @@
-{"version":3,"names":["TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","rest","controlledValue","setControlledValue","React","useState","onInnerChange","text","Number","useEffect","theme","useTheme","inputFocused","setInputFocused","highlighted","inputTypes","picker","color","backgroundColor","useInputColors","formattedValue","length","styles","root","input","borderRadius","roundness","dark","StyleSheet","absoluteFill","buttonOverlay","Color","colors","primary","fade","hex","create","position","height","width","fontSize","textAlign","textAlignVertical","overflow","forwardRef"],"sources":["TimeInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { View, TextInput, TextInputProps, StyleSheet } 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          {\n            color,\n            backgroundColor,\n            borderRadius: theme.roundness,\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              // backgroundColor: 'blue',\n              borderRadius: theme.roundness,\n            },\n          ]}\n          rippleColor={Color(theme.colors.primary).fade(0.7).hex()}\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: 50,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    width: 96,\n    height: 80,\n  },\n  buttonOverlay: { overflow: 'hidden' },\n})\n\nexport default React.forwardRef(TimeInput)\n"],"mappings":"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"}
+{"version":3,"names":["TimeInput","ref","value","clockType","pressed","onPress","onChanged","inputType","rest","controlledValue","setControlledValue","React","useState","onInnerChange","text","Number","useEffect","theme","useTheme","inputFocused","setInputFocused","highlighted","inputTypes","picker","color","backgroundColor","useInputColors","formattedValue","length","styles","root","input","borderRadius","roundness","borderColor","isV3","colors","onPrimaryContainer","undefined","borderWidth","height","keyboard","dark","StyleSheet","absoluteFill","buttonOverlay","Platform","OS","Color","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":";;;;;;;AAAA;;AACA;;AAOA;;AAEA;;AACA;;;;;;;;;;AAiBA,SAASA,SAAT,OAUEC,GAVF,EAWE;EAAA,IAVA;IACEC,KADF;IAEEC,SAFF;IAGEC,OAHF;IAIEC,OAJF;IAKEC,SALF;IAMEC,SANF;IAOE,GAAGC;EAPL,CAUA;EACA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCC,KAAK,CAACC,QAAN,CAC3C,GAAEV,KAAM,EADmC,CAA9C;;EAIA,MAAMW,aAAa,GAAIC,IAAD,IAAkB;IACtCJ,kBAAkB,CAACI,IAAD,CAAlB;;IACA,IAAIA,IAAI,KAAK,EAAT,IAAeA,IAAI,KAAK,GAA5B,EAAiC;MAC/BR,SAAS,CAACS,MAAM,CAACD,IAAD,CAAP,CAAT;IACD;EACF,CALD;;EAOAH,KAAK,CAACK,SAAN,CAAgB,MAAM;IACpBN,kBAAkB,CAAE,GAAER,KAAM,EAAV,CAAlB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,MAAMe,KAAK,GAAG,IAAAC,0BAAA,GAAd;EACA,MAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCT,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;EAEA,MAAMS,WAAW,GAAGd,SAAS,KAAKe,qBAAA,CAAWC,MAAzB,GAAkCnB,OAAlC,GAA4Ce,YAAhE;EAEA,MAAM;IAAEK,KAAF;IAASC;EAAT,IAA6B,IAAAC,yBAAA,EAAeL,WAAf,CAAnC;EAEA,IAAIM,cAAc,GAAGlB,eAArB;;EACA,IAAI,CAACU,YAAL,EAAmB;IACjBQ,cAAc,GACZlB,eAAe,CAACmB,MAAhB,KAA2B,CAA3B,GACK,IAAGnB,eAAgB,EADxB,GAEK,GAAEA,eAAgB,EAHzB;EAID;;EAED,oBACE,oBAAC,iBAAD;IAAM,KAAK,EAAEoB,MAAM,CAACC;EAApB,gBACE,oBAAC,sBAAD;IACE,GAAG,EAAE7B,GADP;IAEE,KAAK,EAAE,CACL4B,MAAM,CAACE,KADF,EAEL;IACA;MACEP,KADF;MAEEC,eAFF;MAGEO,YAAY,EAAEf,KAAK,CAACgB,SAAN,GAAkB,CAHlC;MAIEC,WAAW,EACTjB,KAAK,CAACkB,IAAN,IAAcd,WAAd,GACIJ,KAAK,CAACmB,MAAN,CAAaC,kBADjB,GAEIC,SAPR;MAQEC,WAAW,EAAEtB,KAAK,CAACkB,IAAN,IAAcd,WAAd,GAA4B,CAA5B,GAAgC,CAR/C;MASEmB,MAAM,EAAEjC,SAAS,KAAKe,qBAAA,CAAWmB,QAAzB,GAAoC,EAApC,GAAyC;IATnD,CAHK,CAFT;IAiBE,KAAK,EAAEd,cAjBT;IAkBE,SAAS,EAAE,CAlBb;IAmBE,OAAO,EAAE,MAAMP,eAAe,CAAC,IAAD,CAnBhC;IAoBE,MAAM,EAAE,MAAMA,eAAe,CAAC,KAAD,CApB/B;IAqBE,kBAAkB,EAAEH,KAAK,CAACyB,IAAN,GAAa,MAAb,GAAsB,SArB5C;IAsBE,YAAY,EAAC,YAtBf;IAuBE,YAAY,EAAE7B;EAvBhB,GAwBML,IAxBN,EADF,EA2BGH,OAAO,IAAIE,SAAS,KAAKe,qBAAA,CAAWC,MAApC,gBACC,oBAAC,iCAAD;IACE,KAAK,EAAE,CACLoB,uBAAA,CAAWC,YADN,EAELf,MAAM,CAACgB,aAFF,EAGL;MACEb,YAAY,EAAEf,KAAK,CAACgB;IADtB,CAHK,CADT;IAQE,WAAW,EACTa,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GACI,IAAAC,cAAA,EAAM/B,KAAK,CAACmB,MAAN,CAAaa,SAAnB,EAA8BC,IAA9B,CAAmC,GAAnC,EAAwCC,GAAxC,EADJ,GAEIb,SAXR;IAaE,OAAO,EAAE,MAAMjC,OAAO,CAACF,SAAD,CAbxB;IAcE,UAAU,EAAE;EAdd,gBAgBE,oBAAC,iBAAD,OAhBF,CADD,GAmBG,IA9CN,CADF;AAkDD;;AAED,MAAM0B,MAAM,GAAGc,uBAAA,CAAWS,MAAX,CAAkB;EAC/BtB,IAAI,EAAE;IAAEuB,QAAQ,EAAE,UAAZ;IAAwBb,MAAM,EAAE,EAAhC;IAAoCc,KAAK,EAAE;EAA3C,CADyB;EAE/BvB,KAAK,EAAE;IACLwB,QAAQ,EAAE,EADL;IAELC,SAAS,EAAE,QAFN;IAGLC,iBAAiB,EAAE,QAHd;IAILH,KAAK,EAAE;EAJF,CAFwB;EAQ/BT,aAAa,EAAE;IAAEa,QAAQ,EAAE;EAAZ;AARgB,CAAlB,CAAf;;4BAWe/C,KAAK,CAACgD,UAAN,CAAiB3D,SAAjB,C"}

package/lib/commonjs/Time/TimeInputs.js

@@ -27,8 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// @typescript-eslint/no-unused-vars
-// WORK IN PROGRESS
 function TimeInputs(_ref) {
   let {
     hours,
@@ -61,6 +59,8 @@ function TimeInputs(_ref) {
   }, [onChange, minutesRef]);
   return /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.inputContainer, isLandscape && styles.inputContainerLandscape]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.column
   }, /*#__PURE__*/React.createElement(_TimeInput.default, {
     ref: startInput,
     placeholder: '00',
@@ -85,23 +85,30 @@ function TimeInputs(_ref) {
         minutes
       });
     }
-  }), /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: styles.hoursAndMinutesSeparator
+  }), inputType === 'keyboard' ? /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
+    variant: "bodySmall"
+  }, "Hour") : null), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.hoursAndMinutesSeparator, // eslint-disable-next-line react-native/no-inline-styles
+    {
+      marginBottom: inputType === 'keyboard' ? 24 : 0
+    }]
   }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.spaceDot
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.dot, {
-      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
+      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onSurface : theme.colors.text
     }]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.betweenDot
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.dot, {
-      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onBackground : theme.colors.text
+      backgroundColor: theme !== null && theme !== void 0 && theme.isV3 ? theme.colors.onSurface : theme.colors.text
     }]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.spaceDot
-  })), /*#__PURE__*/React.createElement(_TimeInput.default, {
+  })), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.column
+  }, /*#__PURE__*/React.createElement(_TimeInput.default, {
     ref: endInput,
     placeholder: '00',
     value: minutes,
@@ -123,15 +130,21 @@ function TimeInputs(_ref) {
         minutes: newMinutes
       });
     }
-  }), !is24Hour && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+  }), inputType === 'keyboard' ? /*#__PURE__*/React.createElement(_reactNativePaper.Text, {
+    variant: "bodySmall"
+  }, "Minute") : null), !is24Hour && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.spaceBetweenInputsAndSwitcher
   }), /*#__PURE__*/React.createElement(_AmPmSwitcher.default, {
     hours: hours,
-    onChange: onChangeHours
+    onChange: onChangeHours,
+    inputType: inputType
   })));
 }
 
 const styles = _reactNative.StyleSheet.create({
+  column: {
+    flexDirection: 'column'
+  },
   spaceBetweenInputsAndSwitcher: {
     width: 12
   },

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

@@ -1 +1 @@
-{"version":3,"names":["TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","React","useRef","endInput","dimensions","useWindowDimensions","isLandscape","width","height","theme","useTheme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","useLatest","onChangeHours","newHours","clockTypes","styles","inputContainer","inputContainerLandscape","toHourInputFormat","dark","Color","colors","primary","darken","hex","newHoursFromInput","toHourOutputFormat","hoursAndMinutesSeparator","spaceDot","dot","backgroundColor","isV3","onBackground","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","StyleSheet","create","flexDirection","alignItems","flex","fontSize","borderRadius","memo"],"sources":["TimeInputs.tsx"],"sourcesContent":["// @typescript-eslint/no-unused-vars\n// WORK IN PROGRESS\n\nimport * as React from 'react'\nimport {\n  View,\n  StyleSheet,\n  useWindowDimensions,\n  TextInput as TextInputNative,\n} from 'react-native'\nimport { MD2Theme, 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      <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(newHoursFromInput, hours, is24Hour)\n          if (newHoursFromInput > 24) {\n            newHours = 24\n          }\n          onChange({\n            hours: newHours,\n            minutes,\n          })\n        }}\n      />\n      <View style={styles.hoursAndMinutesSeparator}>\n        <View style={styles.spaceDot} />\n        <View\n          style={[\n            styles.dot,\n            {\n              backgroundColor: theme?.isV3\n                ? theme.colors.onBackground\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.onBackground\n                : (theme as any as MD2Theme).colors.text,\n            },\n          ]}\n        />\n        <View style={styles.spaceDot} />\n      </View>\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      {!is24Hour && (\n        <>\n          <View style={styles.spaceBetweenInputsAndSwitcher} />\n          <AmPmSwitcher hours={hours} onChange={onChangeHours} />\n        </>\n      )}\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\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":["TimeInputs","hours","minutes","onFocusInput","focused","inputType","onChange","is24Hour","startInput","React","useRef","endInput","dimensions","useWindowDimensions","isLandscape","width","height","theme","useTheme","onSubmitStartInput","useCallback","current","focus","onSubmitEndInput","minutesRef","useLatest","onChangeHours","newHours","clockTypes","styles","inputContainer","inputContainerLandscape","column","toHourInputFormat","dark","Color","colors","primary","darken","hex","newHoursFromInput","toHourOutputFormat","hoursAndMinutesSeparator","marginBottom","spaceDot","dot","backgroundColor","isV3","onSurface","text","betweenDot","newMinutesFromInput","newMinutes","spaceBetweenInputsAndSwitcher","StyleSheet","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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"}