From a509fefa27c3ddddfae4c16552608eb50f060071 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Fri, 24 Nov 2023 10:28:15 +0100 Subject: [PATCH 1/5] ConfirmedRoute --- src/components/ConfirmedRoute.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js index 656e419449b3..efb490263120 100644 --- a/src/components/ConfirmedRoute.js +++ b/src/components/ConfirmedRoute.js @@ -6,8 +6,8 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import useNetwork from '@hooks/useNetwork'; import * as TransactionUtils from '@libs/TransactionUtils'; -import styles from '@styles/styles'; -import theme from '@styles/themes/default'; +import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@styles/themes/useTheme'; import * as MapboxToken from '@userActions/MapboxToken'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -40,6 +40,8 @@ const defaultProps = { const getWaypointMarkers = (waypoints) => { const numberOfWaypoints = _.size(waypoints); const lastWaypointIndex = numberOfWaypoints - 1; + const theme = useTheme(); + return _.filter( _.map(waypoints, (waypoint, key) => { if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) { @@ -78,6 +80,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) { const waypoints = lodashGet(transaction, 'comment.waypoints', {}); const coordinates = lodashGet(route, 'geometry.coordinates', []); const waypointMarkers = getWaypointMarkers(waypoints); + const styles = useThemeStyles(); useEffect(() => { MapboxToken.init(); From 674f1fc5899bfc945d040b14e6b88a3a349d7730 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Fri, 24 Nov 2023 10:39:27 +0100 Subject: [PATCH 2/5] TabSelector --- src/components/TabSelector/TabSelector.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index b6ee359dc4ca..3ee35fa57871 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -4,8 +4,8 @@ import {View} from 'react-native'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; -import styles from '@styles/styles'; -import themeColors from '@styles/themes/default'; +import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@styles/themes/useTheme'; import CONST from '@src/CONST'; import TabSelectorItem from './TabSelectorItem'; @@ -69,20 +69,21 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => { }; const getBackgroundColor = (position, routesLength, tabIndex, affectedTabs) => { + const theme = useTheme(); if (routesLength > 1) { const inputRange = Array.from({length: routesLength}, (v, i) => i); return position.interpolate({ inputRange, - outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? themeColors.border : themeColors.appBG)), + outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.themeColors.border : theme.themeColors.appBG)), }); } - return themeColors.border; + return theme.themeColors.border; }; function TabSelector({state, navigation, onTabPress, position}) { const {translate} = useLocalize(); - + const styles = useThemeStyles(); const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]); const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs); From 571498248b79d8d809446921f8cc808f5233d7c2 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Fri, 24 Nov 2023 10:41:12 +0100 Subject: [PATCH 3/5] PendingMapView --- src/components/MapView/PendingMapView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index eed879596888..2acdb59d3782 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -4,13 +4,13 @@ import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import {PendingMapViewProps} from './MapViewTypes'; function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) { const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle); - + const styles = useThemeStyles(); return ( {hasTextContent ? ( From f89114d9e6ebb673f942462480c9ba22fe8a3f06 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Fri, 24 Nov 2023 11:08:41 +0100 Subject: [PATCH 4/5] apply useCallback for consts --- src/components/ConfirmedRoute.js | 84 ++++++++++++----------- src/components/TabSelector/TabSelector.js | 33 +++++---- 2 files changed, 62 insertions(+), 55 deletions(-) diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js index efb490263120..4c4c34851afb 100644 --- a/src/components/ConfirmedRoute.js +++ b/src/components/ConfirmedRoute.js @@ -1,13 +1,13 @@ import lodashGet from 'lodash/get'; import lodashIsNil from 'lodash/isNil'; import PropTypes from 'prop-types'; -import React, {useEffect} from 'react'; +import React, {useCallback, useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import useNetwork from '@hooks/useNetwork'; import * as TransactionUtils from '@libs/TransactionUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import * as MapboxToken from '@userActions/MapboxToken'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -37,50 +37,54 @@ const defaultProps = { }, }; -const getWaypointMarkers = (waypoints) => { - const numberOfWaypoints = _.size(waypoints); - const lastWaypointIndex = numberOfWaypoints - 1; - const theme = useTheme(); - - return _.filter( - _.map(waypoints, (waypoint, key) => { - if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) { - return; - } - - const index = TransactionUtils.getWaypointIndex(key); - let MarkerComponent; - if (index === 0) { - MarkerComponent = Expensicons.DotIndicatorUnfilled; - } else if (index === lastWaypointIndex) { - MarkerComponent = Expensicons.Location; - } else { - MarkerComponent = Expensicons.DotIndicator; - } - - return { - id: `${waypoint.lng},${waypoint.lat},${index}`, - coordinate: [waypoint.lng, waypoint.lat], - markerComponent: () => ( - - ), - }; - }), - (waypoint) => waypoint, - ); -}; - function ConfirmedRoute({mapboxAccessToken, transaction}) { const {isOffline} = useNetwork(); const {route0: route} = transaction.routes || {}; const waypoints = lodashGet(transaction, 'comment.waypoints', {}); const coordinates = lodashGet(route, 'geometry.coordinates', []); - const waypointMarkers = getWaypointMarkers(waypoints); const styles = useThemeStyles(); + const theme = useTheme(); + + const getWaypointMarkers = useCallback( + (waypointsData) => { + const numberOfWaypoints = _.size(waypointsData); + const lastWaypointIndex = numberOfWaypoints - 1; + + return _.filter( + _.map(waypointsData, (waypoint, key) => { + if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) { + return; + } + + const index = TransactionUtils.getWaypointIndex(key); + let MarkerComponent; + if (index === 0) { + MarkerComponent = Expensicons.DotIndicatorUnfilled; + } else if (index === lastWaypointIndex) { + MarkerComponent = Expensicons.Location; + } else { + MarkerComponent = Expensicons.DotIndicator; + } + + return { + id: `${waypoint.lng},${waypoint.lat},${index}`, + coordinate: [waypoint.lng, waypoint.lat], + markerComponent: () => ( + + ), + }; + }), + (waypoint) => waypoint, + ); + }, + [theme], + ); + + const waypointMarkers = getWaypointMarkers(waypoints); useEffect(() => { MapboxToken.init(); diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 3ee35fa57871..adc00a28ef79 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -1,11 +1,11 @@ import PropTypes from 'prop-types'; -import React, {useMemo, useState} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import TabSelectorItem from './TabSelectorItem'; @@ -68,25 +68,28 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => { return activeValue; }; -const getBackgroundColor = (position, routesLength, tabIndex, affectedTabs) => { - const theme = useTheme(); - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - return position.interpolate({ - inputRange, - outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.themeColors.border : theme.themeColors.appBG)), - }); - } - return theme.themeColors.border; -}; - function TabSelector({state, navigation, onTabPress, position}) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const theme = useTheme(); const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]); const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs); + const getBackgroundColor = useCallback( + (routesLength, tabIndex, affectedTabs) => { + if (routesLength > 1) { + const inputRange = Array.from({length: routesLength}, (v, i) => i); + + return position.interpolate({ + inputRange, + outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.themeColors.border : theme.themeColors.appBG)), + }); + } + return theme.themeColors.border; + }, + [theme.themeColors, position], + ); + React.useEffect(() => { // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition. setTimeout(() => { From a7ef88170e5a4061503f17dbdb8fe792d272bdfa Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Fri, 24 Nov 2023 11:59:11 +0100 Subject: [PATCH 5/5] fix theme --- src/components/TabSelector/TabSelector.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index adc00a28ef79..cdec2a7e91e1 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -82,12 +82,12 @@ function TabSelector({state, navigation, onTabPress, position}) { return position.interpolate({ inputRange, - outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.themeColors.border : theme.themeColors.appBG)), + outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG)), }); } - return theme.themeColors.border; + return theme.border; }, - [theme.themeColors, position], + [theme, position], ); React.useEffect(() => {