From 148af58b52b5d9dd35c0e461e312f8b1024fbd3a Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 6 Feb 2024 21:18:15 +0100 Subject: [PATCH 1/5] reintroduce animated input for Markdown composer --- src/components/AnimatedMarkdownTextInput.tsx | 37 ++++++++++++++++++++ src/components/Composer/index.native.tsx | 4 +-- 2 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/components/AnimatedMarkdownTextInput.tsx diff --git a/src/components/AnimatedMarkdownTextInput.tsx b/src/components/AnimatedMarkdownTextInput.tsx new file mode 100644 index 000000000000..f51c54fbe1e9 --- /dev/null +++ b/src/components/AnimatedMarkdownTextInput.tsx @@ -0,0 +1,37 @@ +import type {ForwardedRef} from 'react'; +import React from 'react'; +import type {MarkdownTextInputProps} from '@expensify/react-native-live-markdown'; +import type {TextInput} from 'react-native'; +import {MarkdownTextInput} from '@expensify/react-native-live-markdown'; +import Animated from 'react-native-reanimated'; +import useTheme from '@hooks/useTheme'; + +// Convert the underlying TextInput into an Animated component so that we can take an animated ref and pass it to a worklet +const AnimatedTextInput = Animated.createAnimatedComponent(MarkdownTextInput); + +type AnimatedTextInputRef = typeof AnimatedTextInput & TextInput & HTMLInputElement; + +function RNTextInputWithRef(props: MarkdownTextInputProps, ref: ForwardedRef) { + const theme = useTheme(); + + return ( + { + if (typeof ref !== 'function') { + return; + } + ref(refHandle as AnimatedTextInputRef); + }} + // eslint-disable-next-line + {...props} + /> + ); +} + +RNTextInputWithRef.displayName = 'RNTextInputWithRef'; + +export default React.forwardRef(RNTextInputWithRef); +export type {AnimatedTextInputRef}; diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index a3c037211d4c..15d4825049ac 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -1,9 +1,9 @@ -import {MarkdownTextInput} from '@expensify/react-native-live-markdown'; import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {TextInput} from 'react-native'; import {StyleSheet} from 'react-native'; -import type {AnimatedTextInputRef} from '@components/RNTextInput'; +import type {AnimatedTextInputRef} from '@components/AnimatedMarkdownTextInput'; +import MarkdownTextInput from '@components/AnimatedMarkdownTextInput'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useResetComposerFocus from '@hooks/useResetComposerFocus'; import useStyleUtils from '@hooks/useStyleUtils'; From c0c76652433710a5494ce73ae836f62e550cb8af Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 7 Feb 2024 10:13:56 +0100 Subject: [PATCH 2/5] run prettier --- src/components/AnimatedMarkdownTextInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnimatedMarkdownTextInput.tsx b/src/components/AnimatedMarkdownTextInput.tsx index f51c54fbe1e9..ce40fba6c159 100644 --- a/src/components/AnimatedMarkdownTextInput.tsx +++ b/src/components/AnimatedMarkdownTextInput.tsx @@ -1,8 +1,8 @@ +import type {MarkdownTextInputProps} from '@expensify/react-native-live-markdown'; +import {MarkdownTextInput} from '@expensify/react-native-live-markdown'; import type {ForwardedRef} from 'react'; import React from 'react'; -import type {MarkdownTextInputProps} from '@expensify/react-native-live-markdown'; import type {TextInput} from 'react-native'; -import {MarkdownTextInput} from '@expensify/react-native-live-markdown'; import Animated from 'react-native-reanimated'; import useTheme from '@hooks/useTheme'; From 4ba03739d7c8f4b8b5b891614982d5c4323f3ce1 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 7 Feb 2024 10:38:43 +0100 Subject: [PATCH 3/5] rename wrapping component to RNMarkdownTextInput --- src/components/Composer/index.native.tsx | 4 ++-- ...nimatedMarkdownTextInput.tsx => RNMarkdownTextInput.tsx} | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) rename src/components/{AnimatedMarkdownTextInput.tsx => RNMarkdownTextInput.tsx} (84%) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 15d4825049ac..592b62b68c4e 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -2,8 +2,8 @@ import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {TextInput} from 'react-native'; import {StyleSheet} from 'react-native'; -import type {AnimatedTextInputRef} from '@components/AnimatedMarkdownTextInput'; -import MarkdownTextInput from '@components/AnimatedMarkdownTextInput'; +import type {AnimatedTextInputRef} from '@components/RNMarkdownTextInput'; +import MarkdownTextInput from '@components/RNMarkdownTextInput'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useResetComposerFocus from '@hooks/useResetComposerFocus'; import useStyleUtils from '@hooks/useStyleUtils'; diff --git a/src/components/AnimatedMarkdownTextInput.tsx b/src/components/RNMarkdownTextInput.tsx similarity index 84% rename from src/components/AnimatedMarkdownTextInput.tsx rename to src/components/RNMarkdownTextInput.tsx index ce40fba6c159..ca761c1ee285 100644 --- a/src/components/AnimatedMarkdownTextInput.tsx +++ b/src/components/RNMarkdownTextInput.tsx @@ -11,7 +11,7 @@ const AnimatedTextInput = Animated.createAnimatedComponent(MarkdownTextInput); type AnimatedTextInputRef = typeof AnimatedTextInput & TextInput & HTMLInputElement; -function RNTextInputWithRef(props: MarkdownTextInputProps, ref: ForwardedRef) { +function RNMarkdownTextInput(props: MarkdownTextInputProps, ref: ForwardedRef) { const theme = useTheme(); return ( @@ -31,7 +31,7 @@ function RNTextInputWithRef(props: MarkdownTextInputProps, ref: ForwardedRef Date: Mon, 12 Feb 2024 10:15:49 +0100 Subject: [PATCH 4/5] add review suggestions --- src/components/Composer/index.native.tsx | 6 +++--- src/components/RNMarkdownTextInput.tsx | 16 ++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 592b62b68c4e..166be722c794 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -2,7 +2,7 @@ import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {TextInput} from 'react-native'; import {StyleSheet} from 'react-native'; -import type {AnimatedTextInputRef} from '@components/RNMarkdownTextInput'; +import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; import MarkdownTextInput from '@components/RNMarkdownTextInput'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useResetComposerFocus from '@hooks/useResetComposerFocus'; @@ -31,7 +31,7 @@ function Composer( }: ComposerProps, ref: ForwardedRef, ) { - const textInput = useRef(null); + const textInput = useRef(null); const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput); const theme = useTheme(); const markdownStyle = useMarkdownStyle(); @@ -42,7 +42,7 @@ function Composer( * Set the TextInput Ref * @param {Element} el */ - const setTextInputRef = useCallback((el: AnimatedTextInputRef) => { + const setTextInputRef = useCallback((el: AnimatedMarkdownTextInputRef) => { textInput.current = el; if (typeof ref !== 'function' || textInput.current === null) { return; diff --git a/src/components/RNMarkdownTextInput.tsx b/src/components/RNMarkdownTextInput.tsx index ca761c1ee285..d36af6e13826 100644 --- a/src/components/RNMarkdownTextInput.tsx +++ b/src/components/RNMarkdownTextInput.tsx @@ -7,15 +7,15 @@ import Animated from 'react-native-reanimated'; import useTheme from '@hooks/useTheme'; // Convert the underlying TextInput into an Animated component so that we can take an animated ref and pass it to a worklet -const AnimatedTextInput = Animated.createAnimatedComponent(MarkdownTextInput); +const AnimatedMarkdownTextInput = Animated.createAnimatedComponent(MarkdownTextInput); -type AnimatedTextInputRef = typeof AnimatedTextInput & TextInput & HTMLInputElement; +type AnimatedMarkdownTextInputRef = typeof AnimatedMarkdownTextInput & TextInput & HTMLInputElement; -function RNMarkdownTextInput(props: MarkdownTextInputProps, ref: ForwardedRef) { +function RNMarkdownTextInputWithRef(props: MarkdownTextInputProps, ref: ForwardedRef) { const theme = useTheme(); return ( - Date: Thu, 15 Feb 2024 01:56:48 +0100 Subject: [PATCH 5/5] Update naming of animated component Co-authored-by: Tomek Zawadzki --- src/components/Composer/index.native.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 166be722c794..6691c068eb3a 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {TextInput} from 'react-native'; import {StyleSheet} from 'react-native'; import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; -import MarkdownTextInput from '@components/RNMarkdownTextInput'; +import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useResetComposerFocus from '@hooks/useResetComposerFocus'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -68,7 +68,7 @@ function Composer( const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]); return ( -