From a36dfbb2aa53b8ce3e4c88826aeda9f25d98e49a Mon Sep 17 00:00:00 2001 From: Peter Simonsson Date: Wed, 11 Jan 2023 21:58:46 +0100 Subject: [Glitch] Fix dropdown menu positions when scrolling Port fd33bcb3b25d3eaf593ade0aa8709a1184fc254e to glitch-soc Signed-off-by: Claire --- .../glitch/features/compose/components/dropdown.js | 47 +++++++++---- .../features/compose/components/dropdown_menu.js | 46 ++---------- .../compose/components/emoji_picker_dropdown.js | 39 +++++------ .../compose/components/language_dropdown.js | 81 +++++++++++----------- .../glitch/features/compose/components/search.js | 51 +++++++------- 5 files changed, 121 insertions(+), 143 deletions(-) (limited to 'app/javascript/flavours/glitch/features/compose') diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.js b/app/javascript/flavours/glitch/features/compose/components/dropdown.js index 3de198c45..924618930 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.js @@ -2,7 +2,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -import Overlay from 'react-overlays/lib/Overlay'; +import Overlay from 'react-overlays/Overlay'; // Components. import IconButton from 'flavours/glitch/components/icon_button'; @@ -45,7 +45,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent { }; // Toggles opening and closing the dropdown. - handleToggle = ({ target, type }) => { + handleToggle = ({ type }) => { const { onModalOpen } = this.props; const { open } = this.state; @@ -59,11 +59,9 @@ export default class ComposerOptionsDropdown extends React.PureComponent { } } } else { - const { top } = target.getBoundingClientRect(); if (this.state.open && this.activeElement) { this.activeElement.focus({ preventScroll: true }); } - this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); this.setState({ open: !this.state.open, openedViaKeyboard: type !== 'click' }); } } @@ -158,6 +156,18 @@ export default class ComposerOptionsDropdown extends React.PureComponent { }; } + setTargetRef = c => { + this.target = c; + } + + findTarget = () => { + return this.target; + } + + handleOverlayEnter = (state) => { + this.setState({ placement: state.placement }); + } + // Rendering. render () { const { @@ -179,6 +189,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
- + {({ props, placement }) => ( +
+
+ +
+
+ )}
); diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js index 09e8fc35a..c4895dfd0 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js @@ -1,7 +1,6 @@ // Package imports. import PropTypes from 'prop-types'; import React from 'react'; -import spring from 'react-motion/lib/spring'; import ImmutablePureComponent from 'react-immutable-pure-component'; import classNames from 'classnames'; @@ -10,15 +9,8 @@ import Icon from 'flavours/glitch/components/icon'; // Utils. import { withPassive } from 'flavours/glitch/utils/dom_helpers'; -import Motion from '../../ui/util/optional_motion'; import { assignHandlers } from 'flavours/glitch/utils/react_helpers'; -// The spring to use with our motion. -const springMotion = spring(1, { - damping: 35, - stiffness: 400, -}); - // The component. export default class ComposerOptionsDropdownContent extends React.PureComponent { @@ -44,7 +36,6 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent }; state = { - mounted: false, value: this.props.openedViaKeyboard ? this.props.items[0].name : undefined, }; @@ -56,7 +47,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent } // Stores our node in `this.node`. - handleRef = (node) => { + setRef = (node) => { this.node = node; } @@ -69,7 +60,6 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent } else { this.node.firstChild.focus({ preventScroll: true }); } - this.setState({ mounted: true }); } // On unmounting, we remove our listeners. @@ -191,7 +181,6 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent // Rendering. render () { - const { mounted } = this.state; const { items, onChange, @@ -201,36 +190,9 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent // The result. 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 -
- {!!items && items.map((item, i) => this.renderItem(item, i))} -
- )} - +
+ {!!items && items.map((item, i) => this.renderItem(item, i))} +
); } diff --git a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js index 546d398a0..38c735551 100644 --- a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components'; -import Overlay from 'react-overlays/lib/Overlay'; +import Overlay from 'react-overlays/Overlay'; import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { supportsPassiveEvents } from 'detect-passive-events'; @@ -155,9 +155,6 @@ class EmojiPickerMenu extends React.PureComponent { onClose: PropTypes.func.isRequired, onPick: PropTypes.func.isRequired, style: PropTypes.object, - placement: PropTypes.string, - arrowOffsetLeft: PropTypes.string, - arrowOffsetTop: PropTypes.string, intl: PropTypes.object.isRequired, skinTone: PropTypes.number.isRequired, onSkinTone: PropTypes.func.isRequired, @@ -326,14 +323,13 @@ class EmojiPickerDropdown extends React.PureComponent { state = { active: false, loading: false, - placement: null, }; setRef = (c) => { this.dropdown = c; } - onShowDropdown = ({ target }) => { + onShowDropdown = () => { this.setState({ active: true }); if (!EmojiPicker) { @@ -348,9 +344,6 @@ class EmojiPickerDropdown extends React.PureComponent { this.setState({ loading: false, active: false }); }); } - - const { top } = target.getBoundingClientRect(); - this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); } onHideDropdown = () => { @@ -384,7 +377,7 @@ class EmojiPickerDropdown extends React.PureComponent { render () { const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, button } = this.props; const title = intl.formatMessage(messages.emoji); - const { active, loading, placement } = this.state; + const { active, loading } = this.state; return (
@@ -396,16 +389,22 @@ class EmojiPickerDropdown extends React.PureComponent { />}
- - + + {({ props, placement })=> ( +
+
+ +
+
+ )}
); diff --git a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js index a3256aa9b..07d138f52 100644 --- a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js @@ -2,9 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, defineMessages } from 'react-intl'; import TextIconButton from './text_icon_button'; -import Overlay from 'react-overlays/lib/Overlay'; -import Motion from 'flavours/glitch/features/ui/util/optional_motion'; -import spring from 'react-motion/lib/spring'; +import Overlay from 'react-overlays/Overlay'; import { supportsPassiveEvents } from 'detect-passive-events'; import classNames from 'classnames'; import { languages as preloadedLanguages } from 'flavours/glitch/initial_state'; @@ -22,10 +20,8 @@ const listenerOptions = supportsPassiveEvents ? { passive: true } : false; class LanguageDropdownMenu extends React.PureComponent { static propTypes = { - style: PropTypes.object, value: PropTypes.string.isRequired, frequentlyUsedLanguages: PropTypes.arrayOf(PropTypes.string).isRequired, - placement: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, languages: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)), @@ -37,7 +33,6 @@ class LanguageDropdownMenu extends React.PureComponent { }; state = { - mounted: false, searchValue: '', }; @@ -50,7 +45,6 @@ class LanguageDropdownMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); - this.setState({ mounted: true }); // Because of https://github.com/react-bootstrap/react-bootstrap/issues/2614 we need // to wait for a frame before focusing @@ -222,29 +216,22 @@ class LanguageDropdownMenu extends React.PureComponent { } render () { - const { style, placement, intl } = this.props; - const { mounted, searchValue } = this.state; + const { intl } = this.props; + const { searchValue } = this.state; const isSearching = searchValue !== ''; const results = this.search(); 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 -
-
- - -
+
+
+ + +
-
- {results.map(this.renderItem)} -
-
- )} - +
+ {results.map(this.renderItem)} +
+
); } @@ -266,14 +253,11 @@ class LanguageDropdown extends React.PureComponent { placement: 'bottom', }; - handleToggle = ({ target }) => { - const { top } = target.getBoundingClientRect(); - + handleToggle = () => { if (this.state.open && this.activeElement) { this.activeElement.focus({ preventScroll: true }); } - this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' }); this.setState({ open: !this.state.open }); } @@ -293,13 +277,25 @@ class LanguageDropdown extends React.PureComponent { onChange(value); } + setTargetRef = c => { + this.target = c; + } + + findTarget = () => { + return this.target; + } + + handleOverlayEnter = (state) => { + this.setState({ placement: state.placement }); + } + render () { const { value, intl, frequentlyUsedLanguages } = this.props; const { open, placement } = this.state; return ( -
-
+
+
- - + + {({ props, placement }) => ( +
+
+ +
+
+ )}
); diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js index 9f90a767d..e5874de75 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search.js +++ b/app/javascript/flavours/glitch/features/compose/components/search.js @@ -3,13 +3,12 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; -import spring from 'react-motion/lib/spring'; import { injectIntl, FormattedMessage, defineMessages, } from 'react-intl'; -import Overlay from 'react-overlays/lib/Overlay'; +import Overlay from 'react-overlays/Overlay'; // Components. import Icon from 'flavours/glitch/components/icon'; @@ -17,7 +16,6 @@ import Icon from 'flavours/glitch/components/icon'; // Utils. import { focusRoot } from 'flavours/glitch/utils/dom_helpers'; import { searchEnabled } from 'flavours/glitch/initial_state'; -import Motion from '../../ui/util/optional_motion'; const messages = defineMessages({ placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, @@ -26,31 +24,20 @@ const messages = defineMessages({ class SearchPopout extends React.PureComponent { - static propTypes = { - style: PropTypes.object, - }; - render () { - const { style } = this.props; const extraInformation = searchEnabled ? : ; return ( -
- - {({ opacity, scaleX, scaleY }) => ( -
-

- -
    -
  • #example
    • -
  • @username@domain
    • -
  • URL
    • -
  • URL
    • -
- - {extraInformation} -
- )} - +
+

+ +
    +
  • #example
    • +
  • @username@domain
    • +
  • URL
    • +
  • URL
    • +
+ + {extraInformation}
); } @@ -136,6 +123,10 @@ class Search extends React.PureComponent { } } + findTarget = () => { + return this.searchForm; + } + render () { const { intl, value, submitted } = this.props; const { expanded } = this.state; @@ -161,8 +152,14 @@ class Search extends React.PureComponent {
- - + + {({ props, placement }) => ( +
+
+ +
+
+ )}
); -- cgit