[Glitch] Place emoji picker top if it is closer to the bottom of the viewport
Port ad5d3134e4
to glitch-soc
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
parent
cb62935c0b
commit
bfa5bdde2c
|
@ -241,12 +241,12 @@ class EmojiPickerMenu extends React.PureComponent {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
style: {},
|
style: {},
|
||||||
loading: true,
|
loading: true,
|
||||||
placement: 'bottom',
|
|
||||||
frequentlyUsedEmojis: [],
|
frequentlyUsedEmojis: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
modifierOpen: false,
|
modifierOpen: false,
|
||||||
|
placement: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
handleDocumentClick = e => {
|
handleDocumentClick = e => {
|
||||||
|
@ -378,7 +378,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
this.dropdown = c;
|
this.dropdown = c;
|
||||||
}
|
}
|
||||||
|
|
||||||
onShowDropdown = () => {
|
onShowDropdown = ({ target }) => {
|
||||||
this.setState({ active: true });
|
this.setState({ active: true });
|
||||||
|
|
||||||
if (!EmojiPicker) {
|
if (!EmojiPicker) {
|
||||||
|
@ -393,6 +393,9 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
this.setState({ loading: false });
|
this.setState({ loading: false });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { top } = target.getBoundingClientRect();
|
||||||
|
this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
|
||||||
}
|
}
|
||||||
|
|
||||||
onHideDropdown = () => {
|
onHideDropdown = () => {
|
||||||
|
@ -404,7 +407,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
if (this.state.active) {
|
if (this.state.active) {
|
||||||
this.onHideDropdown();
|
this.onHideDropdown();
|
||||||
} else {
|
} else {
|
||||||
this.onShowDropdown();
|
this.onShowDropdown(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -426,7 +429,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
render () {
|
render () {
|
||||||
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
|
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
|
||||||
const title = intl.formatMessage(messages.emoji);
|
const title = intl.formatMessage(messages.emoji);
|
||||||
const { active, loading } = this.state;
|
const { active, loading, placement } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
|
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
|
||||||
|
@ -438,7 +441,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Overlay show={active} placement='bottom' target={this.findTarget}>
|
<Overlay show={active} placement={placement} target={this.findTarget}>
|
||||||
<EmojiPickerMenu
|
<EmojiPickerMenu
|
||||||
custom_emojis={this.props.custom_emojis}
|
custom_emojis={this.props.custom_emojis}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
|
Loading…
Reference in New Issue