Merge pull request #30774 from JKobrynski/migrateReportActionSkeletonViewToTypeScript

[TS Migration] Migrate ReportActionsSkeletonView and SkeletonViewContentLoader directories to TypeScript

Author: MonilBhavsar

src/components/ReportActionsSkeletonView/SkeletonViewLines.js src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx

@@ -1,26 +1,21 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import styles from '@styles/styles';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type SkeletonViewLinesProps = {
     /** Number of rows to show in Skeleton UI block */
-    numberOfRows: PropTypes.number.isRequired,
-    shouldAnimate: PropTypes.bool,
+    numberOfRows: 1 | 2 | 3;
+    shouldAnimate?: boolean;
 };
 
-const defaultTypes = {
-    shouldAnimate: true,
-};
-
-function SkeletonViewLines(props) {
+function SkeletonViewLines({numberOfRows, shouldAnimate = true}: SkeletonViewLinesProps) {
     return (
         <SkeletonViewContentLoader
-            animate={props.shouldAnimate}
-            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+            animate={shouldAnimate}
+            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[numberOfRows]}
             backgroundColor={themeColors.skeletonLHNIn}
             foregroundColor={themeColors.skeletonLHNOut}
             style={styles.mr5}
@@ -42,15 +37,15 @@ function SkeletonViewLines(props) {
                 width="100%"
                 height="8"
             />
-            {props.numberOfRows > 1 && (
+            {numberOfRows > 1 && (
                 <Rect
                     x="72"
                     y="51"
                     width="50%"
                     height="8"
                 />
             )}
-            {props.numberOfRows > 2 && (
+            {numberOfRows > 2 && (
                 <Rect
                     x="72"
                     y="71"
@@ -63,6 +58,4 @@ function SkeletonViewLines(props) {
 }
 
 SkeletonViewLines.displayName = 'SkeletonViewLines';
-SkeletonViewLines.propTypes = propTypes;
-SkeletonViewLines.defaultProps = defaultTypes;
 export default SkeletonViewLines;

src/components/ReportActionsSkeletonView/index.js src/components/ReportActionsSkeletonView/index.tsx

@@ -1,25 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Dimensions, View} from 'react-native';
 import CONST from '@src/CONST';
 import SkeletonViewLines from './SkeletonViewLines';
 
-const propTypes = {
+type ReportActionsSkeletonViewProps = {
     /** Whether to animate the skeleton view */
-    shouldAnimate: PropTypes.bool,
+    shouldAnimate?: boolean;
 
     /** Number of possible visible content items */
-    possibleVisibleContentItems: PropTypes.number,
+    possibleVisibleContentItems?: number;
 };
 
-const defaultProps = {
-    shouldAnimate: true,
-    possibleVisibleContentItems: 0,
-};
-
-function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) {
+function ReportActionsSkeletonView({shouldAnimate = true, possibleVisibleContentItems = 0}: ReportActionsSkeletonViewProps) {
     const contentItems = possibleVisibleContentItems || Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
-    const skeletonViewLines = [];
+    const skeletonViewLines: React.ReactNode[] = [];
     for (let index = 0; index < contentItems; index++) {
         const iconIndex = (index + 1) % 4;
         switch (iconIndex) {
@@ -55,6 +49,4 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems})
 }
 
 ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
-ReportActionsSkeletonView.propTypes = propTypes;
-ReportActionsSkeletonView.defaultProps = defaultProps;
 export default ReportActionsSkeletonView;

src/components/SkeletonViewContentLoader/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import SkeletonViewContentLoaderProps from './types';
+
+function ContentLoader(props: SkeletonViewContentLoaderProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SkeletonViewContentLoader {...props} />;
+}
+
+export default ContentLoader;

src/components/SkeletonViewContentLoader/index.native.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import SkeletonViewContentLoader from 'react-content-loader';
+import SkeletonViewContentLoaderProps from './types';
+
+function ContentLoader(props: SkeletonViewContentLoaderProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SkeletonViewContentLoader {...props} />;
+}
+
+export default ContentLoader;

src/components/SkeletonViewContentLoader/index.native.tsx

@@ -0,0 +1,6 @@
+import {IContentLoaderProps} from 'react-content-loader';
+import {IContentLoaderProps as NativeIContentLoaderProps} from 'react-content-loader/native';
+
+type SkeletonViewContentLoaderProps = IContentLoaderProps & NativeIContentLoaderProps;
+
+export default SkeletonViewContentLoaderProps;