Merge pull request Expensify#87656 from software-mansion-labs/@GCyganek/landscape-mode/number-with-symbol-form-fixes

Author: mjasikowski

src/components/BigNumberPad.tsx

@@ -34,7 +34,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
 
     const styles = useThemeStyles();
     const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
-    const {isExtraSmallScreenHeight} = useResponsiveLayout();
+    const {isExtraSmallScreenHeight, isInLandscapeMode} = useResponsiveLayout();
     const numberPressedRef = useRef(numberPressed);
 
     useEffect(() => {
@@ -64,10 +64,10 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
             style={[styles.flexColumn, styles.w100]}
             id={id}
         >
-            {padNumbers.map((row) => (
+            {padNumbers.map((row, index) => (
                 <View
                     key={`NumberPadRow-${row[0]}`}
-                    style={[styles.flexRow, styles.mt3]}
+                    style={[styles.flexRow, index === 0 && isInLandscapeMode ? undefined : styles.mt3]}
                 >
                     {row.map((column, columnIndex) => {
                         // Adding margin between buttons except first column to
@@ -77,8 +77,9 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                         return (
                             <Button
                                 key={column}
-                                medium={isExtraSmallScreenHeight}
-                                large={!isExtraSmallScreenHeight}
+                                small={isInLandscapeMode}
+                                medium={isExtraSmallScreenHeight && !isInLandscapeMode}
+                                large={!isExtraSmallScreenHeight && !isInLandscapeMode}
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
                                 text={column === '<' ? undefined : toLocaleDigit(column)}

src/components/NumberWithSymbolForm.tsx

@@ -3,6 +3,7 @@ import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {KeyboardTypeOptions, NativeSyntheticEvent} from 'react-native';
 import {View} from 'react-native';
+import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import {useMouseActions} from '@hooks/useMouseContext';
@@ -186,6 +187,7 @@ function NumberWithSymbolForm({
     ...props
 }: NumberWithSymbolFormProps) {
     const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'PlusMinus']);
+    const isInLandscapeMode = useIsInLandscapeMode();
 
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -571,9 +573,75 @@ function NumberWithSymbolForm({
             onFocus={props.onFocus}
             accessibilityLabel={props.accessibilityLabel}
             keyboardType={props.keyboardType}
+            shouldAllowFocusInLandscapeMode
         />
     );
 
+    if (isInLandscapeMode) {
+        return (
+            <>
+                <ScrollView
+                    contentContainerStyle={[styles.flexGrow1, styles.flexRow]}
+                    style={[styles.flex1, styles.ph5]}
+                >
+                    <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.numberWithSymbolFormInputContainerLandscape]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>
+                        <View style={[styles.flexRow, styles.justifyContentCenter, styles.gap2]}>
+                            {isSymbolPressable && (
+                                <Button
+                                    shouldShowRightIcon
+                                    small
+                                    iconRight={icons.DownArrow}
+                                    onPress={onSymbolButtonPress}
+                                    style={styles.minWidth18}
+                                    isContentCentered
+                                    text={currency}
+                                    accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
+                                />
+                            )}
+                            {allowFlippingAmount && (
+                                <Button
+                                    shouldShowRightIcon
+                                    small
+                                    iconRight={icons.PlusMinus}
+                                    onPress={toggleNegative}
+                                    style={styles.minWidth18}
+                                    isContentCentered
+                                    text={translate('iou.flip')}
+                                    accessibilityLabel={translate('iou.flip')}
+                                />
+                            )}
+                        </View>
+                        {!!errorText && (
+                            <FormHelpMessage
+                                style={[styles.ph5, styles.w100]}
+                                isError
+                                message={errorText}
+                            />
+                        )}
+                    </View>
+
+                    {shouldShowBigNumberPad ? (
+                        <View
+                            style={[styles.flex1, styles.justifyContentCenter]}
+                            id={NUM_PAD_CONTAINER_VIEW_ID}
+                        >
+                            {shouldShowBigNumberPad ? (
+                                <BigNumberPad
+                                    id={NUM_PAD_VIEW_ID}
+                                    numberPressed={updateValueNumberPad}
+                                    longPressHandlerStateChanged={updateLongPressHandlerState}
+                                />
+                            ) : null}
+                        </View>
+                    ) : null}
+                </ScrollView>
+
+                {!!footer && <View style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper, styles.pt0]}>{footer}</View>}
+            </>
+        );
+    }
+
     return (
         <ScrollView
             contentContainerStyle={styles.flexGrow1}

src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -84,6 +84,7 @@ function BaseTextInput({
     ref,
     sentryLabel,
     rightHandSideComponent,
+    shouldAllowFocusInLandscapeMode = false,
     ...props
 }: BaseTextInputProps) {
     const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
@@ -374,7 +375,7 @@ function BaseTextInput({
                             )}
                             <InputComponent
                                 ref={(element: BaseTextInputRef | null): void => {
-                                    const baseTextInputRef = isInLandscapeMode ? getLandscapeTextInputRefProxy(element) : element;
+                                    const baseTextInputRef = isInLandscapeMode && !shouldAllowFocusInLandscapeMode ? getLandscapeTextInputRefProxy(element) : element;
 
                                     if (typeof ref === 'function') {
                                         ref(baseTextInputRef);
@@ -388,7 +389,7 @@ function BaseTextInput({
                                 }}
                                 // eslint-disable-next-line
                                 {...inputProps}
-                                autoFocus={isInLandscapeMode ? false : inputProps.autoFocus}
+                                autoFocus={isInLandscapeMode && !shouldAllowFocusInLandscapeMode ? false : inputProps.autoFocus}
                                 accessibilityLabel={inputProps.accessibilityLabel ?? accessibilityLabel}
                                 accessibilityValue={accessibilityValue}
                                 accessibilityHint={errorText || inputProps.accessibilityHint}

src/components/TextInput/BaseTextInput/types.ts

@@ -208,6 +208,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
         navigation?: Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
             getState(): NavigationState | undefined;
         };
+
+        /** Whether the input should be allowed to be focused in landscape mode */
+        shouldAllowFocusInLandscapeMode?: boolean;
     };
 
 type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;

src/components/TextInputWithSymbol/types.ts

@@ -110,6 +110,7 @@ type BaseTextInputWithSymbolProps = {
     | 'disabled'
     | 'ref'
     | 'accessibilityLabel'
+    | 'shouldAllowFocusInLandscapeMode'
 >;
 
 type TextInputWithSymbolProps = Omit<BaseTextInputWithSymbolProps, 'onSelectionChange'> & {

src/styles/index.ts

@@ -2802,6 +2802,10 @@ const staticStyles = (theme: ThemeColors) =>
             paddingHorizontal: 20,
         },
 
+        numberWithSymbolFormInputContainerLandscape: {
+            width: 400,
+        },
+
         avatarSectionWrapper: {
             width: '100%',
             alignItems: 'center',