Skip to content

feat: pressable card title #4191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: pressable card title #4191

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c18df42
feat: pressable card tite
mtch99 Nov 19, 2023
68e9012
fix: pressable zone takes minmal space
mtch99 Nov 20, 2023
d465832
refactor: titles style
mtch99 Nov 20, 2023
246d56d
fix: changed CardTitle container to Pressable
mtch99 Nov 29, 2023
30616c1
refactor: removed duplicated code in title render
mtch99 Nov 29, 2023
2957715
refactor: standardized coding style for render
mtch99 Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions example/src/Examples/CardExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,25 @@ const CardExample = () => {
</TextComponent>
</Card.Content>
</Card>
<Card style={styles.card} mode={selectedMode}>
<Card.Cover
source={require('../../assets/images/wrecked-ship.jpg')}
/>
<Card.Title
title="Pressable Title"
onPressTitle={() => {
isWeb
? alert('The title is Pressed')
: Alert.alert('The title is Pressed');
}}
/>
<Card.Content>
<TextComponent variant="bodyMedium">
This is a card with a pressable title. {'\n'}If you press the
title I will alert
</TextComponent>
</Card.Content>
</Card>
{isV3 && (
<Card style={styles.card} mode={selectedMode}>
<Card.Cover source={require('../../assets/images/bridge.jpg')} />
Expand Down
21 changes: 20 additions & 1 deletion src/components/Card/CardTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
StyleProp,
StyleSheet,
TextStyle,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native';
Expand Down Expand Up @@ -109,6 +110,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
* @optional
*/
theme?: ThemeProp;
/**
* @optional
* Makes the card title pressable
*/
onPressTitle?: () => void;
};

const LEFT_SIZE = 40;
Expand Down Expand Up @@ -150,6 +156,7 @@ const CardTitle = ({
rightStyle,
style,
theme: themeOverrides,
onPressTitle,
}: Props) => {
const theme = useInternalTheme(themeOverrides);
const TitleComponent = theme.isV3 ? Text : Title;
Expand All @@ -169,7 +176,18 @@ const CardTitle = ({
) : null}

<View style={[styles.titles]}>
{title && (
{title && onPressTitle ? (
<TouchableOpacity onPress={onPressTitle} style={[styles.title]}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid code repetition and move the title outside the render then used wrapped in pressable and without it.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After moving the Title component from the render, I did the same for subtitle to keep preserve coding style consistency, also had to rename some variables

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are the changes okay? Or Is there something I have to correct? @lukewalczak

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use Pressable instead of TouchableOpacity

<TitleComponent
style={[{ marginBottom }, titleStyle]}
numberOfLines={titleNumberOfLines}
variant={titleVariant}
maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
>
{title}
</TitleComponent>
</TouchableOpacity>
) : (
<TitleComponent
style={[styles.title, { marginBottom }, titleStyle]}
numberOfLines={titleNumberOfLines}
Expand Down Expand Up @@ -219,6 +237,7 @@ const styles = StyleSheet.create({
},

title: {
alignSelf: 'flex-start',
minHeight: 30,
paddingRight: 16,
},
Expand Down