From 5e6cd991498dd0c214485bd0611b4f275976947d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 26 Apr 2022 21:59:15 +0200 Subject: [PATCH] refactor: add card title and subtitle variants, adjust example --- example/src/Examples/CardExample.tsx | 105 ++++++++++++++------------- src/components/Card/Card.tsx | 4 +- src/components/Card/CardActions.tsx | 3 +- src/components/Card/CardTitle.tsx | 42 ++++++++++- 4 files changed, 96 insertions(+), 58 deletions(-) diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx index 2a198ec13d..b5fd4fee8a 100644 --- a/example/src/Examples/CardExample.tsx +++ b/example/src/Examples/CardExample.tsx @@ -7,77 +7,82 @@ import { Button, IconButton, useTheme, - Text, - Switch, Chip, + Text, } from 'react-native-paper'; import { PreferencesContext } from '..'; import ScreenWrapper from '../ScreenWrapper'; +type Mode = 'elevated' | 'outlined' | 'filled'; + const CardExample = () => { const { colors, isV3 } = useTheme(); - const [isOutlined, setIsOutlined] = React.useState(false); - const isV2mode = isOutlined ? 'outlined' : 'elevated'; - const [isV3mode, setIsV3Mode] = React.useState('elevated') as any; + const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode); const preferences = React.useContext(PreferencesContext); - const mode = isV3 ? isV3mode : isV2mode; + + const modes = isV3 + ? ['elevated', 'outlined', 'filled'] + : ['elevated', 'outlined']; + + const TextComponent = isV3 ? Text : Paragraph; return ( - {isV3 ? ( - <> - {['elevated', 'outlined', 'filled'].map((mode) => ( - setIsV3Mode(mode)} - style={styles.chip} - > - {mode} - - ))} - - ) : ( - <> - Outlined - - setIsOutlined((prevIsOutlined) => !prevIsOutlined) - } - /> - - )} + {(modes as Mode[]).map((mode) => ( + setSelectedMode(mode)} + style={styles.chip} + > + {mode} + + ))} - + - + The Abandoned Ship is a wrecked ship located on Route 108 in Hoenn, originally being a ship named the S.S. Cactus. The second part of the ship can only be accessed by using Dive and contains the Scanner. - + - + {isV3 && ( + + + + + + This is a card using title and subtitle with specified variants. + + + + )} + - + { )} /> - + Dotted around the Hoenn region, you will find loamy soil, many of which are housing berries. Once you have picked the berries, then you have the ability to use that loamy soil to grow your own berries. These can be any berry and will require attention to get the best crop. - + - + @@ -113,14 +118,14 @@ const CardExample = () => { onPress={() => { Alert.alert('The Chameleon is Pressed'); }} - mode={mode} + mode={selectedMode} > - + This is a pressable chameleon. If you press me, I will alert. - + { onLongPress={() => { Alert.alert('The City is Long Pressed'); }} - mode={mode} + mode={selectedMode} > { left={(props) => } /> - + This is a long press only city. If you long press me, I will alert. - + { onPress={() => { preferences.toggleTheme(); }} - mode={mode} + mode={selectedMode} > } /> - + This is pressable card. If you press me, I will switch the theme. - + @@ -178,12 +183,10 @@ const styles = StyleSheet.create({ }, chip: { margin: 4, - width: 100, }, preference: { alignItems: 'center', flexDirection: 'row', - justifyContent: 'space-between', paddingVertical: 12, paddingHorizontal: 8, }, diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index ed64e6e722..5491bff8e1 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -165,13 +165,13 @@ const Card = ({ const isPressTypeIn = pressType === 'in'; if (dark && isAdaptiveMode) { Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? (isV3 ? 1 : 8) : cardElevation, + toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, duration: animationDuration, useNativeDriver: false, }).start(); } else { Animated.timing(elevation, { - toValue: isPressTypeIn ? (isV3 ? 1 : 8) : cardElevation, + toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, duration: animationDuration, useNativeDriver: false, }).start(); diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx index f625402974..be5f58a328 100644 --- a/src/components/Card/CardActions.tsx +++ b/src/components/Card/CardActions.tsx @@ -48,7 +48,7 @@ const CardActions = (props: Props) => { {React.Children.map(props.children, (child, i) => { return React.isValidElement(child) ? React.cloneElement(child, { - compact: child.props.compact !== false, + compact: !isV3 && child.props.compact !== false, mode: isV3 && (i === 0 ? 'outlined' : 'contained'), style: isV3 && styles.button, }) @@ -67,7 +67,6 @@ const styles = StyleSheet.create({ padding: 8, }, button: { - paddingHorizontal: 24, marginLeft: 8, }, }); diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index 7ab898d6de..8f7652f10b 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -8,7 +8,7 @@ import { } from 'react-native'; import { withTheme } from '../../core/theming'; -import type { Theme } from '../../types'; +import type { MD3TypescaleKey, Theme } from '../../types'; import Caption from '../Typography/v2/Caption'; import Title from '../Typography/v2/Title'; import Text from '../Typography/Text'; @@ -26,6 +26,23 @@ type Props = React.ComponentPropsWithRef & { * Number of lines for the title. */ titleNumberOfLines?: number; + /** + * @supported Available in v3.x with theme version 3 + * + * Title text variant defines appropriate text styles for type role and its size. + * Available variants: + * + * Display: `displayLarge`, `displayMedium`, `displaySmall` + * + * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall` + * + * Title: `titleLarge`, `titleMedium`, `titleSmall` + * + * Label: `labelLarge`, `labelMedium`, `labelSmall` + * + * Body: `bodyLarge`, `bodyMedium`, `bodySmall` + */ + titleVariant?: keyof typeof MD3TypescaleKey; /** * Text for the subtitle. Note that this will only accept a string or ``-based node. */ @@ -38,6 +55,23 @@ type Props = React.ComponentPropsWithRef & { * Number of lines for the subtitle. */ subtitleNumberOfLines?: number; + /** + * @supported Available in v3.x with theme version 3 + * + * Subtitle text variant defines appropriate text styles for type role and its size. + * Available variants: + * + * Display: `displayLarge`, `displayMedium`, `displaySmall` + * + * Headline: `headlineLarge`, `headlineMedium`, `headlineSmall` + * + * Title: `titleLarge`, `titleMedium`, `titleSmall` + * + * Label: `labelLarge`, `labelMedium`, `labelSmall` + * + * Body: `bodyLarge`, `bodyMedium`, `bodySmall` + */ + subtitleVariant?: keyof typeof MD3TypescaleKey; /** * Callback which returns a React element to display on the left side. */ @@ -99,9 +133,11 @@ const CardTitle = ({ title, titleStyle, titleNumberOfLines = 1, + titleVariant = 'bodyLarge', subtitle, subtitleStyle, subtitleNumberOfLines = 1, + subtitleVariant = 'bodyMedium', left, leftStyle, right, @@ -144,7 +180,7 @@ const CardTitle = ({ titleStyle, ]} numberOfLines={titleNumberOfLines} - variant="bodyLarge" + variant={titleVariant} > {title} @@ -154,7 +190,7 @@ const CardTitle = ({ component={subtitleComponent} style={[styles.subtitle, subtitleStyle]} numberOfLines={subtitleNumberOfLines} - variant="bodyMedium" + variant={subtitleVariant} > {subtitle}