toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-18997 Fix More unread overlay preventing interactions (#3342)

Browse source
This commit is contained in:
Elias Nahum 2019-10-01 22:53:06 +03:00 committed by Miguel Alatzar
parent 26b999e885
commit 2f65ff853d
4 changed files with 45 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/__snapshots__/fade.test.js.snap
View file

@ -2,6 +2,7 @@
exports[`Fade should render {opacity: 0} 1`] = `
<AnimatedComponent
pointerEvents="box-none"
style={
Object {
"opacity": 0,
@ -21,6 +22,7 @@ exports[`Fade should render {opacity: 0} 1`] = `
exports[`Fade should render {opacity: 1} 1`] = `
<AnimatedComponent
pointerEvents="box-none"
style={
Object {
"opacity": 1,

1
app/components/fade.js
View file

@ -47,6 +47,7 @@ export default class Fade extends PureComponent {
opacity: fadeAnim,
transform: disableScale ? [] : [{scale: fadeAnim}],
}}
pointerEvents={'box-none'}
>
{this.props.children}
</Animated.View>

4
app/components/sidebars/main/channels_list/list/list.js
View file

@ -417,10 +417,10 @@ export default class List extends PureComponent {
/>
{UnreadIndicator &&
<UnreadIndicator
show={showIndicator}
style={styles.above}
onPress={this.scrollToTop}
theme={theme}
style={styles.above}
visible={showIndicator}
/>
}
</View>

59
app/components/sidebars/main/channels_list/unread_indicator/index.js
View file

@ -16,7 +16,7 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme';
export default class UnreadIndicator extends PureComponent {
static propTypes = {
show: PropTypes.bool,
visible: PropTypes.bool,
style: ViewPropTypes.style,
onPress: PropTypes.func,
theme: PropTypes.object.isRequired,
@ -27,31 +27,52 @@ export default class UnreadIndicator extends PureComponent {
onPress: () => true,
};
render() {
const {onPress, show, theme} = this.props;
renderContent = () => {
const {onPress, visible, theme} = this.props;
const style = getStyleSheet(theme);
const content = (
<View
style={[style.wrapper, this.props.style]}
pointerEvents={visible ? 'auto' : 'none'}
>
<FormattedText
style={[style.indicatorText, this.props.textStyle]}
id='sidebar.unreads'
defaultMessage='More unreads'
/>
<IonIcon
size={14}
name='md-arrow-round-up'
color={theme.mentionColor}
style={style.arrow}
/>
</View>
);
if (visible) {
return (
<TouchableWithoutFeedback onPress={onPress}>
{content}
</TouchableWithoutFeedback>
);
}
return content;
};
render() {
const {visible, theme} = this.props;
const style = getStyleSheet(theme);
return (
<Fade
visible={show}
visible={visible}
style={style.container}
duration={150}
disableScale={true}
>
<TouchableWithoutFeedback onPress={onPress}>
<View style={[style.wrapper, this.props.style]}>
<FormattedText
style={[style.indicatorText, this.props.textStyle]}
id='sidebar.unreads'
defaultMessage='More unreads'
/>
<IonIcon
size={14}
name='md-arrow-round-up'
color={theme.mentionColor}
style={style.arrow}
/>
</View>
</TouchableWithoutFeedback>
{this.renderContent()}
</Fade>
);
}