From 9f3ea4d10b95d3832d53799d1d25332745372282 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Mon, 23 Oct 2023 16:50:06 +0700
Subject: [PATCH] add isSmallScreenWidth

---
 src/components/EmojiPicker/EmojiPicker.js           | 8 +++-----
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 8 ++------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 0cf455b2c4d4..5c2f65e24b01 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -6,7 +6,6 @@ import EmojiPickerMenu from './EmojiPickerMenu';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
 import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent';
-import {windowDimensionsPropTypes} from '../withWindowDimensions';
 import withViewportOffsetTop from '../withViewportOffsetTop';
 import * as StyleUtils from '../../styles/StyleUtils';
 import calculateAnchorPosition from '../../libs/calculateAnchorPosition';
@@ -18,7 +17,6 @@ const DEFAULT_ANCHOR_ORIGIN = {
 };
 
 const propTypes = {
-    ...windowDimensionsPropTypes,
     viewportOffsetTop: PropTypes.number.isRequired,
 };
 
@@ -34,7 +32,7 @@ const EmojiPicker = forwardRef((props, ref) => {
     const onModalHide = useRef(() => {});
     const onEmojiSelected = useRef(() => {});
     const emojiSearchInput = useRef();
-    const {windowHeight} = useWindowDimensions();
+    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
 
     /**
      * Show the emoji picker menu.
@@ -126,7 +124,7 @@ const EmojiPicker = forwardRef((props, ref) => {
         const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
             if (!emojiPopoverAnchor.current) {
                 // In small screen width, the window size change might be due to keyboard open/hide, we should avoid hide EmojiPicker in those cases
-                if (isEmojiPickerVisible && !props.isSmallScreenWidth) {
+                if (isEmojiPickerVisible && !isSmallScreenWidth) {
                     hideEmojiPicker();
                 }
                 return;
@@ -138,7 +136,7 @@ const EmojiPicker = forwardRef((props, ref) => {
         return () => {
             emojiPopoverDimensionListener.remove();
         };
-    }, [isEmojiPickerVisible, props.isSmallScreenWidth, emojiPopoverAnchorOrigin]);
+    }, [isEmojiPickerVisible, isSmallScreenWidth, emojiPopoverAnchorOrigin]);
 
     // There is no way to disable animations, and they are really laggy, because there are so many
     // emojis. The best alternative is to set it to 1ms so it just "pops" in and out
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index d9cf299967f7..aea3b0f5b984 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -11,7 +11,6 @@ import * as StyleUtils from '../../../styles/StyleUtils';
 import emojiAssets from '../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
 import Text from '../../Text';
-import {windowDimensionsPropTypes} from '../../withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
 import compose from '../../../libs/compose';
 import getOperatingSystem from '../../../libs/getOperatingSystem';
@@ -38,9 +37,6 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.object),
 
-    /** Props related to the dimensions of the window */
-    ...windowDimensionsPropTypes,
-
     ...withLocalizePropTypes,
 };
 
@@ -53,9 +49,9 @@ const defaultProps = {
 const throttleTime = Browser.isMobile() ? 200 : 50;
 
 function EmojiPickerMenu(props) {
-    const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, isSmallScreenWidth, translate} = props;
+    const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, translate} = props;
 
-    const {windowHeight} = useWindowDimensions();
+    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
 
     // Ref for the emoji search input
     const searchInputRef = useRef(null);