From f4d7bd24d34f8d34787456074ef848cceddddda4 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 23 Apr 2024 14:53:16 +0700 Subject: [PATCH 1/8] Improve UX of modifying single line text inputs --- .../TextInput/BaseTextInput/index.native.tsx | 24 +++++++++++++++++++ .../TextInput/BaseTextInput/index.tsx | 24 +++++++++++++++++++ .../TextInput/BaseTextInput/types.ts | 6 +++++ src/pages/GroupChatNameEditPage.tsx | 1 + 4 files changed, 55 insertions(+) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 3039d7327d37..a60e8f890f6d 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -15,6 +15,7 @@ import RNTextInput from '@components/RNTextInput'; import Text from '@components/Text'; import * as styleConst from '@components/TextInput/styleConst'; import TextInputLabel from '@components/TextInput/TextInputLabel'; +import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -59,6 +60,8 @@ function BaseTextInput( prefixCharacter = '', inputID, isMarkdownEnabled = false, + shouldShowClearButton = false, + onClearInput = () => {}, ...props }: BaseTextInputProps, ref: ForwardedRef, @@ -381,6 +384,27 @@ function BaseTextInput( defaultValue={defaultValue} markdownStyle={markdownStyle} /> + {isFocused && !isReadOnly && shouldShowClearButton && value && ( + + { + e.preventDefault(); + }} + onPress={() => { + setValue(''); + onClearInput?.(inputID); + }} + > + + + + )} {inputProps.isLoading && ( {}, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, @@ -407,6 +410,27 @@ function BaseTextInput( defaultValue={defaultValue} markdownStyle={markdownStyle} /> + {isFocused && !isReadOnly && shouldShowClearButton && value && ( + + { + e.preventDefault(); + }} + onPress={() => { + setValue(''); + onClearInput?.(inputID); + }} + > + + + + )} {inputProps.isLoading && ( void; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/pages/GroupChatNameEditPage.tsx b/src/pages/GroupChatNameEditPage.tsx index 05d179fa552a..a3ba4e36d145 100644 --- a/src/pages/GroupChatNameEditPage.tsx +++ b/src/pages/GroupChatNameEditPage.tsx @@ -104,6 +104,7 @@ function GroupChatNameEditPage({groupChatDraft, route}: GroupChatNameEditPagePro inputID={INPUT_IDS.NEW_CHAT_NAME} role={CONST.ROLE.PRESENTATION} ref={inputCallbackRef} + shouldShowClearButton /> From ef9659890378bc75e755a7ea5f70dc9615321f32 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 24 Apr 2024 11:22:50 +0700 Subject: [PATCH 2/8] add clear icon --- src/components/Icon/Expensicons.ts | 2 ++ src/components/TextInput/BaseTextInput/index.native.tsx | 4 +++- src/components/TextInput/BaseTextInput/index.tsx | 4 +++- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 877e4972a3ec..16d47aedad51 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -159,6 +159,7 @@ import Wallet from '@assets/images/wallet.svg'; import Workflows from '@assets/images/workflows.svg'; import Workspace from '@assets/images/workspace-default-avatar.svg'; import Wrench from '@assets/images/wrench.svg'; +import Clear from '@assets/images/x-circle.svg'; import Zoom from '@assets/images/zoom.svg'; export { @@ -324,4 +325,5 @@ export { ChatBubbleReply, Lightbulb, DocumentPlus, + Clear, }; diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index e8d899a2cae5..656998e279a4 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -386,7 +386,9 @@ function BaseTextInput( }} > diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index b455ec0598f5..ba05f37fa909 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -412,7 +412,9 @@ function BaseTextInput( }} > From d141a519f7095c453cda60172682dfca30dc0d8f Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 24 Apr 2024 11:23:18 +0700 Subject: [PATCH 3/8] add cicler svg --- assets/images/x-circle.svg | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 assets/images/x-circle.svg diff --git a/assets/images/x-circle.svg b/assets/images/x-circle.svg new file mode 100644 index 000000000000..c186e41c4244 --- /dev/null +++ b/assets/images/x-circle.svg @@ -0,0 +1,12 @@ + + + + + + + \ No newline at end of file From 12e78205c1d7f7f31c10595a31f1ccf7ea7ba6a7 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 25 Apr 2024 14:55:57 +0700 Subject: [PATCH 4/8] fix icon size --- src/components/TextInput/BaseTextInput/index.native.tsx | 4 ++-- src/components/TextInput/BaseTextInput/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 656998e279a4..ef6b6ee6d75b 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -387,8 +387,8 @@ function BaseTextInput( > diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index ba05f37fa909..e7b0defa39ee 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -413,8 +413,8 @@ function BaseTextInput( > From d9b34bf96d58ad064549d71d415b50ac77400346 Mon Sep 17 00:00:00 2001 From: nkdengineer <161821005+nkdengineer@users.noreply.github.com> Date: Fri, 26 Apr 2024 10:41:54 +0700 Subject: [PATCH 5/8] Update src/components/TextInput/BaseTextInput/types.ts Co-authored-by: Eric Han <117511920+eh2077@users.noreply.github.com> --- src/components/TextInput/BaseTextInput/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 0a4725deacad..c404ec715fc9 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -108,7 +108,7 @@ type CustomBaseTextInputProps = { /** Should live markdown be enabled. Changes RNTextInput component to RNMarkdownTextInput */ isMarkdownEnabled?: boolean; - /** Clear button should be displayed */ + /** Whether the clear button should be displayed */ shouldShowClearButton?: boolean; /** Callback to handle clear the value on Form when input is used in the Form component. */ From 82e1c2dbf6866f91bfeca9c0a1d7215f118f21af Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 26 Apr 2024 10:47:59 +0700 Subject: [PATCH 6/8] add translation --- src/components/TextInput/BaseTextInput/index.native.tsx | 4 ++-- src/components/TextInput/BaseTextInput/index.tsx | 4 ++-- src/languages/en.ts | 1 + src/languages/es.ts | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index ef6b6ee6d75b..0e48d6364b5b 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -372,11 +372,11 @@ function BaseTextInput( markdownStyle={markdownStyle} /> {isFocused && !isReadOnly && shouldShowClearButton && value && ( - + { e.preventDefault(); }} diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index e7b0defa39ee..f3926341de78 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -398,11 +398,11 @@ function BaseTextInput( markdownStyle={markdownStyle} /> {isFocused && !isReadOnly && shouldShowClearButton && value && ( - + { e.preventDefault(); }} diff --git a/src/languages/en.ts b/src/languages/en.ts index d3ffbc9bb368..c502e9797616 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -324,6 +324,7 @@ export default { subtitleText3: 'button below.', }, businessName: 'Business name', + clear: 'Clear', }, location: { useCurrent: 'Use current location', diff --git a/src/languages/es.ts b/src/languages/es.ts index 0980ec5dcac5..e1d06b0a284e 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -314,6 +314,7 @@ export default { subtitleText3: '.', }, businessName: 'Nombre del Negocio', + clear: 'Clara', }, location: { useCurrent: 'Usar ubicación actual', From 3b098fec257efcd35c0af1365873a53a9428c668 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 26 Apr 2024 17:47:33 +0700 Subject: [PATCH 7/8] fix remove onClearInput --- src/components/TextInput/BaseTextInput/index.native.tsx | 2 -- src/components/TextInput/BaseTextInput/index.tsx | 2 -- src/components/TextInput/BaseTextInput/types.ts | 3 --- 3 files changed, 7 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index df533f4c7b9e..13f0c6f3bfb0 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -62,7 +62,6 @@ function BaseTextInput( inputID, isMarkdownEnabled = false, shouldShowClearButton = false, - onClearInput = () => {}, prefixContainerStyle = [], prefixStyle = [], ...props @@ -382,7 +381,6 @@ function BaseTextInput( }} onPress={() => { setValue(''); - onClearInput?.(inputID); }} > {}, prefixContainerStyle = [], prefixStyle = [], ...inputProps @@ -408,7 +407,6 @@ function BaseTextInput( }} onPress={() => { setValue(''); - onClearInput?.(inputID); }} > void; - /** Style for the prefix */ prefixStyle?: StyleProp; From 5ceb44861426680fca4c910b82eba69af08dc127 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 30 Apr 2024 00:57:43 +0700 Subject: [PATCH 8/8] fix: add TextInputClearButton component --- .../TextInput/BaseTextInput/index.native.tsx | 25 +---------- .../TextInput/BaseTextInput/index.tsx | 25 +---------- .../TextInput/TextInputClearButton/index.tsx | 42 +++++++++++++++++++ 3 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 src/components/TextInput/TextInputClearButton/index.tsx diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 13f0c6f3bfb0..4f0c7dd71116 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -14,8 +14,8 @@ import type {AnimatedTextInputRef} from '@components/RNTextInput'; import RNTextInput from '@components/RNTextInput'; import Text from '@components/Text'; import * as styleConst from '@components/TextInput/styleConst'; +import TextInputClearButton from '@components/TextInput/TextInputClearButton'; import TextInputLabel from '@components/TextInput/TextInputLabel'; -import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -370,28 +370,7 @@ function BaseTextInput( defaultValue={defaultValue} markdownStyle={markdownStyle} /> - {isFocused && !isReadOnly && shouldShowClearButton && value && ( - - { - e.preventDefault(); - }} - onPress={() => { - setValue(''); - }} - > - - - - )} + {isFocused && !isReadOnly && shouldShowClearButton && value && setValue('')} />} {inputProps.isLoading && ( - {isFocused && !isReadOnly && shouldShowClearButton && value && ( - - { - e.preventDefault(); - }} - onPress={() => { - setValue(''); - }} - > - - - - )} + {isFocused && !isReadOnly && shouldShowClearButton && value && setValue('')} />} {inputProps.isLoading && ( void; +}; + +function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { + const theme = useTheme(); + const styles = useThemeStyles(); + const {translate} = useLocalize(); + return ( + + { + e.preventDefault(); + }} + onPress={onPressButton} + > + + + + ); +} + +TextInputClearButton.displayName = 'TextInputClearButton'; + +export default forwardRef(TextInputClearButton);