Merge pull request Expensify#87350 from software-mansion-labs/@GCyganek/landscape-mode/fix-suggestions-modal-composer

Author: mjasikowski

src/CONST/index.ts

@@ -2560,6 +2560,7 @@ const CONST = {
         SUGGESTER_INNER_PADDING: 8,
         SUGGESTION_ROW_HEIGHT: 40,
         SMALL_CONTAINER_HEIGHT_FACTOR: 2.5,
+        SMALL_CONTAINER_HEIGHT_FACTOR_LANDSCAPE_MODE: 1.5,
         MAX_AMOUNT_OF_SUGGESTIONS: 20,
         MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER: 5,
         HERE_TEXT: '@here',

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.android.ts

@@ -1,9 +1,13 @@
 import {Dimensions} from 'react-native';
 
-function getBottomSuggestionPadding(bottom: number): number {
+function getBottomSuggestionPadding(bottom: number, isInLandscapeMode: boolean): number {
     const {height} = Dimensions.get('window');
     const basePadding = 30;
 
+    if (isInLandscapeMode) {
+        return basePadding;
+    }
+
     // Calculate what percentage of the screen height the bottom position represents
     const bottomPercentageToHeight = (bottom / height) * 100;
 

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function getBottomSuggestionPadding(bottom?: number): number {
-    return 16;
+function getBottomSuggestionPadding(bottom?: number, isInLandscapeMode?: boolean): number {
+    return 30;
 }
 
 export default getBottomSuggestionPadding;

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function getBottomSuggestionPadding(bottom?: number): number {
+function getBottomSuggestionPadding(bottom?: number, isInLandscapeMode?: boolean): number {
     return 6;
 }
 

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx

@@ -7,9 +7,16 @@ import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 import type {AutoCompleteSuggestionsPortalProps} from './types';
 
-function AutoCompleteSuggestionsPortal<TSuggestion>({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps<TSuggestion>) {
+function AutoCompleteSuggestionsPortal<TSuggestion>({
+    left = 0,
+    width = 0,
+    bottom = 0,
+    resetSuggestions = () => {},
+    isInLandscapeMode = false,
+    ...props
+}: AutoCompleteSuggestionsPortalProps<TSuggestion>) {
     const StyleUtils = useStyleUtils();
-    const bottomPadding = getBottomSuggestionPadding(bottom);
+    const bottomPadding = getBottomSuggestionPadding(bottom, isInLandscapeMode);
     const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + bottomPadding}), [StyleUtils, left, width, bottom, bottomPadding]);
 
     if (!width) {

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx

@@ -20,6 +20,9 @@ function AutoCompleteSuggestionsPortal<TSuggestion>({
     width = 0,
     bottom = 0,
     resetSuggestions = () => {},
+    // isInLandscapeMode is only used on native platforms to adjust the bottom padding
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isInLandscapeMode = false,
     ...props
 }: AutoCompleteSuggestionsPortalProps<TSuggestion>): ReactElement | null | false {
     const StyleUtils = useStyleUtils();

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/types.ts

@@ -7,6 +7,7 @@ type AutoCompleteSuggestionsPortalProps<TSuggestion> = ExternalProps<TSuggestion
     width: number;
     bottom: number;
     measuredHeightOfSuggestionRows: number;
+    isInLandscapeMode?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/components/AutoCompleteSuggestions/index.tsx

@@ -9,7 +9,15 @@ import CONST from '@src/CONST';
 import AutoCompleteSuggestionsPortal from './AutoCompleteSuggestionsPortal';
 import type {AutoCompleteSuggestionsProps, MeasureParentContainerAndCursor} from './types';
 
-const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean): number => {
+const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean, isInLandscapeMode: boolean): number => {
+    if (isInLandscapeMode) {
+        if (numRows > 1) {
+            // In landscape mode, we display a scrollable window with a height of 1.5 items, indicating that there are more items available beyond what is currently visible
+            return CONST.AUTO_COMPLETE_SUGGESTER.SMALL_CONTAINER_HEIGHT_FACTOR_LANDSCAPE_MODE * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
+        }
+
+        return numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
+    }
     if (canBeBig) {
         if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER) {
             // On large screens, if there are more than 5 suggestions, we display a scrollable window with a height of 5 items, indicating that there are more items available
@@ -42,6 +50,13 @@ const initialContainerState = {
     cursorCoordinates: {x: 0, y: 0},
 };
 
+function getLeftOffset(x: number, leftInset: number, bigScreenLeftOffset: number, shouldUseNarrowLayout: boolean, isInLandscapeMode: boolean): number {
+    if (shouldUseNarrowLayout) {
+        return isInLandscapeMode ? x - leftInset : x;
+    }
+    return bigScreenLeftOffset;
+}
+
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
  * we need to prevent focus shifting to avoid blurring the main input (which makes the suggestions picker close and fires the onSelect callback).
@@ -55,13 +70,15 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
     const leftValue = React.useRef<number>(0);
     const prevLeftValue = React.useRef<number>(0);
     const {height: windowHeight, width: windowWidth} = useWindowDimensionsForAutoCompleteSuggestions();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
+    const prevIsInLandscapeModeValue = React.useRef(isInLandscapeMode);
     const [suggestionHeight, setSuggestionHeight] = React.useState(0);
     const [containerState, setContainerState] = React.useState(initialContainerState);
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
     const {keyboardHeight, isKeyboardAnimatingRef} = useKeyboardState();
     const {paddingBottom: bottomInset, paddingTop: topInset} = StyleUtils.getPlatformSafeAreaPadding(insets ?? undefined);
+    const {left: leftInset} = insets;
 
     useEffect(() => {
         const container = containerRef.current;
@@ -95,8 +112,8 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
                 xCoordinatesOfCursor + CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH > windowWidth
                     ? windowWidth - CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH
                     : xCoordinatesOfCursor;
-            const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
-            const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
+            const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true, isInLandscapeMode);
+            const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false, isInLandscapeMode);
             let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight;
             const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
 
@@ -107,34 +124,39 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
                 contentHeight: contentMaxHeight,
                 topInset,
             });
-            const isEnoughSpaceToRenderMenuAboveForSmall = isEnoughSpaceToRenderMenuAboveCursor({
-                y,
-                cursorCoordinates,
-                scrollValue,
-                contentHeight: contentMinHeight,
-                topInset,
-            });
 
-            const newLeftOffset = shouldUseNarrowLayout ? x : bigScreenLeftOffset;
+            // In landscape mode, we always render the menu above the cursor
+            const isEnoughSpaceToRenderMenuAboveForSmall =
+                isInLandscapeMode ||
+                isEnoughSpaceToRenderMenuAboveCursor({
+                    y,
+                    cursorCoordinates,
+                    scrollValue,
+                    contentHeight: contentMinHeight,
+                    topInset,
+                });
+
+            const newLeftOffset = getLeftOffset(x, leftInset, bigScreenLeftOffset, shouldUseNarrowLayout, isInLandscapeMode);
             // If the suggested word is longer than 150 (approximately half the width of the suggestion popup), then adjust a new position of popup
             const isAdjustmentNeeded = Math.abs(prevLeftValue.current - bigScreenLeftOffset) > 150;
-            if (isInitialRender.current || isAdjustmentNeeded) {
+            if (isInitialRender.current || isAdjustmentNeeded || prevIsInLandscapeModeValue.current !== isInLandscapeMode) {
                 isSuggestionMenuAboveRef.current = isSuggestionMenuRenderedAbove(isEnoughSpaceToRenderMenuAboveForBig, isEnoughSpaceToRenderMenuAboveForSmall);
                 leftValue.current = newLeftOffset;
                 isInitialRender.current = false;
                 prevLeftValue.current = newLeftOffset;
+                prevIsInLandscapeModeValue.current = isInLandscapeMode;
             }
 
             let measuredHeight = 0;
             if (isSuggestionMenuAboveRef.current && isEnoughSpaceToRenderMenuAboveForBig) {
                 // calculation for big suggestion box above the cursor
-                measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
+                measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true, isInLandscapeMode);
             } else if (isSuggestionMenuAboveRef.current && isEnoughSpaceToRenderMenuAboveForSmall) {
                 // calculation for small suggestion box above the cursor
-                measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
+                measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, false, isInLandscapeMode);
             } else {
                 // calculation for big suggestion box below the cursor
-                measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
+                measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true, isInLandscapeMode);
                 bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight;
             }
 
@@ -146,7 +168,19 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
                 cursorCoordinates,
             });
         });
-    }, [measureParentContainerAndReportCursor, windowHeight, windowWidth, keyboardHeight, shouldUseNarrowLayout, suggestionsLength, bottomInset, topInset, isKeyboardAnimatingRef]);
+    }, [
+        measureParentContainerAndReportCursor,
+        windowHeight,
+        windowWidth,
+        keyboardHeight,
+        shouldUseNarrowLayout,
+        suggestionsLength,
+        bottomInset,
+        topInset,
+        isKeyboardAnimatingRef,
+        isInLandscapeMode,
+        leftInset,
+    ]);
 
     // Prevent rendering if container dimensions are not set or if we have no suggestions
     if ((containerState.width === 0 && containerState.left === 0 && containerState.bottom === 0) || !suggestionsLength) {
@@ -161,6 +195,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             width={containerState.width}
             bottom={containerState.bottom}
             measuredHeightOfSuggestionRows={suggestionHeight}
+            isInLandscapeMode={isInLandscapeMode}
         />
     );
 }