mirrors
/
vt-social
mirror of https://github.com/nullptr-live/vt-social.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix emoji picker placement on limited-height viewports 

Port 94f7ae192b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
Claire 2024-03-20 12:07:02 +01:00
parent 72baa1e5c3
commit 5e039b96c3
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
View File

@ -332,6 +332,7 @@ class EmojiPickerDropdown extends PureComponent {
state = { state = {
active: false, active: false,
loading: false, loading: false,
placement: 'bottom',
}; };
setRef = (c) => { setRef = (c) => {
@ -383,10 +384,14 @@ class EmojiPickerDropdown extends PureComponent {
return this.target; return this.target;
}; };
handleOverlayEnter = (state) => {
this.setState({ placement: state.placement });
};
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} ref={this.setTargetRef}> <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
@ -399,7 +404,7 @@ class EmojiPickerDropdown extends PureComponent {
inverted 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 })=> ( {({ props, placement })=> (
<div {...props} style={{ ...props.style }}> <div {...props} style={{ ...props.style }}>
<div className={`dropdown-animation ${placement}`}> <div className={`dropdown-animation ${placement}`}>