Minor tweaks for refactored touch component
This commit is contained in:
parent
7d2924e2e9
commit
4bac054105
|
@ -7439,11 +7439,10 @@ exports[`Storyshots List with custom colors 1`] = `
|
|||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#ffffff",
|
||||
"backgroundColor": "red",
|
||||
},
|
||||
]
|
||||
}
|
||||
underlayColor="green"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue