Merge pull request #30441 from JKobrynski/migrateCurrentUserPersonalD…

…etailsSkeletonViewToTypeScript [TS Migration] Migrate CurrentUserPersonalDetailsSkeletonView to TypeScript
Expensify · Nov 10, 2023 · 1928c95 · 1928c95
2 parents 2addd69 + 3bd3962
commit 1928c95
Showing 1 changed file with 16 additions and 21 deletions.
diff --git a/...tUserPersonalDetailsSkeletonView/index.js → ...UserPersonalDetailsSkeletonView/index.tsx b/...tUserPersonalDetailsSkeletonView/index.js → ...UserPersonalDetailsSkeletonView/index.tsx
@@ -1,38 +1,35 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
-import _ from 'underscore';
+import {ValueOf} from 'type-fest';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type CurrentUserPersonalDetailsSkeletonViewProps = {
     /** Whether to animate the skeleton view */
-    shouldAnimate: PropTypes.bool,
+    shouldAnimate?: boolean;
 
     /** The size of the avatar */
-    avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    avatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Background color of the skeleton view */
-    backgroundColor: PropTypes.string,
+    backgroundColor?: string;
 
     /** Foreground color of the skeleton view */
-    foregroundColor: PropTypes.string,
+    foregroundColor?: string;
 };
 
-const defaultProps = {
-    shouldAnimate: true,
-    avatarSize: CONST.AVATAR_SIZE.LARGE,
-    backgroundColor: themeColors.highlightBG,
-    foregroundColor: themeColors.border,
-};
-
-function CurrentUserPersonalDetailsSkeletonView(props) {
-    const avatarPlaceholderSize = StyleUtils.getAvatarSize(props.avatarSize);
+function CurrentUserPersonalDetailsSkeletonView({
+    shouldAnimate = true,
+    avatarSize = CONST.AVATAR_SIZE.LARGE,
+    backgroundColor = themeColors.highlightBG,
+    foregroundColor = themeColors.border,
+}: CurrentUserPersonalDetailsSkeletonViewProps) {
+    const avatarPlaceholderSize = StyleUtils.getAvatarSize(avatarSize);
     const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
     const spaceBetweenAvatarAndHeadline = styles.mb3.marginBottom + styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
     const headlineSize = variables.fontSizeXLarge;
@@ -41,9 +38,9 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
     return (
         <View style={styles.avatarSectionWrapperSkeleton}>
             <SkeletonViewContentLoader
-                animate={props.shouldAnimate}
-                backgroundColor={props.backgroundColor}
-                foregroundColor={props.foregroundColor}
+                animate={shouldAnimate}
+                backgroundColor={backgroundColor}
+                foregroundColor={foregroundColor}
                 height={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel + labelSize}
             >
                 <Circle
@@ -69,6 +66,4 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
 }
 
 CurrentUserPersonalDetailsSkeletonView.displayName = 'CurrentUserPersonalDetailsSkeletonView';
-CurrentUserPersonalDetailsSkeletonView.propTypes = propTypes;
-CurrentUserPersonalDetailsSkeletonView.defaultProps = defaultProps;
 export default CurrentUserPersonalDetailsSkeletonView;