From 2aa079e55ec245c03d0376677dbc93be0be93433 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Sun, 29 Sep 2024 08:10:30 +0700 Subject: [PATCH] Using correct max height instead of calculating vertical padding Signed-off-by: Tsaqif --- .../TextInput/BaseTextInput/index.native.tsx | 22 +++++-------------- .../TextInput/BaseTextInput/index.tsx | 21 +++++------------- .../PrivateNotes/PrivateNotesEditPage.tsx | 2 +- src/pages/RoomDescriptionPage.tsx | 2 +- .../step/IOURequestStepDescription.tsx | 2 +- src/pages/tasks/NewTaskDescriptionPage.tsx | 2 +- src/pages/tasks/NewTaskDetailsPage.tsx | 2 +- src/pages/tasks/TaskDescriptionPage.tsx | 2 +- src/pages/workspace/WorkspaceNewRoomPage.tsx | 2 +- .../WorkspaceProfileDescriptionPage.tsx | 2 +- src/styles/variables.ts | 1 + 11 files changed, 20 insertions(+), 40 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index a43b13afbe0..0f434e4e924 100644 --- 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 ( <> @@ -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} - + {iconLeft && ( )} - {contentWidth && !isAutoGrowHeightMarkdown ( + {contentWidth && ( { diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 343a1b4a7d0..63135cf3bd7 100644 --- 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 ( <> ) : null} - + {iconLeft && ( )} - {contentWidth && !isAutoGrowHeightMarkdown ( + {contentWidth && ( { diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index ac8eb7f862b..8e4a3d9d557 100644 --- 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 index a70f17d1468..c159030dcf7 100644 --- 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 index 758770698d0..4fe43b30d3d 100644 --- 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 index 0132442b597..fb3d7f0f8ee 100644 --- 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 index f0ff4d0fb40..d156fb7c170 100644 --- 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 index acd1329b26e..bdbde2c4189 100644 --- 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 index c0e953a6a35..282455c0e6f 100644 --- 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 index 09c4dce72e5..f1b774a033a 100644 --- 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 index 300574514e5..4bcda981584 100644 --- 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,