Merge pull request #223 from web-ridge/material-you-time-picker

Update time picker to material 3 specs.
web-ridge · Dec 27, 2022 · 96e4185 · 96e4185
2 parents 4e7e185 + 96e42a3
commit 96e4185
Show file tree

Hide file tree

Showing 23 changed files with 1,397 additions and 1,069 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -175,17 +175,6 @@ function App() {
             },
           ]}
         >
-          {/*<View style={styles.switchContainer}>*/}
-          {/*  <Text style={[styles.switchLabel, { ...theme.fonts.medium }]}>*/}
-          {/*    Dark mode (does not wo*/}
-          {/*  </Text>*/}
-          {/*  <View style={styles.switchSpace} />*/}
-          {/*  <Switch value={dark} onValueChange={onToggleDarkMode} />*/}
-          {/*</View>*/}
-          {/*<Enter />*/}
-          {/*<Enter />*/}
-          {/*<Enter />*/}
-          {/*<Enter />*/}
           <View>
             <Row>
               <Label>Input</Label>
@@ -432,7 +421,6 @@ const styles = StyleSheet.create({
     marginTop: 12,
     padding: 24,
     alignSelf: 'center',
-    // flex: 1,
   },
   contentInline: {
     padding: 0,
@@ -466,8 +454,6 @@ const styles = StyleSheet.create({
     left: 12,
     right: 12,
     bottom: 12,
-    // borderTopRightRadius: 20,
-    // borderBottomRightRadius: 20,
     backgroundColor: '#fff',
     overflow: 'hidden',
     shadowColor: '#000',

diff --git a/src/Time/AmPmSwitcher.tsx b/src/Time/AmPmSwitcher.tsx
@@ -3,24 +3,28 @@ import { View, StyleSheet } from 'react-native'
 import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { useMemo } from 'react'
 import Color from 'color'
-import { useSwitchColors } from './timeUtils'
+import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from './TimePicker'
 
 export default function AmPmSwitcher({
   onChange,
   hours,
+  inputType,
 }: {
   hours: number
   onChange: (newHours: number) => any
+  inputType: PossibleInputTypes
 }) {
   const { setMode, mode } = React.useContext(DisplayModeContext)
   const theme = useTheme()
   const backgroundColor = useMemo<string>(() => {
-    if (theme.dark) {
-      return Color(theme.colors.surface).lighten(1.2).hex()
+    if (theme.isV3) {
+      return theme.colors.outline
     }
     return Color(
-      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface
+      theme.dark
+        ? Color(theme.colors.surface).lighten(1.2).hex()
+        : theme.colors.surface
     )
       .darken(0.1)
       .hex()
@@ -31,9 +35,12 @@ export default function AmPmSwitcher({
     <View
       style={[
         styles.root,
+        // eslint-disable-next-line react-native/no-inline-styles
         {
           borderColor: backgroundColor,
-          borderRadius: theme.roundness,
+          borderRadius: theme.roundness * 2,
+          height: inputType === inputTypes.keyboard ? 72 : 80,
+          marginBottom: inputType === 'keyboard' ? 24 : 0,
         },
       ]}
     >
@@ -79,7 +86,7 @@ function SwitchButton({
   const { backgroundColor, color } = useSwitchColors(selected)
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.titleMedium
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -114,14 +121,13 @@ function SwitchButton({
 
 const styles = StyleSheet.create({
   root: {
-    width: 50,
-    height: 80,
+    width: 52,
     borderWidth: 1,
     overflow: 'hidden',
   },
   switchSeparator: {
     height: 1,
-    width: 48,
+    width: 52,
   },
   switchButton: {
     flex: 1,

diff --git a/src/Time/AnalogClock.tsx b/src/Time/AnalogClock.tsx
@@ -127,10 +127,10 @@ function AnalogClock({
       style={[
         styles.clock,
         {
-          backgroundColor: theme.dark
+          backgroundColor: theme.isV3
+            ? theme.colors.surfaceVariant
+            : theme.dark
             ? Color(theme.colors.surface).lighten(1.4).hex()
-            : theme.isV3
-            ? Color(theme.colors.outline).lighten(0.9).hex()
             : Color(theme.colors.surface).darken(0.1).hex(),
         },
       ]}
@@ -145,7 +145,15 @@ function AnalogClock({
             transform: [
               { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },
               {
-                translateX: circleSize / 4 - 4 - dynamicSize / 2,
+                translateX:
+                  circleSize / 4 -
+                  (focused === clockTypes.hours &&
+                  pointerNumber >= 0 &&
+                  pointerNumber < 13
+                    ? 0
+                    : 4) +
+                  (focused === clockTypes.minutes ? 4 : 0) -
+                  dynamicSize / 2,
               },
             ],
             width: circleSize / 2 - 4 - dynamicSize,
@@ -194,16 +202,15 @@ const styles = StyleSheet.create({
   },
   center: { justifyContent: 'center', 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,
   },

diff --git a/src/Time/AnalogClockHours.tsx b/src/Time/AnalogClockHours.tsx
@@ -33,7 +33,11 @@ function AnalogClockHours({
         >
           <View style={styles.outerHourInner}>
             {/* Display 00 instead of 12 for AM hours */}
-            <Text style={hours === i + 1 ? { color } : null} selectable={false}>
+            <Text
+              style={hours === i + 1 ? { color } : null}
+              variant="bodyLarge"
+              selectable={false}
+            >
               {mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
@@ -56,11 +60,11 @@ function AnalogClockHours({
                 <Text
                   selectable={false}
                   style={[
-                    styles.innerHourText,
                     i + 13 === hours || (i + 13 === 24 && hours === 0)
                       ? { color }
                       : null,
                   ]}
+                  variant="bodyLarge"
                 >
                   {i + 13 === 24 ? '00' : i + 13}
                 </Text>
@@ -78,27 +82,25 @@ const styles = 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 },
+  outerHourInner: { 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 },
+  innerHourInner: { borderRadius: 24 },
 })
 
 function getHourNumbers(

diff --git a/src/Time/AnalogClockMinutes.tsx b/src/Time/AnalogClockMinutes.tsx
@@ -33,6 +33,7 @@ function AnalogClockMinutes({ minutes }: { minutes: number }) {
               <Text
                 style={isCurrent ? { color } : undefined}
                 selectable={false}
+                variant="bodyLarge"
               >
                 {isZero ? '00' : currentMinutes}
               </Text>
@@ -50,14 +51,13 @@ const styles = 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 },
+  outerHourInner: { borderRadius: 24 },
   innerHourRoot: {
     position: 'absolute',
     zIndex: 20,

diff --git a/src/Time/TimeInput.tsx b/src/Time/TimeInput.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { View, TextInput, TextInputProps, StyleSheet } from 'react-native'
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  StyleSheet,
+  Platform,
+} from 'react-native'
 import { useTheme, TouchableRipple } from 'react-native-paper'
 
 import Color from 'color'
@@ -68,10 +74,17 @@ function TimeInput(
         ref={ref}
         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 === inputTypes.keyboard ? 72 : 80,
           },
         ]}
         value={formattedValue}
@@ -89,11 +102,14 @@ function TimeInput(
             StyleSheet.absoluteFill,
             styles.buttonOverlay,
             {
-              // backgroundColor: 'blue',
               borderRadius: theme.roundness,
             },
           ]}
-          rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
+          rippleColor={
+            Platform.OS !== 'ios'
+              ? Color(theme.colors.onSurface).fade(0.7).hex()
+              : undefined
+          }
           onPress={() => onPress(clockType)}
           borderless={true}
         >
@@ -107,11 +123,10 @@ function TimeInput(
 const styles = StyleSheet.create({
   root: { position: 'relative', height: 80, width: 96 },
   input: {
-    fontSize: 50,
+    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96,
-    height: 80,
   },
   buttonOverlay: { overflow: 'hidden' },
 })