[MM-26673] Attach emoji picker to the Post Edit Modal (mattermost#5869

) Co-authored-by: Mattermod <[email protected]>
josephk96 · Jul 29, 2020 · 5354903 · 5354903
1 parent e84b768
commit 5354903
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/components/edit_post_modal/__snapshots__/edit_post_modal.test.jsx.snap b/components/edit_post_modal/__snapshots__/edit_post_modal.test.jsx.snap
@@ -95,11 +95,12 @@ exports[`components/EditPostModal should disable the button on not canDeletePost
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -256,11 +257,12 @@ exports[`components/EditPostModal should disable the button on not canEditPost a
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -417,11 +419,12 @@ exports[`components/EditPostModal should match snapshot with useChannelMentions
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -578,11 +581,12 @@ exports[`components/EditPostModal should match with default config 1`] = `
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -875,11 +879,12 @@ exports[`components/EditPostModal should not disable the button on not canDelete
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -1036,11 +1041,12 @@ exports[`components/EditPostModal should not disable the button on not canEditPo
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -1197,11 +1203,12 @@ exports[`components/EditPostModal should not disable the save button on not canD
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -1358,11 +1365,12 @@ exports[`components/EditPostModal should show emojis on emojis click 1`] = `
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={true}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"
@@ -1519,11 +1527,12 @@ exports[`components/EditPostModal should show errors when it is set in the state
  onEmojiClick={[Function]}
  onGifClick={[Function]}
  onHide={[Function]}
+ rightOffset={10}
  show={false}
  spaceRequiredAbove={476}
  spaceRequiredBelow={497}
  target={[Function]}
- topOffset={-20}
+ topOffset={0}
  />
  <button
  aria-label="emoji picker"

diff --git a/components/edit_post_modal/edit_post_modal.jsx b/components/edit_post_modal/edit_post_modal.jsx
@@ -21,6 +21,8 @@ import Textbox from 'components/textbox';
 import TextboxLinks from 'components/textbox/textbox_links';
 
 const KeyCodes = Constants.KeyCodes;
+const TOP_OFFSET = 0;
+const RIGHT_OFFSET = 10;
 
 class EditPostModal extends React.PureComponent {
  static propTypes = {
@@ -155,7 +157,7 @@ class EditPostModal extends React.PureComponent {
  this.editbox.focus();
  }
 
- getEditPostControls = () => {
+ getTarget = () => {
  return this.refs.editPostEmoji;
  }
 
@@ -375,12 +377,13 @@ class EditPostModal extends React.PureComponent {
  <EmojiPickerOverlay
  show={this.state.showEmojiPicker}
  container={this.getContainer}
- target={this.getEditPostControls}
+ target={this.getTarget}
  onHide={this.hideEmojiPicker}
  onEmojiClick={this.handleEmojiClick}
  onGifClick={this.handleGifClick}
  enableGifPicker={this.props.config.EnableGifPicker === 'true'}
- topOffset={-20}
+ topOffset={TOP_OFFSET}
+ rightOffset={RIGHT_OFFSET}
  />
  <button
  aria-label={emojiButtonAriaLabel}

diff --git a/components/emoji_picker/emoji_picker_overlay.jsx b/components/emoji_picker/emoji_picker_overlay.jsx
@@ -29,6 +29,7 @@ export default class EmojiPickerOverlay extends React.PureComponent {
  onGifClick: PropTypes.func,
  onHide: PropTypes.func.isRequired,
  topOffset: PropTypes.number,
+ rightOffset: PropTypes.number,
  spaceRequiredAbove: PropTypes.number,
  spaceRequiredBelow: PropTypes.number,
  enableGifPicker: PropTypes.bool,
@@ -48,6 +49,11 @@ export default class EmojiPickerOverlay extends React.PureComponent {
 
  static emojiPickerPosition(props) {
  const emojiTrigger = props.target();
+
+ if (typeof props.rightOffset !== 'undefined') {
+ return props.rightOffset;
+ }
+
  let rightOffset = Constants.DEFAULT_EMOJI_PICKER_RIGHT_OFFSET;
  if (emojiTrigger) {
  rightOffset = window.innerWidth - emojiTrigger.getBoundingClientRect().left - Constants.DEFAULT_EMOJI_PICKER_LEFT_OFFSET;