Merge pull request #29546 from pasyukevich/feature/migrate-with-view-…

…top-offset

[No QA] [TS migration] Migrate 'withViewportOffsetTop.js' HOC to TypeScript

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) => {

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<TProps extends ViewportOffsetTopProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
+    function WithViewportOffsetTop(props: Omit<TProps, keyof ViewportOffsetTopProps>, ref: ForwardedRef<TRef>) {
+        const [viewportOffsetTop, setViewportOffsetTop] = useState(0);
+
+        useEffect(() => {
+            const updateDimensions = (event: Event) => {
+                const targetOffsetTop = (event.target instanceof VisualViewport && event.target.offsetTop) || 0;
+                setViewportOffsetTop(targetOffsetTop);
+            };
+
+            const removeViewportResizeListener = addViewportResizeListener(updateDimensions);
+
+            return () => {
+                removeViewportResizeListener();
+            };
+        }, []);
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props as TProps)}
+                ref={ref}
+                viewportOffsetTop={viewportOffsetTop}
+            />
+        );
+    }
+
+    WithViewportOffsetTop.displayName = `WithViewportOffsetTop(${getComponentDisplayName(WrappedComponent)})`;
+
+    return forwardRef(WithViewportOffsetTop);
+}

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,
 };