From 9722950298086bf755139d83b413a30adf283670 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Mon, 20 Nov 2023 13:20:47 +0100
Subject: [PATCH] migrate ReportHeaderSkeletonView to TypeScript

---
 ...onView.js => ReportHeaderSkeletonView.tsx} | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)
 rename src/components/{ReportHeaderSkeletonView.js => ReportHeaderSkeletonView.tsx} (68%)

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.tsx
similarity index 68%
rename from src/components/ReportHeaderSkeletonView.js
rename to src/components/ReportHeaderSkeletonView.tsx
index e0ef3f4257e3..acc9261889bc 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
@@ -11,37 +11,32 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
-    shouldAnimate: PropTypes.bool,
+type ReportHeaderSkeletonViewProps = {
+    shouldAnimate?: boolean;
 };
 
-const defaultProps = {
-    shouldAnimate: true,
-};
-
-function ReportHeaderSkeletonView(props) {
+function ReportHeaderSkeletonView({shouldAnimate = true}: ReportHeaderSkeletonViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
     return (
         <View style={[styles.appContentHeader]}>
-            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
-                {props.isSmallScreenWidth && (
+            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
+                {isSmallScreenWidth && (
                     <PressableWithFeedback
                         onPress={() => {}}
                         style={[styles.LHNToggle]}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        accessibilityLabel={props.translate('common.back')}
+                        accessibilityLabel={translate('common.back')}
                     >
                         <Icon src={Expensicons.BackArrow} />
                     </PressableWithFeedback>
                 )}
                 <SkeletonViewContentLoader
-                    animate={props.shouldAnimate}
+                    animate={shouldAnimate}
                     width={styles.w100.width}
                     height={variables.contentHeaderHeight}
                     backgroundColor={theme.highlightBG}
@@ -70,7 +65,6 @@ function ReportHeaderSkeletonView(props) {
     );
 }
 
-ReportHeaderSkeletonView.propTypes = propTypes;
-ReportHeaderSkeletonView.defaultProps = defaultProps;
 ReportHeaderSkeletonView.displayName = 'ReportHeaderSkeletonView';
-export default compose(withWindowDimensions, withLocalize)(ReportHeaderSkeletonView);
+
+export default ReportHeaderSkeletonView;