|
|
|
@ -241,12 +241,12 @@ class EmojiPickerMenu extends React.PureComponent { |
|
|
|
|
static defaultProps = { |
|
|
|
|
style: {}, |
|
|
|
|
loading: true, |
|
|
|
|
placement: 'bottom', |
|
|
|
|
frequentlyUsedEmojis: [], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
state = { |
|
|
|
|
modifierOpen: false, |
|
|
|
|
placement: null, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
handleDocumentClick = e => { |
|
|
|
@ -378,7 +378,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { |
|
|
|
|
this.dropdown = c; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onShowDropdown = () => { |
|
|
|
|
onShowDropdown = ({ target }) => { |
|
|
|
|
this.setState({ active: true }); |
|
|
|
|
|
|
|
|
|
if (!EmojiPicker) { |
|
|
|
@ -393,6 +393,9 @@ export default class EmojiPickerDropdown extends React.PureComponent { |
|
|
|
|
this.setState({ loading: false }); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const { top } = target.getBoundingClientRect(); |
|
|
|
|
this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onHideDropdown = () => { |
|
|
|
@ -404,7 +407,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { |
|
|
|
|
if (this.state.active) { |
|
|
|
|
this.onHideDropdown(); |
|
|
|
|
} else { |
|
|
|
|
this.onShowDropdown(); |
|
|
|
|
this.onShowDropdown(e); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -426,7 +429,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { |
|
|
|
|
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}> |
|
|
|
@ -438,7 +441,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<Overlay show={active} placement='bottom' target={this.findTarget}> |
|
|
|
|
<Overlay show={active} placement={placement} target={this.findTarget}> |
|
|
|
|
<EmojiPickerMenu |
|
|
|
|
custom_emojis={this.props.custom_emojis} |
|
|
|
|
loading={loading} |
|
|
|
|