mattermost-mobile/app/components/post_list/new_messages_divider.js
Amit Uttam 26df779330
MM-22253 Reduce unnecessary re-renders in channel switching (#3900)
Re-renders were occuring because of prop and state updates that created new object references, despite being of identical value. A key culprit was `postListHeight` in `PostList` which goes through a few calls to `handleContentSizeChange` when loading posts.

Also, "New Messages" divider line is a pure component now (via `memo`) to reduce unnecessary re-renders here too.
2020-02-07 14:13:44 -07:00

74 lines
1.8 KiB
JavaScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {memo} from 'react';
import PropTypes from 'prop-types';
import {
View,
ViewPropTypes,
} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
function NewMessagesDivider(props) {
const style = getStyleFromTheme(props.theme);
let text = (
<FormattedText
id='posts_view.newMsg'
defaultMessage='New Messages'
style={style.text}
/>
);
if (props.moreMessages) {
text = (
<FormattedText
id='mobile.posts_view.moreMsg'
defaultMessage='More New Messages Above'
style={style.text}
/>
);
}
return (
<View style={[style.container, props.style]}>
<View style={style.line}/>
<View style={style.textContainer}>
{text}
</View>
<View style={style.line}/>
</View>
);
}
NewMessagesDivider.propTypes = {
moreMessages: PropTypes.bool,
style: ViewPropTypes.style,
theme: PropTypes.object,
};
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
alignItems: 'center',
flexDirection: 'row',
height: 28,
},
textContainer: {
marginHorizontal: 15,
},
line: {
flex: 1,
height: 1,
backgroundColor: theme.newMessageSeparator,
},
text: {
fontSize: 14,
color: theme.newMessageSeparator,
},
};
});
export default memo(NewMessagesDivider);