From f6a8d835d30f61628ca731462ecfe4f6005e6a9e Mon Sep 17 00:00:00 2001 From: Akihiko Odaki Date: Tue, 6 Mar 2018 03:28:56 +0900 Subject: [PATCH] Place dropdown menu top if it is closer to the bottom of the viewport (#6641) --- .../mastodon/components/dropdown_menu.js | 35 ++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 43dc0d6e3e..42c253449b 100644 --- a/app/javascript/mastodon/components/dropdown_menu.js +++ b/app/javascript/mastodon/components/dropdown_menu.js @@ -29,6 +29,10 @@ class DropdownMenu extends React.PureComponent { placement: 'bottom', }; + state = { + mounted: false, + }; + handleDocumentClick = e => { if (this.node && !this.node.contains(e.target)) { this.props.onClose(); @@ -38,6 +42,7 @@ class DropdownMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); + this.setState({ mounted: true }); } componentWillUnmount () { @@ -82,11 +87,15 @@ class DropdownMenu extends React.PureComponent { render () { const { items, style, placement, arrowOffsetLeft, arrowOffsetTop } = this.props; + const { mounted } = this.state; return ( {({ 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 +
    @@ -124,11 +133,13 @@ export default class Dropdown extends React.PureComponent { }; state = { - expanded: false, + placement: null, }; - handleClick = () => { - if (!this.state.expanded && this.props.isUserTouching() && this.props.onModalOpen) { + handleClick = ({ target }) => { + if (this.state.placement) { + this.setState({ placement: null }); + } else if (this.props.isUserTouching() && this.props.onModalOpen) { const { status, items } = this.props; this.props.onModalOpen({ @@ -136,11 +147,10 @@ export default class Dropdown extends React.PureComponent { actions: items, onClick: this.handleItemClick, }); - - return; + } else { + const { top } = target.getBoundingClientRect(); + this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); } - - this.setState({ expanded: !this.state.expanded }); } handleClose = () => { @@ -148,7 +158,7 @@ export default class Dropdown extends React.PureComponent { this.props.onModalClose(); } - this.setState({ expanded: false }); + this.setState({ placement: null }); } handleKeyDown = e => { @@ -187,21 +197,22 @@ export default class Dropdown extends React.PureComponent { render () { const { icon, items, size, title, disabled } = this.props; - const { expanded } = this.state; + const { placement } = this.state; + const show = placement !== null; return (
    - +