From f2c67f9f6eb06cb7a08e4a379f41a5a77a4876a7 Mon Sep 17 00:00:00 2001 From: marchenk0va <35371977+marchenk0va@users.noreply.github.com> Date: Fri, 24 Apr 2020 12:39:10 +0200 Subject: [PATCH] chore: migrate example to functional components --- example/src/DrawerItems.tsx | 96 ++- .../src/Examples/ActivityIndicatorExample.tsx | 99 +-- example/src/Examples/AppbarExample.tsx | 6 +- example/src/Examples/AvatarExample.tsx | 98 ++- example/src/Examples/BadgeExample.tsx | 126 ++-- example/src/Examples/BannerExample.tsx | 119 ++- .../src/Examples/BottomNavigationExample.tsx | 112 ++- example/src/Examples/ButtonExample.tsx | 328 ++++----- example/src/Examples/CardExample.tsx | 201 +++-- example/src/Examples/CheckboxExample.tsx | 157 ++-- example/src/Examples/ChipExample.tsx | 436 ++++++----- example/src/Examples/DataTableExample.tsx | 224 +++--- example/src/Examples/DialogExample.tsx | 161 ++-- .../Examples/Dialogs/DialogWithRadioBtns.tsx | 140 ++-- example/src/Examples/DividerExample.tsx | 16 +- example/src/Examples/FABExample.tsx | 159 ++-- example/src/Examples/IconButtonExample.tsx | 58 +- example/src/Examples/ListAccordionExample.tsx | 130 ++-- .../Examples/ListAccordionGroupExample.tsx | 161 ++-- example/src/Examples/ListSectionExample.tsx | 242 +++---- example/src/Examples/MenuExample.tsx | 224 +++--- example/src/Examples/ProgressBarExample.tsx | 122 ++-- example/src/Examples/RadioButtonExample.tsx | 137 ++-- .../src/Examples/RadioButtonGroupExample.tsx | 122 ++-- example/src/Examples/SearchbarExample.tsx | 99 +-- example/src/Examples/SnackbarExample.tsx | 74 +- example/src/Examples/SurfaceExample.tsx | 47 +- example/src/Examples/SwitchExample.tsx | 192 ++--- example/src/Examples/TextExample.tsx | 41 +- example/src/Examples/TextInputExample.tsx | 685 +++++++++--------- example/src/Examples/ToggleButtonExample.tsx | 207 +++--- .../src/Examples/TouchableRippleExample.tsx | 54 +- example/utils/index.ts | 45 ++ 33 files changed, 2330 insertions(+), 2788 deletions(-) create mode 100644 example/utils/index.ts diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 25f07dc066..94f64e2b81 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -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 }, @@ -31,57 +24,52 @@ const DrawerItemsData = [ { label: 'A very long title that will be truncated', icon: 'delete', key: 4 }, ]; -class DrawerItems extends React.Component { - state = { - open: false, - drawerItemIndex: 0, - }; +const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => { + const [drawerItemIndex, setDrawerItemIndex] = React.useState(0); - _setDrawerItem = (index: number) => this.setState({ drawerItemIndex: index }); + const _setDrawerItem = (index: number) => setDrawerItemIndex(index); - render() { - const { colors } = this.props.theme; + const { colors } = useTheme(); - return ( - - - {DrawerItemsData.map((props, index) => ( - this._setDrawerItem(index)} - /> - ))} - + return ( + + + {DrawerItemsData.map((props, index) => ( + _setDrawerItem(index)} + /> + ))} + - - - - Dark Theme - - - + + + + Dark Theme + + - - - - RTL - - - + + + + + RTL + + - - - - ); - } -} + + + + + ); +}; const styles = StyleSheet.create({ drawerContent: { @@ -96,4 +84,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DrawerItems); +export default DrawerItems; diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx index 401eda3a93..fd263a4f75 100644 --- a/example/src/Examples/ActivityIndicatorExample.tsx +++ b/example/src/Examples/ActivityIndicatorExample.tsx @@ -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 { - static title = 'Activity Indicator'; - - state = { - animating: true, - }; - - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - - return ( - - - { - this.setState({ - animating: !this.state.animating, - }); - }} - /> - +import { ActivityIndicator, Colors, FAB, useTheme } from 'react-native-paper'; + +const ActivityIndicatorExample = () => { + const [animating, setAnimating] = React.useState(true); + const { + colors: { background }, + } = useTheme(); + + return ( + + + setAnimating(!animating)} + /> + - - - + + + - - - + + + - - - + + + - - - + + - ); - } -} + + ); +}; + +ActivityIndicatorExample.title = 'Activity Indicator'; const styles = StyleSheet.create({ container: { @@ -83,4 +52,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ActivityIndicatorExample); +export default ActivityIndicatorExample; diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index f534ca8000..ccb8229296 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -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); @@ -85,10 +85,12 @@ export default function AppbarExample({ navigation }: Props) { {}} style={styles.fab} /> ); -} +}; AppbarExample.title = 'Appbar'; +export default AppbarExample; + const styles = StyleSheet.create({ container: { flex: 1, diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index d60abb11cb..777221de17 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -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 { - static title = 'Avatar'; +const AvatarExample = () => { + const { colors } = useTheme(); - render() { - const { colors } = this.props.theme; + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; - return ( - - - - - - - - - - - - - - - - - - - - - - - ); - } -} +AvatarExample.title = 'Avatar'; const styles = StyleSheet.create({ container: { @@ -71,4 +63,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(AvatarExample); +export default AvatarExample; diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 9ef465df65..e58b5aebed 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -7,88 +7,60 @@ import { Paragraph, Switch, Colors, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - visible: boolean; -}; - -class BadgeExample extends React.Component { - static title = 'Badge'; +const BadgeExample = () => { + const [visible, setVisible] = React.useState(true); + const { + colors: { background }, + } = useTheme(); - state = { - visible: true, - }; - - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - - return ( - - - Show badges - this.setState({ visible })} - /> + return ( + + + Show badges + setVisible(visible)} + /> + + + + + + + 12 + + + + + + 999+ + + - - - - - - 12 - - - - - - 999+ - - + + + + + + - - - - - - - - - - - + + + - - - ); - } -} + + + + ); +}; + +BadgeExample.title = 'Badge'; const styles = StyleSheet.create({ container: { @@ -114,4 +86,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(BadgeExample); +export default BadgeExample; diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index 3fcf3664db..d49628157f 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -8,82 +8,61 @@ import { Dimensions, Platform, } from 'react-native'; -import { Banner, withTheme, FAB, Theme } from 'react-native-paper'; - -type Props = { - theme: Theme; -}; - -type State = { - visible: boolean; -}; +import { Banner, FAB, useTheme } from 'react-native-paper'; const PHOTOS = Array.from({ length: 24 }).map( (_, i) => `https://unsplash.it/300/300/?random&__id=${i}` ); -class BannerExample extends React.Component { - static title = 'Banner'; +const BannerExample = () => { + const [visible, setVisible] = React.useState(true); + const { + colors: { background }, + } = useTheme(); - state = { - visible: true, - }; - - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; + return ( + + + setVisible(false), + }, + { + label: 'Learn more', + onPress: () => setVisible(false), + }, + ]} + icon={require('../../assets/images/email-icon.png')} + visible={visible} + > + Two line text string with two actions. One to two lines is preferable + on mobile. + + + {PHOTOS.map(uri => ( + + + + ))} + + + + + setVisible(!visible)} + /> + + + + ); +}; - return ( - - - { - this.setState({ visible: false }); - }, - }, - { - label: 'Learn more', - onPress: () => { - this.setState({ visible: false }); - }, - }, - ]} - icon={require('../../assets/images/email-icon.png')} - visible={this.state.visible} - > - Two line text string with two actions. One to two lines is - preferable on mobile. - - - {PHOTOS.map(uri => ( - - - - ))} - - - - - - this.setState(state => ({ visible: !state.visible })) - } - /> - - - - ); - } -} +BannerExample.title = 'Banner'; const styles = StyleSheet.create({ container: { @@ -129,4 +108,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(BannerExample); +export default BannerExample; diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx index e5b7a8ace0..06d982f27e 100644 --- a/example/src/Examples/BottomNavigationExample.tsx +++ b/example/src/Examples/BottomNavigationExample.tsx @@ -9,20 +9,19 @@ import { } from 'react-native'; import { BottomNavigation } from 'react-native-paper'; -type State = { - index: number; - routes: Array<{ - key: string; - title: string; - icon: string; - color?: string; - badge?: boolean; - getAccessibilityLabel?: string; - getTestID?: string; - }>; -}; +type RoutesState = Array<{ + key: string; + title: string; + icon: string; + color?: string; + badge?: boolean; + getAccessibilityLabel?: string; + getTestID?: string; +}>; + +type Route = { route: { key: string } }; -const PhotoGallery = ({ route }: any) => { +const PhotoGallery = ({ route }: Route) => { const PHOTOS = Array.from({ length: 24 }).map( (_, i) => `https://unsplash.it/300/300/?random&__id=${route.key}${i}` ); @@ -38,54 +37,49 @@ const PhotoGallery = ({ route }: any) => { ); }; -export default class BottomNavigationExample extends React.Component< - {}, - State -> { - static title = 'Bottom Navigation'; +const BottomNavigationExample = () => { + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'album', title: 'Album', icon: 'image-album', color: '#6200ee' }, + { + key: 'library', + title: 'Library', + icon: 'inbox', + color: '#2962ff', + badge: true, + }, + { + key: 'favorites', + title: 'Favorites', + icon: 'heart', + color: '#00796b', + }, + { + key: 'purchased', + title: 'Purchased', + icon: 'shopping-music', + color: '#c51162', + }, + ]); - state = { - index: 0, - routes: [ - { key: 'album', title: 'Album', icon: 'image-album', color: '#6200ee' }, - { - key: 'library', - title: 'Library', - icon: 'inbox', - color: '#2962ff', - badge: true, - }, - { - key: 'favorites', - title: 'Favorites', - icon: 'heart', - color: '#00796b', - }, - { - key: 'purchased', - title: 'Purchased', - icon: 'shopping-music', - color: '#c51162', - }, - ], - }; + return ( + setIndex(index)} + renderScene={BottomNavigation.SceneMap({ + album: PhotoGallery, + library: PhotoGallery, + favorites: PhotoGallery, + purchased: PhotoGallery, + })} + sceneAnimationEnabled={false} + /> + ); +}; + +BottomNavigationExample.title = 'Bottom Navigation'; - render() { - return ( - this.setState({ index })} - renderScene={BottomNavigation.SceneMap({ - album: PhotoGallery, - library: PhotoGallery, - favorites: PhotoGallery, - purchased: PhotoGallery, - })} - sceneAnimationEnabled={false} - /> - ); - } -} +export default BottomNavigationExample; const styles = StyleSheet.create({ ...Platform.select({ diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx index 4b0d98cd31..e48da23333 100644 --- a/example/src/Examples/ButtonExample.tsx +++ b/example/src/Examples/ButtonExample.tsx @@ -1,177 +1,167 @@ import * as React from 'react'; import { View, ScrollView, StyleSheet, Image } from 'react-native'; -import { Button, List, withTheme, Theme } from 'react-native-paper'; +import { Button, List, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; +const ButtonExample = () => { + const { colors } = useTheme(); -type State = { - loading: boolean; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; -class ButtonExample extends React.Component { - static title = 'Button'; - - render() { - const { colors } = this.props.theme; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - } -} +ButtonExample.title = 'Button'; const styles = StyleSheet.create({ container: { @@ -187,4 +177,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ButtonExample); +export default ButtonExample; diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx index fbb5dc4e96..82aeaad65a 100644 --- a/example/src/Examples/CardExample.tsx +++ b/example/src/Examples/CardExample.tsx @@ -6,116 +6,103 @@ import { Card, Button, IconButton, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -class CardExample extends React.Component { - static title = 'Card'; +const CardExample = () => { + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - + + + + + + The Abandoned Ship is a wrecked ship located on Route 108 in Hoenn, + originally being a ship named the S.S. Cactus. The second part of + the ship can only be accessed by using Dive and contains the + Scanner. + + + + + + + + + + + + } + right={(props: any) => ( + {}} /> + )} + /> + + + Dotted around the Hoenn region, you will find loamy soil, many of + which are housing berries. Once you have picked the berries, then + you have the ability to use that loamy soil to grow your own + berries. These can be any berry and will require attention to get + the best crop. + + + + + + ( + {}} /> + )} + /> + + { + Alert.alert('The Chameleon is Pressed'); + }} + > + + + + + This is a pressable chameleon. If you press me, I will alert. + + + + { + Alert.alert('The City is Long Pressed'); + }} > - - - - - - The Abandoned Ship is a wrecked ship located on Route 108 in - Hoenn, originally being a ship named the S.S. Cactus. The second - part of the ship can only be accessed by using Dive and contains - the Scanner. - - - - - - - - - - - - } - right={(props: any) => ( - {}} /> - )} - /> - - - Dotted around the Hoenn region, you will find loamy soil, many of - which are housing berries. Once you have picked the berries, then - you have the ability to use that loamy soil to grow your own - berries. These can be any berry and will require attention to get - the best crop. - - - - - - ( - {}} /> - )} - /> - - { - Alert.alert('The Chameleon is Pressed'); - }} - > - - - - - This is a pressable chameleon. If you press me, I will alert. - - - - { - Alert.alert('The City is Long Pressed'); - }} - > - - } - /> - - - This is a long press only city. If you long press me, I will - alert. - - - - - ); - } -} + + } + /> + + + This is a long press only city. If you long press me, I will alert. + + + + + ); +}; + +CardExample.title = 'Card'; const styles = StyleSheet.create({ container: { @@ -129,4 +116,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(CardExample); +export default CardExample; diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index a12aa52221..f3209d0885 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -5,114 +5,73 @@ import { Checkbox, Colors, TouchableRipple, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - checkedNormal: boolean; - checkedCustom: boolean; - indeterminate: boolean; -}; - -class CheckboxExample extends React.Component { - static title = 'Checkbox'; - - state = { - checkedNormal: true, - checkedCustom: true, - indeterminate: true, - }; - - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - - this.setState(state => ({ - checkedNormal: !state.checkedNormal, - })) - } - > - - Normal - - - - - - - - this.setState(state => ({ - checkedCustom: !state.checkedCustom, - })) - } - > - - Custom - - - - - - - - this.setState(state => ({ - indeterminate: !state.indeterminate, - })) - } - > - - Indeterminate - - - - - +const CheckboxExample = () => { + const [checkedNormal, setCheckedNormal] = React.useState(true); + const [checkedCustom, setCheckedCustom] = React.useState(true); + const [indeterminate, setIndeterminate] = React.useState(true); + const { + colors: { background }, + } = useTheme(); + return ( + + setCheckedNormal(!checkedNormal)}> - Checked (Disabled) - + Normal + + + + + + setCheckedCustom(!checkedCustom)}> - Unchecked (Disabled) - + Custom + + + + + + setIndeterminate(!indeterminate)}> - Indeterminate (Disabled) - + Indeterminate + + + + + + + Checked (Disabled) + + + + Unchecked (Disabled) + + + + Indeterminate (Disabled) + - ); - } -} + + ); +}; + +CheckboxExample.title = 'Checkbox'; const styles = StyleSheet.create({ container: { @@ -130,4 +89,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(CheckboxExample); +export default CheckboxExample; diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 323b35e5b9..a935aaaa78 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -1,237 +1,217 @@ import * as React from 'react'; import { View, ScrollView, StyleSheet, Image } from 'react-native'; -import { Chip, List, withTheme, Theme, Snackbar } from 'react-native-paper'; +import { Chip, List, useTheme, Snackbar } from 'react-native-paper'; import color from 'color'; -type Props = { - theme: Theme; -}; - -type State = { - visible: boolean; -}; +const ChipExample = () => { + const [visible, setVisible] = React.useState(false); + const { colors } = useTheme(); -class ChipExample extends React.Component { - static title = 'Chip'; + return ( + <> + + + + {}} + style={styles.chip} + > + Simple + + {}} onClose={() => {}} style={styles.chip}> + Close button + + {}} + onClose={() => {}} + style={styles.chip} + > + Icon + + + } + onPress={() => {}} + onClose={() => {}} + style={styles.chip} + > + Avatar + + + } + onPress={() => {}} + style={styles.chip} + > + Avatar (selected) + + {}} style={styles.chip}> + Icon (disabled) + + + } + style={styles.chip} + > + Avatar (disabled) + + + + + + {}} style={styles.chip}> + Simple + + {}} + onClose={() => {}} + style={styles.chip} + > + Close button + + {}} + onClose={() => {}} + style={styles.chip} + > + Icon + + + } + onPress={() => {}} + style={styles.chip} + > + Avatar + + + } + onPress={() => {}} + style={styles.chip} + > + Avatar (selected) + + {}} + style={styles.chip} + > + Icon (disabled) + + + } + style={styles.chip} + > + Avatar (disabled) + + + + + + {}} + onLongPress={() => setVisible(true)} + style={styles.chip} + > + With onLongPress + - state = { - visible: false, - }; - - render() { - const { colors } = this.props.theme; - - return ( - <> - - - - {}} - style={styles.chip} - > - Simple - - {}} onClose={() => {}} style={styles.chip}> - Close button - - {}} - onClose={() => {}} - style={styles.chip} - > - Icon - - - } - onPress={() => {}} - onClose={() => {}} - style={styles.chip} - > - Avatar - - - } - onPress={() => {}} - style={styles.chip} - > - Avatar (selected) - - {}} - style={styles.chip} - > - Icon (disabled) - - - } - style={styles.chip} - > - Avatar (disabled) - - - - - - {}} style={styles.chip}> - Simple - - {}} - onClose={() => {}} - style={styles.chip} - > - Close button - - {}} - onClose={() => {}} - style={styles.chip} - > - Icon - - - } - onPress={() => {}} - style={styles.chip} - > - Avatar - - - } - onPress={() => {}} - style={styles.chip} - > - Avatar (selected) - - {}} - style={styles.chip} - > - Icon (disabled) - - - } - style={styles.chip} - > - Avatar (disabled) - - - - - - {}} - onLongPress={() => { - this.setState({ visible: true }); - }} - style={styles.chip} - > - With onLongPress - + {}} + style={[ + styles.chip, + { + backgroundColor: color(colors.primary) + .alpha(0.2) + .rgb() + .string(), + }, + ]} + selectedColor={colors.primary} + > + Flat selected chip with custom color + + {}} + style={styles.chip} + selectedColor={colors.primary} + > + Flat unselected chip with custom color + + {}} + style={[ + styles.chip, + { + backgroundColor: color(colors.primary) + .alpha(0.2) + .rgb() + .string(), + }, + ]} + selectedColor={colors.primary} + > + Outlined selected chip with custom color + + {}} + style={styles.chip} + selectedColor={colors.primary} + > + Outlined unselected chip with custom color + + {}} + style={styles.chip} + textStyle={styles.tiny} + > + With custom size + + + + + setVisible(false)} + duration={Snackbar.DURATION_SHORT} + > + onLongPress activated! + + + ); +}; - {}} - style={[ - styles.chip, - { - backgroundColor: color(colors.primary) - .alpha(0.2) - .rgb() - .string(), - }, - ]} - selectedColor={colors.primary} - > - Flat selected chip with custom color - - {}} - style={styles.chip} - selectedColor={colors.primary} - > - Flat unselected chip with custom color - - {}} - style={[ - styles.chip, - { - backgroundColor: color(colors.primary) - .alpha(0.2) - .rgb() - .string(), - }, - ]} - selectedColor={colors.primary} - > - Outlined selected chip with custom color - - {}} - style={styles.chip} - selectedColor={colors.primary} - > - Outlined unselected chip with custom color - - {}} - style={styles.chip} - textStyle={styles.tiny} - > - With custom size - - - - - this.setState({ visible: false })} - duration={Snackbar.DURATION_SHORT} - > - onLongPress activated! - - - ); - } -} +ChipExample.title = 'Chip'; const styles = StyleSheet.create({ container: { @@ -254,4 +234,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ChipExample); +export default ChipExample; diff --git a/example/src/Examples/DataTableExample.tsx b/example/src/Examples/DataTableExample.tsx index 09f152348e..3f724b5960 100644 --- a/example/src/Examples/DataTableExample.tsx +++ b/example/src/Examples/DataTableExample.tsx @@ -1,133 +1,111 @@ import * as React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; -import { DataTable, Card, withTheme, Theme } from 'react-native-paper'; +import { DataTable, Card, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - page: number; - sortAscending: boolean; - items: Array<{ key: number; name: string; calories: number; fat: number }>; -}; - -class DataTableExample extends React.Component { - static title = 'Data Table'; +type ItemsState = Array<{ + key: number; + name: string; + calories: number; + fat: number; +}>; - state = { - page: 0, - sortAscending: true, - items: [ - { - key: 1, - name: 'Cupcake', - calories: 356, - fat: 16, - }, - { - key: 2, - name: 'Eclair', - calories: 262, - fat: 16, - }, - { - key: 3, - name: 'Frozen yogurt', - calories: 159, - fat: 6, - }, - { - key: 4, - name: 'Gingerbread', - calories: 305, - fat: 3.7, - }, - { - key: 5, - name: 'Ice cream sandwich', - calories: 237, - fat: 9, - }, - { - key: 6, - name: 'Jelly Bean', - calories: 375, - fat: 0, - }, - ], - }; - - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - const { sortAscending } = this.state; +const DataTableExample = () => { + const [sortAscending, setSortAscending] = React.useState(true); + const [page, setPage] = React.useState(0); + const [items] = React.useState([ + { + key: 1, + name: 'Cupcake', + calories: 356, + fat: 16, + }, + { + key: 2, + name: 'Eclair', + calories: 262, + fat: 16, + }, + { + key: 3, + name: 'Frozen yogurt', + calories: 159, + fat: 6, + }, + { + key: 4, + name: 'Gingerbread', + calories: 305, + fat: 3.7, + }, + { + key: 5, + name: 'Ice cream sandwich', + calories: 237, + fat: 9, + }, + { + key: 6, + name: 'Jelly Bean', + calories: 375, + fat: 0, + }, + ]); + const { + colors: { background }, + } = useTheme(); + const sortedItems = items + .slice() + .sort((item1, item2) => + (sortAscending + ? item1.name < item2.name + : item2.name < item1.name) + ? 1 + : -1 + ); + const itemsPerPage = 2; + const from = page * itemsPerPage; + const to = (page + 1) * itemsPerPage; - const items = this.state.items - .slice() - .sort((item1, item2) => - (sortAscending - ? item1.name < item2.name - : item2.name < item1.name) - ? 1 - : -1 - ); - const itemsPerPage = 2; - const from = this.state.page * itemsPerPage; - const to = (this.state.page + 1) * itemsPerPage; + return ( + + + + + setSortAscending(!sortAscending)} + style={styles.first} + > + Dessert + + Calories + Fat (g) + - return ( - - - - - - this.setState(state => ({ - sortAscending: !state.sortAscending, - })) - } - style={styles.first} - > - Dessert - - Calories - Fat (g) - + {sortedItems.slice(from, to).map(item => ( + + {item.name} + {item.calories} + {item.fat} + + ))} - {items.slice(from, to).map(item => ( - - - {item.name} - - {item.calories} - {item.fat} - - ))} + setPage(page)} + label={`${from + 1}-${to} of ${sortedItems.length}`} + /> + + + + ); +}; - { - this.setState({ page }); - }} - label={`${from + 1}-${to} of ${items.length}`} - /> - - - - ); - } -} +DataTableExample.title = 'Data Table'; const styles = StyleSheet.create({ container: { @@ -143,4 +121,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DataTableExample); +export default DataTableExample; diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx index 1e73445595..63c92f86d2 100644 --- a/example/src/Examples/DialogExample.tsx +++ b/example/src/Examples/DialogExample.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; -import { Colors, Button, withTheme, Theme } from 'react-native-paper'; +import { Colors, Button, useTheme } from 'react-native-paper'; import { DialogWithCustomColors, DialogWithLoadingIndicator, @@ -9,99 +9,84 @@ import { UndismissableDialog, } from './Dialogs'; -type State = { - visible1: boolean; - visible2: boolean; - visible3: boolean; - visible4: boolean; - visible5: boolean; +type ButtonVisibility = { + [key: string]: boolean | undefined; }; -type Props = { - theme: Theme; -}; - -class DialogExample extends React.Component { - static title = 'Dialog'; +const DialogExample = () => { + const [visible, setVisible] = React.useState({}); - state = { - visible1: false, - visible2: false, - visible3: false, - visible4: false, - visible5: false, - }; + const _toggleDialog = (name: string) => () => + setVisible({ ...visible, [name]: !visible[name] }); - _openDialog1 = () => this.setState({ visible1: true }); - _openDialog2 = () => this.setState({ visible2: true }); - _openDialog3 = () => this.setState({ visible3: true }); - _openDialog4 = () => this.setState({ visible4: true }); - _openDialog5 = () => this.setState({ visible5: true }); + const _getVisible = (name: string) => !!visible[name]; - _closeDialog1 = () => this.setState({ visible1: false }); - _closeDialog2 = () => this.setState({ visible2: false }); - _closeDialog3 = () => this.setState({ visible3: false }); - _closeDialog4 = () => this.setState({ visible4: false }); - _closeDialog5 = () => this.setState({ visible5: false }); + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - - const { visible1, visible2, visible3, visible4, visible5 } = this.state; + return ( + + + + + + + + + + + + + ); +}; - return ( - - - - - - - - - - - - - ); - } -} +DialogExample.title = 'Dialog'; const styles = StyleSheet.create({ container: { @@ -114,4 +99,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(DialogExample); +export default DialogExample; diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx index f318f70562..6358b2b14d 100644 --- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx +++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx @@ -14,89 +14,75 @@ type Props = { close: () => void; }; -type State = { - checked: 'normal' | 'first' | 'second' | 'third' | 'fourth'; -}; +type CheckedState = 'normal' | 'first' | 'second' | 'third' | 'fourth'; -export default class extends React.Component { - state: State = { - checked: 'normal', - }; +const DialogWithRadioBtns = ({ visible, close }: Props) => { + const [checked, setChecked] = React.useState('normal'); - render() { - const { checked } = this.state; - const { visible, close } = this.props; - return ( - - - Choose an option - - - - this.setState({ checked: 'normal' })} - > - - - - - Option 1 + return ( + + + Choose an option + + + + setChecked('normal')}> + + + - - this.setState({ checked: 'second' })} - > - - - - - Option 2 + Option 1 + + + setChecked('second')}> + + + - - this.setState({ checked: 'third' })} - > - - - - - Option 3 + Option 2 + + + setChecked('third')}> + + + - - this.setState({ checked: 'fourth' })} - > - - - - - Option 4 + Option 3 + + + setChecked('fourth')}> + + + - - - - - - - - - - - ); - } -} + Option 4 + + + + + + + + + + + + ); +}; + +export default DialogWithRadioBtns; const styles = StyleSheet.create({ row: { diff --git a/example/src/Examples/DividerExample.tsx b/example/src/Examples/DividerExample.tsx index 4cf468b403..aa589a5b4e 100644 --- a/example/src/Examples/DividerExample.tsx +++ b/example/src/Examples/DividerExample.tsx @@ -1,19 +1,13 @@ import * as React from 'react'; import { FlatList } from 'react-native'; -import { Divider, List, withTheme, Theme } from 'react-native-paper'; - -type Props = { - theme: Theme; -}; +import { Divider, List, useTheme } from 'react-native-paper'; const items = ['Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach']; -const DividerExample = (props: Props) => { +const DividerExample = () => { const { - theme: { - colors: { background }, - }, - } = props; + colors: { background }, + } = useTheme(); return ( { DividerExample.title = 'Divider'; -export default withTheme(DividerExample); +export default DividerExample; diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 572258a0bd..2c59cff7f6 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -1,103 +1,82 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; -import { Colors, FAB, Portal, withTheme, Theme } from 'react-native-paper'; +import { Colors, FAB, Portal, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - visible: boolean; - open: boolean; -}; +const ButtonExample = () => { + const [visible, setVisible] = React.useState(true); + const [open, setOpen] = React.useState(false); -class ButtonExample extends React.Component { - static title = 'Floating Action Button'; + const { + colors: { background }, + } = useTheme(); - state = { - visible: true, - open: false, - }; + return ( + + + setVisible(!visible)} + /> + - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; + + {}} + visible={visible} + /> + {}} + visible={visible} + /> + {}} + visible={visible} + disabled + /> - return ( - - - {}} + visible={visible} + loading + /> + + {} }, + { icon: 'star', label: 'Star', onPress: () => {} }, + { icon: 'email', label: 'Email', onPress: () => {} }, + { icon: 'bell', label: 'Remind', onPress: () => {} }, + ]} + onStateChange={({ open }: { open: boolean }) => setOpen(open)} onPress={() => { - this.setState({ - visible: !this.state.visible, - }); + if (open) { + // do something if the speed dial is open + } }} + visible={visible} /> - - - - {}} - visible={this.state.visible} - /> - {}} - visible={this.state.visible} - /> - {}} - visible={this.state.visible} - disabled - /> - - {}} - visible={this.state.visible} - loading - /> - - {} }, - { icon: 'star', label: 'Star', onPress: () => {} }, - { icon: 'email', label: 'Email', onPress: () => {} }, - { icon: 'bell', label: 'Remind', onPress: () => {} }, - ]} - onStateChange={({ open }: { open: boolean }) => - this.setState({ open }) - } - onPress={() => { - if (this.state.open) { - // do something if the speed dial is open - } - }} - visible={this.state.visible} - /> - - + - ); - } -} + + ); +}; + +ButtonExample.title = 'Floating Action Button'; const styles = StyleSheet.create({ container: { @@ -116,4 +95,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ButtonExample); +export default ButtonExample; diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index c6ec8d0fd6..7bb2a1c73e 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,42 +1,32 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; -import { IconButton, Colors, withTheme, Theme } from 'react-native-paper'; +import { IconButton, Colors, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; +const ButtonExample = () => { + const { colors } = useTheme(); -type State = { - loading: boolean; + return ( + + {}} /> + {}} + /> + {}} /> + {}} + style={{ backgroundColor: Colors.lightGreen200 }} + /> + {}} /> + + ); }; -class ButtonExample extends React.Component { - static title = 'Icon Button'; - - render() { - const { colors } = this.props.theme; - - return ( - - {}} /> - {}} - /> - {}} /> - {}} - style={{ backgroundColor: Colors.lightGreen200 }} - /> - {}} /> - - ); - } -} +ButtonExample.title = 'Icon Button'; const styles = StyleSheet.create({ container: { @@ -46,4 +36,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ButtonExample); +export default ButtonExample; diff --git a/example/src/Examples/ListAccordionExample.tsx b/example/src/Examples/ListAccordionExample.tsx index f409c8fe2d..27b16e3cd2 100644 --- a/example/src/Examples/ListAccordionExample.tsx +++ b/example/src/Examples/ListAccordionExample.tsx @@ -1,82 +1,68 @@ import * as React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; -import { List, Divider, withTheme, Theme } from 'react-native-paper'; +import { List, Divider, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - expanded: boolean; -}; +const ListAccordionExample = () => { + const [expanded, setExpanded] = React.useState(true); -class ListAccordionExample extends React.Component { - static title = 'List.Accordion'; - - state = { - expanded: true, + const _handlePress = () => { + setExpanded(!expanded); }; - _handlePress = () => { - this.setState({ expanded: !this.state.expanded }); - }; + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; + return ( + + + } + title="Expandable list item" + > + + + + } + title="Start expanded" + expanded={expanded} + onPress={_handlePress} + > + + + + + + + + + + + + + } + title="Accordion item 1" + > + } + title="List item 1" + /> + } + title="List item 2" + /> + + + + ); +}; - return ( - - - } - title="Expandable list item" - > - - - - } - title="Start expanded" - expanded={this.state.expanded} - onPress={this._handlePress} - > - - - - - - - - - - - - - } - title="Accordion item 1" - > - } - title="List item 1" - /> - } - title="List item 2" - /> - - - - ); - } -} +ListAccordionExample.title = 'List.Accordion'; const styles = StyleSheet.create({ container: { @@ -84,4 +70,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ListAccordionExample); +export default ListAccordionExample; diff --git a/example/src/Examples/ListAccordionGroupExample.tsx b/example/src/Examples/ListAccordionGroupExample.tsx index 62ebccb951..797c25952a 100644 --- a/example/src/Examples/ListAccordionGroupExample.tsx +++ b/example/src/Examples/ListAccordionGroupExample.tsx @@ -1,98 +1,83 @@ import * as React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; -import { List, withTheme, Theme } from 'react-native-paper'; +import { List, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - expandedId: string | number | undefined; -}; +type State = string | number | undefined; -class ListAccordionGroupExample extends React.Component { - static title = 'List.AccordionGroup'; +const ListAccordionGroupExample = () => { + const [expandedId, setExpandedId] = React.useState(undefined); - state = { - expandedId: undefined, - }; + const _onAccordionPress = (newExpandedId: string | number) => + expandedId === newExpandedId + ? setExpandedId(undefined) + : setExpandedId(newExpandedId); - _onAccordionPress = (expandedId: string | number) => { - this.setState(({ expandedId: currentExpandedId }) => ({ - expandedId: currentExpandedId === expandedId ? undefined : expandedId, - })); - }; + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - - const { expandedId } = this.state; + return ( + + + + } + title="Expandable list item" + id="1" + > + + + + } + title="Expandable list item 2" + id="2" + > + + + } + title="Expandable list item 2" + id="3" + > + + + + + + + } + title="Expandable list item" + id="1" + > + + + + } + title="Expandable list item 2" + id="2" + > + + + } + title="Expandable list item 2" + id="3" + > + + + + + + ); +}; - return ( - - - - } - title="Expandable list item" - id="1" - > - - - - } - title="Expandable list item 2" - id="2" - > - - - } - title="Expandable list item 2" - id="3" - > - - - - - - - } - title="Expandable list item" - id="1" - > - - - - } - title="Expandable list item 2" - id="2" - > - - - } - title="Expandable list item 2" - id="3" - > - - - - - - ); - } -} +ListAccordionGroupExample.title = 'List.AccordionGroup'; const styles = StyleSheet.create({ container: { @@ -100,4 +85,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ListAccordionGroupExample); +export default ListAccordionGroupExample; diff --git a/example/src/Examples/ListSectionExample.tsx b/example/src/Examples/ListSectionExample.tsx index 117fa26353..7ef4a02bea 100644 --- a/example/src/Examples/ListSectionExample.tsx +++ b/example/src/Examples/ListSectionExample.tsx @@ -1,135 +1,121 @@ import * as React from 'react'; import { ScrollView, StyleSheet, Image, View } from 'react-native'; -import { - List, - Text, - Chip, - Divider, - withTheme, - Theme, -} from 'react-native-paper'; +import { List, Text, Chip, Divider, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -class ListSectionExample extends React.Component { - static title = 'List.Section'; +const ListSectionExample = () => { + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - - Single line - } - title="List item 1" - /> - } - title="List item 2" - /> - } - right={props => } - /> - - - - Two line - ( - - )} - title="List item 1" - description="Describes item 1" - /> - ( - - )} - right={props => } - title="List item 2" - description="Describes item 2" - /> - - - - Three line - ( - - )} - title="List item 1" - description="Describes item 1. Example of a very very long description." - /> - ( - - )} - right={props => } - title="List item 2" - description="Describes item 2. Example of a very very long description." - /> - - - - Custom description - ( - - )} - right={props => } - title="List Item 1" - description={({ - ellipsizeMode, - color: descriptionColor, - fontSize, - }) => ( - - - React Native Paper is a high-quality, standard-compliant - Material Design library that has you covered in all major - use-cases. - - - {}}> - DOCS.pdf - - + return ( + + + Single line + } + title="List item 1" + /> + } + title="List item 2" + /> + } + right={props => } + /> + + + + Two line + ( + + )} + title="List item 1" + description="Describes item 1" + /> + ( + + )} + right={props => } + title="List item 2" + description="Describes item 2" + /> + + + + Three line + ( + + )} + title="List item 1" + description="Describes item 1. Example of a very very long description." + /> + ( + + )} + right={props => } + title="List item 2" + description="Describes item 2. Example of a very very long description." + /> + + + + Custom description + ( + + )} + right={props => } + title="List Item 1" + description={({ + ellipsizeMode, + color: descriptionColor, + fontSize, + }) => ( + + + React Native Paper is a high-quality, standard-compliant + Material Design library that has you covered in all major + use-cases. + + + {}}> + DOCS.pdf + - )} - /> - - - ); - } -} + + )} + /> + + + ); +}; + +ListSectionExample.title = 'List.Section'; const styles = StyleSheet.create({ container: { @@ -148,4 +134,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ListSectionExample); +export default ListSectionExample; diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx index 7345044ead..5978066411 100644 --- a/example/src/Examples/MenuExample.tsx +++ b/example/src/Examples/MenuExample.tsx @@ -11,155 +11,131 @@ import { Appbar, Divider, Button, - withTheme, - Theme, + useTheme, List, TouchableRipple, } from 'react-native-paper'; -type State = { - visible1: boolean; - visible2: boolean; - visible3: boolean; - contextualMenuCoord: { x: number; y: number }; -}; +type ContextualMenuCoord = { x: number; y: number }; type Props = { - theme: Theme; navigation: StackNavigationProp<{}>; }; +type MenuVisibility = { + [key: string]: boolean | undefined; +}; + const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical'; -class MenuExample extends React.Component { - state = { - visible1: false, - visible2: false, - visible3: false, - contextualMenuCoord: { x: 0, y: 0 }, - }; +const MenuExample = ({ navigation }: Props) => { + const [visible, setVisible] = React.useState({}); + const [contextualMenuCoord, setContextualMenuCoor] = React.useState< + ContextualMenuCoord + >({ x: 0, y: 0 }); + + const _toggleMenu = (name: string) => () => + setVisible({ ...visible, [name]: !visible[name] }); - static title = 'Menu'; + const _getVisible = (name: string) => !!visible[name]; - _handleLongPress = (event: GestureResponderEvent) => { + const _handleLongPress = (event: GestureResponderEvent) => { const { nativeEvent } = event; - this.setState( - { - contextualMenuCoord: { - x: nativeEvent.pageX, - y: nativeEvent.pageY, - }, - }, - this._openMenu3 - ); + setContextualMenuCoor({ + x: nativeEvent.pageX, + y: nativeEvent.pageY, + }); + setVisible({ menu3: true }); }; - _openMenu1 = () => this.setState({ visible1: true }); - _openMenu2 = () => this.setState({ visible2: true }); - _openMenu3 = () => this.setState({ visible3: true }); - - _closeMenu1 = () => this.setState({ visible1: false }); - _closeMenu2 = () => this.setState({ visible2: false }); - _closeMenu3 = () => this.setState({ visible3: false }); - - render() { - const { - theme: { - colors: { background }, - }, - navigation, - } = this.props; + const { + colors: { background }, + } = useTheme(); - const { visible1, visible2, visible3, contextualMenuCoord } = this.state; - - navigation.setOptions({ - headerShown: false, - }); + navigation.setOptions({ + headerShown: false, + }); - return ( - - - navigation.goBack()} /> - + return ( + + + navigation.goBack()} /> + + + } + > + {}} title="Undo" /> + {}} title="Redo" /> + + {}} title="Cut" disabled /> + {}} title="Copy" disabled /> + {}} title="Paste" /> + + + + + } > - {}} title="Undo" /> - {}} title="Redo" /> + {}} title="Undo" /> + {}} title="Redo" /> - {}} title="Cut" disabled /> - {}} title="Copy" disabled /> - {}} title="Paste" /> - - - - - - Menu with icons - - } - > - {}} title="Undo" /> - {}} title="Redo" /> - - {}} - title="Cut" - disabled - /> - {}} - title="Copy" - disabled - /> - {}} - title="Paste" - /> - - - - {}} title="Item 1" /> - {}} title="Item 2" /> - - {}} title="Item 3" disabled /> - - - {}} - // @ts-ignore - onLongPress={this._handleLongPress} - > - - - + title="Cut" + disabled + /> + {}} + title="Copy" + disabled + /> + {}} title="Paste" /> + + + {}} title="Item 1" /> + {}} title="Item 2" /> + + {}} title="Item 3" disabled /> + + + {}} + onLongPress={() => _handleLongPress} + > + + + - ); - } -} + + ); +}; + +MenuExample.title = 'Menu'; const styles = StyleSheet.create({ screen: { @@ -177,4 +153,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(MenuExample); +export default MenuExample; diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index e4b89f513e..3734e66973 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -5,87 +5,67 @@ import { ProgressBar, Paragraph, Colors, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - progress: number; - visible: boolean; -}; +const ProgressBarExample = () => { + const [visible, setVisible] = React.useState(true); + const [progress, setProgress] = React.useState(0.3); -class ProgressBarExample extends React.Component { - static title = 'Progress Bar'; + const { + colors: { background }, + } = useTheme(); - state = { - progress: 0.3, - visible: true, - }; + return ( + + + - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; + + Default ProgressBar + + - return ( - - - + + Indeterminate ProgressBar + + - - Default ProgressBar - - + + ProgressBar with custom color + + - - Indeterminate ProgressBar - - + + ProgressBar with custom background color + + - - ProgressBar with custom color - - + + ProgressBar with custom height + + + + ); +}; - - ProgressBar with custom background color - - +ProgressBarExample.title = 'Progress Bar'; - - ProgressBar with custom height - - - - ); - } -} const styles = StyleSheet.create({ container: { flex: 1, @@ -97,4 +77,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ProgressBarExample); +export default ProgressBarExample; diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index 5f5d742b1d..d77eb6f3c9 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -5,94 +5,73 @@ import { RadioButton, Colors, TouchableRipple, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - checked: 'normal' | 'normal-ios' | 'custom'; -}; - -class RadioButtonExample extends React.Component { - static title = 'Radio Button'; +type State = 'normal' | 'normal-ios' | 'custom'; - state: State = { - checked: 'normal', - }; +const RadioButtonExample = () => { + const [checked, setChecked] = React.useState('normal'); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - this.setState({ checked: 'normal' })}> - - Normal - Android - - - - - - this.setState({ checked: 'normal-ios' })} - > - - Normal 2 - IOS - - - - - - this.setState({ checked: 'custom' })}> - - Custom - - - + const { + colors: { background }, + } = useTheme(); + return ( + + setChecked('normal')}> + + Normal - Android + + - + + + setChecked('normal-ios')}> - Checked (Disabled) - + Normal 2 - IOS + + + + + setChecked('custom')}> - Unchecked (Disabled) - + Custom + + + + + + Checked (Disabled) + - ); - } -} + + Unchecked (Disabled) + + + + ); +}; + +RadioButtonExample.title = 'Radio Button'; const styles = StyleSheet.create({ container: { @@ -110,4 +89,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(RadioButtonExample); +export default RadioButtonExample; diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx index 9ae90f1cb3..8d574c487d 100644 --- a/example/src/Examples/RadioButtonGroupExample.tsx +++ b/example/src/Examples/RadioButtonGroupExample.tsx @@ -2,82 +2,66 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import { Colors, - withTheme, RadioButton, Paragraph, List, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; +const RadioButtonGroupExample = () => { + const [value, setValue] = React.useState('first'); + const [value2, setValue2] = React.useState('first'); -type State = { - value: string; - value2: string; + const { + colors: { background, primary }, + } = useTheme(); + return ( + + + setValue(value)} + > + + First + + + + Second + + + + Third + + + + + + setValue2(value)} + > + + + + + + + ); }; -class RadioButtonGroupExample extends React.Component { - static title = 'Radio Button Group'; - - state = { - value: 'first', - value2: 'first', - }; - - render() { - const { - theme: { - colors: { background, primary }, - }, - } = this.props; - return ( - - - this.setState({ value })} - > - - First - - - - Second - - - - Third - - - - - - this.setState({ value2: value })} - > - - - - - - - ); - } -} +RadioButtonGroupExample.title = 'Radio Button Group'; const styles = StyleSheet.create({ container: { @@ -94,4 +78,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(RadioButtonGroupExample); +export default RadioButtonGroupExample; diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index 7ed75ef449..e862b73e11 100644 --- a/example/src/Examples/SearchbarExample.tsx +++ b/example/src/Examples/SearchbarExample.tsx @@ -1,70 +1,51 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - Colors, - Caption, - Searchbar, - withTheme, - Theme, -} from 'react-native-paper'; +import { Colors, Caption, Searchbar, useTheme } from 'react-native-paper'; +import { StackNavigationProp } from '@react-navigation/stack'; type Props = { - navigation: any; - theme: Theme; + navigation: StackNavigationProp<{}>; }; -type State = { - firstQuery: string; - secondQuery: string; - thirdQuery: string; -}; +const SearchExample = ({ navigation }: Props) => { + const [firstQuery, setFirstQuery] = React.useState(''); + const [secondQuery, setSecondQuery] = React.useState(''); + const [thirdQuery, setThirdQuery] = React.useState(''); -class SearchExample extends React.Component { - static title = 'Searchbar'; + const { + colors: { background }, + } = useTheme(); - state = { - firstQuery: '', - secondQuery: '', - thirdQuery: '', - }; + return ( + + setFirstQuery(query)} + value={firstQuery} + style={styles.searchbar} + /> + Clickable icon + setSecondQuery(query)} + value={secondQuery} + onIconPress={() => navigation.goBack()} + icon={{ source: 'arrow-left', direction: 'auto' }} + style={styles.searchbar} + /> + setThirdQuery(query)} + value={thirdQuery} + onIconPress={/* In real code, this will open the drawer */ () => {}} + icon="menu" + style={styles.searchbar} + /> + + ); +}; - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - this.setState({ firstQuery: query })} - value={this.state.firstQuery} - style={styles.searchbar} - /> - Clickable icon - - this.setState({ secondQuery: query }) - } - value={this.state.secondQuery} - onIconPress={() => this.props.navigation.goBack()} - icon={{ source: 'arrow-left', direction: 'auto' }} - style={styles.searchbar} - /> - this.setState({ thirdQuery: query })} - value={this.state.thirdQuery} - onIconPress={/* In real code, this will open the drawer */ () => {}} - icon="menu" - style={styles.searchbar} - /> - - ); - } -} +SearchExample.title = 'Searchbar'; const styles = StyleSheet.create({ container: { @@ -80,4 +61,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(SearchExample); +export default SearchExample; diff --git a/example/src/Examples/SnackbarExample.tsx b/example/src/Examples/SnackbarExample.tsx index 710faa3e26..0fb4fab058 100644 --- a/example/src/Examples/SnackbarExample.tsx +++ b/example/src/Examples/SnackbarExample.tsx @@ -1,53 +1,37 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Snackbar, Colors, withTheme, Button, Theme } from 'react-native-paper'; +import { Snackbar, Colors, Button, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - visible: boolean; -}; +const SnackbarExample = () => { + const [visible, setVisible] = React.useState(false); -class SnackbarExample extends React.Component { - static title = 'Snackbar'; + const { + colors: { background }, + } = useTheme(); - state = { - visible: false, - }; + return ( + + + setVisible(false)} + action={{ + label: 'Undo', + onPress: () => { + // Do something + }, + }} + duration={Snackbar.DURATION_MEDIUM} + > + Hey there! I'm a Snackbar. + + + ); +}; - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - - this.setState({ visible: false })} - action={{ - label: 'Undo', - onPress: () => { - // Do something - }, - }} - duration={Snackbar.DURATION_MEDIUM} - > - Hey there! I'm a Snackbar. - - - ); - } -} +SnackbarExample.title = 'Snackbar'; const styles = StyleSheet.create({ container: { @@ -58,4 +42,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(SnackbarExample); +export default SnackbarExample; diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx index c2654a229b..e2b4e3f17f 100644 --- a/example/src/Examples/SurfaceExample.tsx +++ b/example/src/Examples/SurfaceExample.tsx @@ -1,34 +1,27 @@ import * as React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; -import { Text, Surface, withTheme, Theme } from 'react-native-paper'; +import { Text, Surface, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; +const SurfaceExample = () => { + const { + colors: { background }, + } = useTheme(); -class SurfaceExample extends React.Component { - static title = 'Surface'; + return ( + + {[1, 2, 4, 6, 12].map(i => ( + + {i} + + ))} + + ); +}; - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - {[1, 2, 4, 6, 12].map(i => ( - - {i} - - ))} - - ); - } -} +SurfaceExample.title = 'Surface'; const styles = StyleSheet.create({ container: { @@ -49,4 +42,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(SurfaceExample); +export default SurfaceExample; diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx index 569c6c5aca..d9ebcff911 100644 --- a/example/src/Examples/SwitchExample.tsx +++ b/example/src/Examples/SwitchExample.tsx @@ -5,131 +5,95 @@ import { Switch, Colors, TouchableRipple, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - valueNormal: boolean; - valueCustom: boolean; -}; - -class SwitchExample extends React.Component { - static title = 'Switch'; +const SwitchExample = () => { + const [valueNormal, setNormalValue] = React.useState(true); + const [valueCustom, setCustomValue] = React.useState(true); - state = { - valueNormal: true, - valueCustom: true, - }; + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - const switchValueNormalLabel = `switch ${ - this.state.valueNormal === true ? 'on' : 'off' - }`; + const switchValueNormalLabel = `switch ${ + valueNormal === true ? 'on' : 'off' + }`; + const switchValueCustomlLabel = `switch ${ + valueCustom === true ? 'on' : 'off' + }`; - const switchValueCustomlLabel = `switch ${ - this.state.valueCustom === true ? 'on' : 'off' - }`; - - return Platform.OS === 'android' ? ( - - - this.setState(state => ({ - valueNormal: !state.valueNormal, - })) - } - > - - Normal {switchValueNormalLabel} - - - - - - - this.setState(state => ({ - valueCustom: !state.valueCustom, - })) - } - > - - Custom {switchValueCustomlLabel} - - - - - - - Switch on (disabled) - - - - Switch off (disabled) - - - - ) : ( - + return Platform.OS === 'android' ? ( + + setNormalValue(!valueNormal)}> Normal {switchValueNormalLabel} - - this.setState(state => ({ - valueNormal: !state.valueNormal, - })) - } - /> + + + + + setCustomValue(!valueCustom)}> Custom {switchValueCustomlLabel} - - this.setState(state => ({ - valueCustom: !state.valueCustom, - })) - } - color={Colors.blue500} - /> - - - Switch on (disabled) - - - - Switch off (disabled) - + + + + + + Switch on (disabled) + + + + Switch off (disabled) + - ); - } -} + + ) : ( + + + Normal {switchValueNormalLabel} + setNormalValue(!valueNormal)} + /> + + + Custom {switchValueCustomlLabel} + setCustomValue(!valueCustom)} + color={Colors.blue500} + /> + + + Switch on (disabled) + + + + Switch off (disabled) + + + + ); +}; + +SwitchExample.title = 'Switch'; const styles = StyleSheet.create({ container: { @@ -146,4 +110,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(SwitchExample); +export default SwitchExample; diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index c92ca9b758..e8856e16e8 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -6,34 +6,27 @@ import { Paragraph, Subheading, Title, - withTheme, - Theme, + useTheme, } from 'react-native-paper'; -type Props = { - theme: Theme; +const TextExample = () => { + const { + colors: { background }, + } = useTheme(); + + return ( + + Caption + Paragraph + Subheading + Title + Headline + + ); }; -class TextExample extends React.Component { - static title = 'Typography'; +TextExample.title = 'Typography'; - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - Caption - Paragraph - Subheading - Title - Headline - - ); - } -} const styles = StyleSheet.create({ container: { padding: 16, @@ -44,4 +37,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(TextExample); +export default TextExample; diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index 6d2bbd506a..b345538156 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -4,366 +4,393 @@ import { View, ScrollView, KeyboardAvoidingView, + Platform, } from 'react-native'; -import { TextInput, HelperText, withTheme, Theme } from 'react-native-paper'; +import { TextInput, HelperText, useTheme } from 'react-native-paper'; +import { inputReducer, State } from '../../utils'; const MAX_LENGTH = 20; -type Props = { - theme: Theme; +const initialState: State = { + text: '', + name: '', + outlinedText: '', + largeText: '', + flatTextPassword: 'Password', + outlinedLargeText: '', + outlinedTextPassword: '', + nameNoPadding: '', + flatDenseText: '', + flatDense: '', + outlinedDenseText: '', + outlinedDense: '', + flatMultiline: '', + flatTextArea: '', + outlinedMultiline: '', + outlinedTextArea: '', + maxLengthName: '', + flatTextSecureEntry: true, + outlineTextSecureEntry: true, + iconsColor: { + flatLeftIcon: undefined, + flatRightIcon: undefined, + outlineLeftIcon: undefined, + outlineRightIcon: undefined, + }, }; -type State = { - text: string; - name: string; - outlinedText: string; - largeText: string; - flatTextPassword: string; - outlinedLargeText: string; - nameNoPadding: string; - flatDenseText: string; - flatDense: string; - outlinedDenseText: string; - outlinedDense: string; - flatMultiline: string; - flatTextArea: string; - outlinedMultiline: string; - outlinedTextArea: string; - maxLengthName: string; - flatTextSecureEntry: boolean; - outlineTextSecureEntry: boolean; - iconsColor: { - [key: string]: string | undefined; - }; +type AvoidingViewProps = { + children: React.ReactNode; }; -class TextInputExample extends React.Component { - static title = 'TextInput'; +const TextInputAvoidingView = ({ children }: AvoidingViewProps) => { + return Platform.OS === 'ios' ? ( + + {children} + + ) : ( + <>{children} + ); +}; - state = { - text: '', - name: '', - outlinedText: '', - largeText: '', - flatTextPassword: 'Password', - outlinedLargeText: '', - outlinedTextPassword: 'Password', - nameNoPadding: '', - flatDenseText: '', - flatDense: '', - outlinedDenseText: '', - outlinedDense: '', - flatMultiline: '', - flatTextArea: '', - outlinedMultiline: '', - outlinedTextArea: '', - maxLengthName: '', - flatTextSecureEntry: true, - outlineTextSecureEntry: true, +const TextInputExample = () => { + const [state, dispatch] = React.useReducer(inputReducer, initialState); + const { + text, + name, + outlinedText, + largeText, + flatTextPassword, + outlinedLargeText, + outlinedTextPassword, + nameNoPadding, + flatDenseText, + flatDense, + outlinedDenseText, + outlinedDense, + flatMultiline, + flatTextArea, + outlinedMultiline, + outlinedTextArea, + maxLengthName, + flatTextSecureEntry, + outlineTextSecureEntry, iconsColor: { - flatLeftIcon: undefined, - flatRightIcon: undefined, - outlineLeftIcon: undefined, - outlineRightIcon: undefined, + flatLeftIcon, + flatRightIcon, + outlineLeftIcon, + outlineRightIcon, }, - }; + } = state; - _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name); + const _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name); - _changeIconColor = (name: string) => { - const { - theme: { - colors: { accent }, - }, - } = this.props; + const { + colors: { background, accent }, + } = useTheme(); - const { iconsColor: currentColors } = this.state; + const inputActionHandler = (type: string, payload: string) => + dispatch({ + type: type, + payload: payload, + }); - const color = (currentColors as State['iconsColor'])[name]; + const changeIconColor = (name: keyof State['iconsColor']) => { + const color = state.iconsColor[name]; - const iconsColor = { - ...currentColors, + const colors = { + ...state.iconsColor, [name]: !color ? accent : undefined, }; - this.setState({ iconsColor }); + dispatch({ + type: 'iconsColor', + payload: colors, + }); }; - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - - return ( - + - - this.setState({ text })} - left={ - { - this._changeIconColor('flatLeftIcon'); - }} - /> - } - right={} - /> - this.setState({ largeText })} - left={} - right={ - { - this._changeIconColor('flatRightIcon'); - }} - /> - } - /> - - this.setState({ flatTextPassword }) - } - secureTextEntry={this.state.flatTextSecureEntry} - right={ - - this.setState({ - flatTextSecureEntry: !this.state.flatTextSecureEntry, - }) - } - /> - } - /> - this.setState({ flatDenseText })} - left={} - /> - this.setState({ flatDense })} - /> - this.setState({ flatMultiline })} - /> - this.setState({ flatTextArea })} - /> - - this.setState({ outlinedText })} - left={ - { - this._changeIconColor('outlineLeftIcon'); - }} - /> - } - right={} - /> - - this.setState({ outlinedLargeText }) - } - left={} - right={ - { - this._changeIconColor('outlineRightIcon'); - }} - /> - } - /> - - this.setState({ outlinedLargeText }) - } - secureTextEntry={this.state.outlineTextSecureEntry} - right={ - - this.setState({ - outlineTextSecureEntry: !this.state.outlineTextSecureEntry, - }) - } - /> - } - /> - - this.setState({ outlinedDenseText }) - } - left={} - /> - this.setState({ outlinedDense })} - /> + inputActionHandler('text', text)} + left={ + { + changeIconColor('flatLeftIcon'); + }} + /> + } + right={} + /> + inputActionHandler('largeText', largeText)} + left={} + right={ + { + changeIconColor('flatRightIcon'); + }} + /> + } + /> + + inputActionHandler('flatTextPassword', flatTextPassword) + } + secureTextEntry={flatTextSecureEntry} + right={ + + dispatch({ + type: 'flatTextSecureEntry', + payload: !flatTextSecureEntry, + }) + } + /> + } + /> + + inputActionHandler('flatDenseText', flatDenseText) + } + left={} + /> + inputActionHandler('flatDense', flatDense)} + /> + + inputActionHandler('flatMultiline', flatMultiline) + } + /> + + inputActionHandler('flatTextArea', flatTextArea) + } + /> + + + inputActionHandler('outlinedText', outlinedText) + } + left={ + { + changeIconColor('outlineLeftIcon'); + }} + /> + } + right={} + /> + + inputActionHandler('outlinedLargeText', outlinedLargeText) + } + left={} + right={ + { + changeIconColor('outlineRightIcon'); + }} + /> + } + /> + + inputActionHandler('outlinedTextPassword', outlinedTextPassword) + } + secureTextEntry={outlineTextSecureEntry} + right={ + + dispatch({ + type: 'outlineTextSecureEntry', + payload: !outlineTextSecureEntry, + }) + } + /> + } + /> + + inputActionHandler('outlinedDenseText', outlinedDenseText) + } + left={} + /> + + inputActionHandler('outlinedDense', outlinedDense) + } + /> + + inputActionHandler('outlinedMultiline', outlinedMultiline) + } + /> + + inputActionHandler('outlinedTextArea', outlinedTextArea) + } + /> + + - this.setState({ outlinedMultiline }) - } + label="Input with helper text" + placeholder="Enter username, only letters" + value={name} + error={!_isUsernameValid(name)} + onChangeText={name => inputActionHandler('name', name)} /> + + Error: Only letters are allowed + + + - this.setState({ outlinedTextArea }) + label="Input with helper text and character counter" + placeholder="Enter username, only letters" + value={maxLengthName} + error={!_isUsernameValid(maxLengthName)} + onChangeText={maxLengthName => + inputActionHandler('maxLengthName', maxLengthName) } + maxLength={MAX_LENGTH} /> - - - this.setState({ name })} - /> - - Error: Only letters are allowed - - - - this.setState({ maxLengthName })} - maxLength={MAX_LENGTH} - /> - - - Error: Numbers and special characters are not allowed - - - {this.state.maxLengthName.length} / {MAX_LENGTH} - - - - - this.setState({ nameNoPadding })} - /> + - Error: Only letters are allowed + Error: Numbers and special characters are not allowed + + + {maxLengthName.length} / {MAX_LENGTH} - - - ); - } -} + + + + inputActionHandler('nameNoPadding', nameNoPadding) + } + /> + + Error: Only letters are allowed + + + + + ); +}; + +TextInputExample.title = 'TextInput'; const styles = StyleSheet.create({ container: { @@ -394,4 +421,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(TextInputExample); +export default TextInputExample; diff --git a/example/src/Examples/ToggleButtonExample.tsx b/example/src/Examples/ToggleButtonExample.tsx index 0ceb11062c..a23cf45c50 100644 --- a/example/src/Examples/ToggleButtonExample.tsx +++ b/example/src/Examples/ToggleButtonExample.tsx @@ -1,135 +1,102 @@ import * as React from 'react'; import { View, StyleSheet, ImageBackground } from 'react-native'; -import { withTheme, ToggleButton, List, Theme } from 'react-native-paper'; +import { ToggleButton, List, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; - -type State = { - first: string; - second: string; - fruit: string; - status: 'checked' | 'unchecked'; -}; +type StatusState = 'checked' | 'unchecked'; -class ToggleButtonExample extends React.Component { - static title = 'Toggle Button'; +const ToggleButtonExample = () => { + const [first, setFirst] = React.useState('bold'); + const [fruit, setFruit] = React.useState('watermelon'); + const [status, setStatus] = React.useState('checked'); - state: State = { - first: 'bold', - second: 'left', - fruit: 'watermelon', - status: 'checked', - }; + const { + colors: { background }, + } = useTheme(); - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - - - { - this.setState({ - status: status === 'checked' ? 'unchecked' : 'checked', - }); - }} - /> - - - - - this.setState({ - first: value, - }) + return ( + + + + + setStatus(status === 'checked' ? 'unchecked' : 'checked') } - style={styles.padding} + /> + + + + setFirst(value)} + style={styles.padding} + > + + + + + + + + + setFruit(value)} > - - - - - - - - - - this.setState({ - fruit: value, - }) - } + - - - - + + + - - - - - - - ); - } -} + color="white" + icon={fruit === 'strawberries' ? 'heart' : 'heart-outline'} + /> + + + + + + ); +}; + +ToggleButtonExample.title = 'Toggle Button'; const styles = StyleSheet.create({ container: { @@ -143,4 +110,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(ToggleButtonExample); +export default ToggleButtonExample; diff --git a/example/src/Examples/TouchableRippleExample.tsx b/example/src/Examples/TouchableRippleExample.tsx index 15d0e88564..5d50c4594a 100644 --- a/example/src/Examples/TouchableRippleExample.tsx +++ b/example/src/Examples/TouchableRippleExample.tsx @@ -1,40 +1,28 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; -import { - TouchableRipple, - withTheme, - Paragraph, - Theme, -} from 'react-native-paper'; +import { TouchableRipple, Paragraph, useTheme } from 'react-native-paper'; -type Props = { - theme: Theme; -}; +const RippleExample = () => { + const { + colors: { background }, + } = useTheme(); -class RippleExample extends React.Component { - static title = 'TouchableRipple'; + return ( + + {}} + rippleColor="rgba(0, 0, 0, .32)" + > + + Press anywhere + + + + ); +}; - render() { - const { - theme: { - colors: { background }, - }, - } = this.props; - return ( - - {}} - rippleColor="rgba(0, 0, 0, .32)" - > - - Press anywhere - - - - ); - } -} +RippleExample.title = 'TouchableRipple'; const styles = StyleSheet.create({ container: { @@ -47,4 +35,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(RippleExample); +export default RippleExample; diff --git a/example/utils/index.ts b/example/utils/index.ts new file mode 100644 index 0000000000..56e4282ab6 --- /dev/null +++ b/example/utils/index.ts @@ -0,0 +1,45 @@ +type ReducerAction = { + payload: string | boolean | IconsColor; + type: string; +}; + +type IconsColor = { + flatLeftIcon: string | undefined; + flatRightIcon: string | undefined; + outlineLeftIcon: string | undefined; + outlineRightIcon: string | undefined; +}; + +export type State = { + text: string; + name: string; + outlinedText: string; + largeText: string; + flatTextPassword: string; + outlinedLargeText: string; + outlinedTextPassword: string; + nameNoPadding: string; + flatDenseText: string; + flatDense: string; + outlinedDenseText: string; + outlinedDense: string; + flatMultiline: string; + flatTextArea: string; + outlinedMultiline: string; + outlinedTextArea: string; + maxLengthName: string; + flatTextSecureEntry: boolean; + outlineTextSecureEntry: boolean; + iconsColor: IconsColor; +}; + +export function inputReducer(state: State, action: ReducerAction) { + switch (action.type) { + case action.type: + //@ts-ignore + state[action.type] = action.payload; + return { ...state }; + default: + return { ...state }; + } +}