Minor tweaks for refactored touch component

This commit is contained in:
Gerzon Z 2021-05-05 08:20:48 -04:00
parent 7d2924e2e9
commit 4bac054105
14 changed files with 24 additions and 19 deletions

View File

@ -7439,11 +7439,10 @@ exports[`Storyshots List with custom colors 1`] = `
style={
Array [
Object {
"backgroundColor": "#ffffff",
"backgroundColor": "red",
},
]
}
underlayColor="green"
>
<View
style={

View File

@ -79,11 +79,11 @@ const Content = React.memo(({
));
const Button = React.memo(({
onPress, underlayColor, ...props
onPress, backgroundColor, underlayColor, ...props
}) => (
<Touch
onPress={() => 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}
>

View File

@ -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 {
<Touch
key={service.name}
onPress={onPress}
style={[styles.serviceButton, { backgroundColor }]}
style={({ pressed }) => [styles.serviceButton, { backgroundColor: pressed ? transparentize(themes[theme].buttonText, 0.5) : backgroundColor }]}
theme={theme}
activeOpacity={0.5}
underlayColor={themes[theme].buttonText}
>
<View style={styles.serviceButtonContainer}>
{service.authType === 'oauth' || service.authType === 'apple' ? <CustomIcon name={icon} size={24} color={themes[theme].titleText} style={styles.serviceIcon} /> : null}

View File

@ -14,7 +14,7 @@ const Button = React.memo(({
return (
<Touch
style={[styles.buttonView, { backgroundColor: 'transparent' }]}
style={({ pressed }) => [styles.buttonView, { backgroundColor: pressed ? 'transparent' : themes[theme].bannerBackground }]}
underlayColor={themes[theme].passcodeButtonActive}
rippleColor={themes[theme].passcodeButtonActive}
enabled={!disabled}

View File

@ -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}
</Touch>

View File

@ -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;

View File

@ -72,6 +72,9 @@ class AddChannelTeamView extends React.Component {
return (
<Touch
onPress={onPress}
style={({ pressed }) => [{
backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor
}]}
testID={testID}
theme={theme}
>

View File

@ -67,7 +67,7 @@ export default class DirectoryOptions extends PureComponent {
return (
<Touch
onPress={() => changeType(itemType)}
style={styles.dropdownItemButton}
style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }, styles.dropdownItemButton]}
theme={theme}
>
<View style={styles.dropdownItemContainer}>

View File

@ -169,7 +169,7 @@ class DirectoryView extends React.Component {
/>
<Touch
onPress={this.toggleDropdown}
style={styles.dropdownItemButton}
style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }, styles.dropdownItemButton]}
testID='directory-view-dropdown'
theme={theme}
>

View File

@ -148,6 +148,9 @@ class NewMessageView extends React.Component {
return (
<Touch
onPress={onPress}
style={({ pressed }) => [{
backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
}]}
testID={testID}
theme={theme}
>

View File

@ -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}
>

View File

@ -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}

View File

@ -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 }]}
>
<View style={styles.itemHorizontal}>
{left}

View File

@ -26,7 +26,7 @@ const styles = StyleSheet.create({
const DropdownItem = React.memo(({
theme, onPress, iconName, text
}) => (
<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
<Touch theme={theme} onPress={onPress} style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }]}>
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null}