diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx index 671c4fe4d..8b9a1529c 100644 --- a/app/containers/List/ListItem.tsx +++ b/app/containers/List/ListItem.tsx @@ -61,7 +61,6 @@ interface IListItemContent { right?: () => JSX.Element | null; disabled?: boolean; theme: TSupportedThemes; - testID?: string; color?: string; translateTitle?: boolean; translateSubtitle?: boolean; @@ -76,7 +75,6 @@ const Content = React.memo( title, subtitle, disabled, - testID, left, right, color, @@ -91,9 +89,7 @@ const Content = React.memo( const { fontScale } = useDimensions(); return ( - + {left ? {left()} : null} @@ -121,25 +117,28 @@ const Content = React.memo( } ); -interface IListButtonPress extends IListItemButton { - onPress: Function; -} - interface IListItemButton { title?: string; disabled?: boolean; theme: TSupportedThemes; backgroundColor?: string; + testID?: string; underlayColor?: string; } +interface IListButtonPress extends IListItemButton { + onPress: Function; +} + const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => ( onPress(props.title)} style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} underlayColor={underlayColor} enabled={!props.disabled} - theme={props.theme}> + theme={props.theme} + {...testProps(props.testID)} + touchable> )); diff --git a/app/utils/touch.tsx b/app/utils/touch.tsx index 668b8770e..7df65df2b 100644 --- a/app/utils/touch.tsx +++ b/app/utils/touch.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RectButton, RectButtonProps } from 'react-native-gesture-handler'; +import { RectButton, RectButtonProps, TouchableOpacity } from 'react-native-gesture-handler'; import { TSupportedThemes } from '../theme'; import { themes } from '../lib/constants'; @@ -9,6 +9,7 @@ interface ITouchProps extends RectButtonProps { theme: TSupportedThemes; accessibilityLabel?: string; testID?: string; + touchable?: boolean; } class Touch extends React.Component { @@ -23,8 +24,15 @@ class Touch extends React.Component { }; render(): JSX.Element { - const { children, onPress, theme, underlayColor, ...props } = this.props; + const { children, onPress, theme, underlayColor, touchable, ...props } = this.props; + if (touchable) { + return ( + void} {...(props as any)}> + {children} + + ); + } return ( ( +const Item = React.memo(({ left, right, text, onPress, test, current, theme }: SidebarItemProps) => ( + style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]} + touchable> {left} diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx index 7d162d495..1a5d34597 100644 --- a/app/views/SidebarView/index.tsx +++ b/app/views/SidebarView/index.tsx @@ -146,8 +146,10 @@ class Sidebar extends Component { } sidebarNavigate = (route: string) => { + const { navigation } = this.props; // @ts-ignore logEvent(events[`SIDEBAR_GO_${route.replace('StackNavigator', '').replace('View', '').toUpperCase()}`]); + navigation.closeDrawer(); Navigation.navigate(route); }; @@ -177,7 +179,7 @@ class Sidebar extends Component { text={I18n.t('Admin_Panel')} left={} onPress={() => this.sidebarNavigate(routeName)} - testID='sidebar-admin' + test='sidebar-admin' theme={theme!} current={this.currentItemKey === routeName} /> @@ -188,12 +190,12 @@ class Sidebar extends Component { renderNavigation = () => { const { theme } = this.props; return ( - <> + } onPress={() => this.sidebarNavigate('ChatsStackNavigator')} - testID='sidebar-chats' + test='sidebar-chats' theme={theme!} current={this.currentItemKey === 'ChatsStackNavigator'} /> @@ -201,7 +203,7 @@ class Sidebar extends Component { text={I18n.t('Profile')} left={} onPress={() => this.sidebarNavigate('ProfileStackNavigator')} - testID='sidebar-profile' + test='sidebar-profile' theme={theme!} current={this.currentItemKey === 'ProfileStackNavigator'} /> @@ -209,7 +211,7 @@ class Sidebar extends Component { text={I18n.t('Display')} left={} onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')} - testID='sidebar-display' + test='sidebar-display' theme={theme!} current={this.currentItemKey === 'DisplayPrefStackNavigator'} /> @@ -217,12 +219,12 @@ class Sidebar extends Component { text={I18n.t('Settings')} left={} onPress={() => this.sidebarNavigate('SettingsStackNavigator')} - testID='sidebar-settings' + test='sidebar-settings' theme={theme!} current={this.currentItemKey === 'SettingsStackNavigator'} /> {this.renderAdmin()} - + ); };