From 84e9ff945730cd1bc9f0355997630f90d3bd062e Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 13 Oct 2023 13:07:37 +0200 Subject: [PATCH 1/3] [TS migration] Migrate 'withViewportOffsetTop.js' HOC to TypeScript --- .eslintrc.js | 2 +- src/components/EmojiPicker/EmojiPicker.js | 5 +- src/components/withViewportOffsetTop.js | 61 ----------------------- src/components/withViewportOffsetTop.tsx | 41 +++++++++++++++ src/libs/getComponentDisplayName.ts | 2 +- src/pages/home/ReportScreen.js | 4 +- 6 files changed, 48 insertions(+), 67 deletions(-) delete mode 100644 src/components/withViewportOffsetTop.js create mode 100644 src/components/withViewportOffsetTop.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 75a74ed371c4..83e9479ce0c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -116,7 +116,7 @@ module.exports = { }, { selector: ['parameter', 'method'], - format: ['camelCase'], + format: ['camelCase', 'PascalCase'], }, ], '@typescript-eslint/ban-types': [ diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js index a12b089ddf97..8b32234fdbdf 100644 --- a/src/components/EmojiPicker/EmojiPicker.js +++ b/src/components/EmojiPicker/EmojiPicker.js @@ -1,12 +1,13 @@ import React, {useState, useEffect, useRef, forwardRef, useImperativeHandle} from 'react'; import {Dimensions} from 'react-native'; import _ from 'underscore'; +import PropTypes from 'prop-types'; import EmojiPickerMenu from './EmojiPickerMenu'; import CONST from '../../CONST'; import styles from '../../styles/styles'; import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; -import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../withViewportOffsetTop'; +import withViewportOffsetTop from '../withViewportOffsetTop'; import compose from '../../libs/compose'; import * as StyleUtils from '../../styles/StyleUtils'; import calculateAnchorPosition from '../../libs/calculateAnchorPosition'; @@ -18,7 +19,7 @@ const DEFAULT_ANCHOR_ORIGIN = { const propTypes = { ...windowDimensionsPropTypes, - ...viewportOffsetTopPropTypes, + viewportOffsetTop: PropTypes.number.isRequired, }; const EmojiPicker = forwardRef((props, ref) => { diff --git a/src/components/withViewportOffsetTop.js b/src/components/withViewportOffsetTop.js deleted file mode 100644 index ccf928b3bd13..000000000000 --- a/src/components/withViewportOffsetTop.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, {useEffect, forwardRef, useState} from 'react'; -import PropTypes from 'prop-types'; -import lodashGet from 'lodash/get'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; -import addViewportResizeListener from '../libs/VisualViewport'; -import refPropTypes from './refPropTypes'; - -const viewportOffsetTopPropTypes = { - // viewportOffsetTop returns the offset of the top edge of the visual viewport from the - // top edge of the layout viewport in CSS pixels, when the visual viewport is resized. - - viewportOffsetTop: PropTypes.number.isRequired, -}; - -export default function (WrappedComponent) { - function WithViewportOffsetTop(props) { - const [viewportOffsetTop, setViewportOffsetTop] = useState(0); - - useEffect(() => { - /** - * @param {SyntheticEvent} e - */ - const updateDimensions = (e) => { - const targetOffsetTop = lodashGet(e, 'target.offsetTop', 0); - setViewportOffsetTop(targetOffsetTop); - }; - - const removeViewportResizeListener = addViewportResizeListener(updateDimensions); - - return () => { - removeViewportResizeListener(); - }; - }, []); - - return ( - - ); - } - - WithViewportOffsetTop.displayName = `WithViewportOffsetTop(${getComponentDisplayName(WrappedComponent)})`; - WithViewportOffsetTop.propTypes = { - forwardedRef: refPropTypes, - }; - WithViewportOffsetTop.defaultProps = { - forwardedRef: undefined, - }; - return forwardRef((props, ref) => ( - - )); -} - -export {viewportOffsetTopPropTypes}; diff --git a/src/components/withViewportOffsetTop.tsx b/src/components/withViewportOffsetTop.tsx new file mode 100644 index 000000000000..7c50ef0cf4a6 --- /dev/null +++ b/src/components/withViewportOffsetTop.tsx @@ -0,0 +1,41 @@ +import React, {useEffect, forwardRef, useState, ComponentType, RefAttributes, ForwardedRef} from 'react'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; +import addViewportResizeListener from '../libs/VisualViewport'; + +type ViewportOffsetTopProps = { + // viewportOffsetTop returns the offset of the top edge of the visual viewport from the + // top edge of the layout viewport in CSS pixels, when the visual viewport is resized. + viewportOffsetTop: number; +}; + +export default function withViewportOffsetTop(WrappedComponent: ComponentType>) { + function WithViewportOffsetTop(props: Omit, ref: ForwardedRef) { + const [viewportOffsetTop, setViewportOffsetTop] = useState(0); + + useEffect(() => { + const updateDimensions = (e: Event) => { + const targetOffsetTop = (e.target as HTMLElement)?.offsetTop ?? 0; + setViewportOffsetTop(targetOffsetTop); + }; + + const removeViewportResizeListener = addViewportResizeListener(updateDimensions); + + return () => { + removeViewportResizeListener(); + }; + }, []); + + return ( + + ); + } + + WithViewportOffsetTop.displayName = `WithViewportOffsetTop(${getComponentDisplayName(WrappedComponent as ComponentType)})`; + + return forwardRef(WithViewportOffsetTop); +} diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts index fd1bbcaea521..0bf52d543a84 100644 --- a/src/libs/getComponentDisplayName.ts +++ b/src/libs/getComponentDisplayName.ts @@ -1,6 +1,6 @@ import {ComponentType} from 'react'; /** Returns the display name of a component */ -export default function getComponentDisplayName(component: ComponentType): string { +export default function getComponentDisplayName(component: ComponentType): string { return component.displayName ?? component.name ?? 'Component'; } diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 51981d5fe80e..7a415f80c694 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -26,7 +26,7 @@ import Banner from '../../components/Banner'; import reportPropTypes from '../reportPropTypes'; import reportMetadataPropTypes from '../reportMetadataPropTypes'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; -import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop'; +import withViewportOffsetTop from '../../components/withViewportOffsetTop'; import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; import personalDetailsPropType from '../personalDetailsPropType'; import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; @@ -94,7 +94,7 @@ const propTypes = { /** Whether user is leaving the current report */ userLeavingStatus: PropTypes.bool, - ...viewportOffsetTopPropTypes, + viewportOffsetTop: PropTypes.number.isRequired, ...withCurrentReportIDPropTypes, }; From 4783701ad10990333408d01bb1b862ec88104300 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 18 Oct 2023 17:49:07 +0200 Subject: [PATCH 2/3] update targetOffsetTop expression --- src/components/withViewportOffsetTop.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/withViewportOffsetTop.tsx b/src/components/withViewportOffsetTop.tsx index 7c50ef0cf4a6..f2cec3145ee9 100644 --- a/src/components/withViewportOffsetTop.tsx +++ b/src/components/withViewportOffsetTop.tsx @@ -13,8 +13,8 @@ export default function withViewportOffsetTop { - const updateDimensions = (e: Event) => { - const targetOffsetTop = (e.target as HTMLElement)?.offsetTop ?? 0; + const updateDimensions = (event: Event) => { + const targetOffsetTop = (event.target instanceof HTMLElement && event.target.offsetTop) || 0; setViewportOffsetTop(targetOffsetTop); }; @@ -35,7 +35,7 @@ export default function withViewportOffsetTop Date: Thu, 19 Oct 2023 20:34:54 +0200 Subject: [PATCH 3/3] fix safari hidden header --- src/components/withViewportOffsetTop.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/withViewportOffsetTop.tsx b/src/components/withViewportOffsetTop.tsx index f2cec3145ee9..e2e1dc2d3484 100644 --- a/src/components/withViewportOffsetTop.tsx +++ b/src/components/withViewportOffsetTop.tsx @@ -14,7 +14,7 @@ export default function withViewportOffsetTop { const updateDimensions = (event: Event) => { - const targetOffsetTop = (event.target instanceof HTMLElement && event.target.offsetTop) || 0; + const targetOffsetTop = (event.target instanceof VisualViewport && event.target.offsetTop) || 0; setViewportOffsetTop(targetOffsetTop); };