Merge pull request #28008 from software-mansion-labs/ts-migration/Com…

…poserUtils

[TS migration] Migrate 'ComposerUtils' lib to TypeScript

src/components/Composer/index.js

@@ -358,7 +358,7 @@ function Composer({
         const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10) + parseInt(computedStyle.paddingTop, 10);
         setTextInputWidth(computedStyle.width);
 
-        const computedNumberOfLines = ComposerUtils.getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, textInput.current.scrollHeight);
+        const computedNumberOfLines = ComposerUtils.getNumberOfLines(lineHeight, paddingTopAndBottom, textInput.current.scrollHeight, maxLines);
         const generalNumberOfLines = computedNumberOfLines === 0 ? numberOfLinesProp : computedNumberOfLines;
 
         onNumberOfLinesChange(generalNumberOfLines);

src/libs/ComposerUtils/debouncedSaveReportComment.ts

@@ -0,0 +1,11 @@
+import debounce from 'lodash/debounce';
+import * as Report from '../actions/Report';
+
+/**
+ * Save draft report comment. Debounced to happen at most once per second.
+ */
+const debouncedSaveReportComment = debounce((reportID: string, comment = '') => {
+    Report.saveReportComment(reportID, comment);
+}, 1000);
+
+export default debouncedSaveReportComment;

src/libs/ComposerUtils/getDraftComment.js → src/libs/ComposerUtils/getDraftComment.ts

@@ -1,7 +1,7 @@
-import Onyx from 'react-native-onyx';
+import Onyx, {OnyxEntry} from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 
-const draftCommentMap = {};
+const draftCommentMap: Record<string, OnyxEntry<string>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
     callback: (value, key) => {
@@ -18,9 +18,7 @@ Onyx.connect({
  * Returns a draft comment from the onyx collection.
  * Note: You should use the HOCs/hooks to get onyx data, instead of using this directly.
  * A valid use case to use this is if the value is only needed once for an initial value.
- * @param {String} reportID
- * @returns {String|undefined}
  */
-export default function getDraftComment(reportID) {
+export default function getDraftComment(reportID: string): OnyxEntry<string> {
     return draftCommentMap[reportID];
 }

src/libs/ComposerUtils/getNumberOfLines/index.native.ts

@@ -0,0 +1,8 @@
+import GetNumberOfLines from './types';
+
+/**
+ * Get the current number of lines in the composer
+ */
+const getNumberOfLines: GetNumberOfLines = (lineHeight, paddingTopAndBottom, scrollHeight) => Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
+
+export default getNumberOfLines;

src/libs/ComposerUtils/getNumberOfLines/index.js → src/libs/ComposerUtils/getNumberOfLines/index.ts

@@ -1,17 +1,12 @@
+import GetNumberOfLines from './types';
+
 /**
  * Get the current number of lines in the composer
- *
- * @param {Number} maxLines
- * @param {Number} lineHeight
- * @param {Number} paddingTopAndBottom
- * @param {Number} scrollHeight
- *
- * @returns {Number}
  */
-function getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, scrollHeight) {
+const getNumberOfLines: GetNumberOfLines = (lineHeight, paddingTopAndBottom, scrollHeight, maxLines = 0) => {
     let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
     newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines);
     return newNumberOfLines;
-}
+};
 
 export default getNumberOfLines;

src/libs/ComposerUtils/getNumberOfLines/types.ts

@@ -0,0 +1,3 @@
+type GetNumberOfLines = (lineHeight: number, paddingTopAndBottom: number, scrollHeight: number, maxLines?: number) => number;
+
+export default GetNumberOfLines;

src/libs/ComposerUtils/index.js → src/libs/ComposerUtils/index.ts

@@ -2,24 +2,22 @@ import getNumberOfLines from './getNumberOfLines';
 import updateNumberOfLines from './updateNumberOfLines';
 import * as DeviceCapabilities from '../DeviceCapabilities';
 
+type Selection = {
+    start: number;
+    end: number;
+};
+
 /**
  * Replace substring between selection with a text.
- * @param {String} text
- * @param {Object} selection
- * @param {String} textToInsert
- * @returns {String}
  */
-function insertText(text, selection, textToInsert) {
+function insertText(text: string, selection: Selection, textToInsert: string): string {
     return text.slice(0, selection.start) + textToInsert + text.slice(selection.end, text.length);
 }
 
 /**
  * Check whether we can skip trigger hotkeys on some specific devices.
- * @param {Boolean} isSmallScreenWidth
- * @param {Boolean} isKeyboardShown
- * @returns {Boolean}
  */
-function canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown) {
+function canSkipTriggerHotkeys(isSmallScreenWidth: boolean, isKeyboardShown: boolean): boolean {
     // Do not trigger actions for mobileWeb or native clients that have the keyboard open
     // because for those devices, we want the return key to insert newlines rather than submit the form
     return (isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen()) || isKeyboardShown;
@@ -30,11 +28,9 @@ function canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown) {
  * The common suffix is the number of characters shared by both strings
  * at the end (suffix) until a mismatch is encountered.
  *
- * @param {string} str1
- * @param {string} str2
- * @returns {number} The length of the common suffix between the strings.
+ * @returns The length of the common suffix between the strings.
  */
-function getCommonSuffixLength(str1, str2) {
+function getCommonSuffixLength(str1: string, str2: string): number {
     let i = 0;
     while (str1[str1.length - 1 - i] === str2[str2.length - 1 - i]) {
         i++;

src/libs/ComposerUtils/types.ts

@@ -0,0 +1,6 @@
+type ComposerProps = {
+    isFullComposerAvailable: boolean;
+    setIsFullComposerAvailable: (isFullComposerAvailable: boolean) => void;
+};
+
+export default ComposerProps;

src/libs/ComposerUtils/updateIsFullComposerAvailable.js → src/libs/ComposerUtils/updateIsFullComposerAvailable.ts

@@ -1,11 +1,11 @@
 import CONST from '../../CONST';
+import ComposerProps from './types';
 
 /**
  * Update isFullComposerAvailable if needed
- * @param {Object} props
- * @param {Number} numberOfLines The number of lines in the text input
+ * @param numberOfLines The number of lines in the text input
  */
-function updateIsFullComposerAvailable(props, numberOfLines) {
+function updateIsFullComposerAvailable(props: ComposerProps, numberOfLines: number) {
     const isFullComposerAvailable = numberOfLines >= CONST.COMPOSER.FULL_COMPOSER_MIN_LINES;
     if (isFullComposerAvailable !== props.isFullComposerAvailable) {
         props.setIsFullComposerAvailable(isFullComposerAvailable);

src/libs/ComposerUtils/updateNumberOfLines/index.native.js → src/libs/ComposerUtils/updateNumberOfLines/index.native.ts

@@ -1,23 +1,21 @@
-import lodashGet from 'lodash/get';
 import styles from '../../../styles/styles';
 import updateIsFullComposerAvailable from '../updateIsFullComposerAvailable';
 import getNumberOfLines from '../getNumberOfLines';
+import UpdateNumberOfLines from './types';
 
 /**
  * Check the current scrollHeight of the textarea (minus any padding) and
  * divide by line height to get the total number of rows for the textarea.
- * @param {Object} props
- * @param {Event} e
  */
-function updateNumberOfLines(props, e) {
+const updateNumberOfLines: UpdateNumberOfLines = (props, event) => {
     const lineHeight = styles.textInputCompose.lineHeight;
     const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2;
-    const inputHeight = lodashGet(e, 'nativeEvent.contentSize.height', null);
+    const inputHeight = event?.nativeEvent?.contentSize?.height ?? null;
     if (!inputHeight) {
         return;
     }
     const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight);
     updateIsFullComposerAvailable(props, numberOfLines);
-}
+};
 
 export default updateNumberOfLines;

src/libs/ComposerUtils/updateNumberOfLines/index.ts

@@ -0,0 +1,5 @@
+import UpdateNumberOfLines from './types';
+
+const updateNumberOfLines: UpdateNumberOfLines = () => {};
+
+export default updateNumberOfLines;

src/libs/ComposerUtils/updateNumberOfLines/types.ts

@@ -0,0 +1,6 @@
+import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
+import ComposerProps from '../types';
+
+type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+
+export default UpdateNumberOfLines;