Commit 78b220f7b79f7f8cf4582ab82e5cee040b648b6d
dx: [ios] fix MessageFooter buttons
Andre Staltz committed on 1/4/2020, 2:37:13 PMParent: 9291c652afdc2c7516775ca9b2c96e90dcacd42d
Files changed
src/frontend/components/Button.ts | changed |
src/frontend/components/messages/MessageFooter.ts | changed |
src/frontend/components/Button.ts | ||
---|---|---|
@@ -20,8 +20,13 @@ | ||
20 | 20 | import {Typography} from '../global-styles/typography'; |
21 | 21 | import {Palette} from '../global-styles/palette'; |
22 | 22 | import {h} from '@cycle/react'; |
23 | 23 | |
24 | +const Touchable = Platform.select<any>({ | |
25 | + android: TouchableNativeFeedback, | |
26 | + default: TouchableOpacity, | |
27 | +}); | |
28 | + | |
24 | 29 | export const baseContainerStyle = { |
25 | 30 | borderTopLeftRadius: 3, |
26 | 31 | borderTopRightRadius: 3, |
27 | 32 | borderBottomLeftRadius: 3, |
@@ -103,35 +108,22 @@ | ||
103 | 108 | accessible, |
104 | 109 | accessibilityLabel, |
105 | 110 | } = this.props; |
106 | 111 | |
107 | - const Touchable = Platform.select<any>({ | |
108 | - android: TouchableNativeFeedback, | |
109 | - default: TouchableOpacity, | |
110 | - }); | |
111 | - const touchableProps = Platform.select<any>({ | |
112 | - android: { | |
113 | - background: TouchableNativeFeedback.Ripple( | |
114 | - Palette.transparencyDarkStrong, | |
115 | - ), | |
116 | - onPress: () => { | |
117 | - if (this.props.onPress) { | |
118 | - this.props.onPress(); | |
119 | - } | |
120 | - }, | |
121 | - accessible, | |
122 | - accessibilityLabel, | |
112 | + const touchableProps: any = { | |
113 | + onPress: () => { | |
114 | + if (this.props.onPress) { | |
115 | + this.props.onPress(); | |
116 | + } | |
123 | 117 | }, |
124 | - default: { | |
125 | - onPress: () => { | |
126 | - if (this.props.onPress) { | |
127 | - this.props.onPress(); | |
128 | - } | |
129 | - }, | |
130 | - accessible, | |
131 | - accessibilityLabel, | |
132 | - }, | |
133 | - }); | |
118 | + accessible, | |
119 | + accessibilityLabel, | |
120 | + }; | |
121 | + if (Platform.OS === 'android') { | |
122 | + touchableProps.background = TouchableNativeFeedback.Ripple( | |
123 | + Palette.transparencyDarkStrong, | |
124 | + ); | |
125 | + } | |
134 | 126 | |
135 | 127 | const viewProps = { |
136 | 128 | style: [ |
137 | 129 | strong ? styles.containerStrong : styles.container, |
src/frontend/components/messages/MessageFooter.ts | ||
---|---|---|
@@ -4,9 +4,16 @@ | ||
4 | 4 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
5 | 5 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
6 | 6 | |
7 | 7 | import {Component, PureComponent} from 'react'; |
8 | -import {View, Text, TouchableNativeFeedback, StyleSheet} from 'react-native'; | |
8 | +import { | |
9 | + View, | |
10 | + Text, | |
11 | + TouchableNativeFeedback, | |
12 | + TouchableOpacity, | |
13 | + StyleSheet, | |
14 | + Platform, | |
15 | +} from 'react-native'; | |
9 | 16 | import {h} from '@cycle/react'; |
10 | 17 | import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; |
11 | 18 | import {Msg, FeedId, PostContent, MsgId} from 'ssb-typescript'; |
12 | 19 | import {Palette} from '../../global-styles/palette'; |
@@ -14,8 +21,13 @@ | ||
14 | 21 | import {Typography} from '../../global-styles/typography'; |
15 | 22 | import {Likes} from '../../ssb/types'; |
16 | 23 | import React = require('react'); |
17 | 24 | |
25 | +const Touchable = Platform.select<any>({ | |
26 | + android: TouchableNativeFeedback, | |
27 | + default: TouchableOpacity, | |
28 | +}); | |
29 | + | |
18 | 30 | export const styles = StyleSheet.create({ |
19 | 31 | row: { |
20 | 32 | flexDirection: 'row', |
21 | 33 | flex: 1, |
@@ -123,19 +135,19 @@ | ||
123 | 135 | ]), |
124 | 136 | ]), |
125 | 137 | ]; |
126 | 138 | |
139 | + const touchableProps: any = { | |
140 | + onPress, | |
141 | + accessible: true, | |
142 | + accessibilityLabel: 'Like Count Button', | |
143 | + }; | |
144 | + if (Platform.OS === 'android') { | |
145 | + touchableProps.background = TouchableNativeFeedback.SelectableBackground(); | |
146 | + } | |
147 | + | |
127 | 148 | if (count > 0) { |
128 | - return h( | |
129 | - TouchableNativeFeedback, | |
130 | - { | |
131 | - background: TouchableNativeFeedback.SelectableBackground(), | |
132 | - onPress, | |
133 | - accessible: true, | |
134 | - accessibilityLabel: 'Like Count Button', | |
135 | - }, | |
136 | - likesComponent, | |
137 | - ); | |
149 | + return h(Touchable, touchableProps, likesComponent); | |
138 | 150 | } else { |
139 | 151 | return h(React.Fragment, likesComponent); |
140 | 152 | } |
141 | 153 | } |
@@ -164,23 +176,23 @@ | ||
164 | 176 | : toggled |
165 | 177 | ? 'yes' |
166 | 178 | : 'no'; |
167 | 179 | |
168 | - return h( | |
169 | - TouchableNativeFeedback, | |
170 | - { | |
171 | - background: TouchableNativeFeedback.SelectableBackground(), | |
172 | - onPress: this.onPress, | |
173 | - accessible: true, | |
174 | - accessibilityLabel: 'Like Button', | |
175 | - }, | |
176 | - [ | |
177 | - h(View, {style: styles.likeButton}, [ | |
178 | - h(Icon, iconProps[ilike + 'Liked']), | |
179 | - h(Text, {style: styles.likeButtonLabel}, 'Like'), | |
180 | - ]), | |
181 | - ], | |
182 | - ); | |
180 | + const touchableProps: any = { | |
181 | + onPress: this.onPress, | |
182 | + accessible: true, | |
183 | + accessibilityLabel: 'Like Button', | |
184 | + }; | |
185 | + if (Platform.OS === 'android') { | |
186 | + touchableProps.background = TouchableNativeFeedback.SelectableBackground(); | |
187 | + } | |
188 | + | |
189 | + return h(Touchable, touchableProps, [ | |
190 | + h(View, {style: styles.likeButton}, [ | |
191 | + h(Icon, iconProps[ilike + 'Liked']), | |
192 | + h(Text, {style: styles.likeButtonLabel}, 'Like'), | |
193 | + ]), | |
194 | + ]); | |
183 | 195 | } |
184 | 196 | } |
185 | 197 | |
186 | 198 | type RProps = { |
@@ -188,23 +200,23 @@ | ||
188 | 200 | }; |
189 | 201 | |
190 | 202 | class ReplyButton extends PureComponent<RProps> { |
191 | 203 | public render() { |
192 | - return h( | |
193 | - TouchableNativeFeedback, | |
194 | - { | |
195 | - background: TouchableNativeFeedback.SelectableBackground(), | |
196 | - onPress: this.props.onPress, | |
197 | - accessible: true, | |
198 | - accessibilityLabel: 'Reply Button', | |
199 | - }, | |
200 | - [ | |
201 | - h(View, {style: styles.replyButton}, [ | |
202 | - h(Icon, iconProps.reply), | |
203 | - h(Text, {style: styles.replyButtonLabel}, 'Comment'), | |
204 | - ]), | |
205 | - ], | |
206 | - ); | |
204 | + const touchableProps: any = { | |
205 | + onPress: this.props.onPress, | |
206 | + accessible: true, | |
207 | + accessibilityLabel: 'Reply Button', | |
208 | + }; | |
209 | + if (Platform.OS === 'android') { | |
210 | + touchableProps.background = TouchableNativeFeedback.SelectableBackground(); | |
211 | + } | |
212 | + | |
213 | + return h(Touchable, touchableProps, [ | |
214 | + h(View, {style: styles.replyButton}, [ | |
215 | + h(Icon, iconProps.reply), | |
216 | + h(Text, {style: styles.replyButtonLabel}, 'Comment'), | |
217 | + ]), | |
218 | + ]); | |
207 | 219 | } |
208 | 220 | } |
209 | 221 | |
210 | 222 | export type Props = { |
Built with git-ssb-web