Using correct max height instead of calculating vertical padding

Signed-off-by: Tsaqif <[email protected]>
Expensify · Sep 29, 2024 · 2aa079e · 2aa079e
1 parent 42c8cbc
commit 2aa079e
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 40 deletions.
diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx
@@ -1,6 +1,6 @@
 import {Str} from 'expensify-common';
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useEffect, useRef, useState, useMemo} from 'react';
+import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native';
 import {ActivityIndicator, Animated, StyleSheet, View} from 'react-native';
 import Checkbox from '@components/Checkbox';
@@ -262,17 +262,6 @@ function BaseTextInput(
 
     const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft);
 
-    const verticalPadding = useMemo (() => {
-        const flattenedInputStyle = StyleSheet.flatten(inputStyle);
-        const topBottomPadding = (flattenedInputStyle.paddingTop ?? 0) + (flattenedInputStyle.paddingBottom ?? 0);
-        if (topBottomPadding !== 0) {
-            return topBottomPadding;
-        }
-
-        return flattenedInputStyle.padding ?? 0;
-    }, [inputStyle]);
-
-
     return (
         <>
             <View style={[containerStyles]}>
@@ -286,6 +275,7 @@ function BaseTextInput(
                     accessibilityLabel={label}
                     style={[
                         autoGrowHeight && !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),
+                        isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge},
                         !isMultiline && styles.componentHeightLarge,
                         touchableInputWrapperStyle,
                     ]}
@@ -312,7 +302,7 @@ function BaseTextInput(
                                 />
                             </>
                         ) : null}
-                        <View style={[isAutoGrowHeightMarkdown ? undefined  : styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
+                        <View style={[styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
                             {iconLeft && (
                                 <View style={styles.textInputLeftIconContainer}>
                                     <Icon
@@ -358,15 +348,15 @@ function BaseTextInput(
                                     inputStyle,
                                     (!hasLabel || isMultiline) && styles.pv0,
                                     inputPaddingLeft,
-                                    isAutoGrowHeightMarkdown ? {maxHeight: maxAutoGrowHeight - verticalPadding} : undefined,
                                     inputProps.secureTextEntry && styles.secureInput,
 
                                     !isMultiline && {height, lineHeight: undefined},
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
-                                    ...(autoGrowHeight && !isAutoGrowHeightMarkdown 
+                                    ...(autoGrowHeight && !isAutoGrowHeightMarkdown
                                         ? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
                                         : []),
+                                    isAutoGrowHeightMarkdown ? [{maxHeight: maxAutoGrowHeight}, styles.verticalAlignTop] : undefined,
                                     // Add disabled color theme when field is not editable.
                                     inputProps.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
@@ -428,7 +418,7 @@ function BaseTextInput(
                     />
                 )}
             </View>
-            {contentWidth && !isAutoGrowHeightMarkdown (
+            {contentWidth && (
                 <View
                     style={[inputStyle as ViewStyle, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden, styles.wAuto, inputPaddingLeft]}
                     onLayout={(e) => {

diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
@@ -284,16 +284,6 @@ function BaseTextInput(
     const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft);
     const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
 
-    const verticalPadding = useMemo (() => {
-        const flattenedInputStyle = StyleSheet.flatten(inputStyle);
-        const topBottomPadding = (flattenedInputStyle.paddingTop ?? 0) + (flattenedInputStyle.paddingBottom ?? 0);
-        if (topBottomPadding !== 0) {
-            return topBottomPadding;
-        }
-
-        return flattenedInputStyle.padding ?? 0;
-    }, [inputStyle]);
-
     return (
         <>
             <View
@@ -311,9 +301,9 @@ function BaseTextInput(
                     onLayout={onLayout}
                     style={[
                         (autoGrowHeight && !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0)),
+                        isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge},
                         !isMultiline && styles.componentHeightLarge,
                         touchableInputWrapperStyle,
-                        isAutoGrowHeightMarkdown ? {minHeight: variables.componentSizeLarge} : undefined, 
                     ]}
                 >
                     <View
@@ -339,7 +329,7 @@ function BaseTextInput(
                             </>
                         ) : null}
 
-                        <View style={[isAutoGrowHeightMarkdown ? undefined : styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
+                        <View style={[styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
                             {iconLeft && (
                                 <View style={[styles.textInputLeftIconContainer, !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone]}>
                                     <Icon
@@ -386,12 +376,11 @@ function BaseTextInput(
                                     (!hasLabel || isMultiline) && styles.pv0,
                                     inputPaddingLeft,
                                     inputPaddingRight,
-                                    isAutoGrowHeightMarkdown? {maxHeight: maxAutoGrowHeight - verticalPadding} : undefined,
                                     inputProps.secureTextEntry && styles.secureInput,
 
                                     // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
                                     // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
-                                    !isMultiline && !isAutoGrowHeightMarkdown && {height, lineHeight},
+                                    !isMultiline && {height, lineHeight},
 
                                     // Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
                                     // for the issue mentioned here https://github.com/Expensify/App/issues/26735
@@ -403,7 +392,7 @@ function BaseTextInput(
                                     ...(autoGrowHeight && !isAutoGrowHeightMarkdown
                                         ? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
                                         : []),
-
+                                    isAutoGrowHeightMarkdown ? [{maxHeight: maxAutoGrowHeight}, styles.verticalAlignTop] : undefined,
                                     // Add disabled color theme when field is not editable.
                                     inputProps.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
@@ -475,7 +464,7 @@ function BaseTextInput(
                     />
                 )}
             </View>
-            {contentWidth && !isAutoGrowHeightMarkdown (
+            {contentWidth && (
                 <View
                     style={[inputStyle as ViewStyle, styles.hiddenElementOutsideOfWindow, styles.visibilityHidden, styles.wAuto, inputPaddingLeft]}
                     onLayout={(e) => {

diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx
@@ -152,7 +152,7 @@ function PrivateNotesEditPage({route, personalDetailsList, report, session}: Pri
                         maxLength={CONST.MAX_COMMENT_LENGTH}
                         autoCorrect={false}
                         autoGrowHeight
-                        maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                        maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                         defaultValue={privateNote}
                         value={privateNote}
                         onChangeText={(text: string) => {

diff --git a/src/pages/RoomDescriptionPage.tsx b/src/pages/RoomDescriptionPage.tsx
@@ -104,7 +104,7 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) {
                             accessibilityLabel={translate('reportDescriptionPage.roomDescription')}
                             role={CONST.ROLE.PRESENTATION}
                             autoGrowHeight
-                            maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                            maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                             maxLength={CONST.REPORT_DESCRIPTION.MAX_LENGTH}
                             ref={(el: BaseTextInputRef | null): void => {
                                 if (!el) {

diff --git a/src/pages/iou/request/step/IOURequestStepDescription.tsx b/src/pages/iou/request/step/IOURequestStepDescription.tsx
@@ -186,7 +186,7 @@ function IOURequestStepDescription({
                             inputRef.current = el;
                         }}
                         autoGrowHeight
-                        maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                        maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                         shouldSubmitForm
                         isMarkdownEnabled
                         excludedMarkdownStyles={!isReportInGroupPolicy ? ['mentionReport'] : []}

diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx
@@ -89,7 +89,7 @@ function NewTaskDescriptionPage({task, route}: NewTaskDescriptionPageProps) {
                                 inputCallbackRef(el);
                             }}
                             autoGrowHeight
-                            maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                            maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                             shouldSubmitForm
                             isMarkdownEnabled
                         />

diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx
@@ -131,7 +131,7 @@ function NewTaskDetailsPage({task, route}: NewTaskDetailsPageProps) {
                         label={translate('newTaskPage.descriptionOptional')}
                         accessibilityLabel={translate('newTaskPage.descriptionOptional')}
                         autoGrowHeight
-                        maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                        maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                         shouldSubmitForm
                         defaultValue={Parser.htmlToMarkdown(Parser.replace(taskDescription))}
                         value={taskDescription}

diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx
@@ -130,7 +130,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti
                                 inputRef.current = element;
                             }}
                             autoGrowHeight
-                            maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                            maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                             shouldSubmitForm
                             isMarkdownEnabled
                         />

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx
@@ -294,7 +294,7 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
                                     accessibilityLabel={translate('reportDescriptionPage.roomDescriptionOptional')}
                                     role={CONST.ROLE.PRESENTATION}
                                     autoGrowHeight
-                                    maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                                    maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                                     maxLength={CONST.REPORT_DESCRIPTION.MAX_LENGTH}
                                     autoCapitalize="none"
                                     shouldInterceptSwipe

diff --git a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx
@@ -101,7 +101,7 @@ function WorkspaceProfileDescriptionPage({policy}: Props) {
                             inputID="description"
                             label={translate('workspace.editor.descriptionInputLabel')}
                             accessibilityLabel={translate('workspace.editor.descriptionInputLabel')}
-                            maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                            maxAutoGrowHeight={variables.markdownTextInputAutoGrowMaxHeight}
                             value={description}
                             maxLength={CONST.REPORT_DESCRIPTION.MAX_LENGTH}
                             spellCheck={false}

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -246,6 +246,7 @@ export default {
     mushroomTopHatHeight: 128,
     bankButtonMargin: 23,
     textInputAutoGrowMaxHeight: 115,
+    markdownTextInputAutoGrowMaxHeight: 90,
     eReceiptBackgroundImageMinWidth: 217,
 
     searchTypeColumnWidth: 52,