MM-14820 Fix post menu on mobile view (mattermost#2576)

Designveloper · Apr 2, 2019 · 8bd8dda · 8bd8dda
1 parent 47155d8
commit 8bd8dda
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/components/post_view/post/post.jsx b/components/post_view/post/post.jsx
@@ -53,6 +53,11 @@ export default class Post extends React.PureComponent {
  */
  previousPostIsComment: PropTypes.bool,
 
+ /*
+ * Function called when the post options dropdown is opened
+ */
+ togglePostMenu: PropTypes.func,
+
  /**
  * Set to render this comment as a mention
  */
@@ -98,6 +103,10 @@ export default class Post extends React.PureComponent {
  }
 
  handleDropdownOpened = (opened) => {
+ if (this.props.togglePostMenu) {
+ this.props.togglePostMenu(opened);
+ }
+
  this.setState({
  dropdownOpened: opened,
  });

diff --git a/components/post_view/post_list.jsx b/components/post_view/post_list.jsx
@@ -130,6 +130,10 @@ export default class PostList extends React.PureComponent {
  postListIds: [channelIntroMessage],
  postsObjById: {channelIntroMessage},
  floatingTimestampDate: 0,
+ postMenuOpened: false,
+ dynamicListStyle: {
+ willChange: 'transform',
+ },
  };
 
  this.listRef = React.createRef();
@@ -200,9 +204,20 @@ export default class PostList extends React.PureComponent {
 
  handleWindowResize = () => {
  this.props.actions.checkAndSetMobileView();
- if (Utils.isMobile() !== this.state.isMobile) {
+ const isMobile = Utils.isMobile();
+ if (isMobile !== this.state.isMobile) {
+ const dynamicListStyle = this.state.dynamicListStyle;
+ if (this.state.postMenuOpened) {
+ if (!isMobile && dynamicListStyle.willChange === 'unset') {
+ dynamicListStyle.willChange = 'transform';
+ } else if (isMobile && dynamicListStyle.willChange === 'transform') {
+ dynamicListStyle.willChange = 'unset';
+ }
+ }
+
  this.setState({
- isMobile: true,
+ isMobile,
+ dynamicListStyle,
  });
  this.scrollStopAction = new DelayedAction(this.handleScrollStop);
  }
@@ -220,7 +235,7 @@ export default class PostList extends React.PureComponent {
  if (this.mounted) {
  this.setState({unViewedCount});
  }
- }
+ };
 
  loadPosts = async (channelId, focusedPostId) => {
  if (!channelId) {
@@ -278,7 +293,19 @@ export default class PostList extends React.PureComponent {
  this.autoRetriesCount = 0;
  }
  }
- }
+ };
+
+ togglePostMenu = (opened) => {
+ const dynamicListStyle = this.state.dynamicListStyle;
+ if (this.state.isMobile) {
+ dynamicListStyle.willChange = opened ? 'unset' : 'transform';
+ }
+
+ this.setState({
+ postMenuOpened: opened,
+ dynamicListStyle,
+ });
+ };
 
  renderRow = ({itemId, style}) => {
  return (
@@ -289,6 +316,7 @@ export default class PostList extends React.PureComponent {
  shouldHighlight={itemId === this.props.focusedPostId}
  post={this.props.postsObjById[itemId]}
  loadMorePosts={this.loadMorePosts}
+ togglePostMenu={this.togglePostMenu}
  />
  </div>
  );
@@ -438,6 +466,8 @@ export default class PostList extends React.PureComponent {
  );
  }
 
+ const {dynamicListStyle} = this.state;
+
  return (
  <div id='post-list'>
  {this.state.isMobile && (
@@ -484,6 +514,7 @@ export default class PostList extends React.PureComponent {
  onNewItemsMounted={this.onNewItemsMounted}
  canLoadMorePosts={this.canLoadMorePosts}
  skipResizeClass='col__reply'
+ style={dynamicListStyle}
  >
  {this.renderRow}
  </DynamicSizeList>

diff --git a/components/post_view/post_list_row/post_list_row.jsx b/components/post_view/post_list_row/post_list_row.jsx
@@ -19,6 +19,7 @@ export default class PostListRow extends React.PureComponent {
  fullWidth: PropTypes.bool,
  shouldHighlight: PropTypes.bool,
  loadMorePosts: PropTypes.func,
+ togglePostMenu: PropTypes.func,
  }
 
  render() {
@@ -30,6 +31,7 @@ export default class PostListRow extends React.PureComponent {
  key={'post ' + (post.id || post.pending_post_id)}
  post={post}
  shouldHighlight={this.props.shouldHighlight}
+ togglePostMenu={this.props.togglePostMenu}
  />
  );
  }

diff --git a/components/widgets/menu/menu_wrapper.jsx b/components/widgets/menu/menu_wrapper.jsx
@@ -42,9 +42,12 @@ export default class MenuWrapper extends React.PureComponent {
  if (this.node.current.contains(e.target)) {
  return;
  }
- this.setState({open: false});
- if (this.props.onToggle) {
- this.props.onToggle(false);
+
+ if (this.state.open) {
+ this.setState({open: false});
+ if (this.props.onToggle) {
+ this.props.onToggle(false);
+ }
  }
  }