From 4ea240f7dc4e1d2f97e94e1ff4a3e9e8c61a4745 Mon Sep 17 00:00:00 2001
From: Brandon Fitzwater <brandonfitzh2o@gmail.com>
Date: Tue, 16 Jul 2024 08:10:03 -0400
Subject: [PATCH] refactor: fixed layout for tablet views
---
example/src/App.tsx | 560 ++++++++++++++++++++++----------------------
1 file changed, 282 insertions(+), 278 deletions(-)
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 9e41d1d6..d44fa454 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -202,326 +202,331 @@ function App({
<ScrollView
style={{ backgroundColor: theme.colors.background }}
contentContainerStyle={[
- styles.contentContainer,
styles.paddingSixteen,
{ paddingTop: insets.top + 24, paddingBottom: insets.bottom },
]}
>
- <View style={isLarge && styles.surface}>
- <View style={styles.row}>
- <Image source={require('./schedule.png')} style={styles.logo} />
- <View style={styles.column}>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- onPress={() =>
- Linking.openURL(
- 'https://github.com/web-ridge/react-native-paper-dates'
- )
- }
- style={{ color: theme.colors.primary }}
- variant="titleLarge"
- >
- react-native-paper-dates
- </Text>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- variant="bodySmall"
- >
- Authors:{' '}
+ <View style={styles.contentContainer}>
+ <View style={isLarge && styles.surface}>
+ <View style={styles.row}>
+ <Image source={require('./schedule.png')} style={styles.logo} />
+ <View style={styles.column}>
<Text
maxFontSizeMultiplier={maxFontSizeMultiplier}
onPress={() =>
- Linking.openURL('https://twitter.com/RichardLindhout')
+ Linking.openURL(
+ 'https://github.com/web-ridge/react-native-paper-dates'
+ )
}
- style={{ color: theme.colors.secondary }}
- variant="bodySmall"
+ style={{ color: theme.colors.primary }}
+ variant="titleLarge"
>
- Richard Lindhout
+ react-native-paper-dates
</Text>
- ,{' '}
<Text
maxFontSizeMultiplier={maxFontSizeMultiplier}
- onPress={() => Linking.openURL('https://github.com/iM-GeeKy')}
- style={{ color: theme.colors.secondary }}
variant="bodySmall"
>
- Brandon Fitzwater
+ Authors:{' '}
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ onPress={() =>
+ Linking.openURL('https://twitter.com/RichardLindhout')
+ }
+ style={{ color: theme.colors.secondary }}
+ variant="bodySmall"
+ >
+ Richard Lindhout
+ </Text>
+ ,{' '}
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ onPress={() =>
+ Linking.openURL('https://github.com/iM-GeeKy')
+ }
+ style={{ color: theme.colors.secondary }}
+ variant="bodySmall"
+ >
+ Brandon Fitzwater
+ </Text>
</Text>
- </Text>
+ </View>
</View>
- </View>
- <Paragraph
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={styles.marginBottomEight}
- >
- Smooth and fast cross platform Material Design date picker for React
- Native Paper.
- </Paragraph>
-
- <View style={[styles.row, styles.gap, styles.marginVerticalEight]}>
- <Button
- icon="github"
- mode="contained-tonal"
- onPress={() =>
- Linking.openURL(
- 'https://github.com/web-ridge/react-native-paper-dates'
- )
- }
- >
- GitHub
- </Button>
- <Button
- icon="file-document-outline"
- mode="contained"
- onPress={() =>
- Linking.openURL(
- 'https://web-ridge.github.io/react-native-paper-dates/'
- )
- }
- >
- View documentation
- </Button>
- </View>
- <Divider style={styles.marginVerticalEight} />
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={[styles.marginVerticalEight, styles.bold]}
- >
- Material theme
- </Text>
- <View style={styles.chipContainer}>
- <Chip
- compact
- selected={materialYouEnabled}
- onPress={() => setMaterialYouEnabled(true)}
- style={styles.chip}
- >
- Material You
- </Chip>
- <Chip
- compact
- selected={!materialYouEnabled}
- onPress={() => setMaterialYouEnabled(false)}
- style={styles.chip}
+ <Paragraph
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ style={styles.marginBottomEight}
>
- Material Design 2
- </Chip>
- </View>
+ Smooth and fast cross platform Material Design date picker for
+ React Native Paper.
+ </Paragraph>
- <Divider style={styles.marginVerticalEight} />
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={[styles.marginVerticalEight, styles.bold]}
- >
- Presentation Style (iOS only)
- </Text>
- <View style={styles.chipContainer}>
- {presentationStyles.map((option) => {
- return (
- <Chip
- compact
- key={option}
- selected={presentationStyle === option}
- onPress={() =>
- setPresentationStyle(
- option as (typeof presentationStyles)[number]
- )
- }
- style={styles.chip}
- >
- {option}
- </Chip>
- )
- })}
- </View>
- <Divider style={styles.marginVerticalEight} />
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={[styles.marginVerticalEight, styles.bold]}
- >
- Locale
- </Text>
- <View style={styles.chipContainer}>
- {locales.map(([option]) => {
- return (
- <Chip
- compact
- key={option}
- selected={locale === option}
- onPress={() => setLocale(option)}
- style={styles.chip}
- >
- {option}
- </Chip>
- )
- })}
- </View>
- <Divider style={styles.marginTopSixteen} />
- <List.Section>
- <View style={[styles.row, styles.marginVerticalEight]}>
- <View style={styles.section}>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={styles.bold}
- >
- Time Picker
- </Text>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- variant="bodySmall"
- >
- {time &&
- time.hours !== undefined &&
- time.minutes !== undefined
- ? timeFormatter.format(timeDate)
- : 'No time selected.'}
- </Text>
- </View>
+ <View style={[styles.row, styles.gap, styles.marginVerticalEight]}>
<Button
- onPress={() => setTimeOpen(true)}
- uppercase={false}
+ icon="github"
mode="contained-tonal"
+ onPress={() =>
+ Linking.openURL(
+ 'https://github.com/web-ridge/react-native-paper-dates'
+ )
+ }
+ >
+ GitHub
+ </Button>
+ <Button
+ icon="file-document-outline"
+ mode="contained"
+ onPress={() =>
+ Linking.openURL(
+ 'https://web-ridge.github.io/react-native-paper-dates/'
+ )
+ }
>
- Pick time
+ View documentation
</Button>
</View>
<Divider style={styles.marginVerticalEight} />
<Text
maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={[styles.marginTopEight, styles.bold]}
+ style={[styles.marginVerticalEight, styles.bold]}
>
- Date Picker
+ Material theme
</Text>
+ <View style={styles.chipContainer}>
+ <Chip
+ compact
+ selected={materialYouEnabled}
+ onPress={() => setMaterialYouEnabled(true)}
+ style={styles.chip}
+ >
+ Material You
+ </Chip>
+ <Chip
+ compact
+ selected={!materialYouEnabled}
+ onPress={() => setMaterialYouEnabled(false)}
+ style={styles.chip}
+ >
+ Material Design 2
+ </Chip>
+ </View>
+
+ <Divider style={styles.marginVerticalEight} />
<Text
maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={[styles.marginTopSixteen, styles.marginBottomEight]}
+ style={[styles.marginVerticalEight, styles.bold]}
>
- Input
+ Presentation Style (iOS only)
</Text>
- <DatePickerInput
- locale={locale}
- value={inputDate}
- onChange={setInputDate}
- inputMode="start"
- autoComplete={'birthdate-full'}
- style={styles.marginBottomEight}
- />
- <View style={styles.sectionContainer}>
- <View style={styles.section}>
- <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
- Single Date
- </Text>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- variant="bodySmall"
+ <View style={styles.chipContainer}>
+ {presentationStyles.map((option) => {
+ return (
+ <Chip
+ compact
+ key={option}
+ selected={presentationStyle === option}
+ onPress={() =>
+ setPresentationStyle(
+ option as (typeof presentationStyles)[number]
+ )
+ }
+ style={styles.chip}
+ >
+ {option}
+ </Chip>
+ )
+ })}
+ </View>
+ <Divider style={styles.marginVerticalEight} />
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ style={[styles.marginVerticalEight, styles.bold]}
+ >
+ Locale
+ </Text>
+ <View style={styles.chipContainer}>
+ {locales.map(([option]) => {
+ return (
+ <Chip
+ compact
+ key={option}
+ selected={locale === option}
+ onPress={() => setLocale(option)}
+ style={styles.chip}
+ >
+ {option}
+ </Chip>
+ )
+ })}
+ </View>
+ <Divider style={styles.marginTopSixteen} />
+ <List.Section>
+ <View style={[styles.row, styles.marginVerticalEight]}>
+ <View style={styles.section}>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ style={styles.bold}
+ >
+ Time Picker
+ </Text>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ variant="bodySmall"
+ >
+ {time &&
+ time.hours !== undefined &&
+ time.minutes !== undefined
+ ? timeFormatter.format(timeDate)
+ : 'No time selected.'}
+ </Text>
+ </View>
+ <Button
+ onPress={() => setTimeOpen(true)}
+ uppercase={false}
+ mode="contained-tonal"
>
- {date ? dateFormatter.format(date) : 'No date selected.'}
- </Text>
+ Pick time
+ </Button>
</View>
- <Button
- onPress={() => setSingleOpen(true)}
- uppercase={false}
- mode="contained-tonal"
+ <Divider style={styles.marginVerticalEight} />
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ style={[styles.marginTopEight, styles.bold]}
>
- Pick single date
- </Button>
- </View>
- <View style={styles.sectionContainer}>
- <View style={styles.section}>
- <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
- Multiple Dates
- </Text>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- variant="bodySmall"
+ Date Picker
+ </Text>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ style={[styles.marginTopSixteen, styles.marginBottomEight]}
+ >
+ Input
+ </Text>
+ <View style={styles.row}>
+ <DatePickerInput
+ locale={locale}
+ value={inputDate}
+ onChange={setInputDate}
+ inputMode="start"
+ autoComplete={'birthdate-full'}
+ style={styles.marginBottomEight}
+ />
+ </View>
+ <View style={styles.sectionContainer}>
+ <View style={styles.section}>
+ <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
+ Single Date
+ </Text>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ variant="bodySmall"
+ >
+ {date ? dateFormatter.format(date) : 'No date selected.'}
+ </Text>
+ </View>
+ <Button
+ onPress={() => setSingleOpen(true)}
+ uppercase={false}
+ mode="contained-tonal"
>
- {dates
- ?.map((d) => dateFormatter.format(d))
- .filter(Boolean)
- .join(', ') || 'No dates selected.'}
- </Text>
+ Pick single date
+ </Button>
+ </View>
+ <View style={styles.sectionContainer}>
+ <View style={styles.section}>
+ <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
+ Multiple Dates
+ </Text>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ variant="bodySmall"
+ >
+ {dates
+ ?.map((d) => dateFormatter.format(d))
+ .filter(Boolean)
+ .join(', ') || 'No dates selected.'}
+ </Text>
+ </View>
+ <Button
+ onPress={() => setMultiOpen(true)}
+ uppercase={false}
+ mode="contained-tonal"
+ >
+ Pick multiple dates
+ </Button>
</View>
- <Button
- onPress={() => setMultiOpen(true)}
- uppercase={false}
- mode="contained-tonal"
- >
- Pick multiple dates
- </Button>
- </View>
- <View style={styles.sectionContainer}>
- <View style={styles.section}>
- <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
- Date Range
+ <View style={styles.sectionContainer}>
+ <View style={styles.section}>
+ <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
+ Date Range
+ </Text>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ variant="bodySmall"
+ >
+ {!range.startDate && !range.endDate
+ ? 'No dates selected.'
+ : [
+ range.startDate
+ ? dateFormatter.format(range.startDate)
+ : '',
+ range.endDate
+ ? dateFormatter.format(range.endDate)
+ : '',
+ ].join(' - ')}
+ </Text>
+ </View>
+ <Button
+ onPress={() => setRangeOpen(true)}
+ uppercase={false}
+ mode="contained-tonal"
+ >
+ Pick range
+ </Button>
+ </View>
+ </List.Section>
+ <Divider />
+ <List.Section>
+ <View style={styles.marginTopSixteen}>
+ <Text
+ maxFontSizeMultiplier={maxFontSizeMultiplier}
+ style={styles.bold}
+ >
+ Other great libraries
</Text>
<Text
maxFontSizeMultiplier={maxFontSizeMultiplier}
variant="bodySmall"
>
- {!range.startDate && !range.endDate
- ? 'No dates selected.'
- : [
- range.startDate
- ? dateFormatter.format(range.startDate)
- : '',
- range.endDate
- ? dateFormatter.format(range.endDate)
- : '',
- ].join(' - ')}
+ We have made performant, type-safe libraries to help you build
+ great apps, they also always work great on the web too!
</Text>
</View>
- <Button
- onPress={() => setRangeOpen(true)}
- uppercase={false}
- mode="contained-tonal"
- >
- Pick range
- </Button>
- </View>
- </List.Section>
- <Divider />
- <List.Section>
- <View style={[styles.section, styles.marginTopSixteen]}>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- style={styles.bold}
- >
- Other great libraries
- </Text>
- <Text
- maxFontSizeMultiplier={maxFontSizeMultiplier}
- variant="bodySmall"
- >
- We have made performant, type-safe libraries to help you build
- great apps, they also always work great on the web too!
- </Text>
- </View>
- <View style={[styles.gap, styles.marginVerticalSixteen]}>
- <Button
- icon="github"
- mode="contained-tonal"
- onPress={() =>
- Linking.openURL(
- 'https://github.com/web-ridge/react-native-use-form'
- )
- }
- >
- React Native Use Form
- </Button>
- <Button
- icon="github"
- mode="contained-tonal"
- onPress={() =>
- Linking.openURL(
- 'https://github.com/web-ridge/react-native-ridge-navigation'
- )
- }
- >
- React Native Ridge Navigation
- </Button>
- </View>
- </List.Section>
+ <View style={[styles.gap, styles.marginVerticalSixteen]}>
+ <Button
+ icon="github"
+ mode="contained-tonal"
+ onPress={() =>
+ Linking.openURL(
+ 'https://github.com/web-ridge/react-native-use-form'
+ )
+ }
+ >
+ React Native Use Form
+ </Button>
+ <Button
+ icon="github"
+ mode="contained-tonal"
+ onPress={() =>
+ Linking.openURL(
+ 'https://github.com/web-ridge/react-native-ridge-navigation'
+ )
+ }
+ >
+ React Native Ridge Navigation
+ </Button>
+ </View>
+ </List.Section>
+ </View>
</View>
</ScrollView>
<DatePickerModal
@@ -612,8 +617,8 @@ const styles = StyleSheet.create({
padding: 16,
},
contentContainer: {
- flexGrow: 1,
- justifyContent: 'center',
+ flex: 1,
+ alignItems: 'center',
},
marginBottomEight: {
marginBottom: 8,
@@ -651,7 +656,6 @@ const styles = StyleSheet.create({
surface: {
padding: 24,
maxWidth: 550,
- alignSelf: 'center',
borderRadius: 10,
},
})