-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pay Header improvements #18883
Merged
Merged
Pay Header improvements #18883
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
9de7b5f
Create useArrowKeyFocusManager hook
roryabraham c35e14d
Make useArrowKeyFocusManager more powerful and easy to use
roryabraham 887a89c
Add isActive prop to useKeyboardShortcut
roryabraham 43b07b2
Create useWindowDimensions hook
roryabraham a64b767
Get popover displaying in the correct place
roryabraham 25d53a7
fix useKeyboardShortcut cleanup
roryabraham 659d888
Remove unnecessary measureContent prop from PopoverWithMeasuredContent
roryabraham 630a358
Fix comment indentation
roryabraham 4c548fb
Add JSdocs in useArrowKeyFocusManager
roryabraham 83d4d95
Add JSDocs for useKeyboardShortcut
roryabraham bbda68b
Fix BasePaymentsPage
roryabraham 911168b
add TODO
roryabraham File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,136 +1,102 @@ | ||
| import _ from 'underscore'; | ||
| import React, {PureComponent} from 'react'; | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {View} from 'react-native'; | ||
| import Popover from '../Popover'; | ||
| import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent'; | ||
| import styles from '../../styles/styles'; | ||
| import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; | ||
| import MenuItem from '../MenuItem'; | ||
| import {propTypes as createMenuPropTypes, defaultProps} from './popoverMenuPropTypes'; | ||
| import ArrowKeyFocusManager from '../ArrowKeyFocusManager'; | ||
| import {propTypes as createMenuPropTypes, defaultProps as createMenuDefaultProps} from './popoverMenuPropTypes'; | ||
| import Text from '../Text'; | ||
| import KeyboardShortcut from '../../libs/KeyboardShortcut'; | ||
| import CONST from '../../CONST'; | ||
| import useArrowKeyFocusManager from '../../hooks/useArrowKeyFocusManager'; | ||
| import useKeyboardShortcut from '../../hooks/useKeyboardShortcut'; | ||
| import useWindowDimensions from '../../hooks/useWindowDimensions'; | ||
|
|
||
| // TODO: DRY props | ||
| const propTypes = { | ||
| ...createMenuPropTypes, | ||
| ...windowDimensionsPropTypes, | ||
| }; | ||
|
|
||
| class PopoverMenu extends PureComponent { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| focusedIndex: -1, | ||
| }; | ||
| this.resetFocusAndHideModal = this.resetFocusAndHideModal.bind(this); | ||
| this.removeKeyboardListener = this.removeKeyboardListener.bind(this); | ||
| this.attachKeyboardListener = this.attachKeyboardListener.bind(this); | ||
| this.selectedItem = null; | ||
| } | ||
|
|
||
| componentDidUpdate(prevProps) { | ||
| if (this.props.isVisible === prevProps.isVisible) { | ||
| return; | ||
| } | ||
|
|
||
| if (this.props.isVisible) { | ||
| this.attachKeyboardListener(); | ||
| } else { | ||
| this.removeKeyboardListener(); | ||
| } | ||
| } | ||
| /** The horizontal and vertical anchors points for the popover */ | ||
| anchorPosition: PropTypes.shape({ | ||
| horizontal: PropTypes.number.isRequired, | ||
| vertical: PropTypes.number.isRequired, | ||
| }).isRequired, | ||
|
|
||
| componentWillUnmount() { | ||
| this.removeKeyboardListener(); | ||
| } | ||
| /** Where the popover should be positioned relative to the anchor points. */ | ||
| anchorOrigin: PropTypes.shape({ | ||
| horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), | ||
| vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), | ||
| }), | ||
| }; | ||
|
|
||
| /** | ||
| * Set item to local variable to fire `onSelected` action after the menu popup closes | ||
| * @param {Object} item | ||
| */ | ||
| selectItem(item) { | ||
| this.selectedItem = item; | ||
| this.props.onItemSelected(item); | ||
| } | ||
| const defaultProps = { | ||
| ...createMenuDefaultProps, | ||
| anchorOrigin: { | ||
| horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, | ||
| vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, | ||
| }, | ||
| }; | ||
|
|
||
| attachKeyboardListener() { | ||
| const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; | ||
| this.unsubscribeEnterKey = KeyboardShortcut.subscribe( | ||
| shortcutConfig.shortcutKey, | ||
| () => { | ||
| if (this.state.focusedIndex === -1) { | ||
| return; | ||
| } | ||
| this.selectItem(this.props.menuItems[this.state.focusedIndex]); | ||
| this.setState({focusedIndex: -1}); // Reset the focusedIndex on selecting any menu | ||
| }, | ||
| shortcutConfig.descriptionKey, | ||
| shortcutConfig.modifiers, | ||
| true, | ||
| ); | ||
| } | ||
| const PopoverMenu = (props) => { | ||
| const {isSmallScreenWidth} = useWindowDimensions(); | ||
|
|
||
| removeKeyboardListener() { | ||
| if (!this.unsubscribeEnterKey) { | ||
| return; | ||
| } | ||
| this.unsubscribeEnterKey(); | ||
| } | ||
| const selectItem = (index) => { | ||
| const selectedItem = props.menuItems[index]; | ||
| props.onItemSelected(selectedItem); | ||
| }; | ||
|
|
||
| resetFocusAndHideModal() { | ||
| this.setState({focusedIndex: -1}); // Reset the focusedIndex on modal hide | ||
| this.removeKeyboardListener(); | ||
| if (this.selectedItem) { | ||
| this.selectedItem.onSelected(); | ||
| this.selectedItem = null; | ||
| } | ||
| } | ||
| const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1}); | ||
| useKeyboardShortcut( | ||
| CONST.KEYBOARD_SHORTCUTS.ENTER, | ||
| () => { | ||
| if (focusedIndex === -1) { | ||
| return; | ||
| } | ||
| selectItem(focusedIndex); | ||
| setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu | ||
| }, | ||
| {isActive: props.isVisible}, | ||
| ); | ||
|
|
||
| render() { | ||
| return ( | ||
| <Popover | ||
| anchorPosition={this.props.anchorPosition} | ||
| onClose={this.props.onClose} | ||
| isVisible={this.props.isVisible} | ||
| onModalHide={this.resetFocusAndHideModal} | ||
| animationIn={this.props.animationIn} | ||
| animationOut={this.props.animationOut} | ||
| animationInTiming={this.props.animationInTiming} | ||
| disableAnimation={this.props.disableAnimation} | ||
| fromSidebarMediumScreen={this.props.fromSidebarMediumScreen} | ||
| onLayout={this.props.onLayout} | ||
| > | ||
| <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}> | ||
| {!_.isEmpty(this.props.headerText) && ( | ||
| <View style={styles.createMenuItem}> | ||
| <Text style={[styles.createMenuHeaderText, styles.ml3]}>{this.props.headerText}</Text> | ||
| </View> | ||
| )} | ||
| <ArrowKeyFocusManager | ||
| focusedIndex={this.state.focusedIndex} | ||
| maxIndex={this.props.menuItems.length - 1} | ||
| onFocusedIndexChanged={(index) => this.setState({focusedIndex: index})} | ||
| > | ||
| {_.map(this.props.menuItems, (item, menuIndex) => ( | ||
| <MenuItem | ||
| key={item.text} | ||
| icon={item.icon} | ||
| iconWidth={item.iconWidth} | ||
| iconHeight={item.iconHeight} | ||
| title={item.text} | ||
| description={item.description} | ||
| onPress={() => this.selectItem(item)} | ||
| focused={this.state.focusedIndex === menuIndex} | ||
| /> | ||
| ))} | ||
| </ArrowKeyFocusManager> | ||
| </View> | ||
| </Popover> | ||
| ); | ||
| } | ||
| } | ||
| return ( | ||
| <PopoverWithMeasuredContent | ||
| anchorPosition={props.anchorPosition} | ||
| anchorOrigin={props.anchorOrigin} | ||
| onClose={props.onClose} | ||
| isVisible={props.isVisible} | ||
| onModalHide={() => setFocusedIndex(-1)} | ||
| animationIn={props.animationIn} | ||
| animationOut={props.animationOut} | ||
| animationInTiming={props.animationInTiming} | ||
| // TODO: rename to `shouldDisableAnimation` | ||
| disableAnimation={props.disableAnimation} | ||
| // TODO: fuck this prop | ||
| fromSidebarMediumScreen={props.fromSidebarMediumScreen} | ||
| > | ||
| <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}> | ||
| {!_.isEmpty(props.headerText) && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{props.headerText}</Text>} | ||
| {_.map(props.menuItems, (item, menuIndex) => ( | ||
| <MenuItem | ||
| key={item.text} | ||
| icon={item.icon} | ||
| iconWidth={item.iconWidth} | ||
| iconHeight={item.iconHeight} | ||
| title={item.text} | ||
| description={item.description} | ||
| onPress={() => selectItem(item)} | ||
| // TODO: rename to isFocused | ||
| focused={focusedIndex === menuIndex} | ||
| /> | ||
| ))} | ||
| </View> | ||
| </PopoverWithMeasuredContent> | ||
| ); | ||
| }; | ||
|
|
||
| PopoverMenu.propTypes = propTypes; | ||
| PopoverMenu.defaultProps = defaultProps; | ||
| PopoverMenu.displayName = 'PopoverMenu'; | ||
|
|
||
| export default withWindowDimensions(PopoverMenu); | ||
| export default React.memo(withWindowDimensions(PopoverMenu)); | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the changes in the code that cause this event listener to constantly resubscribe (more details), make it climb to the top in the list of event handlers with the same priority. Since this event doesn't allow bubbling, it prevents any other handler. This causes this bug:
/workspace/<workspace id>/invite)NextListeners before re-subscribe:
Listeners after re-subscribe:
Context: I'm coming from debugging this other bug related to competing listeners: #18419