From b8dea602cb05bf13b10bd428b60df12ca9d888fc Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 22 Sep 2023 14:30:16 +0200 Subject: [PATCH] [TS migration] Migrate 'ComposerUtils' lib to TypeScript --- src/components/Composer/index.js | 2 +- .../debouncedSaveReportComment.js | 13 ----------- .../debouncedSaveReportComment.ts | 11 ++++++++++ ...{getDraftComment.js => getDraftComment.ts} | 8 +++---- .../getNumberOfLines/index.native.js | 14 ------------ .../getNumberOfLines/index.native.ts | 8 +++++++ .../getNumberOfLines/{index.js => index.ts} | 13 ++++------- .../ComposerUtils/getNumberOfLines/types.ts | 3 +++ src/libs/ComposerUtils/{index.js => index.ts} | 22 ++++++++----------- src/libs/ComposerUtils/types.ts | 6 +++++ ...le.js => updateIsFullComposerAvailable.ts} | 6 ++--- .../updateNumberOfLines/index.js | 1 - .../{index.native.js => index.native.ts} | 10 ++++----- .../updateNumberOfLines/index.ts | 5 +++++ .../updateNumberOfLines/types.ts | 6 +++++ 15 files changed, 63 insertions(+), 65 deletions(-) delete mode 100644 src/libs/ComposerUtils/debouncedSaveReportComment.js create mode 100644 src/libs/ComposerUtils/debouncedSaveReportComment.ts rename src/libs/ComposerUtils/{getDraftComment.js => getDraftComment.ts} (75%) delete mode 100644 src/libs/ComposerUtils/getNumberOfLines/index.native.js create mode 100644 src/libs/ComposerUtils/getNumberOfLines/index.native.ts rename src/libs/ComposerUtils/getNumberOfLines/{index.js => index.ts} (55%) create mode 100644 src/libs/ComposerUtils/getNumberOfLines/types.ts rename src/libs/ComposerUtils/{index.js => index.ts} (69%) create mode 100644 src/libs/ComposerUtils/types.ts rename src/libs/ComposerUtils/{updateIsFullComposerAvailable.js => updateIsFullComposerAvailable.ts} (66%) delete mode 100644 src/libs/ComposerUtils/updateNumberOfLines/index.js rename src/libs/ComposerUtils/updateNumberOfLines/{index.native.js => index.native.ts} (77%) create mode 100644 src/libs/ComposerUtils/updateNumberOfLines/index.ts create mode 100644 src/libs/ComposerUtils/updateNumberOfLines/types.ts diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 44075a4ec1eb..e7b18bbd8d69 100755 --- a/src/components/Composer/index.js +++ b/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); diff --git a/src/libs/ComposerUtils/debouncedSaveReportComment.js b/src/libs/ComposerUtils/debouncedSaveReportComment.js deleted file mode 100644 index c39da78c2c3e..000000000000 --- a/src/libs/ComposerUtils/debouncedSaveReportComment.js +++ /dev/null @@ -1,13 +0,0 @@ -import _ from 'underscore'; -import * as Report from '../actions/Report'; - -/** - * Save draft report comment. Debounced to happen at most once per second. - * @param {String} reportID - * @param {String} comment - */ -const debouncedSaveReportComment = _.debounce((reportID, comment) => { - Report.saveReportComment(reportID, comment || ''); -}, 1000); - -export default debouncedSaveReportComment; diff --git a/src/libs/ComposerUtils/debouncedSaveReportComment.ts b/src/libs/ComposerUtils/debouncedSaveReportComment.ts new file mode 100644 index 000000000000..e449245edc52 --- /dev/null +++ b/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; diff --git a/src/libs/ComposerUtils/getDraftComment.js b/src/libs/ComposerUtils/getDraftComment.ts similarity index 75% rename from src/libs/ComposerUtils/getDraftComment.js rename to src/libs/ComposerUtils/getDraftComment.ts index 854df1ac65ee..ac3d2f3d09be 100644 --- a/src/libs/ComposerUtils/getDraftComment.js +++ b/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> = {}; 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 { return draftCommentMap[reportID]; } diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.native.js b/src/libs/ComposerUtils/getNumberOfLines/index.native.js deleted file mode 100644 index ff4a1c6d74b1..000000000000 --- a/src/libs/ComposerUtils/getNumberOfLines/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Get the current number of lines in the composer - * - * @param {Number} lineHeight - * @param {Number} paddingTopAndBottom - * @param {Number} scrollHeight - * - * @returns {Number} - */ -function getNumberOfLines(lineHeight, paddingTopAndBottom, scrollHeight) { - return Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); -} - -export default getNumberOfLines; diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.native.ts b/src/libs/ComposerUtils/getNumberOfLines/index.native.ts new file mode 100644 index 000000000000..9a7340b9a035 --- /dev/null +++ b/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; diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.js b/src/libs/ComposerUtils/getNumberOfLines/index.ts similarity index 55% rename from src/libs/ComposerUtils/getNumberOfLines/index.js rename to src/libs/ComposerUtils/getNumberOfLines/index.ts index a469da7516bb..cf85b45443d5 100644 --- a/src/libs/ComposerUtils/getNumberOfLines/index.js +++ b/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; diff --git a/src/libs/ComposerUtils/getNumberOfLines/types.ts b/src/libs/ComposerUtils/getNumberOfLines/types.ts new file mode 100644 index 000000000000..67bb790f726b --- /dev/null +++ b/src/libs/ComposerUtils/getNumberOfLines/types.ts @@ -0,0 +1,3 @@ +type GetNumberOfLines = (lineHeight: number, paddingTopAndBottom: number, scrollHeight: number, maxLines?: number) => number; + +export default GetNumberOfLines; diff --git a/src/libs/ComposerUtils/index.js b/src/libs/ComposerUtils/index.ts similarity index 69% rename from src/libs/ComposerUtils/index.js rename to src/libs/ComposerUtils/index.ts index dfe6cf446809..5e2a42fc65dd 100644 --- a/src/libs/ComposerUtils/index.js +++ b/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++; diff --git a/src/libs/ComposerUtils/types.ts b/src/libs/ComposerUtils/types.ts new file mode 100644 index 000000000000..a417d951ff51 --- /dev/null +++ b/src/libs/ComposerUtils/types.ts @@ -0,0 +1,6 @@ +type ComposerProps = { + isFullComposerAvailable: boolean; + setIsFullComposerAvailable: (isFullComposerAvailable: boolean) => void; +}; + +export default ComposerProps; diff --git a/src/libs/ComposerUtils/updateIsFullComposerAvailable.js b/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts similarity index 66% rename from src/libs/ComposerUtils/updateIsFullComposerAvailable.js rename to src/libs/ComposerUtils/updateIsFullComposerAvailable.ts index 00b12d1742e3..5d73619482db 100644 --- a/src/libs/ComposerUtils/updateIsFullComposerAvailable.js +++ b/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); diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.js b/src/libs/ComposerUtils/updateNumberOfLines/index.js deleted file mode 100644 index ff8b4c56321a..000000000000 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.js +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.js b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts similarity index 77% rename from src/libs/ComposerUtils/updateNumberOfLines/index.native.js rename to src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index 5a13ae670d81..b22135b4f767 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.js +++ b/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; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.ts new file mode 100644 index 000000000000..91a9c9c0f102 --- /dev/null +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.ts @@ -0,0 +1,5 @@ +import UpdateNumberOfLines from './types'; + +const updateNumberOfLines: UpdateNumberOfLines = () => {}; + +export default updateNumberOfLines; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts new file mode 100644 index 000000000000..c0650be25433 --- /dev/null +++ b/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) => void; + +export default UpdateNumberOfLines;