Place composer dropdown menus top if they are closer to the bottom of the viewport

This commit is contained in:
Thibaut Girka 2018-04-10 20:04:55 +02:00
parent 3ab6a8b8be
commit e74e5c7eb9
2 changed files with 17 additions and 6 deletions

View file

@ -13,7 +13,6 @@ import { assignHandlers } from 'flavours/glitch/util/react_helpers';
// Handlers.
const handlers = {
// When the document is clicked elsewhere, we close the dropdown.
handleDocumentClick ({ target }) {
const { node } = this;
@ -45,6 +44,10 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
// Instance variables.
this.node = null;
this.state = {
mounted: false,
};
}
// On mounting, we add our listeners.
@ -52,6 +55,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
const { handleDocumentClick } = this.handlers;
document.addEventListener('click', handleDocumentClick, false);
document.addEventListener('touchend', handleDocumentClick, withPassive);
this.setState({ mounted: true });
}
// On unmounting, we remove our listeners.
@ -63,6 +67,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
// Rendering.
render () {
const { mounted } = this.state;
const { handleRef } = this.handlers;
const {
items,
@ -87,13 +92,16 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
}}
>
{({ opacity, scaleX, scaleY }) => (
// It should not be transformed when mounting because the resulting
// size will be used to determine the coordinate of the menu by
// react-overlays
<div
className='composer--options--dropdown--content'
ref={handleRef}
style={{
...style,
opacity: opacity,
transform: `scale(${scaleX}, ${scaleY})`,
transform: mounted ? `scale(${scaleX}, ${scaleY})` : null,
}}
>
{items ? items.map(

View file

@ -29,7 +29,7 @@ const handlers = {
} = this.handlers;
switch (key) {
case 'Enter':
handleToggle();
handleToggle(key);
break;
case 'Escape':
handleClose();
@ -79,7 +79,7 @@ const handlers = {
},
// Toggles opening and closing the dropdown.
handleToggle () {
handleToggle ({ target }) {
const { handleMakeModal } = this.handlers;
const { onModalOpen } = this.props;
const { open } = this.state;
@ -98,6 +98,8 @@ const handlers = {
}
}
const { top } = target.getBoundingClientRect();
this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
// Otherwise, we just set our state to open.
this.setState({ open: !open });
},
@ -129,6 +131,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
this.state = {
needsModalUpdate: false,
open: false,
placement: null,
};
}
@ -161,7 +164,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
onChange,
value,
} = this.props;
const { open } = this.state;
const { open, placement } = this.state;
const computedClass = classNames('composer--options--dropdown', {
active,
open,
@ -188,7 +191,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
/>
<Overlay
containerPadding={20}
placement='bottom'
placement={placement}
show={open}
target={this}
>