From ddba55a59ab987b8b554341448b0e75d61b1327e Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 30 Nov 2023 10:57:25 +0100 Subject: [PATCH 1/3] fix: amend missed imports --- src/components/Button/index.tsx | 7 +++---- src/components/Icon/index.tsx | 14 ++++++++------ src/components/MapView/MapView.tsx | 3 ++- src/components/MapView/MapView.web.tsx | 9 ++++++--- src/components/ShowMoreButton/index.js | 8 +++++--- src/components/withTheme.tsx | 2 +- src/pages/home/report/ReportActionItem.js | 8 +++++--- src/pages/home/report/ReportActionItemSingle.js | 7 ++++--- 8 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 71bce9777174..8d5833a121ca 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -9,7 +9,6 @@ import Text from '@components/Text'; import withNavigationFallback from '@components/withNavigationFallback'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import HapticFeedback from '@libs/HapticFeedback'; -import themeColors from '@styles/themes/default'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; @@ -118,7 +117,7 @@ function Button( allowBubble = false, iconRight = Expensicons.ArrowRight, - iconFill = themeColors.textLight, + iconFill, iconStyles = [], iconRightStyles = [], @@ -214,7 +213,7 @@ function Button( @@ -225,7 +224,7 @@ function Button( diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 82a5045b7ad4..1c21d1ae9426 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,8 +1,9 @@ import React, {PureComponent} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles'; +import withTheme, {ThemeProps} from "@components/withTheme"; +import compose from '@libs/compose'; import * as StyleUtils from '@styles/StyleUtils'; -import themeColors from '@styles/themes/default'; import variables from '@styles/variables'; import IconWrapperStyles from './IconWrapperStyles'; @@ -41,7 +42,7 @@ type IconProps = { /** Additional styles to add to the Icon */ additionalStyles?: StyleProp; -} & ThemeStylesProps; +} & ThemeStylesProps & ThemeProps; // We must use a class component to create an animatable component with the Animated API // eslint-disable-next-line react/prefer-stateless-function @@ -50,7 +51,7 @@ class Icon extends PureComponent { public static defaultProps = { width: variables.iconSizeNormal, height: variables.iconSizeNormal, - fill: themeColors.icon, + fill: undefined, small: false, inline: false, additionalStyles: [], @@ -62,6 +63,7 @@ class Icon extends PureComponent { const width = this.props.small ? variables.iconSizeSmall : this.props.width; const height = this.props.small ? variables.iconSizeSmall : this.props.height; const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles]; + const fill = this.props.fill ?? this.props.theme.icon; if (this.props.inline) { return ( @@ -73,7 +75,7 @@ class Icon extends PureComponent { @@ -90,7 +92,7 @@ class Icon extends PureComponent { @@ -99,4 +101,4 @@ class Icon extends PureComponent { } } -export default withThemeStyles(Icon); +export default compose(withTheme, withThemeStyles)(Icon); diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index db3e076eacca..eaafd7fc9f7e 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx'; import setUserLocation from '@libs/actions/UserLocation'; import compose from '@libs/compose'; import getCurrentPosition from '@libs/getCurrentPosition'; -import styles from '@styles/styles'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; import ONYXKEYS from '@src/ONYXKEYS'; +import useThemeStyles from "@styles/useThemeStyles"; import Direction from './Direction'; import {MapViewHandle} from './MapViewTypes'; import PendingMapView from './PendingMapView'; @@ -23,6 +23,7 @@ const MapView = forwardRef( const navigation = useNavigation(); const {isOffline} = useNetwork(); const {translate} = useLocalize(); + const styles = useThemeStyles(); const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx index 1880049b3542..87ec8a25093e 100644 --- a/src/components/MapView/MapView.web.tsx +++ b/src/components/MapView/MapView.web.tsx @@ -10,14 +10,14 @@ import Map, {MapRef, Marker} from 'react-map-gl'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import * as StyleUtils from '@styles/StyleUtils'; -import themeColors from '@styles/themes/default'; import setUserLocation from '@userActions/UserLocation'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; import getCurrentPosition from '@src/libs/getCurrentPosition'; import ONYXKEYS from '@src/ONYXKEYS'; -import styles from '@src/styles/styles'; +import useTheme from "@styles/themes/useTheme"; +import useThemeStyles from "@styles/useThemeStyles"; import Direction from './Direction'; import './mapbox.css'; import {MapViewHandle} from './MapViewTypes'; @@ -43,6 +43,9 @@ const MapView = forwardRef( const {isOffline} = useNetwork(); const {translate} = useLocalize(); + const theme = useTheme(); + const styles = useThemeStyles(); + const [mapRef, setMapRef] = useState(null); const [currentPosition, setCurrentPosition] = useState(cachedUserLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); @@ -179,7 +182,7 @@ const MapView = forwardRef( latitude: currentPosition?.latitude, zoom: initialState.zoom, }} - style={StyleUtils.getTextColorStyle(themeColors.mapAttributionText) as React.CSSProperties} + style={StyleUtils.getTextColorStyle(theme.mapAttributionText) as React.CSSProperties} mapStyle={styleURL} > {waypoints?.map(({coordinate, markerComponent, id}) => { diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js index f983a468cc1c..b47b8bed1932 100644 --- a/src/components/ShowMoreButton/index.js +++ b/src/components/ShowMoreButton/index.js @@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; import * as NumberFormatUtils from '@libs/NumberFormatUtils'; import stylePropTypes from '@styles/stylePropTypes'; -import styles from '@styles/styles'; -import themeColors from '@styles/themes/default'; +import useTheme from "@styles/themes/useTheme"; +import useThemeStyles from "@styles/useThemeStyles"; const propTypes = { /** Additional styles for container */ @@ -32,6 +32,8 @@ const defaultProps = { function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) { const {translate, preferredLocale} = useLocalize(); + const theme = useTheme(); + const styles = useThemeStyles(); const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount); @@ -51,7 +53,7 @@ function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) { style={styles.mh0} small shouldShowRightIcon - iconFill={themeColors.icon} + iconFill={theme.icon} iconRight={Expensicons.DownArrow} text={translate('common.showMore')} accessibilityLabel={translate('common.showMore')} diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx index d78742b7036b..451292f1a66f 100644 --- a/src/components/withTheme.tsx +++ b/src/components/withTheme.tsx @@ -29,4 +29,4 @@ export default function withTheme( return forwardRef(WithTheme); } -export {withThemePropTypes}; +export {withThemePropTypes, type ThemeProps}; diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 828a793a8565..5ce7683fb6bf 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -45,9 +45,7 @@ import SelectionScraper from '@libs/SelectionScraper'; import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes'; import {ReactionListContext} from '@pages/home/ReportScreenContext'; import reportPropTypes from '@pages/reportPropTypes'; -import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; -import themeColors from '@styles/themes/default'; import * as BankAccounts from '@userActions/BankAccounts'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as store from '@userActions/ReimbursementAccount/store'; @@ -58,6 +56,8 @@ import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import useThemeStyles from "@styles/useThemeStyles"; +import useTheme from "@styles/themes/useTheme"; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import * as ContextMenuActions from './ContextMenu/ContextMenuActions'; import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu'; @@ -142,13 +142,15 @@ function ReportActionItem(props) { const {updateHiddenAttachments} = useContext(ReportAttachmentsContext); const textInputRef = useRef(); const popoverAnchorRef = useRef(); + const styles = useThemeStyles(); + const theme = useTheme(); const downloadedPreviews = useRef([]); const prevDraftMessage = usePrevious(props.draftMessage); const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action); const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID); const isReportActionLinked = props.linkedReportActionID === props.action.reportActionID; - const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(themeColors.highlightBG) : {}), [isReportActionLinked]); + const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme.highlightBG]); const originalMessage = lodashGet(props.action, 'originalMessage', {}); // IOUDetails only exists when we are sending money diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 9c641d879de3..911a5e0aa69a 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -21,8 +21,8 @@ import * as UserUtils from '@libs/UserUtils'; import reportPropTypes from '@pages/reportPropTypes'; import stylePropTypes from '@styles/stylePropTypes'; import * as StyleUtils from '@styles/StyleUtils'; -import themeColors from '@styles/themes/default'; import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from "@styles/themes/useTheme"; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import ReportActionItemDate from './ReportActionItemDate'; @@ -80,6 +80,7 @@ const showWorkspaceDetails = (reportID) => { function ReportActionItemSingle(props) { const styles = useThemeStyles(); + const theme = useTheme(); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID; let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); @@ -167,8 +168,8 @@ function ReportActionItemSingle(props) { isInReportAction shouldShowTooltip secondAvatarStyle={[ - StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG), - props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG) : undefined, + StyleUtils.getBackgroundAndBorderStyle(theme.appBG), + props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined, ]} /> ); From 34272607f75358d514611999030161abdc1f3e7e Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 30 Nov 2023 11:05:28 +0100 Subject: [PATCH 2/3] fix: run lint --- src/components/Icon/index.tsx | 5 +++-- src/components/MapView/MapView.tsx | 2 +- src/components/MapView/MapView.web.tsx | 4 ++-- src/components/ShowMoreButton/index.js | 4 ++-- src/pages/home/report/ReportActionItem.js | 4 ++-- src/pages/home/report/ReportActionItemSingle.js | 7 ++----- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 1c21d1ae9426..7b3249798046 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,7 +1,7 @@ import React, {PureComponent} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; +import withTheme, {ThemeProps} from '@components/withTheme'; import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles'; -import withTheme, {ThemeProps} from "@components/withTheme"; import compose from '@libs/compose'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; @@ -42,7 +42,8 @@ type IconProps = { /** Additional styles to add to the Icon */ additionalStyles?: StyleProp; -} & ThemeStylesProps & ThemeProps; +} & ThemeStylesProps & + ThemeProps; // We must use a class component to create an animatable component with the Animated API // eslint-disable-next-line react/prefer-stateless-function diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index eaafd7fc9f7e..91f9d9930079 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx'; import setUserLocation from '@libs/actions/UserLocation'; import compose from '@libs/compose'; import getCurrentPosition from '@libs/getCurrentPosition'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; import ONYXKEYS from '@src/ONYXKEYS'; -import useThemeStyles from "@styles/useThemeStyles"; import Direction from './Direction'; import {MapViewHandle} from './MapViewTypes'; import PendingMapView from './PendingMapView'; diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx index 87ec8a25093e..f32413cbc15d 100644 --- a/src/components/MapView/MapView.web.tsx +++ b/src/components/MapView/MapView.web.tsx @@ -10,14 +10,14 @@ import Map, {MapRef, Marker} from 'react-map-gl'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import setUserLocation from '@userActions/UserLocation'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; import getCurrentPosition from '@src/libs/getCurrentPosition'; import ONYXKEYS from '@src/ONYXKEYS'; -import useTheme from "@styles/themes/useTheme"; -import useThemeStyles from "@styles/useThemeStyles"; import Direction from './Direction'; import './mapbox.css'; import {MapViewHandle} from './MapViewTypes'; diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js index b47b8bed1932..5f1620ac7c88 100644 --- a/src/components/ShowMoreButton/index.js +++ b/src/components/ShowMoreButton/index.js @@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; import * as NumberFormatUtils from '@libs/NumberFormatUtils'; import stylePropTypes from '@styles/stylePropTypes'; -import useTheme from "@styles/themes/useTheme"; -import useThemeStyles from "@styles/useThemeStyles"; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** Additional styles for container */ diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 5ce7683fb6bf..ae07503b6e9c 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -46,6 +46,8 @@ import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes'; import {ReactionListContext} from '@pages/home/ReportScreenContext'; import reportPropTypes from '@pages/reportPropTypes'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as store from '@userActions/ReimbursementAccount/store'; @@ -56,8 +58,6 @@ import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import useThemeStyles from "@styles/useThemeStyles"; -import useTheme from "@styles/themes/useTheme"; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import * as ContextMenuActions from './ContextMenu/ContextMenuActions'; import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu'; diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 911a5e0aa69a..c50f868cae99 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -21,8 +21,8 @@ import * as UserUtils from '@libs/UserUtils'; import reportPropTypes from '@pages/reportPropTypes'; import stylePropTypes from '@styles/stylePropTypes'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; -import useTheme from "@styles/themes/useTheme"; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import ReportActionItemDate from './ReportActionItemDate'; @@ -167,10 +167,7 @@ function ReportActionItemSingle(props) { icons={[icon, secondaryAvatar]} isInReportAction shouldShowTooltip - secondAvatarStyle={[ - StyleUtils.getBackgroundAndBorderStyle(theme.appBG), - props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined, - ]} + secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined]} /> ); } From c5d677ecf27255103bbcd5c79a7143b30ce4d14b Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 30 Nov 2023 11:54:06 +0100 Subject: [PATCH 3/3] fix: export fix --- src/components/Icon/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 7b3249798046..98449c838b67 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -2,7 +2,6 @@ import React, {PureComponent} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import withTheme, {ThemeProps} from '@components/withTheme'; import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles'; -import compose from '@libs/compose'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; import IconWrapperStyles from './IconWrapperStyles'; @@ -102,4 +101,4 @@ class Icon extends PureComponent { } } -export default compose(withTheme, withThemeStyles)(Icon); +export default withTheme(withThemeStyles(Icon));