|
|
|
@ -330,6 +330,7 @@ class EmojiPickerDropdown extends PureComponent {
|
|
|
|
|
state = {
|
|
|
|
|
active: false,
|
|
|
|
|
loading: false,
|
|
|
|
|
placement: 'bottom',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
setRef = (c) => {
|
|
|
|
@ -381,10 +382,14 @@ class EmojiPickerDropdown extends PureComponent {
|
|
|
|
|
return this.target;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleOverlayEnter = (state) => {
|
|
|
|
|
this.setState({ placement: state.placement });
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
|
|
|
|
|
const title = intl.formatMessage(messages.emoji);
|
|
|
|
|
const { active, loading } = this.state;
|
|
|
|
|
const { active, loading, placement } = this.state;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
|
|
|
|
@ -397,7 +402,7 @@ class EmojiPickerDropdown extends PureComponent {
|
|
|
|
|
inverted
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
|
|
|
|
|
<Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
|
|
|
|
|
{({ props, placement })=> (
|
|
|
|
|
<div {...props} style={{ ...props.style }}>
|
|
|
|
|
<div className={`dropdown-animation ${placement}`}>
|
|
|
|
|