Skip to content

Commit

Permalink
chore: migrate example to functional components
Browse files Browse the repository at this point in the history
  • Loading branch information
@marchenk0va @Trancever
marchenk0va authored and Trancever committed Apr 24, 2020
1 parent 2900b04 commit f2c67f9
Show file tree
Hide file tree
Showing 33 changed files with 2,330 additions and 2,788 deletions.
96 changes: 42 additions & 54 deletions example/src/DrawerItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,20 @@ import * as React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import {
Drawer,
withTheme,
Switch,
TouchableRipple,
Text,
Colors,
Theme,
useTheme,
} from 'react-native-paper';

type Props = {
theme: Theme;
toggleTheme: () => void;
toggleRTL: () => void;
isRTL: boolean;
isDarkTheme: boolean;
};

type State = {
open: boolean;
drawerItemIndex: number;
};

const DrawerItemsData = [
{ label: 'Inbox', icon: 'inbox', key: 0 },
{ label: 'Starred', icon: 'star', key: 1 },
Expand All @@ -31,57 +24,52 @@ const DrawerItemsData = [
{ label: 'A very long title that will be truncated', icon: 'delete', key: 4 },
];

class DrawerItems extends React.Component<Props, State> {
state = {
open: false,
drawerItemIndex: 0,
};
const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(0);

_setDrawerItem = (index: number) => this.setState({ drawerItemIndex: index });
const _setDrawerItem = (index: number) => setDrawerItemIndex(index);

render() {
const { colors } = this.props.theme;
const { colors } = useTheme();

return (
<View style={[styles.drawerContent, { backgroundColor: colors.surface }]}>
<Drawer.Section title="Example items">
{DrawerItemsData.map((props, index) => (
<Drawer.Item
{...props}
key={props.key}
theme={
props.key === 3
? { colors: { primary: Colors.tealA200 } }
: undefined
}
active={this.state.drawerItemIndex === index}
onPress={() => this._setDrawerItem(index)}
/>
))}
</Drawer.Section>
return (
<View style={[styles.drawerContent, { backgroundColor: colors.surface }]}>
<Drawer.Section title="Example items">
{DrawerItemsData.map((props, index) => (
<Drawer.Item
{...props}
key={props.key}
theme={
props.key === 3
? { colors: { primary: Colors.tealA200 } }
: undefined
}
active={drawerItemIndex === index}
onPress={() => _setDrawerItem(index)}
/>
))}
</Drawer.Section>

<Drawer.Section title="Preferences">
<TouchableRipple onPress={this.props.toggleTheme}>
<View style={styles.preference}>
<Text>Dark Theme</Text>
<View pointerEvents="none">
<Switch value={this.props.isDarkTheme} />
</View>
<Drawer.Section title="Preferences">
<TouchableRipple onPress={toggleTheme}>
<View style={styles.preference}>
<Text>Dark Theme</Text>
<View pointerEvents="none">
<Switch value={isDarkTheme} />
</View>
</TouchableRipple>
<TouchableRipple onPress={this.props.toggleRTL}>
<View style={styles.preference}>
<Text>RTL</Text>
<View pointerEvents="none">
<Switch value={this.props.isRTL} />
</View>
</View>
</TouchableRipple>
<TouchableRipple onPress={toggleRTL}>
<View style={styles.preference}>
<Text>RTL</Text>
<View pointerEvents="none">
<Switch value={isRTL} />
</View>
</TouchableRipple>
</Drawer.Section>
</View>
);
}
}
</View>
</TouchableRipple>
</Drawer.Section>
</View>
);
};

const styles = StyleSheet.create({
drawerContent: {
Expand All @@ -96,4 +84,4 @@ const styles = StyleSheet.create({
},
});

export default withTheme(DrawerItems);
export default DrawerItems;
99 changes: 34 additions & 65 deletions example/src/Examples/ActivityIndicatorExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,43 @@
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import {
ActivityIndicator,
Colors,
FAB,
withTheme,
Theme,
} from 'react-native-paper';

type Props = {
theme: Theme;
};

type State = {
animating: boolean;
};

class ActivityIndicatorExample extends React.Component<Props, State> {
static title = 'Activity Indicator';

state = {
animating: true,
};

render() {
const {
theme: {
colors: { background },
},
} = this.props;

return (
<View style={[styles.container, { backgroundColor: background }]}>
<View style={styles.row}>
<FAB
small
icon={this.state.animating ? 'pause' : 'play'}
onPress={() => {
this.setState({
animating: !this.state.animating,
});
}}
/>
</View>
import { ActivityIndicator, Colors, FAB, useTheme } from 'react-native-paper';

const ActivityIndicatorExample = () => {
const [animating, setAnimating] = React.useState<boolean>(true);
const {
colors: { background },
} = useTheme();

return (
<View style={[styles.container, { backgroundColor: background }]}>
<View style={styles.row}>
<FAB
small
icon={animating ? 'pause' : 'play'}
onPress={() => setAnimating(!animating)}
/>
</View>

<View style={styles.row}>
<ActivityIndicator animating={this.state.animating} />
</View>
<View style={styles.row}>
<ActivityIndicator animating={animating} />
</View>

<View style={styles.row}>
<ActivityIndicator
animating={this.state.animating}
hidesWhenStopped={false}
/>
</View>
<View style={styles.row}>
<ActivityIndicator animating={animating} hidesWhenStopped={false} />
</View>

<View style={styles.row}>
<ActivityIndicator animating={this.state.animating} size="large" />
</View>
<View style={styles.row}>
<ActivityIndicator animating={animating} size="large" />
</View>

<View style={styles.row}>
<ActivityIndicator
animating={this.state.animating}
color={Colors.red500}
/>
</View>
<View style={styles.row}>
<ActivityIndicator animating={animating} color={Colors.red500} />
</View>
);
}
}
</View>
);
};

ActivityIndicatorExample.title = 'Activity Indicator';

const styles = StyleSheet.create({
container: {
Expand All @@ -83,4 +52,4 @@ const styles = StyleSheet.create({
},
});

export default withTheme(ActivityIndicatorExample);
export default ActivityIndicatorExample;
6 changes: 4 additions & 2 deletions example/src/Examples/AppbarExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ type Props = {

const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

export default function AppbarExample({ navigation }: Props) {
const AppbarExample = ({ navigation }: Props) => {
const { colors } = useTheme();

const [showLeftIcon, setShowLeftIcon] = React.useState(true);
Expand Down Expand Up @@ -85,10 +85,12 @@ export default function AppbarExample({ navigation }: Props) {
<FAB icon="reply" onPress={() => {}} style={styles.fab} />
</View>
);
}
};

AppbarExample.title = 'Appbar';

export default AppbarExample;

const styles = StyleSheet.create({
container: {
flex: 1,
Expand Down
98 changes: 45 additions & 53 deletions example/src/Examples/AvatarExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,52 @@
import * as React from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { Avatar, List, withTheme, Colors, Theme } from 'react-native-paper';
import { Avatar, List, Colors, useTheme } from 'react-native-paper';

type Props = {
theme: Theme;
};

class AvatarExample extends React.Component<Props> {
static title = 'Avatar';
const AvatarExample = () => {
const { colors } = useTheme();

render() {
const { colors } = this.props.theme;
return (
<ScrollView style={[styles.container, { backgroundColor: colors.surface }]}>
<List.Section title="Text">
<View style={styles.row}>
<Avatar.Text
style={[styles.avatar, { backgroundColor: Colors.yellow500 }]}
label="XD"
color={Colors.black}
/>
<Avatar.Text style={styles.avatar} label="XD" />
<Avatar.Text style={styles.avatar} label="XD" size={80} />
</View>
</List.Section>
<List.Section title="Icon">
<View style={styles.row}>
<Avatar.Icon
style={[styles.avatar, { backgroundColor: Colors.yellow500 }]}
icon="folder"
color={Colors.black}
/>
<Avatar.Icon style={styles.avatar} icon="folder" />
<Avatar.Icon style={styles.avatar} icon="folder" size={80} />
</View>
</List.Section>
<List.Section title="Image">
<View style={styles.row}>
<Avatar.Image
style={styles.avatar}
source={require('../../assets/images/avatar.png')}
/>
<Avatar.Image
style={styles.avatar}
source={require('../../assets/images/avatar.png')}
size={80}
/>
</View>
</List.Section>
</ScrollView>
);
};

return (
<ScrollView
style={[styles.container, { backgroundColor: colors.surface }]}
>
<List.Section title="Text">
<View style={styles.row}>
<Avatar.Text
style={[styles.avatar, { backgroundColor: Colors.yellow500 }]}
label="XD"
color={Colors.black}
/>
<Avatar.Text style={styles.avatar} label="XD" />
<Avatar.Text style={styles.avatar} label="XD" size={80} />
</View>
</List.Section>
<List.Section title="Icon">
<View style={styles.row}>
<Avatar.Icon
style={[styles.avatar, { backgroundColor: Colors.yellow500 }]}
icon="folder"
color={Colors.black}
/>
<Avatar.Icon style={styles.avatar} icon="folder" />
<Avatar.Icon style={styles.avatar} icon="folder" size={80} />
</View>
</List.Section>
<List.Section title="Image">
<View style={styles.row}>
<Avatar.Image
style={styles.avatar}
source={require('../../assets/images/avatar.png')}
/>
<Avatar.Image
style={styles.avatar}
source={require('../../assets/images/avatar.png')}
size={80}
/>
</View>
</List.Section>
</ScrollView>
);
}
}
AvatarExample.title = 'Avatar';

const styles = StyleSheet.create({
container: {
Expand All @@ -71,4 +63,4 @@ const styles = StyleSheet.create({
},
});

export default withTheme(AvatarExample);
export default AvatarExample;
Loading

0 comments on commit f2c67f9

Please sign in to comment.