From a15774c4ffc09b134dce447b38358a186a1655a1 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Wed, 20 Dec 2017 13:57:33 -0200 Subject: [PATCH] Improve Rooms List (#152) Use TouchableHighlight and TouchableNativeFeedback instead of TouchableOpacity --- __tests__/__snapshots__/RoomItem.js.snap | 928 ++++----- .../__snapshots__/Storyshots.test.js.snap | 1673 +++++++++-------- app/presentation/RoomItem.js | 19 +- app/utils/touch/index.android.js | 3 + app/utils/touch/index.ios.js | 3 + 5 files changed, 1428 insertions(+), 1198 deletions(-) create mode 100644 app/utils/touch/index.android.js create mode 100644 app/utils/touch/index.ios.js diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap index 17d24401..08dd1e5f 100644 --- a/__tests__/__snapshots__/RoomItem.js.snap +++ b/__tests__/__snapshots__/RoomItem.js.snap @@ -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,13 +19,12 @@ exports[`render channel 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -35,90 +34,104 @@ exports[`render channel 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#00BCD4", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - -  - - - - - general - - +  + + + - Nov 10 - + + general + + + Nov 10 + + @@ -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,13 +156,12 @@ exports[`render no icon 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -159,90 +171,104 @@ exports[`render no icon 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#3F51B5", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - - - - - - - name - - + + + + - Nov 10 - + + name + + + Nov 10 + + @@ -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,13 +293,12 @@ exports[`render private group 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -283,90 +308,104 @@ exports[`render private group 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#FF9800", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - - - - - - - private-group - - + + + + - Nov 10 - + + private-group + + + Nov 10 + + @@ -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,13 +431,12 @@ exports[`render unread +999 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -408,100 +446,114 @@ exports[`render unread +999 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#3F51B5", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - - NA - - - - - name - + + NA + + + + + name + + + Nov 10 + + - Nov 10 + 999+ - - 999+ - `; @@ -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,13 +577,12 @@ exports[`render unread 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -541,100 +592,114 @@ exports[`render unread 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#3F51B5", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - - NA - - - - - name - + + NA + + + + + name + + + Nov 10 + + - Nov 10 + 1 - - 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,13 +723,12 @@ exports[`renders correctly 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -674,79 +738,93 @@ exports[`renders correctly 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#3F51B5", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - - NA - - - - - name - - + NA + + + - Nov 10 - + + name + + + Nov 10 + + diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index b51b4c8b..85f6d512 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -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,13 +171,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - Object { - "alignItems": "center", - "flexDirection": "row", - "opacity": 1, - "paddingHorizontal": 16, - "paddingVertical": 10, - } + Array [ + Object { + "backgroundColor": "transparent", + }, + undefined, + ] } testID={undefined} tvParallaxProperties={undefined} @@ -187,79 +186,93 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = ` Array [ Object { "alignItems": "center", - "justifyContent": "center", - "overflow": "hidden", - }, - Object { - "backgroundColor": "#8BC34A", - "borderRadius": 4, - "height": 40, - "width": 40, + "flexDirection": "row", + "paddingHorizontal": 16, + "paddingVertical": 10, }, undefined, ] } > - - RC - - - - - rocket.cat - - + RC + + + - Nov 10 - + + rocket.cat + + + Nov 10 + + - - RC - - - - - rocket.cat - - + RC + + + - Nov 10 - + + rocket.cat + + + Nov 10 + + - - RC - - - - - rocket.cat - + + RC + + + + + rocket.cat + + + Nov 10 + + - Nov 10 + 1 - - 1 - - - LC - - - - - 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 - - + LC + + + - Nov 10 + + 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 + + + Nov 10 + + + + 9 - - 9 - - - LC - - - - - 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 - + + LC + + + + + 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 + + + Nov 10 + + - Nov 10 + 99 - - 99 - - - LC - - - - - 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 - + + LC + + + + + 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 + + + Nov 10 + + - Nov 10 + 100 - - 100 - - - LC - - - - - 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 - + + LC + + + + + 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 + + + Nov 10 + + - Nov 10 + 999+ - - 999+ - - - LC - - - - - 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 - + + LC + + + + + 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 + + + Nov 10 + + - Nov 10 + @ 999+ - - @ 999+ - - - W - - - - - W - - + W + + + - Nov 10 - + + W + + + Nov 10 + + - - WW - - - - - WW - - + WW + + + - Nov 10 - + + WW + + + Nov 10 + + - - - - - - - - - + + + + - Nov 10 - + + + + + Nov 10 + + diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js index 573e79f7..d198f91f 100644 --- a/app/presentation/RoomItem.js +++ b/app/presentation/RoomItem.js @@ -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 ( - - {this.icon} - - { name } - {_updatedAt ? { date } : null} + + + {this.icon} + + { name } + {_updatedAt ? { date } : null} + + {this.renderNumber(unread, userMentions)} - {this.renderNumber(unread, userMentions)} - + ); } } diff --git a/app/utils/touch/index.android.js b/app/utils/touch/index.android.js new file mode 100644 index 00000000..ba409595 --- /dev/null +++ b/app/utils/touch/index.android.js @@ -0,0 +1,3 @@ +import { TouchableNativeFeedback } from 'react-native'; + +export default TouchableNativeFeedback; diff --git a/app/utils/touch/index.ios.js b/app/utils/touch/index.ios.js new file mode 100644 index 00000000..1832befa --- /dev/null +++ b/app/utils/touch/index.ios.js @@ -0,0 +1,3 @@ +import { TouchableHighlight } from 'react-native'; + +export default TouchableHighlight;