verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[FIX] Long press gestures not working properly on Android (#2354)

This commit is contained in:
Diego Mello 2020-07-29 18:03:17 -03:00 committed by GitHub
parent c37eb99e55
commit a584e68bbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/presentation/UserItem.js
View File

@ -1,13 +1,14 @@
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import {
Text, View, StyleSheet, Pressable
} from 'react-native';
import PropTypes from 'prop-types';
import Avatar from '../containers/Avatar';
import { CustomIcon } from '../lib/Icons';
import sharedStyles from '../views/Styles';
import { themes } from '../constants/colors';
import Touch from '../utils/touch';
import LongPress from '../utils/longPress';
import { isIOS } from '../utils/deviceInfo';
const styles = StyleSheet.create({
button: {
@ -43,23 +44,28 @@ const styles = StyleSheet.create({
const UserItem = ({
name, username, onPress, testID, onLongPress, style, icon, baseUrl, user, theme
}) => (
<LongPress onLongPress={onLongPress}>
<Touch
onPress={onPress}
style={{ backgroundColor: themes[theme].backgroundColor }}
testID={testID}
theme={theme}
>
<View style={[styles.container, styles.button, style]}>
<Avatar text={username} size={30} type='d' style={styles.avatar} baseUrl={baseUrl} userId={user.id} token={user.token} />
<View style={styles.textContainer}>
<Text style={[styles.name, { color: themes[theme].titleText }]} numberOfLines={1}>{name}</Text>
<Text style={[styles.username, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>@{username}</Text>
</View>
{icon ? <CustomIcon name={icon} size={22} style={[styles.icon, { color: themes[theme].actionTintColor }]} /> : null}
<Pressable
onPress={onPress}
onLongPress={onLongPress}
testID={testID}
android_ripple={{
color: themes[theme].bannerBackground
}}
style={({ pressed }) => ({
backgroundColor: isIOS && pressed
? themes[theme].bannerBackground
: 'transparent'
})}
>
<View style={[styles.container, styles.button, style]}>
<Avatar text={username} size={30} type='d' style={styles.avatar} baseUrl={baseUrl} userId={user.id} token={user.token} />
<View style={styles.textContainer}>
<Text style={[styles.name, { color: themes[theme].titleText }]} numberOfLines={1}>{name}</Text>
<Text style={[styles.username, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>@{username}</Text>
</View>
</Touch>
</LongPress>
{icon ? <CustomIcon name={icon} size={22} style={[styles.icon, { color: themes[theme].actionTintColor }]} /> : null}
</View>
</Pressable>
);
UserItem.propTypes = {

44
app/utils/longPress.js
View File

@ -1,44 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { State, LongPressGestureHandler } from 'react-native-gesture-handler';
class LongPress extends React.Component {
setNativeProps(props) {
this.ref.setNativeProps(props);
}
getRef = (ref) => {
this.ref = ref;
};
longPress = ({ nativeEvent }) => {
const { onLongPress } = this.props;
if (nativeEvent.state === State.ACTIVE) {
if (onLongPress) {
onLongPress();
}
}
};
render() {
const { children, ...props } = this.props;
return (
<LongPressGestureHandler
onHandlerStateChange={this.longPress}
minDurationMs={800}
ref={this.getRef}
{...props}
>
{children}
</LongPressGestureHandler>
);
}
}
LongPress.propTypes = {
children: PropTypes.node,
onLongPress: PropTypes.func
};
export default LongPress;

72
app/views/RoomsListView/ServerDropdown.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import {
View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Image
View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Image, Pressable
} from 'react-native';
import PropTypes from 'prop-types';
import { connect, batch } from 'react-redux';
@ -12,7 +12,6 @@ import { toggleServerDropdown as toggleServerDropdownAction } from '../../action
import { selectServerRequest as selectServerRequestAction, serverInitAdd as serverInitAddAction } from '../../actions/server';
import { appStart as appStartAction, ROOT_NEW_SERVER } from '../../actions/app';
import styles from './styles';
import Touch from '../../utils/touch';
import RocketChat from '../../lib/rocketchat';
import I18n from '../../i18n';
import EventEmitter from '../../utils/events';
@ -21,10 +20,9 @@ import database from '../../lib/database';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import { KEY_COMMAND, handleCommandSelectServer } from '../../commands';
import { isTablet } from '../../utils/deviceInfo';
import { isTablet, isIOS } from '../../utils/deviceInfo';
import { localAuthenticate } from '../../utils/localAuthentication';
import { showConfirmationAlert } from '../../utils/info';
import LongPress from '../../utils/longPress';
import { headerHeight } from '../../containers/Header';
import { goRoom } from '../../utils/goRoom';
@ -201,37 +199,43 @@ class ServerDropdown extends Component {
const { server, theme } = this.props;
return (
<LongPress onLongPress={() => (item.id === server || this.remove(item.id))}>
<Touch
onPress={() => this.select(item.id)}
testID={`rooms-list-header-server-${ item.id }`}
theme={theme}
>
<View style={styles.serverItemContainer}>
{item.iconURL
? (
<Image
source={{ uri: item.iconURL }}
defaultSource={{ uri: 'logo' }}
style={styles.serverIcon}
onError={() => console.warn('error loading serverIcon')}
/>
)
: (
<Image
source={{ uri: 'logo' }}
style={styles.serverIcon}
/>
)
}
<View style={styles.serverTextContainer}>
<Text style={[styles.serverName, { color: themes[theme].titleText }]} numberOfLines={1}>{item.name || item.id}</Text>
<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{item.id}</Text>
</View>
{item.id === server ? <Check theme={theme} /> : null}
<Pressable
onPress={() => this.select(item.id)}
onLongPress={() => (item.id === server || this.remove(item.id))}
testID={`rooms-list-header-server-${ item.id }`}
android_ripple={{
color: themes[theme].bannerBackground
}}
style={({ pressed }) => ({
backgroundColor: isIOS && pressed
? themes[theme].bannerBackground
: 'transparent'
})}
>
<View style={styles.serverItemContainer}>
{item.iconURL
? (
<Image
source={{ uri: item.iconURL }}
defaultSource={{ uri: 'logo' }}
style={styles.serverIcon}
onError={() => console.warn('error loading serverIcon')}
/>
)
: (
<Image
source={{ uri: 'logo' }}
style={styles.serverIcon}
/>
)
}
<View style={styles.serverTextContainer}>
<Text style={[styles.serverName, { color: themes[theme].titleText }]} numberOfLines={1}>{item.name || item.id}</Text>
<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{item.id}</Text>
</View>
</Touch>
</LongPress>
{item.id === server ? <Check theme={theme} /> : null}
</View>
</Pressable>
);
}