Merge pull request #34091 from yh-0218/typeScript/ReportActionItemMes…

…sageEdit

[TS migration] Migrate 'ReportActionItemMessageEdit.js' component to TypeScript

src/components/Composer/types.ts

@@ -6,6 +6,12 @@ type TextSelection = {
 };
 
 type ComposerProps = {
+    /** identify id in the text input */
+    id?: string;
+
+    /** Indicate whether input is multiline */
+    multiline?: boolean;
+
     /** Maximum number of lines in the text input */
     maxLines?: number;
 
@@ -18,6 +24,9 @@ type ComposerProps = {
     /** Number of lines for the comment */
     numberOfLines?: number;
 
+    /** Callback method handle when the input is changed  */
+    onChangeText?: (numberOfLines: string) => void;
+
     /** Callback method to update number of lines for the comment */
     onNumberOfLinesChange?: (numberOfLines: number) => void;
 
@@ -69,6 +78,8 @@ type ComposerProps = {
 
     onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
+    onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+
     /** Should make the input only scroll inside the element avoid scroll out to parent */
     shouldContainScroll?: boolean;
 };

src/components/HeaderWithBackButton/index.tsx

@@ -61,7 +61,6 @@ function HeaderWithBackButton({
     const StyleUtils = useStyleUtils();
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
-    // @ts-expect-error TODO: Remove this once useKeyboardState (https://github.com/Expensify/App/issues/24941) is migrated to TypeScript.
     const {isKeyboardShown} = useKeyboardState();
     const waitForNavigate = useWaitForNavigation();
 

src/components/withKeyboardState.tsx

@@ -16,7 +16,9 @@ const keyboardStatePropTypes = {
     isKeyboardShown: PropTypes.bool.isRequired,
 };
 
-const KeyboardStateContext = createContext<KeyboardStateContextValue | null>(null);
+const KeyboardStateContext = createContext<KeyboardStateContextValue>({
+    isKeyboardShown: false,
+});
 
 function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
     const [isKeyboardShown, setIsKeyboardShown] = useState(false);

src/hooks/useKeyboardState.ts

@@ -6,6 +6,6 @@ import {KeyboardStateContext} from '@components/withKeyboardState';
  * Hook for getting current state of keyboard
  * whether the keyboard is open
  */
-export default function useKeyboardState(): KeyboardStateContextValue | null {
+export default function useKeyboardState(): KeyboardStateContextValue {
     return useContext(KeyboardStateContext);
 }

src/libs/EmojiUtils.ts

@@ -306,7 +306,7 @@ function getAddedEmojis(currentEmojis: Emoji[], formerEmojis: Emoji[]): Emoji[]
  * Replace any emoji name in a text with the emoji icon.
  * If we're on mobile, we also add a space after the emoji granted there's no text after it.
  */
-function replaceEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): ReplacedEmoji {
+function replaceEmojis(text: string, preferredSkinTone: number = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: Locale = CONST.LOCALES.DEFAULT): ReplacedEmoji {
     // emojisTrie is importing the emoji JSON file on the app starting and we want to avoid it
     const emojisTrie = require('./EmojiTrie').default;
 
@@ -370,7 +370,7 @@ function replaceEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKI
 /**
  * Find all emojis in a text and replace them with their code.
  */
-function replaceAndExtractEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang = CONST.LOCALES.DEFAULT): ReplacedEmoji {
+function replaceAndExtractEmojis(text: string, preferredSkinTone: number = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: Locale = CONST.LOCALES.DEFAULT): ReplacedEmoji {
     const {text: convertedText = '', emojis = [], cursorPosition} = replaceEmojis(text, preferredSkinTone, lang);
 
     return {

src/libs/actions/InputFocus/index.desktop.ts

@@ -1,13 +1,14 @@
 import Onyx from 'react-native-onyx';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Modal} from '@src/types/onyx';
 
 function inputFocusChange(focus: boolean) {
     Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus);
 }
 
 let refSave: HTMLElement | undefined;
-function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: {willAlertModalBecomeVisible: boolean; isVisible: boolean}, onyxFocused: boolean) {
+function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: Modal, onyxFocused: boolean) {
     if (isFocused && !onyxFocused) {
         inputFocusChange(true);
         ref.focus();

src/libs/actions/InputFocus/index.ts

@@ -1,5 +1,9 @@
-function inputFocusChange() {}
-function composerFocusKeepFocusOn() {}
-const callback = () => {};
+import type {Modal} from '@src/types/onyx';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function inputFocusChange(focus: boolean) {}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: Modal, onyxFocused: boolean) {}
+const callback = (method: () => void) => method();
 
 export {composerFocusKeepFocusOn, inputFocusChange, callback};

src/libs/actions/InputFocus/index.website.ts

@@ -2,13 +2,14 @@ import Onyx from 'react-native-onyx';
 import * as Browser from '@libs/Browser';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Modal} from '@src/types/onyx';
 
 function inputFocusChange(focus: boolean) {
     Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus);
 }
 
 let refSave: HTMLElement | undefined;
-function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: {willAlertModalBecomeVisible: boolean; isVisible: boolean}, onyxFocused: boolean) {
+function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: Modal, onyxFocused: boolean) {
     if (isFocused && !onyxFocused) {
         inputFocusChange(true);
         ref.focus();