diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js index 9dbd9dc3fc29..40d91ff03267 100644 --- a/src/components/EmojiPicker/EmojiPicker.js +++ b/src/components/EmojiPicker/EmojiPicker.js @@ -27,8 +27,8 @@ const EmojiPicker = forwardRef((props, ref) => { horizontal: 0, vertical: 0, }); - const [reportAction, setReportAction] = useState({}); const [emojiPopoverAnchorOrigin, setEmojiPopoverAnchorOrigin] = useState(DEFAULT_ANCHOR_ORIGIN); + const [activeID, setActiveID] = useState(); const emojiPopoverAnchor = useRef(null); const onModalHide = useRef(() => {}); const onEmojiSelected = useRef(() => {}); @@ -42,9 +42,9 @@ const EmojiPicker = forwardRef((props, ref) => { * @param {Element} emojiPopoverAnchorValue - Element to which Popover is anchored * @param {Object} [anchorOrigin=DEFAULT_ANCHOR_ORIGIN] - Anchor origin for Popover * @param {Function} [onWillShow=() => {}] - Run a callback when Popover will show - * @param {Object} reportActionValue - ReportAction for EmojiPicker + * @param {String} id - Unique id for EmojiPicker */ - const showEmojiPicker = (onModalHideValue, onEmojiSelectedValue, emojiPopoverAnchorValue, anchorOrigin, onWillShow = () => {}, reportActionValue) => { + const showEmojiPicker = (onModalHideValue, onEmojiSelectedValue, emojiPopoverAnchorValue, anchorOrigin, onWillShow = () => {}, id) => { onModalHide.current = onModalHideValue; onEmojiSelected.current = onEmojiSelectedValue; emojiPopoverAnchor.current = emojiPopoverAnchorValue; @@ -60,7 +60,7 @@ const EmojiPicker = forwardRef((props, ref) => { setIsEmojiPickerVisible(true); setEmojiPopoverAnchorPosition(value); setEmojiPopoverAnchorOrigin(anchorOriginValue); - setReportAction(reportActionValue); + setActiveID(id); }); }; @@ -107,16 +107,16 @@ const EmojiPicker = forwardRef((props, ref) => { }; /** - * Whether Context Menu is active for the Report Action. + * Whether emoji picker is active for the given id. * - * @param {Number|String} actionID + * @param {String} id * @return {Boolean} */ - const isActiveReportAction = (actionID) => Boolean(actionID) && reportAction.reportActionID === actionID; + const isActive = (id) => Boolean(id) && id === activeID; const resetEmojiPopoverAnchor = () => (emojiPopoverAnchor.current = null); - useImperativeHandle(ref, () => ({showEmojiPicker, isActiveReportAction, hideEmojiPicker, isEmojiPickerVisible, resetEmojiPopoverAnchor})); + useImperativeHandle(ref, () => ({showEmojiPicker, isActive, hideEmojiPicker, isEmojiPickerVisible, resetEmojiPopoverAnchor})); useEffect(() => { const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => { diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index c78e9fdd285a..cbfc3517117c 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -17,12 +17,8 @@ const propTypes = { /** Id to use for the emoji picker button */ nativeID: PropTypes.string, - /** - * ReportAction for EmojiPicker. - */ - reportAction: PropTypes.shape({ - reportActionID: PropTypes.string, - }), + /** Unique id for emoji picker */ + emojiPickerID: PropTypes.string, ...withLocalizePropTypes, }; @@ -30,7 +26,7 @@ const propTypes = { const defaultProps = { isDisabled: false, nativeID: '', - reportAction: {}, + emojiPickerID: '', }; function EmojiPickerButton(props) { @@ -46,7 +42,7 @@ function EmojiPickerButton(props) { disabled={props.isDisabled} onPress={() => { if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) { - EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor.current, undefined, () => {}, props.reportAction); + EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor.current, undefined, () => {}, props.emojiPickerID); } else { EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker(); } diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js index de34ebf95242..922be96084d8 100644 --- a/src/components/Reactions/AddReactionBubble.js +++ b/src/components/Reactions/AddReactionBubble.js @@ -67,7 +67,7 @@ function AddReactionBubble(props) { refParam || ref.current, anchorOrigin, props.onWillShowPicker, - props.reportAction, + props.reportAction.reportActionID, ); }; diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js index 1ebb8a971827..82f83cb1e961 100644 --- a/src/components/Reactions/MiniQuickEmojiReactions.js +++ b/src/components/Reactions/MiniQuickEmojiReactions.js @@ -67,7 +67,7 @@ function MiniQuickEmojiReactions(props) { ref.current, undefined, () => {}, - props.reportAction, + props.reportAction.reportActionID, ); }; diff --git a/src/libs/actions/EmojiPickerAction.js b/src/libs/actions/EmojiPickerAction.js index de462ac283f3..84621af3a5b4 100644 --- a/src/libs/actions/EmojiPickerAction.js +++ b/src/libs/actions/EmojiPickerAction.js @@ -3,21 +3,21 @@ import React from 'react'; const emojiPickerRef = React.createRef(); /** - * Show the ReportActionContextMenu modal popover. + * Show the EmojiPicker modal popover. * * @param {Function} [onModalHide=() => {}] - Run a callback when Modal hides. * @param {Function} [onEmojiSelected=() => {}] - Run a callback when Emoji selected. * @param {Element} emojiPopoverAnchor - Element on which EmojiPicker is anchored * @param {Object} [anchorOrigin] - Anchor origin for Popover * @param {Function} [onWillShow=() => {}] - Run a callback when Popover will show - * @param {Object} reportAction - ReportAction for EmojiPicker + * @param {String} id - Unique id for EmojiPicker */ -function showEmojiPicker(onModalHide = () => {}, onEmojiSelected = () => {}, emojiPopoverAnchor, anchorOrigin = undefined, onWillShow = () => {}, reportAction = {}) { +function showEmojiPicker(onModalHide = () => {}, onEmojiSelected = () => {}, emojiPopoverAnchor, anchorOrigin = undefined, onWillShow = () => {}, id) { if (!emojiPickerRef.current) { return; } - emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, reportAction); + emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id); } /** @@ -33,16 +33,16 @@ function hideEmojiPicker(isNavigating) { } /** - * Whether Emoji Picker is active for the Report Action. + * Whether Emoji Picker is active for the given id. * - * @param {Number|String} actionID + * @param {String} id * @return {Boolean} */ -function isActiveReportAction(actionID) { +function isActive(id) { if (!emojiPickerRef.current) { return; } - return emojiPickerRef.current.isActiveReportAction(actionID); + return emojiPickerRef.current.isActive(id); } function isEmojiPickerVisible() { @@ -59,4 +59,4 @@ function resetEmojiPopoverAnchor() { return emojiPickerRef.current.resetEmojiPopoverAnchor(); } -export {emojiPickerRef, showEmojiPicker, hideEmojiPicker, isActiveReportAction, isEmojiPickerVisible, resetEmojiPopoverAnchor}; +export {emojiPickerRef, showEmojiPicker, hideEmojiPicker, isActive, isEmojiPickerVisible, resetEmojiPopoverAnchor}; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 411b5f3fecef..83f0e4a6d506 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -30,7 +30,6 @@ import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../component import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; import personalDetailsPropType from '../personalDetailsPropType'; import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; -import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; import MoneyRequestHeader from '../../components/MoneyRequestHeader'; import MoneyReportHeader from '../../components/MoneyReportHeader'; import * as ComposerActions from '../../libs/actions/Composer'; @@ -155,10 +154,6 @@ class ReportScreen extends React.Component { } componentDidUpdate(prevProps) { - if (ReportUtils.shouldDisableWriteActions(this.props.report)) { - EmojiPickerAction.hideEmojiPicker(true); - } - // If you already have a report open and are deeplinking to a new report on native, // the ReportScreen never actually unmounts and the reportID in the route also doesn't change. // Therefore, we need to compare if the existing reportID is the same as the one in the route diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index a1091cb8f8d7..4407656bfe07 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -977,6 +977,10 @@ function ReportActionCompose({ KeyDownListener.removeKeyDownPressListner(focusComposerOnKeyPress); unsubscribeNavigationBlur(); unsubscribeNavigationFocus(); + + if (EmojiPickerActions.isActive(report.reportID)) { + EmojiPickerActions.hideEmojiPicker(); + } }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -1259,6 +1263,7 @@ function ReportActionCompose({ isDisabled={isBlockedFromConcierge || disabled} onModalHide={() => focus(true)} onEmojiSelected={replaceSelectionWithText} + emojiPickerID={report.reportID} /> )} { // Skip if this is not the focused message so the other edit composer stays focused. // In small screen devices, when EmojiPicker is shown, the current edit message will lose focus, we need to check this case as well. - if (!isFocusedRef.current && !EmojiPickerAction.isActiveReportAction(props.action.reportActionID)) { + if (!isFocusedRef.current && !EmojiPickerAction.isActive(props.action.reportActionID)) { return; } @@ -382,7 +382,7 @@ function ReportActionItemMessageEdit(props) { }} onEmojiSelected={addEmojiToTextBox} nativeID={emojiButtonID} - reportAction={props.action} + emojiPickerID={props.action.reportActionID} />