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/emoji_picker/emoji_picker.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/emoji_picker/emoji_picker.jsx')
-rw-r--r-- | webapp/components/emoji_picker/emoji_picker.jsx | 58 |
1 files changed, 25 insertions, 33 deletions
diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index e9cddce34..cbb388a10 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -1,15 +1,13 @@ -import PropTypes from 'prop-types'; - // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import React from 'react'; +import PropTypes from 'prop-types'; import * as Emoji from 'utils/emoji.jsx'; import EmojiStore from 'stores/emoji_store.jsx'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import * as Utils from 'utils/utils.jsx'; -import ReactOutsideEvent from 'react-outside-event'; import {FormattedMessage} from 'react-intl'; import EmojiPickerCategory from './components/emoji_picker_category.jsx'; @@ -30,13 +28,12 @@ const CATEGORIES = [ 'custom' ]; -class EmojiPicker extends React.Component { +export default class EmojiPicker extends React.Component { static propTypes = { + style: PropTypes.object, + placement: PropTypes.oneOf(['top', 'bottom', 'left']), customEmojis: PropTypes.object, - onEmojiClick: PropTypes.func.isRequired, - pickerLocation: PropTypes.string.isRequired, - emojiOffset: PropTypes.number, - outsideClick: PropTypes.func + onEmojiClick: PropTypes.func.isRequired } constructor(props) { @@ -53,7 +50,6 @@ class EmojiPicker extends React.Component { this.handleScroll = this.handleScroll.bind(this); this.handleItemUnmount = this.handleItemUnmount.bind(this); this.renderCategory = this.renderCategory.bind(this); - this.onOutsideEvent = this.onOutsideEvent.bind(this); this.state = { category: 'recent', @@ -63,14 +59,11 @@ class EmojiPicker extends React.Component { } componentDidMount() { - this.searchInput.focus(); - } - - onOutsideEvent = (event) => { - // Handle the event. - if (this.props.outsideClick) { - this.props.outsideClick(event); - } + // Delay taking focus because this briefly renders offscreen when using an Overlay + // so focusing it immediately on mount can cause weird scrolling + requestAnimationFrame(() => { + this.searchInput.focus(); + }); } handleCategoryClick(category) { @@ -99,7 +92,7 @@ class EmojiPicker extends React.Component { } handleItemUnmount(emoji) { - //Prevent emoji preview from showing emoji which is not present anymore (due to filter) + // Prevent emoji preview from showing emoji which is not present anymore (due to filter) if (this.state.selected === emoji) { this.setState({selected: null}); } @@ -292,22 +285,25 @@ class EmojiPicker extends React.Component { items.push(this.renderCategory(category, this.state.filter)); } } - let cssclass = 'emoji-picker '; - if (this.props.pickerLocation === 'top') { - cssclass += 'emoji-picker-top'; - } else if (this.props.pickerLocation === 'bottom') { - cssclass += 'emoji-picker-bottom'; - } else if (this.props.pickerLocation === 'react') { - cssclass = 'emoji-picker-react'; - } else if (this.props.pickerLocation === 'react-rhs-comment') { - cssclass = 'emoji-picker-react-rhs-comment'; + + let pickerStyle; + if (this.props.style && !(this.props.style.left === 0 || this.props.style.top === 0)) { + if (this.props.placement === 'top' || this.props.placement === 'bottom') { + // Only take the top/bottom position passed by React Bootstrap since we want to be right-aligned + pickerStyle = { + top: this.props.style.top, + bottom: this.props.style.bottom, + right: 1 + }; + } else { + pickerStyle = this.props.style; + } } - const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {}; return ( <div + className='emoji-picker' style={pickerStyle} - className={cssclass} > <div className='emoji-picker__categories'> <EmojiPickerCategory @@ -426,7 +422,3 @@ class EmojiPicker extends React.Component { ); } } - -// disabling eslint check for outslide click handler -// eslint-disable-next-line new-cap -export default ReactOutsideEvent(EmojiPicker, ['click']); |