Skip to content

feat: added List.Item examples #3447

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
lukewalczak merged 2 commits into from
Oct 31, 2022
Merged

feat: added List.Item examples #3447

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
7bb44f2
feat: added List.Item examples
hurali97 Oct 31, 2022
5a6719c
refactor: adjust checkbox and switch examples
lukewalczak Oct 31, 2022
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
2 changes: 2 additions & 0 deletions example/src/ExampleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import FABExample from './Examples/FABExample';
import IconButtonExample from './Examples/IconButtonExample';
import ListAccordionExample from './Examples/ListAccordionExample';
import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
import ListItemExample from './Examples/ListItemExample';
import ListSectionExample from './Examples/ListSectionExample';
import MenuExample from './Examples/MenuExample';
import ProgressBarExample from './Examples/ProgressBarExample';
Expand Down Expand Up @@ -67,6 +68,7 @@ export const examples: Record<
listAccordion: ListAccordionExample,
listAccordionGroup: ListAccordionExampleGroup,
listSection: ListSectionExample,
listItem: ListItemExample,
menu: MenuExample,
progressbar: ProgressBarExample,
radio: RadioButtonExample,
Expand Down
308 changes: 308 additions & 0 deletions example/src/Examples/ListItemExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,308 @@
import * as React from 'react';
import { View, StyleSheet } from 'react-native';

import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper';

import ScreenWrapper from '../ScreenWrapper';

const CenteredCheckbox = () => (
<View style={styles.centered}>
<Checkbox status="checked" />
</View>
);

const ListItemExample = () => {
return (
<ScreenWrapper>
<List.Section title="Text-only">
<List.Item title="Headline" />
<List.Item title="Headline" description="Supporting text" />
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
/>
<Divider />
<List.Item title="Headline" right={() => <CenteredCheckbox />} />
<List.Item
title="Headline"
description="Supporting text"
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
right={() => <Checkbox status="checked" />}
/>
<Divider />
</List.Section>

<List.Section title="With icon">
<List.Item
title="Headline"
left={(props) => <List.Icon {...props} icon="account-outline" />}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => <List.Icon {...props} icon="account-outline" />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => <List.Icon {...props} icon="account-outline" />}
/>
<Divider />
<List.Item
title="Headline"
left={(props) => <List.Icon {...props} icon="account-outline" />}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => <List.Icon {...props} icon="account-outline" />}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => <List.Icon {...props} icon="account-outline" />}
right={() => <Checkbox status="checked" />}
/>
<Divider />
</List.Section>

<List.Section title="With avatar">
<List.Item
title="Headline"
left={(props) => (
<Avatar.Text style={props.style} label="A" size={40} />
)}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => (
<Avatar.Text style={props.style} label="A" size={40} />
)}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => (
<Avatar.Text style={props.style} label="A" size={40} />
)}
/>
<Divider />
<List.Item
title="Headline"
left={(props) => (
<Avatar.Text style={props.style} label="A" size={40} />
)}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => (
<Avatar.Text style={props.style} label="A" size={40} />
)}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => (
<Avatar.Text style={props.style} label="A" size={40} />
)}
right={() => <Checkbox status="checked" />}
/>
<Divider />
</List.Section>

<List.Section title="With image">
<List.Item
title="Headline"
left={(props) => (
<List.Image
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => (
<List.Image
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => (
<List.Image
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
/>
<Divider />
<List.Item
title="Headline"
left={(props) => (
<List.Image
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => (
<List.Image
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => (
<List.Image
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
right={() => <Checkbox status="checked" />}
/>
<Divider />
</List.Section>

<List.Section title="With video">
<List.Item
title="Headline"
left={(props) => (
<List.Image
variant="video"
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => (
<List.Image
variant="video"
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => (
<List.Image
variant="video"
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
/>
<Divider />
<List.Item
title="Headline"
left={(props) => (
<List.Image
variant="video"
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => (
<List.Image
variant="video"
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
right={() => <CenteredCheckbox />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => (
<List.Image
variant="video"
style={props.style}
source={require('../../../example/assets/images/strawberries.jpg')}
/>
)}
right={() => <Checkbox status="checked" />}
/>
<Divider />
</List.Section>

<List.Section title="With switch">
<List.Item
title="Headline"
right={() => <Switch disabled style={styles.centered} />}
/>
<List.Item
title="Headline"
description="Supporting text"
right={() => <Switch disabled style={styles.centered} />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
right={() => <Switch disabled />}
/>
<Divider />
<List.Item
title="Headline"
left={(props) => <List.Icon {...props} icon="account-outline" />}
right={() => <Switch disabled style={styles.centered} />}
/>
<List.Item
title="Headline"
description="Supporting text"
left={(props) => <List.Icon {...props} icon="account-outline" />}
right={() => <Switch disabled style={styles.centered} />}
/>
<List.Item
title="Headline"
description="Supporting text that is long enough to fill up multiple lines in the item"
left={(props) => <List.Icon {...props} icon="account-outline" />}
right={() => <Switch disabled />}
/>
<Divider />
</List.Section>
</ScreenWrapper>
);
};

const styles = StyleSheet.create({
centered: {
alignSelf: 'center',
},
});

ListItemExample.title = 'List.Item';

export default ListItemExample;