diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-13 14:35:45 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-06-13 11:35:45 -0700 |
commit | 40efd8367a85e3333e9b7cc45c390259d412088c (patch) | |
tree | f40d4fb6f5e7b1bdb8cefa95e25a626837a07a9c /webapp/components/create_comment.jsx | |
parent | 56883d6f95b268477a1f0ec956bc1891ce30c2a1 (diff) | |
download | chat-40efd8367a85e3333e9b7cc45c390259d412088c.tar.gz chat-40efd8367a85e3333e9b7cc45c390259d412088c.tar.bz2 chat-40efd8367a85e3333e9b7cc45c390259d412088c.zip |
PLT-6127/PLT-6135/PLT-6137 Added EmojiPickerOverlay component to better position emoji picker (#6352)
* Cleaned up emoji picker CSS
* Fixed border of emoji picker when reacting to comments in the RHS
* PLT-6135 Made EmojiPicker automatically position itself above/below the [...] menu
* PLT-6135 Changed post textbox emoji picker to use a RootCloseWrapper
* PLT-6135 Changed comment textbox emoji picker to use a RootCloseWrapper
* PLT-6135 Changed RHS post components to use EmojiPickerOverlay
* Removed react-outside-event package
* Fixed merge conflict
* Fixed emoji picker position on posts in RHS
* Removed unused CSS classes
* Fixed not being able to react to posts with emoji picker
Diffstat (limited to 'webapp/components/create_comment.jsx')
-rw-r--r-- | webapp/components/create_comment.jsx | 60 |
1 files changed, 14 insertions, 46 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 0389af0a2..e2ea84c46 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -24,6 +24,7 @@ import * as PostActions from 'actions/post_actions.jsx'; import Constants from 'utils/constants.jsx'; import {FormattedMessage} from 'react-intl'; +import {RootCloseWrapper} from 'react-overlays'; import {browserHistory} from 'react-router/es6'; const ActionTypes = Constants.ActionTypes; @@ -58,10 +59,7 @@ export default class CreateComment extends React.Component { this.showPostDeletedModal = this.showPostDeletedModal.bind(this); this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); this.handlePostError = this.handlePostError.bind(this); - this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this); - this.onKeyPress = this.onKeyPress.bind(this); - this.closeEmoji = this.closeEmoji.bind(this); PostStore.clearCommentDraftUploads(); MessageHistoryStore.resetHistoryIndex('comment'); @@ -77,38 +75,14 @@ export default class CreateComment extends React.Component { showPostDeletedModal: false, enableAddButton, showEmojiPicker: false, - emojiOffset: 0, emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW) }; this.lastBlurAt = 0; } - closeEmoji(clickEvent) { - /* - if the user clicked something outside the component, except the RHS emojipicker icon - and the picker is open, then close it - */ - if (clickEvent && clickEvent.srcElement && - clickEvent.srcElement.className !== '' && - clickEvent.srcElement.className.indexOf('emoji-rhs') === -1 && - this.state.showEmojiPicker) { - this.setState({showEmojiPicker: !this.state.showEmojiPicker}); - } - } - - handleEmojiPickerClick() { - const threadHeight = document.getElementById('thread--root') ? document.getElementById('thread--root').offsetHeight : 0; - const messagesHeight = document.querySelector('div.post-right-comments-container') ? document.querySelector('div.post-right-comments-container').offsetHeight : 0; - - const totalHeight = threadHeight + messagesHeight; - let pickerOffset = 0; - if (totalHeight > 361) { - pickerOffset = -361; - } else { - pickerOffset = -1 * totalHeight; - } - this.setState({showEmojiPicker: !this.state.showEmojiPicker, emojiOffset: pickerOffset}); + toggleEmojiPicker = () => { + this.setState({showEmojiPicker: !this.state.showEmojiPicker}); } handleEmojiClick(emoji) { @@ -120,34 +94,28 @@ export default class CreateComment extends React.Component { } if (this.state.message === '') { - this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false}); + this.setState({message: ':' + emojiAlias + ': '}); } else { //check whether there is already a blank at the end of the current message const newMessage = (/\s+$/.test(this.state.message)) ? this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': '; - this.setState({message: newMessage, showEmojiPicker: false}); + this.setState({message: newMessage}); } + this.setState({showEmojiPicker: false}); + this.focusTextbox(); } componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); - document.addEventListener('keydown', this.onKeyPress); this.focusTextbox(); } componentWillUnmount() { PreferenceStore.removeChangeListener(this.onPreferenceChange); - document.removeEventListener('keydown', this.onKeyPress); - } - - onKeyPress(e) { - if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) { - this.setState({showEmojiPicker: !this.state.showEmojiPicker}); - } } onPreferenceChange() { @@ -584,12 +552,12 @@ export default class CreateComment extends React.Component { let emojiPicker = null; if (this.state.showEmojiPicker) { emojiPicker = ( - <EmojiPicker - onEmojiClick={this.handleEmojiClick} - pickerLocation='bottom' - emojiOffset={this.state.emojiOffset} - outsideClick={this.closeEmoji} - /> + <RootCloseWrapper onRootClose={this.toggleEmojiPicker}> + <EmojiPicker + onEmojiClick={this.handleEmojiClick} + onHide={this.toggleEmojiPicker} + /> + </RootCloseWrapper> ); } @@ -625,7 +593,7 @@ export default class CreateComment extends React.Component { onUploadError={this.handleUploadError} postType='comment' channelId={this.props.channelId} - onEmojiClick={this.handleEmojiPickerClick} + onEmojiClick={this.toggleEmojiPicker} emojiEnabled={this.state.emojiPickerEnabled} navBarName='rhs' /> |