kylefang/react-native-paper
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-paper.git synced 2026-06-19 18:23:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

BREAKING: replace ListSection.* and DrawerSection.* with List.* and Drawer.* (#524)

Browse Source
This commit is contained in:
Satyajit Sahoo
2018-09-02 03:46:33 +02:00
committed by GitHub
parent f6e42f363c
commit 61c6fef264
17 changed files with 135 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
example/src/ButtonExample.js
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { View, ScrollView, StyleSheet, Image } from 'react-native';
import { Button, ListSection, withTheme } from 'react-native-paper';
import { Button, List, withTheme } from 'react-native-paper';
import type { Theme } from 'react-native-paper/types';
type Props = {
@@ -23,7 +23,7 @@ class ButtonExample extends React.Component<Props, State> {
<ScrollView
style={[styles.container, { backgroundColor: colors.background }]}
>
<ListSection title="Text button">
<List.Section title="Text button">
<View style={styles.row}>
<Button onPress={() => {}} style={styles.button}>
Default
@@ -45,8 +45,8 @@ class ButtonExample extends React.Component<Props, State> {
Loading
</Button>
</View>
</ListSection>
<ListSection title="Outlined button">
</List.Section>
<List.Section title="Outlined button">
<View style={styles.row}>
<Button mode="outlined" onPress={() => {}} style={styles.button}>
Default
@@ -84,8 +84,8 @@ class ButtonExample extends React.Component<Props, State> {
Loading
</Button>
</View>
</ListSection>
<ListSection title="Contained button">
</List.Section>
<List.Section title="Contained button">
<View style={styles.row}>
<Button mode="contained" onPress={() => {}} style={styles.button}>
Default
@@ -123,8 +123,8 @@ class ButtonExample extends React.Component<Props, State> {
Loading
</Button>
</View>
</ListSection>
<ListSection title="Custom icon">
</List.Section>
<List.Section title="Custom icon">
<View style={styles.row}>
<Button
mode="outlined"
@@ -159,7 +159,7 @@ class ButtonExample extends React.Component<Props, State> {
Custom component
</Button>
</View>
</ListSection>
</List.Section>
</ScrollView>
);
}

10
example/src/ChipExample.js
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { View, ScrollView, StyleSheet, Image } from 'react-native';
import { Chip, ListSection, withTheme } from 'react-native-paper';
import { Chip, List, withTheme } from 'react-native-paper';
import type { Theme } from 'react-native-paper/types';
type Props = {
@@ -19,7 +19,7 @@ class ChipExample extends React.Component<Props> {
<ScrollView
style={[styles.container, { backgroundColor: colors.surface }]}
>
<ListSection title="Flat chip">
<List.Section title="Flat chip">
<View style={styles.row}>
<Chip onPress={() => {}} style={styles.chip}>
Simple
@@ -67,8 +67,8 @@ class ChipExample extends React.Component<Props> {
Avatar (disabled)
</Chip>
</View>
</ListSection>
<ListSection title="Outlined chip">
</List.Section>
<List.Section title="Outlined chip">
<View style={styles.row}>
<Chip mode="outlined" onPress={() => {}} style={styles.chip}>
Simple
@@ -125,7 +125,7 @@ class ChipExample extends React.Component<Props> {
Avatar (disabled)
</Chip>
</View>
</ListSection>
</List.Section>
</ScrollView>
);
}

4
example/src/DividerExample.js
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { FlatList } from 'react-native';
import { Divider, ListSection, withTheme } from 'react-native-paper';
import { Divider, List, withTheme } from 'react-native-paper';
import type { Theme } from 'react-native-paper/types';
type Props = {
@@ -21,7 +21,7 @@ const DividerExample = (props: Props) => {
return (
<FlatList
style={{ backgroundColor: background }}
renderItem={({ item }) => <ListSection.Item title={item} />}
renderItem={({ item }) => <List.Item title={item} />}
keyExtractor={item => item}
ItemSeparatorComponent={Divider}
data={items}

4
example/src/ExampleList.js
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { FlatList } from 'react-native';
import { ListSection, Divider, withTheme } from 'react-native-paper';
import { List, Divider, withTheme } from 'react-native-paper';
import BottomNavigationExample from './BottomNavigationExample';
import ButtonExample from './ButtonExample';
import CardExample from './CardExample';
@@ -63,7 +63,7 @@ class ExampleList extends React.Component<Props> {
};
_renderItem = ({ item }) => (
<ListSection.Item
<List.Item
title={item.data.title}
onPress={() => this.props.navigation.navigate(item.id)}
/>

48
example/src/ListAccordionExample.js
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { ListSection, Divider, withTheme } from 'react-native-paper';
import { List, Divider, withTheme } from 'react-native-paper';
import type { Theme } from 'react-native-paper/types';
type Props = {
@@ -10,7 +10,7 @@ type Props = {
};
class ListAccordionExample extends React.Component<Props> {
static title = 'ListSection.Accordion';
static title = 'List.Accordion';
render() {
const {
@@ -20,41 +20,41 @@ class ListAccordionExample extends React.Component<Props> {
} = this.props;
return (
<ScrollView style={[styles.container, { backgroundColor: background }]}>
<ListSection title="Expandable list item">
<ListSection.Accordion
left={<ListSection.Icon icon="folder" />}
<List.Section title="Expandable list item">
<List.Accordion
left={<List.Icon icon="folder" />}
title="Expandable list item"
>
<ListSection.Item title="List item 1" />
<ListSection.Item title="List item 2" />
</ListSection.Accordion>
</ListSection>
<List.Item title="List item 1" />
<List.Item title="List item 2" />
</List.Accordion>
</List.Section>
<Divider />
<ListSection title="Expandable & multiline list item">
<ListSection.Accordion
<List.Section title="Expandable & multiline list item">
<List.Accordion
title="Expandable list item"
description="Describes the expandable list item"
>
<ListSection.Item title="List item 1" />
<ListSection.Item title="List item 2" />
</ListSection.Accordion>
</ListSection>
<List.Item title="List item 1" />
<List.Item title="List item 2" />
</List.Accordion>
</List.Section>
<Divider />
<ListSection title="Expandable list with icons">
<ListSection.Accordion
left={<ListSection.Icon icon="star" />}
<List.Section title="Expandable list with icons">
<List.Accordion
left={<List.Icon icon="star" />}
title="Accordion item 1"
>
<ListSection.Item
left={<ListSection.Icon icon="thumb-up" />}
<List.Item
left={<List.Icon icon="thumb-up" />}
title="List item 1"
/>
<ListSection.Item
left={<ListSection.Icon icon="thumb-down" />}
<List.Item
left={<List.Icon icon="thumb-down" />}
title="List item 2"
/>
</ListSection.Accordion>
</ListSection>
</List.Accordion>
</List.Section>
</ScrollView>
);
}

38
example/src/ListSectionExample.js
View File

@@ -2,7 +2,7 @@
import * as React from 'react';
import { ScrollView, StyleSheet, Image } from 'react-native';
import { ListSection, Divider, withTheme } from 'react-native-paper';
import { List, Divider, withTheme } from 'react-native-paper';
import type { Theme } from 'react-native-paper/types';
type Props = {
@@ -10,7 +10,7 @@ type Props = {
};
class ListSectionExample extends React.Component<Props> {
static title = 'ListSection';
static title = 'List.Section';
render() {
const {
@@ -20,19 +20,13 @@ class ListSectionExample extends React.Component<Props> {
} = this.props;
return (
<ScrollView style={[styles.container, { backgroundColor: background }]}>
<ListSection title="Single line">
<ListSection.Item
left={<ListSection.Icon icon="event" />}
title="List item 1"
/>
<ListSection.Item
left={<ListSection.Icon icon="redeem" />}
title="List item 2"
/>
</ListSection>
<List.Section title="Single line">
<List.Item left={<List.Icon icon="event" />} title="List item 1" />
<List.Item left={<List.Icon icon="redeem" />} title="List item 2" />
</List.Section>
<Divider />
<ListSection title="Two line">
<ListSection.Item
<List.Section title="Two line">
<List.Item
left={
<Image
source={require('../assets/email-icon.png')}
@@ -42,21 +36,21 @@ class ListSectionExample extends React.Component<Props> {
title="List item 1"
description="Describes item 1"
/>
<ListSection.Item
<List.Item
left={
<Image
source={require('../assets/email-icon.png')}
style={styles.image}
/>
}
right={<ListSection.Icon icon="info" />}
right={<List.Icon icon="info" />}
title="List item 2"
description="Describes item 2"
/>
</ListSection>
</List.Section>
<Divider />
<ListSection title="Three line">
<ListSection.Item
<List.Section title="Three line">
<List.Item
left={
<Image
source={require('../assets/email-icon.png')}
@@ -66,18 +60,18 @@ class ListSectionExample extends React.Component<Props> {
title="List item 1"
description="Describes item 1. Example of a very very long description."
/>
<ListSection.Item
<List.Item
left={
<Image
source={require('../assets/email-icon.png')}
style={styles.image}
/>
}
right={<ListSection.Icon icon="star-border" />}
right={<List.Icon icon="star-border" />}
title="List item 2"
description="Describes item 2. Example of a very very long description."
/>
</ListSection>
</List.Section>
</ScrollView>
);
}