diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.tsx similarity index 55% rename from src/components/ExpensifyWordmark.js rename to src/components/ExpensifyWordmark.tsx index efb3b20dbe87..45c0c9bcef1e 100644 --- a/src/components/ExpensifyWordmark.js +++ b/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; }; 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 ( <> @@ -55,6 +49,5 @@ function ExpensifyWordmark(props) { } ExpensifyWordmark.displayName = 'ExpensifyWordmark'; -ExpensifyWordmark.defaultProps = defaultProps; -ExpensifyWordmark.propTypes = propTypes; + export default withWindowDimensions(ExpensifyWordmark); diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index a99d292e9dc6..e93d88c3eb53 100644 --- a/src/styles/StyleUtils.ts +++ b/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): ViewStyle { if (environment === CONST.ENVIRONMENT.DEV) { return isSmallScreenWidth ? {width: variables.signInLogoWidthPill} : {width: variables.signInLogoWidthLargeScreenPill}; }