From 4bac0541058d064624d83c5d090465cb9237aad6 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 5 May 2021 08:20:48 -0400 Subject: [PATCH] Minor tweaks for refactored touch component --- __tests__/__snapshots__/Storyshots.test.js.snap | 3 +-- app/containers/List/ListItem.js | 4 ++-- app/containers/LoginServices.js | 5 ++--- app/containers/Passcode/Base/Button.js | 2 +- app/presentation/RoomItem/Touchable.js | 2 ++ app/utils/touch.js | 9 ++++----- app/views/AddChannelTeamView.js | 3 +++ app/views/DirectoryView/Options.js | 2 +- app/views/DirectoryView/index.js | 2 +- app/views/NewMessageView.js | 3 +++ app/views/ProfileView/index.js | 2 +- app/views/RoomActionsView/index.js | 2 +- app/views/SidebarView/SidebarItem.js | 2 +- app/views/ThreadMessagesView/Dropdown/DropdownItem.js | 2 +- 14 files changed, 24 insertions(+), 19 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index f99bbe10d..633d5e2ab 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -7439,11 +7439,10 @@ exports[`Storyshots List with custom colors 1`] = ` style={ Array [ Object { - "backgroundColor": "#ffffff", + "backgroundColor": "red", }, ] } - underlayColor="green" > ( onPress(props.title)} - underlayColor={underlayColor} + style={({ pressed }) => [{ backgroundColor: pressed ? underlayColor || themes[props.theme].bannerBackground : backgroundColor || themes[props.theme].backgroundColor }]} enabled={!props.disabled} theme={props.theme} > diff --git a/app/containers/LoginServices.js b/app/containers/LoginServices.js index 4ae647b5c..d3f889a8a 100644 --- a/app/containers/LoginServices.js +++ b/app/containers/LoginServices.js @@ -7,6 +7,7 @@ import { connect } from 'react-redux'; import { Base64 } from 'js-base64'; import * as AppleAuthentication from 'expo-apple-authentication'; +import { transparentize } from 'color2k'; import { withTheme } from '../theme'; import sharedStyles from '../views/Styles'; import { themes } from '../constants/colors'; @@ -344,10 +345,8 @@ class LoginServices extends React.PureComponent { [styles.serviceButton, { backgroundColor: pressed ? transparentize(themes[theme].buttonText, 0.5) : backgroundColor }]} theme={theme} - activeOpacity={0.5} - underlayColor={themes[theme].buttonText} > {service.authType === 'oauth' || service.authType === 'apple' ? : null} diff --git a/app/containers/Passcode/Base/Button.js b/app/containers/Passcode/Base/Button.js index 7826ed5fe..89228cd00 100644 --- a/app/containers/Passcode/Base/Button.js +++ b/app/containers/Passcode/Base/Button.js @@ -14,7 +14,7 @@ const Button = React.memo(({ return ( [styles.buttonView, { backgroundColor: pressed ? 'transparent' : themes[theme].bannerBackground }]} underlayColor={themes[theme].passcodeButtonActive} rippleColor={themes[theme].passcodeButtonActive} enabled={!disabled} diff --git a/app/presentation/RoomItem/Touchable.js b/app/presentation/RoomItem/Touchable.js index a78ca4fa1..f212338d1 100644 --- a/app/presentation/RoomItem/Touchable.js +++ b/app/presentation/RoomItem/Touchable.js @@ -10,6 +10,7 @@ import { LONG_SWIPE } from './styles'; import { isRTL } from '../../i18n'; +import { themes } from '../../constants/colors'; import { LeftActions, RightActions } from './Actions'; class Touchable extends React.Component { @@ -253,6 +254,7 @@ class Touchable extends React.Component { onLongPress={this.onLongPress} theme={theme} testID={testID} + style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor }]} > {children} diff --git a/app/utils/touch.js b/app/utils/touch.js index f7dc6c866..a840c1657 100644 --- a/app/utils/touch.js +++ b/app/utils/touch.js @@ -15,7 +15,7 @@ class Touch extends React.Component { render() { const { - children, onPress, onLongPress, theme, ...props + children, onPress, onLongPress, theme, style, ...props } = this.props; return ( @@ -24,9 +24,7 @@ class Touch extends React.Component { onPress={onPress} onLongPress={onLongPress} activeOpacity={1} - style={({ pressed }) => [{ - backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor - }]} + style={style} android_ripple={{ color: themes[theme].bannerBackground }} {...props} > @@ -41,7 +39,8 @@ Touch.propTypes = { onPress: PropTypes.func, onLongPress: PropTypes.func, theme: PropTypes.string, - underlayColor: PropTypes.string + underlayColor: PropTypes.string, + style: PropTypes.object }; export default Touch; diff --git a/app/views/AddChannelTeamView.js b/app/views/AddChannelTeamView.js index 27cf6646a..768048dff 100644 --- a/app/views/AddChannelTeamView.js +++ b/app/views/AddChannelTeamView.js @@ -72,6 +72,9 @@ class AddChannelTeamView extends React.Component { return ( [{ + backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor + }]} testID={testID} theme={theme} > diff --git a/app/views/DirectoryView/Options.js b/app/views/DirectoryView/Options.js index ad8de1da1..d7af8776b 100644 --- a/app/views/DirectoryView/Options.js +++ b/app/views/DirectoryView/Options.js @@ -67,7 +67,7 @@ export default class DirectoryOptions extends PureComponent { return ( changeType(itemType)} - style={styles.dropdownItemButton} + style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }, styles.dropdownItemButton]} theme={theme} > diff --git a/app/views/DirectoryView/index.js b/app/views/DirectoryView/index.js index f78e74a21..06678620b 100644 --- a/app/views/DirectoryView/index.js +++ b/app/views/DirectoryView/index.js @@ -169,7 +169,7 @@ class DirectoryView extends React.Component { /> [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }, styles.dropdownItemButton]} testID='directory-view-dropdown' theme={theme} > diff --git a/app/views/NewMessageView.js b/app/views/NewMessageView.js index 66ea00482..c538a4321 100644 --- a/app/views/NewMessageView.js +++ b/app/views/NewMessageView.js @@ -148,6 +148,9 @@ class NewMessageView extends React.Component { return ( [{ + backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor + }]} testID={testID} theme={theme} > diff --git a/app/views/ProfileView/index.js b/app/views/ProfileView/index.js index 7e97422df..1adb555ba 100644 --- a/app/views/ProfileView/index.js +++ b/app/views/ProfileView/index.js @@ -309,7 +309,7 @@ class ProfileView extends React.Component { key={key} testID={key} onPress={onPress} - style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].borderColor }]} + style={({ pressed }) => [styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: pressed ? themes[theme].borderColor : themes[theme].bannerBackground }]} enabled={!disabled} theme={theme} > diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js index ea833d758..2e5788a23 100644 --- a/app/views/RoomActionsView/index.js +++ b/app/views/RoomActionsView/index.js @@ -433,7 +433,7 @@ class RoomActionsView extends React.Component { rid, t, room, member } })} - style={{ backgroundColor: themes[theme].backgroundColor }} + style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }]} accessibilityLabel={I18n.t('Room_Info')} accessibilityTraits='button' enabled={!isGroupChat} diff --git a/app/views/SidebarView/SidebarItem.js b/app/views/SidebarView/SidebarItem.js index 7959438c2..4315f9cda 100644 --- a/app/views/SidebarView/SidebarItem.js +++ b/app/views/SidebarView/SidebarItem.js @@ -15,7 +15,7 @@ const Item = React.memo(({ testID={testID} onPress={onPress} theme={theme} - style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]} + style={({ pressed }) => [styles.item, current && { backgroundColor: pressed ? themes[theme].borderColor : themes[theme].bannerBackground }]} > {left} diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItem.js b/app/views/ThreadMessagesView/Dropdown/DropdownItem.js index 4ebca9168..38b66074a 100644 --- a/app/views/ThreadMessagesView/Dropdown/DropdownItem.js +++ b/app/views/ThreadMessagesView/Dropdown/DropdownItem.js @@ -26,7 +26,7 @@ const styles = StyleSheet.create({ const DropdownItem = React.memo(({ theme, onPress, iconName, text }) => ( - + [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }]}> {text} {iconName ? : null}