[TS migration] Migrate 'ExpensifyWordmark.js' component to TypeScript

src/components/ExpensifyWordmark.js → src/components/ExpensifyWordmark.tsx

@@ -1,7 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import {StyleProp, View, ViewStyle} from 'react-native';
 import AdHocLogo from '@assets/images/expensify-logo--adhoc.svg';
 import DevLogo from '@assets/images/expensify-logo--dev.svg';
 import StagingLogo from '@assets/images/expensify-logo--staging.svg';
@@ -12,40 +10,36 @@ import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import withWindowDimensions from './withWindowDimensions';
+import type {WindowDimensionsProps} from './withWindowDimensions/types';
 
-const propTypes = {
+type ExpensifyWordmarkProps = WindowDimensionsProps & {
     /** Additional styles to add to the component */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    ...windowDimensionsPropTypes,
-};
-
-const defaultProps = {
-    style: {},
+    style?: StyleProp<ViewStyle>;
 };
 
 const logoComponents = {
     [CONST.ENVIRONMENT.DEV]: DevLogo,
     [CONST.ENVIRONMENT.STAGING]: StagingLogo,
     [CONST.ENVIRONMENT.PRODUCTION]: ProductionLogo,
+    [CONST.ENVIRONMENT.ADHOC]: AdHocLogo,
 };
 
-function ExpensifyWordmark(props) {
+function ExpensifyWordmark({isSmallScreenWidth, style}: ExpensifyWordmarkProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
+    const LogoComponent = environment ? logoComponents[environment] : AdHocLogo;
 
-    const LogoComponent = logoComponents[environment] || AdHocLogo;
     return (
         <>
             <View
                 style={[
-                    StyleUtils.getSignInWordmarkWidthStyle(environment, props.isSmallScreenWidth),
-                    StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
-                    props.isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
-                    ...(_.isArray(props.style) ? props.style : [props.style]),
+                    StyleUtils.getSignInWordmarkWidthStyle(isSmallScreenWidth, environment),
+                    StyleUtils.getHeight(isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
+                    isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
+                    style,
                 ]}
             >
                 <LogoComponent fill={theme.success} />
@@ -55,6 +49,5 @@ function ExpensifyWordmark(props) {
 }
 
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
-ExpensifyWordmark.defaultProps = defaultProps;
-ExpensifyWordmark.propTypes = propTypes;
+
 export default withWindowDimensions(ExpensifyWordmark);

src/styles/StyleUtils.ts

@@ -462,7 +462,7 @@ function getBorderColorStyle(borderColor: string): ViewStyle {
 /**
  * Returns the width style for the wordmark logo on the sign in page
  */
-function getSignInWordmarkWidthStyle(environment: string, isSmallScreenWidth: boolean): ViewStyle {
+function getSignInWordmarkWidthStyle(isSmallScreenWidth: boolean, environment?: ValueOf<typeof CONST.ENVIRONMENT>): ViewStyle {
     if (environment === CONST.ENVIRONMENT.DEV) {
         return isSmallScreenWidth ? {width: variables.signInLogoWidthPill} : {width: variables.signInLogoWidthLargeScreenPill};
     }