Skip to content

Commit df21639

Browse files
RichardLindhoutRichardLindhout
authored
Merge pull request #227 from web-ridge/material-3-date-picker
Update Date color and text specs for MD3.
2 parents 609b997 + bec5cb9 commit df21639

16 files changed

+445
-175
lines changed

‎src/Date/Calendar.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,9 @@ function Calendar(
100100
const theme = useTheme()
101101

102102
const selectColor = useMemo<string>(() => {
103+
if (theme.isV3) {
104+
return theme.colors.primaryContainer
105+
}
103106
if (theme.dark) {
104107
return darkenBy(Color(theme.colors.primary), 0.1).hex()
105108
}

‎src/Date/CalendarHeader.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ function CalendarHeader({
5353
onPress={onPrev}
5454
/>
5555
</View>
56-
5756
<View
5857
style={[
5958
styles.buttonWrapper,

‎src/Date/DatePickerModalContent.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import Calendar, {
1111
} from './Calendar'
1212

1313
import AnimatedCrossView from './AnimatedCrossView'
14-
1514
import DatePickerModalHeader from './DatePickerModalHeader'
1615
import DatePickerModalContentHeader, {
1716
HeaderPickProps,
@@ -86,7 +85,6 @@ export function DatePickerModalContent(
8685
startYear,
8786
endYear,
8887
} = props
89-
9088
const anyProps = props as any
9189

9290
// use local state to add only onConfirm state changes
@@ -164,11 +162,10 @@ export function DatePickerModalContent(
164162
endLabel={props.endLabel}
165163
uppercase={props.uppercase ?? true}
166164
locale={locale}
167-
editIcon={props.editIcon}
165+
editIcon={props?.editIcon}
168166
calendarIcon={props.calendarIcon}
169167
/>
170168
</DatePickerModalHeaderBackground>
171-
172169
<AnimatedCrossView
173170
collapsed={collapsed}
174171
calendar={

‎src/Date/DatePickerModalContentHeader.tsx‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,23 +58,26 @@ export default function DatePickerModalContentHeader(
5858
mode,
5959
moreLabel,
6060
uppercase,
61-
editIcon = 'pencil',
62-
calendarIcon = 'calendar',
61+
editIcon,
62+
calendarIcon,
6363
} = props
6464
const theme = useTheme()
6565
const label = getLabel(props.locale, props.mode, props.label)
6666

6767
const color = useHeaderTextColor()
68+
const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
6869
const allowEditing = mode !== 'multiple'
6970

7071
let textFont = theme?.isV3
71-
? theme.fonts.bodyLarge
72+
? theme.fonts.labelMedium
7273
: (theme as any as MD2Theme).fonts.medium
7374

7475
return (
75-
<View style={[styles.header]}>
76+
<View style={styles.header}>
7677
<View>
77-
<Text style={[styles.label, { color, ...textFont }]}>
78+
<Text
79+
style={[styles.label, { color: supportingTextColor, ...textFont }]}
80+
>
7881
{uppercase ? label.toUpperCase() : label}
7982
</Text>
8083
<View style={styles.headerContentContainer}>
@@ -96,13 +99,21 @@ export default function DatePickerModalContentHeader(
9699
<View style={styles.fill} />
97100
{allowEditing ? (
98101
<IconButton
99-
icon={collapsed ? editIcon : calendarIcon}
102+
icon={
103+
collapsed
104+
? editIcon ?? theme.isV3
105+
? 'pencil-outline'
106+
: 'pencil'
107+
: calendarIcon ?? theme.isV3
108+
? 'calendar-blank'
109+
: 'calendar'
110+
}
100111
accessibilityLabel={
101112
collapsed
102113
? getTranslation(props.locale, 'typeInDate')
103114
: getTranslation(props.locale, 'pickDateFromCalendar')
104115
}
105-
iconColor={color}
116+
iconColor={theme.isV3 ? theme.colors.onSurface : color}
106117
onPress={onToggle}
107118
/>
108119
) : null}
@@ -116,8 +127,13 @@ export function HeaderContentSingle({
116127
color,
117128
locale,
118129
}: HeaderContentProps & { color: string }) {
130+
const theme = useTheme()
119131
const lighterColor = Color(color).fade(0.5).rgb().toString()
120-
const dateColor = state.date ? color : lighterColor
132+
const dateColor = state.date
133+
? theme.isV3
134+
? theme.colors.onSurface
135+
: color
136+
: lighterColor
121137

122138
const formatter = React.useMemo(() => {
123139
return new Intl.DateTimeFormat(locale, {
@@ -140,9 +156,14 @@ export function HeaderContentMulti({
140156
color,
141157
locale,
142158
}: HeaderContentProps & { color: string; moreLabel: string | undefined }) {
159+
const theme = useTheme()
143160
const dateCount = state.dates?.length || 0
144161
const lighterColor = Color(color).fade(0.5).rgb().toString()
145-
const dateColor = dateCount ? color : lighterColor
162+
const dateColor = dateCount
163+
? theme.isV3
164+
? theme.colors.onSurface
165+
: color
166+
: lighterColor
146167

147168
const formatter = React.useMemo(() => {
148169
return new Intl.DateTimeFormat(locale, {
@@ -174,6 +195,7 @@ export function HeaderContentRange({
174195
endLabel = 'End',
175196
color,
176197
}: HeaderContentProps & { color: string }) {
198+
const theme = useTheme()
177199
const formatter = React.useMemo(() => {
178200
return new Intl.DateTimeFormat(locale, {
179201
month: 'short',
@@ -182,8 +204,16 @@ export function HeaderContentRange({
182204
}, [locale])
183205

184206
const lighterColor = Color(color).fade(0.5).rgb().toString()
185-
const startColor = state.startDate ? color : lighterColor
186-
const endColor = state.endDate ? color : lighterColor
207+
const startColor = state.startDate
208+
? theme.isV3
209+
? theme.colors.onSurface
210+
: color
211+
: lighterColor
212+
const endColor = state.endDate
213+
? theme.isV3
214+
? theme.colors.onSurface
215+
: color
216+
: lighterColor
187217

188218
return (
189219
<>
@@ -226,7 +256,6 @@ const styles = StyleSheet.create({
226256
marginTop: -3,
227257
marginLeft: 3,
228258
},
229-
230259
headerSeparator: {
231260
color: 'rgba(255,255,255,1)',
232261
fontSize: 25,

‎src/Date/DatePickerModalHeader.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { Animated, StyleSheet } from 'react-native'
3-
import { Appbar, Button } from 'react-native-paper'
3+
import { Appbar, Button, useTheme } from 'react-native-paper'
44

55
import { useHeaderTextColor } from '../utils'
66
import { getTranslation } from '../translations/utils'
@@ -20,6 +20,7 @@ export interface DatePickerModalHeaderProps {
2020
export default function DatePickerModalHeader(
2121
props: DatePickerModalHeaderProps
2222
) {
23+
const theme = useTheme()
2324
const { disableSafeTop, locale, closeIcon = 'close' } = props
2425
const saveLabel = props.saveLabel || getTranslation(locale, 'save')
2526
const color = useHeaderTextColor()
@@ -29,6 +30,7 @@ export default function DatePickerModalHeader(
2930
<Animated.View
3031
style={[
3132
styles.animated,
33+
// eslint-disable-next-line react-native/no-inline-styles
3234
{
3335
paddingTop: disableSafeTop ? 0 : insets.top,
3436
paddingLeft: insets.left,
@@ -47,7 +49,7 @@ export default function DatePickerModalHeader(
4749
<Appbar.Content title={''} />
4850
<Button
4951
color={color}
50-
textColor={color}
52+
textColor={theme.isV3 ? theme.colors.primary : color}
5153
onPress={props.onSave}
5254
disabled={props.saveLabelDisabled ?? false}
5355
uppercase={props.uppercase ?? true}
@@ -90,6 +92,5 @@ const styles = StyleSheet.create({
9092
appbarHeader: {
9193
elevation: 0,
9294
backgroundColor: 'transparent',
93-
// alignItems:'center'
9495
},
9596
})

‎src/Date/Day.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,27 @@ function Day(props: {
4747
onPressDate(new Date(year, month, day))
4848
}, [onPressDate, year, month, day])
4949

50-
const borderColor =
51-
selected || (inRange && theme.dark)
52-
? textColorOnPrimary
53-
: theme.dark
54-
? '#fff'
55-
: '#000'
50+
const borderColor = theme.isV3
51+
? theme.colors.primary
52+
: selected || (inRange && theme.dark)
53+
? textColorOnPrimary
54+
: theme.dark
55+
? '#fff'
56+
: '#000'
57+
5658
const textColor =
57-
selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
59+
theme.isV3 && selected
60+
? theme.colors.onPrimary
61+
: theme.isV3 && inRange && theme.dark
62+
? theme.colors.onPrimaryContainer
63+
: selected || (inRange && theme.dark)
64+
? textColorOnPrimary
65+
: theme.isV3
66+
? theme.colors.onSurface
67+
: undefined
5868

5969
let textFont = theme?.isV3
60-
? theme.fonts.bodyMedium
70+
? theme.fonts.bodySmall
6171
: (theme as any as MD2Theme).fonts.medium
6272

6373
return (
@@ -68,7 +78,6 @@ function Day(props: {
6878
rightCrop={rightCrop}
6979
selectColor={selectColor}
7080
/>
71-
7281
<TouchableRipple
7382
testID={`react-native-paper-dates-day-${year}-${month}-${day}`}
7483
disabled={disabled}
@@ -89,7 +98,12 @@ function Day(props: {
8998
>
9099
<Text
91100
style={[
92-
textColor ? { color: textColor } : undefined,
101+
textColor
102+
? {
103+
color:
104+
theme.isV3 && isToday ? theme.colors.primary : textColor,
105+
}
106+
: undefined,
93107
{ ...textFont },
94108
]}
95109
selectable={false}

‎src/Date/DayName.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@ function DayName({ label }: { label: string }) {
66
const theme = useTheme()
77

88
let textFont = theme?.isV3
9-
? theme.fonts.bodyMedium
9+
? theme.fonts.bodySmall
1010
: (theme as any as MD2Theme).fonts.medium
1111

1212
return (
1313
<View style={styles.dayName}>
14-
<Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
14+
<Text
15+
style={[
16+
styles.dayNameLabel,
17+
{ ...textFont, color: theme.colors.onSurface },
18+
]}
19+
selectable={false}
20+
>
1521
{label}
1622
</Text>
1723
</View>

‎src/Date/Month.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
251251
])
252252

253253
let textFont = theme?.isV3
254-
? theme.fonts.bodyMedium
254+
? theme.fonts.titleSmall
255255
: (theme as any as MD2Theme).fonts.medium
256256

257257
return (
@@ -288,21 +288,36 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
288288
]}
289289
>
290290
<Text
291-
style={[styles.monthLabel, { ...textFont }]}
291+
style={[
292+
styles.monthLabel,
293+
{
294+
...textFont,
295+
color: theme.isV3
296+
? theme.colors.onSurfaceVariant
297+
: theme.colors.onSurface,
298+
},
299+
]}
292300
selectable={false}
293301
>
294302
{monthName} {year}
295303
</Text>
296304
<View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
297305
<IconButton
298306
onPress={isHorizontal ? () => onPressYear(year) : undefined}
299-
icon={selectingYear ? 'chevron-up' : 'chevron-down'}
307+
icon={
308+
selectingYear
309+
? theme.isV3
310+
? 'menu-up'
311+
: 'chevron-up'
312+
: theme.isV3
313+
? 'menu-down'
314+
: 'chevron-down'
315+
}
300316
/>
301317
</View>
302318
</View>
303319
</TouchableRipple>
304320
</View>
305-
306321
{grid.map(({ weekIndex, generatedDays }) => (
307322
<View style={styles.week} key={weekIndex}>
308323
{generatedDays
@@ -350,9 +365,7 @@ const styles = StyleSheet.create({
350365
marginBottom: weekMargin,
351366
height: daySize,
352367
},
353-
354368
month: {},
355-
356369
monthHeader: {
357370
height: montHeaderHeight,
358371
justifyContent: 'center',

‎src/Date/YearPicker.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,14 @@ function YearPure({
9696
<Text
9797
style={[
9898
styles.yearLabel,
99-
selected ? styles.selectedYear : null,
99+
selected
100+
? // eslint-disable-next-line react-native/no-inline-styles
101+
{ color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
102+
: {
103+
color: theme.isV3
104+
? theme.colors.onSurfaceVariant
105+
: undefined,
106+
},
100107
{ ...textFont },
101108
]}
102109
selectable={false}
@@ -127,7 +134,6 @@ const styles = StyleSheet.create({
127134
height: ITEM_HEIGHT,
128135
justifyContent: 'center',
129136
},
130-
selectedYear: { color: '#fff' },
131137
yearButton: {
132138
borderRadius: 46 / 2,
133139
overflow: 'hidden',

0 commit comments

Comments
 (0)