Merge pull request #31545 from JKobrynski/migrateReportHeaderSkeleton…

…ViewToTypeScript [TS Migration] Migrate ReportHeaderSkeletonView.js to TypeScript
Expensify · Nov 20, 2023 · 2df5072 · 2df5072
2 parents 7474cbc + 9722950
commit 2df5072
Showing 1 changed file with 14 additions and 20 deletions.
diff --git a/src/components/ReportHeaderSkeletonView.js → src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.js → 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;