MM-19519 - PostContext to handle menus opened/closed within Posts (#4124

)

* Created react context for post and included opened menu handler for child components

* Feedback review

components/autocomplete_selector.jsx

@@ -18,6 +18,7 @@ export default class AutocompleteSelector extends React.PureComponent {
  helpText: PropTypes.node,
  placeholder: PropTypes.string,
  footer: PropTypes.node,
+ toggleFocus: PropTypes.func,
  };
 
  static defaultProps = {
@@ -63,10 +64,18 @@ export default class AutocompleteSelector extends React.PureComponent {
 
  onFocus = () => {
  this.setState({focused: true});
+
+ if (this.props.toggleFocus) {
+ this.props.toggleFocus(true);
+ }
  }
 
  onBlur = () => {
  this.setState({focused: false});
+
+ if (this.props.toggleFocus) {
+ this.props.toggleFocus(false);
+ }
  }
 
  render() {

components/post_view/message_attachments/action_menu/action_menu.jsx

@@ -8,6 +8,7 @@ import MenuActionProvider from 'components/suggestion/menu_action_provider';
 import GenericUserProvider from 'components/suggestion/generic_user_provider.jsx';
 import GenericChannelProvider from 'components/suggestion/generic_channel_provider.jsx';
 import AutocompleteSelector from 'components/autocomplete_selector';
+import PostContext from 'components/post_view/post_context';
 
 export default class ActionMenu extends React.PureComponent {
  static propTypes = {
@@ -89,13 +90,18 @@ export default class ActionMenu extends React.PureComponent {
  const {action} = this.props;
 
  return (
- <AutocompleteSelector
- providers={this.providers}
- onSelected={this.handleSelected}
- placeholder={action.name}
- inputClassName='post-attachment-dropdown'
- value={this.state.value}
- />
+ <PostContext.Consumer>
+ {({handlePopupOpened}) => (
+ <AutocompleteSelector
+ providers={this.providers}
+ onSelected={this.handleSelected}
+ placeholder={action.name}
+ inputClassName='post-attachment-dropdown'
+ value={this.state.value}
+ toggleFocus={handlePopupOpened}
+ />
+ )}
+ </PostContext.Consumer>
  );
  }
 }

components/post_view/post/post.jsx

@@ -12,6 +12,7 @@ import {A11yCustomEventTypes} from 'utils/constants';
 import PostProfilePicture from 'components/post_profile_picture';
 import PostBody from 'components/post_view/post_body';
 import PostHeader from 'components/post_view/post_header';
+import PostContext from 'components/post_view/post_context';
 
 class Post extends React.PureComponent {
  static propTypes = {
@@ -292,52 +293,55 @@ class Post extends React.PureComponent {
  }
 
  return (
- <div
- ref={this.postRef}
- id={'post_' + post.id}
- data-testid='postView'
- role='listitem'
- className={`a11y__section ${this.getClassName(post, isSystemMessage, isMeMessage, fromWebhook, fromAutoResponder, fromBot)}`}
- tabIndex='0'
- onFocus={this.handlePostFocus}
- onBlur={this.removeFocus}
- onMouseOver={this.setHover}
- onMouseLeave={this.unsetHover}
- onTouchStart={this.setHover}
- aria-label={this.state.currentAriaLabel}
- aria-atomic={true}
- >
+ <PostContext.Provider value={{handlePopupOpened: this.handleDropdownOpened}}>
  <div
- role='application'
- data-testid='postContent'
- className={'post__content ' + centerClass}
- aria-hidden={this.state.ariaHidden}
+ ref={this.postRef}
+ id={'post_' + post.id}
+ data-testid='postView'
+ role='listitem'
+ className={`a11y__section ${this.getClassName(post, isSystemMessage, isMeMessage, fromWebhook, fromAutoResponder, fromBot)}`}
+ tabIndex='0'
+ onFocus={this.handlePostFocus}
+ onBlur={this.removeFocus}
+ onMouseOver={this.setHover}
+ onMouseLeave={this.unsetHover}
+ onTouchStart={this.setHover}
+ aria-label={this.state.currentAriaLabel}
+ aria-atomic={true}
  >
- <div className='post__img'>
- {profilePic}
- </div>
- <div>
- <PostHeader
- post={post}
- handleCommentClick={this.handleCommentClick}
- handleCardClick={this.handleCardClick}
- handleDropdownOpened={this.handleDropdownOpened}
- compactDisplay={this.props.compactDisplay}
- isFirstReply={this.props.isFirstReply}
- replyCount={this.props.replyCount}
- showTimeWithoutHover={!hideProfilePicture}
- hover={this.state.hover || this.state.a11yActive}
- />
- <PostBody
- post={post}
- handleCommentClick={this.handleCommentClick}
- compactDisplay={this.props.compactDisplay}
- isCommentMention={this.props.isCommentMention}
- isFirstReply={this.props.isFirstReply}
- />
+ <div
+ role='application'
+ id='postContent'
+ data-testid='postContent'
+ className={'post__content ' + centerClass}
+ aria-hidden={this.state.ariaHidden}
+ >
+ <div className='post__img'>
+ {profilePic}
+ </div>
+ <div>
+ <PostHeader
+ post={post}
+ handleCommentClick={this.handleCommentClick}
+ handleCardClick={this.handleCardClick}
+ handleDropdownOpened={this.handleDropdownOpened}
+ compactDisplay={this.props.compactDisplay}
+ isFirstReply={this.props.isFirstReply}
+ replyCount={this.props.replyCount}
+ showTimeWithoutHover={!hideProfilePicture}
+ hover={this.state.hover || this.state.a11yActive}
+ />
+ <PostBody
+ post={post}
+ handleCommentClick={this.handleCommentClick}
+ compactDisplay={this.props.compactDisplay}
+ isCommentMention={this.props.isCommentMention}
+ isFirstReply={this.props.isFirstReply}
+ />
+ </div>
  </div>
  </div>
- </div>
+ </PostContext.Provider>
  );
  }
 }

components/post_view/post_context.js

@@ -0,0 +1,14 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+const PostContext = React.createContext({
+
+ // Post component event handler that should be
+ // called when any child component opens/closes a
+ // popup type component.
+ handlePopupOpened: null,
+});
+
+export default PostContext;