Skip to content

refactor: make ListItem accepts a custom description #996

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

Merged
brunohkbx merged 2 commits into from
May 23, 2019
Merged

refactor: make ListItem accepts a custom description #996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95f3cab
refactor: make ListItem accepts a custom description
brunohkbx May 2, 2019
f00d906
fix: update prop description type
brunohkbx May 7, 2019
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
46 changes: 44 additions & 2 deletions example/src/Examples/ListSectionExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* @flow */

import * as React from 'react';
import { ScrollView, StyleSheet, Image } from 'react-native';
import { List, Divider, withTheme, type Theme } from 'react-native-paper';
import { ScrollView, StyleSheet, Image, View, Text } from 'react-native';
import { Chip, List, Divider, withTheme, type Theme } from 'react-native-paper';

type Props = {
theme: Theme,
Expand Down Expand Up @@ -80,6 +80,42 @@ class ListSectionExample extends React.Component<Props> {
description="Describes item 2. Example of a very very long description."
/>
</List.Section>
<Divider />
<List.Section>
<List.Subheader>Custom description</List.Subheader>
<List.Item
left={() => (
<Image
source={require('../../assets/images/email-icon.png')}
style={styles.image}
/>
)}
right={props => <List.Icon {...props} icon="star-border" />}
title="List Item 1"
description={({
ellipsizeMode,
color: descriptionColor,
Copy link
Copy Markdown
Member

@satya164 satya164 May 14, 2019

Choose a reason for hiding this comment

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

imo the color and fontSize should be in style, not as separate props.

Copy link
Copy Markdown
Contributor

@Trancever Trancever May 14, 2019

Choose a reason for hiding this comment

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

@satya164 hmm, other components expose them as separate props, I wanted it to be consistent

Copy link
Copy Markdown
Member

@satya164 satya164 May 14, 2019

Choose a reason for hiding this comment

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

hmm I think in most places where it's this way, it's usually for icons etc., but here looks like the render callback is passing a bunch of props (do we need to pass ellipsizeMode and fontSize for example?)

Copy link
Copy Markdown
Collaborator Author

@brunohkbx brunohkbx May 15, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

@satya164 I found these components doing the same: ListItem, ListAccordion, Banner
I think we should pass ellipsizeMode and fontSize because could have cases when the user only wants to add more content to the description and keep the Text as the original. e.g. #686

fontSize,
}) => (
<View style={[styles.container, styles.column]}>
<Text
numberOfLines={2}
ellipsizeMode={ellipsizeMode}
style={{ color: descriptionColor, fontSize }}
>
React Native Paper is a high-quality, standard-compliant
Material Design library that has you covered in all major
use-cases.
</Text>
<View style={[styles.container, styles.row, { paddingTop: 8 }]}>
<Chip icon="picture-as-pdf" onPress={() => {}}>
DOCS.pdf
</Chip>
</View>
</View>
)}
/>
</List.Section>
</ScrollView>
);
}
Expand All @@ -94,6 +130,12 @@ const styles = StyleSheet.create({
width: 40,
margin: 8,
},
row: {
flexDirection: 'row',
},
column: {
flexDirection: 'column',
},
});

export default withTheme(ListSectionExample);
59 changes: 37 additions & 22 deletions src/components/List/ListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,23 @@ import type {
import TouchableRipple from '../TouchableRipple';
import Text from '../Typography/Text';
import { withTheme } from '../../core/theming';
import type { Theme, $RemoveChildren } from '../../types';
import type { Theme, $RemoveChildren, EllipsizeProp } from '../../types';

type Props = $RemoveChildren<typeof TouchableRipple> & {|
/**
* Title text for the list item.
*/
title: React.Node,
/**
* Description text for the list item.
* Description text for the list item or callback which returns a React element to display the description.
*/
description?: React.Node,
description?:
| React.Node
| ((props: {
ellipsizeMode: EllipsizeProp,
color: string,
fontSize: number,
}) => React.Node),
/**
* Callback which returns a React element to display on the left side.
*/
Expand Down Expand Up @@ -52,11 +58,11 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
/**
* Ellipsize Mode for the Title
*/
titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
titleEllipsizeMode?: EllipsizeProp,
/**
* Ellipsize Mode for the Description
*/
descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
descriptionEllipsizeMode?: EllipsizeProp,
|};

/**
Expand Down Expand Up @@ -87,6 +93,31 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
class ListItem extends React.Component<Props> {
static displayName = 'List.Item';

renderDescription(description, descriptionColor) {
const { descriptionEllipsizeMode, descriptionStyle } = this.props;

return typeof description === 'string' ? (
<Text
numberOfLines={2}
ellipsizeMode={descriptionEllipsizeMode}
style={[
styles.description,
{ color: descriptionColor },
descriptionStyle,
]}
>
{description}
</Text>
) : (
description &&
description({
ellipsizeMode: descriptionEllipsizeMode,
color: descriptionColor,
fontSize: styles.description.fontSize,
})
);
}

render() {
const {
left,
Expand All @@ -97,9 +128,7 @@ class ListItem extends React.Component<Props> {
theme,
style,
titleStyle,
descriptionStyle,
titleEllipsizeMode,
descriptionEllipsizeMode,
...rest
} = this.props;
const titleColor = color(theme.colors.text)
Expand Down Expand Up @@ -127,21 +156,7 @@ class ListItem extends React.Component<Props> {
>
{title}
</Text>
{description ? (
<Text
ellipsizeMode={descriptionEllipsizeMode}
numberOfLines={2}
style={[
styles.description,
{
color: descriptionColor,
},
descriptionStyle,
]}
>
{description}
</Text>
) : null}
{this.renderDescription(description, descriptionColor)}
</View>
{right ? right({ color: descriptionColor }) : null}
</View>
Expand Down
32 changes: 31 additions & 1 deletion src/components/__tests__/ListItem.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

import * as React from 'react';
import renderer from 'react-test-renderer';
import { Text } from 'react-native';
import { Text, View } from 'react-native';
import ListItem from '../List/ListItem';
import ListIcon from '../List/ListIcon';
import Chip from '../Chip';

it('renders list item with title and description', () => {
const tree = renderer
Expand Down Expand Up @@ -66,3 +67,32 @@ it('renders list item with custom title and description styles', () => {

expect(tree).toMatchSnapshot();
});

it('renders list item with custom description', () => {
const tree = renderer
.create(
<ListItem
title="List Item with custom description"
description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
<View>
<Text
numberOfLines={2}
ellipsizeMode={ellipsizeMode}
style={{ color: descriptionColor, fontSize }}
>
React Native Paper is a high-quality, standard-compliant Design
Design library that has you covered in all major use-cases.
</Text>
<View>
<Chip icon="picture-as-pdf" onPress={() => {}}>
DOCS.pdf
</Chip>
</View>
</View>
)}
/>
)
.toJSON();

expect(tree).toMatchSnapshot();
});
Loading