verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve Rooms List (#152) 

Use TouchableHighlight and TouchableNativeFeedback instead of TouchableOpacity
This commit is contained in:
Martin Schoeler 2017-12-20 13:57:33 -02:00 committed by Guilherme Gazzo
parent 1ff125a477
commit a15774c4ff
5 changed files with 1428 additions and 1198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
__tests__/__snapshots__/RoomItem.js.snap
View File

@ -7,7 +7,7 @@ exports[`render channel 1`] = `
accessibilityLabel="general, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -19,16 +19,28 @@ exports[`render channel 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -122,6 +134,7 @@ exports[`render channel 1`] = `
</View>
</View>
</View>
</View>
`;
exports[`render no icon 1`] = `
@ -131,7 +144,7 @@ exports[`render no icon 1`] = `
accessibilityLabel="name, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -143,16 +156,28 @@ exports[`render no icon 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -246,6 +271,7 @@ exports[`render no icon 1`] = `
</View>
</View>
</View>
</View>
`;
exports[`render private group 1`] = `
@ -255,7 +281,7 @@ exports[`render private group 1`] = `
accessibilityLabel="private-group, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -267,16 +293,28 @@ exports[`render private group 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -369,6 +407,7 @@ exports[`render private group 1`] = `
</Text>
</View>
</View>
</View>
</View>
`;
@ -380,7 +419,7 @@ exports[`render unread +999 1`] = `
accessibilityLabel="name, 1000 alerts, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -392,16 +431,28 @@ exports[`render unread +999 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -504,6 +555,7 @@ exports[`render unread +999 1`] = `
</Text>
</View>
</View>
</View>
`;
exports[`render unread 1`] = `
@ -513,7 +565,7 @@ exports[`render unread 1`] = `
accessibilityLabel="name, 1 alert, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -525,16 +577,28 @@ exports[`render unread 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -637,6 +701,7 @@ exports[`render unread 1`] = `
</Text>
</View>
</View>
</View>
`;
exports[`renders correctly 1`] = `
@ -646,7 +711,7 @@ exports[`renders correctly 1`] = `
accessibilityLabel="name, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -658,16 +723,28 @@ exports[`renders correctly 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -750,4 +827,5 @@ exports[`renders correctly 1`] = `
</View>
</View>
</View>
</View>
`;

297
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -159,7 +159,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
accessibilityLabel="rocket.cat, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -171,16 +171,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -262,12 +274,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</Text>
</View>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="rocket.cat, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -279,16 +292,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -372,12 +397,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</Text>
</View>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="rocket.cat, 1 alert, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -389,16 +415,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -500,12 +538,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
1
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 9 alerts, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -517,16 +556,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -630,12 +681,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
9
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 99 alerts, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -647,16 +699,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -758,12 +822,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
99
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100 alerts, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -775,16 +840,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -886,12 +963,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
100
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100000 alerts, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -903,16 +981,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -1014,12 +1104,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
999+
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100000 alerts, you were mentioned, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -1031,16 +1122,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -1142,12 +1245,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
@ 999+
</Text>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="W, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -1159,16 +1263,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -1250,12 +1366,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</Text>
</View>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel="WW, last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -1267,16 +1384,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -1358,12 +1487,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</Text>
</View>
</View>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel=", last message Nov 10"
accessibilityTraits="selected"
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
@ -1375,16 +1505,28 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"opacity": 1,
"paddingHorizontal": 16,
"paddingVertical": 10,
}
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"paddingHorizontal": 16,
"paddingVertical": 10,
},
undefined,
]
}
>
<View
style={
@ -1467,5 +1609,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View>
</View>
</View>
</View>
</RCTScrollView>
`;

9
app/presentation/RoomItem.js
View File

@ -1,8 +1,9 @@
import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text, StyleSheet } from 'react-native';
import Avatar from '../containers/Avatar';
import Touch from '../utils/touch/index'; //eslint-disable-line
const styles = StyleSheet.create({
container: {
@ -112,14 +113,16 @@ export default class RoomItem extends React.PureComponent {
accessibilityLabel += `, last message ${ date }`;
return (
<TouchableOpacity onPress={this.props.onPress} style={[styles.container, favorite && styles.favorite]} accessibilityLabel={accessibilityLabel} accessibilityTraits='selected'>
<Touch onPress={this.props.onPress} underlayColor='#FFFFFF' activeOpacity={0.5} accessibilityLabel={accessibilityLabel} accessibilityTraits='selected'>
<View style={[styles.container, favorite && styles.favorite]}>
{this.icon}
<View style={styles.roomNameView}>
<Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
{_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ date }</Text> : null}
</View>
{this.renderNumber(unread, userMentions)}
</TouchableOpacity>
</View>
</Touch>
);
}
}

3
app/utils/touch/index.android.js Normal file
View File

@ -0,0 +1,3 @@
import { TouchableNativeFeedback } from 'react-native';
export default TouchableNativeFeedback;

3
app/utils/touch/index.ios.js Normal file
View File

@ -0,0 +1,3 @@
import { TouchableHighlight } from 'react-native';
export default TouchableHighlight;