From e892b390c387cba791c2e6fa1d6e1cfe03caea9d Mon Sep 17 00:00:00 2001 From: Doston Date: Tue, 13 Jun 2023 14:15:24 +0500 Subject: [PATCH 01/12] fix send money - green payment button is visible bug --- src/components/ButtonWithDropdownMenu.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 0d7cfc570670..50fa8cbebff4 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -54,16 +54,25 @@ const ButtonWithDropdownMenu = (props) => { const [popoverAnchorPosition, setPopoverAnchorPosition] = useState(null); const {windowWidth, windowHeight} = useWindowDimensions(); const caretButton = useRef(null); - useEffect(() => { - if (!caretButton.current) { - return; - } + + const measurePopoverPosition = () => { caretButton.current.measureInWindow((x, y, w, h) => { setPopoverAnchorPosition({ horizontal: x + w, vertical: y + h, }); - }); + }); + } + + useEffect(() => { + if (!caretButton.current) { + return; + } + if(popoverAnchorPosition !== null){ + measurePopoverPosition(); + } + + // eslint-disable-next-line react-hooks/exhaustive-deps }, [windowWidth, windowHeight]); const selectedItem = props.options[selectedItemIndex]; @@ -88,6 +97,9 @@ const ButtonWithDropdownMenu = (props) => { isDisabled={props.isDisabled} style={[styles.pl0]} onPress={() => { + if(popoverAnchorPosition === null){ + measurePopoverPosition(); + } setIsMenuVisible(true); }} shouldRemoveLeftBorderRadius From 73858a12200b44d9d0004a472d470cbb29beff96 Mon Sep 17 00:00:00 2001 From: Doston Date: Tue, 13 Jun 2023 14:18:40 +0500 Subject: [PATCH 02/12] fixed styles --- src/components/ButtonWithDropdownMenu.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 50fa8cbebff4..1a96d6102041 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -61,18 +61,18 @@ const ButtonWithDropdownMenu = (props) => { horizontal: x + w, vertical: y + h, }); - }); - } - + }); + }; + useEffect(() => { if (!caretButton.current) { return; } - if(popoverAnchorPosition !== null){ + if (popoverAnchorPosition !== null) { measurePopoverPosition(); - } + } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [windowWidth, windowHeight]); const selectedItem = props.options[selectedItemIndex]; @@ -97,7 +97,7 @@ const ButtonWithDropdownMenu = (props) => { isDisabled={props.isDisabled} style={[styles.pl0]} onPress={() => { - if(popoverAnchorPosition === null){ + if (popoverAnchorPosition === null) { measurePopoverPosition(); } setIsMenuVisible(true); From 574ebdff81c3ad45636d0f07fe3bd41a78a39fe6 Mon Sep 17 00:00:00 2001 From: Doston Date: Tue, 13 Jun 2023 20:54:08 +0500 Subject: [PATCH 03/12] add setIsMenuVisible inside measureInWindow callback function --- src/components/ButtonWithDropdownMenu.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 1a96d6102041..c03ae16274b5 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -61,6 +61,7 @@ const ButtonWithDropdownMenu = (props) => { horizontal: x + w, vertical: y + h, }); + setIsMenuVisible(true); }); }; @@ -96,12 +97,7 @@ const ButtonWithDropdownMenu = (props) => { success isDisabled={props.isDisabled} style={[styles.pl0]} - onPress={() => { - if (popoverAnchorPosition === null) { - measurePopoverPosition(); - } - setIsMenuVisible(true); - }} + onPress={measurePopoverPosition} shouldRemoveLeftBorderRadius > Date: Tue, 13 Jun 2023 23:45:05 +0500 Subject: [PATCH 04/12] change function name into more fitting to the functionality --- src/components/ButtonWithDropdownMenu.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index c03ae16274b5..cd0222e03641 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -55,7 +55,7 @@ const ButtonWithDropdownMenu = (props) => { const {windowWidth, windowHeight} = useWindowDimensions(); const caretButton = useRef(null); - const measurePopoverPosition = () => { + const measurePopoverPositionAndShowMenu = () => { caretButton.current.measureInWindow((x, y, w, h) => { setPopoverAnchorPosition({ horizontal: x + w, @@ -70,7 +70,7 @@ const ButtonWithDropdownMenu = (props) => { return; } if (popoverAnchorPosition !== null) { - measurePopoverPosition(); + measurePopoverPositionAndShowMenu(); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -97,7 +97,7 @@ const ButtonWithDropdownMenu = (props) => { success isDisabled={props.isDisabled} style={[styles.pl0]} - onPress={measurePopoverPosition} + onPress={measurePopoverPositionAndShowMenu} shouldRemoveLeftBorderRadius > Date: Wed, 14 Jun 2023 00:01:08 +0500 Subject: [PATCH 05/12] removed popoverAnchorPosition null check --- src/components/ButtonWithDropdownMenu.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index cd0222e03641..cfc2e140fb12 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -69,11 +69,7 @@ const ButtonWithDropdownMenu = (props) => { if (!caretButton.current) { return; } - if (popoverAnchorPosition !== null) { - measurePopoverPositionAndShowMenu(); - } - - // eslint-disable-next-line react-hooks/exhaustive-deps + measurePopoverPositionAndShowMenu(); }, [windowWidth, windowHeight]); const selectedItem = props.options[selectedItemIndex]; From f2a27db72e6d516bc89fc9bcd09bbcf89beccec8 Mon Sep 17 00:00:00 2001 From: Doston Date: Wed, 14 Jun 2023 00:10:11 +0500 Subject: [PATCH 06/12] return popoverAnchorPosition null check --- src/components/ButtonWithDropdownMenu.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index cfc2e140fb12..cd0222e03641 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -69,7 +69,11 @@ const ButtonWithDropdownMenu = (props) => { if (!caretButton.current) { return; } - measurePopoverPositionAndShowMenu(); + if (popoverAnchorPosition !== null) { + measurePopoverPositionAndShowMenu(); + } + + // eslint-disable-next-line react-hooks/exhaustive-deps }, [windowWidth, windowHeight]); const selectedItem = props.options[selectedItemIndex]; From d36942eca8464479cc441c109694fd507933f79d Mon Sep 17 00:00:00 2001 From: Doston Date: Wed, 14 Jun 2023 05:31:26 +0500 Subject: [PATCH 07/12] added showMenu arg to measurePopoverPositionAndShowMenu function --- src/components/ButtonWithDropdownMenu.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index cd0222e03641..6db054428438 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -55,13 +55,15 @@ const ButtonWithDropdownMenu = (props) => { const {windowWidth, windowHeight} = useWindowDimensions(); const caretButton = useRef(null); - const measurePopoverPositionAndShowMenu = () => { + const measurePopoverPositionAndShowMenu = (showMenu) => { caretButton.current.measureInWindow((x, y, w, h) => { setPopoverAnchorPosition({ horizontal: x + w, vertical: y + h, }); - setIsMenuVisible(true); + if (showMenu) { + setIsMenuVisible(true); + } }); }; @@ -69,11 +71,7 @@ const ButtonWithDropdownMenu = (props) => { if (!caretButton.current) { return; } - if (popoverAnchorPosition !== null) { - measurePopoverPositionAndShowMenu(); - } - - // eslint-disable-next-line react-hooks/exhaustive-deps + measurePopoverPositionAndShowMenu(); }, [windowWidth, windowHeight]); const selectedItem = props.options[selectedItemIndex]; @@ -97,7 +95,7 @@ const ButtonWithDropdownMenu = (props) => { success isDisabled={props.isDisabled} style={[styles.pl0]} - onPress={measurePopoverPositionAndShowMenu} + onPress={() => measurePopoverPositionAndShowMenu(true)} shouldRemoveLeftBorderRadius > Date: Wed, 14 Jun 2023 17:41:04 +0500 Subject: [PATCH 08/12] showMenu default value set to true --- src/components/ButtonWithDropdownMenu.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 6db054428438..f1a02cdf5290 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -55,7 +55,7 @@ const ButtonWithDropdownMenu = (props) => { const {windowWidth, windowHeight} = useWindowDimensions(); const caretButton = useRef(null); - const measurePopoverPositionAndShowMenu = (showMenu) => { + const measurePopoverPositionAndShowMenu = (showMenu = true) => { caretButton.current.measureInWindow((x, y, w, h) => { setPopoverAnchorPosition({ horizontal: x + w, @@ -71,7 +71,7 @@ const ButtonWithDropdownMenu = (props) => { if (!caretButton.current) { return; } - measurePopoverPositionAndShowMenu(); + measurePopoverPositionAndShowMenu(false); }, [windowWidth, windowHeight]); const selectedItem = props.options[selectedItemIndex]; @@ -95,7 +95,7 @@ const ButtonWithDropdownMenu = (props) => { success isDisabled={props.isDisabled} style={[styles.pl0]} - onPress={() => measurePopoverPositionAndShowMenu(true)} + onPress={measurePopoverPositionAndShowMenu} shouldRemoveLeftBorderRadius > Date: Wed, 14 Jun 2023 17:49:40 +0500 Subject: [PATCH 09/12] Update src/components/ButtonWithDropdownMenu.js Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> --- src/components/ButtonWithDropdownMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index f1a02cdf5290..5529f165f520 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -95,7 +95,7 @@ const ButtonWithDropdownMenu = (props) => { success isDisabled={props.isDisabled} style={[styles.pl0]} - onPress={measurePopoverPositionAndShowMenu} + onPress={() => measurePopoverPositionAndShowMenu()} shouldRemoveLeftBorderRadius > Date: Wed, 14 Jun 2023 18:10:37 +0500 Subject: [PATCH 10/12] added jsDoc for the showMenu argement --- src/components/ButtonWithDropdownMenu.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 5529f165f520..1b0b28f524e7 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -55,6 +55,9 @@ const ButtonWithDropdownMenu = (props) => { const {windowWidth, windowHeight} = useWindowDimensions(); const caretButton = useRef(null); + /** + * @param {Boolean} showMenu + */ const measurePopoverPositionAndShowMenu = (showMenu = true) => { caretButton.current.measureInWindow((x, y, w, h) => { setPopoverAnchorPosition({ From 413759a4bdda519a3c0ba02429e7e65388c07c8e Mon Sep 17 00:00:00 2001 From: Doston Date: Wed, 14 Jun 2023 23:50:43 +0500 Subject: [PATCH 11/12] changed ButtonWithDropdownMenu compoenent --- src/components/ButtonWithDropdownMenu.js | 29 +++++++++--------------- 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 1b0b28f524e7..34b8ce7f9c1b 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -54,30 +54,23 @@ const ButtonWithDropdownMenu = (props) => { const [popoverAnchorPosition, setPopoverAnchorPosition] = useState(null); const {windowWidth, windowHeight} = useWindowDimensions(); const caretButton = useRef(null); + const selectedItem = props.options[selectedItemIndex]; - /** - * @param {Boolean} showMenu - */ - const measurePopoverPositionAndShowMenu = (showMenu = true) => { + useEffect(() => { + if (!caretButton.current) { + return; + } + if (!isMenuVisible) { + return; + } caretButton.current.measureInWindow((x, y, w, h) => { setPopoverAnchorPosition({ horizontal: x + w, vertical: y + h, }); - if (showMenu) { - setIsMenuVisible(true); - } }); - }; - - useEffect(() => { - if (!caretButton.current) { - return; - } - measurePopoverPositionAndShowMenu(false); - }, [windowWidth, windowHeight]); - - const selectedItem = props.options[selectedItemIndex]; + }, [windowWidth, windowHeight, isMenuVisible]); + return ( {props.options.length > 1 ? ( @@ -98,7 +91,7 @@ const ButtonWithDropdownMenu = (props) => { success isDisabled={props.isDisabled} style={[styles.pl0]} - onPress={() => measurePopoverPositionAndShowMenu()} + onPress={() => setIsMenuVisible(true)} shouldRemoveLeftBorderRadius > Date: Thu, 15 Jun 2023 04:25:33 +0500 Subject: [PATCH 12/12] fixing code styles in ButtonWithDropdownMenu --- src/components/ButtonWithDropdownMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 34b8ce7f9c1b..36289ca05aa0 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -70,7 +70,7 @@ const ButtonWithDropdownMenu = (props) => { }); }); }, [windowWidth, windowHeight, isMenuVisible]); - + return ( {props.options.length > 1 ? (