Skip to content

Commit 96e4185

Browse files
RichardLindhoutRichardLindhout
authored
Merge pull request #223 from web-ridge/material-you-time-picker
Update time picker to material 3 specs.
2 parents 4e7e185 + 96e42a3 commit 96e4185

23 files changed

+1397
-1069
lines changed

‎example/src/App.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -175,17 +175,6 @@ function App() {
175175
},
176176
]}
177177
>
178-
{/*<View style={styles.switchContainer}>*/}
179-
{/* <Text style={[styles.switchLabel, { ...theme.fonts.medium }]}>*/}
180-
{/* Dark mode (does not wo*/}
181-
{/* </Text>*/}
182-
{/* <View style={styles.switchSpace} />*/}
183-
{/* <Switch value={dark} onValueChange={onToggleDarkMode} />*/}
184-
{/*</View>*/}
185-
{/*<Enter />*/}
186-
{/*<Enter />*/}
187-
{/*<Enter />*/}
188-
{/*<Enter />*/}
189178
<View>
190179
<Row>
191180
<Label>Input</Label>
@@ -432,7 +421,6 @@ const styles = StyleSheet.create({
432421
marginTop: 12,
433422
padding: 24,
434423
alignSelf: 'center',
435-
// flex: 1,
436424
},
437425
contentInline: {
438426
padding: 0,
@@ -466,8 +454,6 @@ const styles = StyleSheet.create({
466454
left: 12,
467455
right: 12,
468456
bottom: 12,
469-
// borderTopRightRadius: 20,
470-
// borderBottomRightRadius: 20,
471457
backgroundColor: '#fff',
472458
overflow: 'hidden',
473459
shadowColor: '#000',

‎src/Time/AmPmSwitcher.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,28 @@ import { View, StyleSheet } from 'react-native'
33
import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
44
import { useMemo } from 'react'
55
import Color from 'color'
6-
import { useSwitchColors } from './timeUtils'
6+
import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
77
import { DisplayModeContext } from './TimePicker'
88

99
export default function AmPmSwitcher({
1010
onChange,
1111
hours,
12+
inputType,
1213
}: {
1314
hours: number
1415
onChange: (newHours: number) => any
16+
inputType: PossibleInputTypes
1517
}) {
1618
const { setMode, mode } = React.useContext(DisplayModeContext)
1719
const theme = useTheme()
1820
const backgroundColor = useMemo<string>(() => {
19-
if (theme.dark) {
20-
return Color(theme.colors.surface).lighten(1.2).hex()
21+
if (theme.isV3) {
22+
return theme.colors.outline
2123
}
2224
return Color(
23-
theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface
25+
theme.dark
26+
? Color(theme.colors.surface).lighten(1.2).hex()
27+
: theme.colors.surface
2428
)
2529
.darken(0.1)
2630
.hex()
@@ -31,9 +35,12 @@ export default function AmPmSwitcher({
3135
<View
3236
style={[
3337
styles.root,
38+
// eslint-disable-next-line react-native/no-inline-styles
3439
{
3540
borderColor: backgroundColor,
36-
borderRadius: theme.roundness,
41+
borderRadius: theme.roundness * 2,
42+
height: inputType === inputTypes.keyboard ? 72 : 80,
43+
marginBottom: inputType === 'keyboard' ? 24 : 0,
3744
},
3845
]}
3946
>
@@ -79,7 +86,7 @@ function SwitchButton({
7986
const { backgroundColor, color } = useSwitchColors(selected)
8087

8188
let textFont = theme?.isV3
82-
? theme.fonts.bodyMedium
89+
? theme.fonts.titleMedium
8390
: (theme as any as MD2Theme).fonts.medium
8491

8592
return (
@@ -114,14 +121,13 @@ function SwitchButton({
114121

115122
const styles = StyleSheet.create({
116123
root: {
117-
width: 50,
118-
height: 80,
124+
width: 52,
119125
borderWidth: 1,
120126
overflow: 'hidden',
121127
},
122128
switchSeparator: {
123129
height: 1,
124-
width: 48,
130+
width: 52,
125131
},
126132
switchButton: {
127133
flex: 1,

‎src/Time/AnalogClock.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,10 @@ function AnalogClock({
127127
style={[
128128
styles.clock,
129129
{
130-
backgroundColor: theme.dark
130+
backgroundColor: theme.isV3
131+
? theme.colors.surfaceVariant
132+
: theme.dark
131133
? Color(theme.colors.surface).lighten(1.4).hex()
132-
: theme.isV3
133-
? Color(theme.colors.outline).lighten(0.9).hex()
134134
: Color(theme.colors.surface).darken(0.1).hex(),
135135
},
136136
]}
@@ -145,7 +145,15 @@ function AnalogClock({
145145
transform: [
146146
{ rotate: -90 + pointerNumber * degreesPerNumber + 'deg' },
147147
{
148-
translateX: circleSize / 4 - 4 - dynamicSize / 2,
148+
translateX:
149+
circleSize / 4 -
150+
(focused === clockTypes.hours &&
151+
pointerNumber >= 0 &&
152+
pointerNumber < 13
153+
? 0
154+
: 4) +
155+
(focused === clockTypes.minutes ? 4 : 0) -
156+
dynamicSize / 2,
149157
},
150158
],
151159
width: circleSize / 2 - 4 - dynamicSize,
@@ -194,16 +202,15 @@ const styles = StyleSheet.create({
194202
},
195203
center: { justifyContent: 'center', alignItems: 'center' },
196204
endPoint: {
197-
borderRadius: 15,
198-
height: 30,
199-
width: 30,
205+
borderRadius: 24,
206+
height: 48,
207+
width: 48,
200208
position: 'absolute',
201209
right: 0,
202-
bottom: -14,
210+
bottom: -23,
203211
},
204212
line: {
205213
position: 'absolute',
206-
marginBottom: -1,
207214
height: 2,
208215
borderRadius: 4,
209216
},

‎src/Time/AnalogClockHours.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ function AnalogClockHours({
3333
>
3434
<View style={styles.outerHourInner}>
3535
{/* Display 00 instead of 12 for AM hours */}
36-
<Text style={hours === i + 1 ? { color } : null} selectable={false}>
36+
<Text
37+
style={hours === i + 1 ? { color } : null}
38+
variant="bodyLarge"
39+
selectable={false}
40+
>
3741
{mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1}
3842
</Text>
3943
</View>
@@ -56,11 +60,11 @@ function AnalogClockHours({
5660
<Text
5761
selectable={false}
5862
style={[
59-
styles.innerHourText,
6063
i + 13 === hours || (i + 13 === 24 && hours === 0)
6164
? { color }
6265
: null,
6366
]}
67+
variant="bodyLarge"
6468
>
6569
{i + 13 === 24 ? '00' : i + 13}
6670
</Text>
@@ -78,27 +82,25 @@ const styles = StyleSheet.create({
7882
justifyContent: 'center',
7983
alignItems: 'center',
8084
zIndex: 20,
81-
width: 50,
82-
height: 50,
83-
marginLeft: -25,
84-
marginTop: -25,
85-
86-
borderRadius: 25,
85+
width: 48,
86+
height: 48,
87+
marginLeft: -24,
88+
marginTop: -24,
89+
borderRadius: 24,
8790
},
88-
outerHourInner: { borderRadius: 25 },
91+
outerHourInner: { borderRadius: 24 },
8992
innerHourRoot: {
9093
position: 'absolute',
9194
zIndex: 20,
9295
justifyContent: 'center',
9396
alignItems: 'center',
94-
width: 40,
95-
height: 40,
96-
marginLeft: -20,
97-
marginTop: -20,
98-
borderRadius: 20,
97+
width: 48,
98+
height: 48,
99+
marginLeft: -24,
100+
marginTop: -24,
101+
borderRadius: 24,
99102
},
100-
innerHourInner: { borderRadius: 20 },
101-
innerHourText: { fontSize: 13 },
103+
innerHourInner: { borderRadius: 24 },
102104
})
103105

104106
function getHourNumbers(

‎src/Time/AnalogClockMinutes.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ function AnalogClockMinutes({ minutes }: { minutes: number }) {
3333
<Text
3434
style={isCurrent ? { color } : undefined}
3535
selectable={false}
36+
variant="bodyLarge"
3637
>
3738
{isZero ? '00' : currentMinutes}
3839
</Text>
@@ -50,14 +51,13 @@ const styles = StyleSheet.create({
5051
justifyContent: 'center',
5152
alignItems: 'center',
5253
zIndex: 20,
53-
width: 50,
54-
height: 50,
55-
marginLeft: -25,
56-
marginTop: -25,
57-
58-
borderRadius: 25,
54+
width: 48,
55+
height: 48,
56+
marginLeft: -24,
57+
marginTop: -24,
58+
borderRadius: 24,
5959
},
60-
outerHourInner: { borderRadius: 25 },
60+
outerHourInner: { borderRadius: 24 },
6161
innerHourRoot: {
6262
position: 'absolute',
6363
zIndex: 20,

‎src/Time/TimeInput.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import * as React from 'react'
2-
import { View, TextInput, TextInputProps, StyleSheet } from 'react-native'
2+
import {
3+
View,
4+
TextInput,
5+
TextInputProps,
6+
StyleSheet,
7+
Platform,
8+
} from 'react-native'
39
import { useTheme, TouchableRipple } from 'react-native-paper'
410

511
import Color from 'color'
@@ -68,10 +74,17 @@ function TimeInput(
6874
ref={ref}
6975
style={[
7076
styles.input,
77+
// eslint-disable-next-line react-native/no-inline-styles
7178
{
7279
color,
7380
backgroundColor,
74-
borderRadius: theme.roundness,
81+
borderRadius: theme.roundness * 2,
82+
borderColor:
83+
theme.isV3 && highlighted
84+
? theme.colors.onPrimaryContainer
85+
: undefined,
86+
borderWidth: theme.isV3 && highlighted ? 2 : 0,
87+
height: inputType === inputTypes.keyboard ? 72 : 80,
7588
},
7689
]}
7790
value={formattedValue}
@@ -89,11 +102,14 @@ function TimeInput(
89102
StyleSheet.absoluteFill,
90103
styles.buttonOverlay,
91104
{
92-
// backgroundColor: 'blue',
93105
borderRadius: theme.roundness,
94106
},
95107
]}
96-
rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
108+
rippleColor={
109+
Platform.OS !== 'ios'
110+
? Color(theme.colors.onSurface).fade(0.7).hex()
111+
: undefined
112+
}
97113
onPress={() => onPress(clockType)}
98114
borderless={true}
99115
>
@@ -107,11 +123,10 @@ function TimeInput(
107123
const styles = StyleSheet.create({
108124
root: { position: 'relative', height: 80, width: 96 },
109125
input: {
110-
fontSize: 50,
126+
fontSize: 57,
111127
textAlign: 'center',
112128
textAlignVertical: 'center',
113129
width: 96,
114-
height: 80,
115130
},
116131
buttonOverlay: { overflow: 'hidden' },
117132
})

0 commit comments

Comments
 (0)