Skip to content

Commit daceac6

Browse files
grgiagrgia
authored
Merge pull request #31774 from koko57/feat/31678-theme-switching-migration-selectionlist-batch
Feat/31678 theme switching migration selectionlist batch
2 parents 0483854 + bd315c8 commit daceac6

11 files changed

+106
-65
lines changed

‎src/components/Icon/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {PureComponent} from 'react';
22
import {StyleProp, View, ViewStyle} from 'react-native';
3-
import styles from '@styles/styles';
3+
import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
44
import * as StyleUtils from '@styles/StyleUtils';
55
import themeColors from '@styles/themes/default';
66
import variables from '@styles/variables';
@@ -41,7 +41,7 @@ type IconProps = {
4141

4242
/** Additional styles to add to the Icon */
4343
additionalStyles?: StyleProp<ViewStyle>;
44-
};
44+
} & ThemeStylesProps;
4545

4646
// We must use a class component to create an animatable component with the Animated API
4747
// eslint-disable-next-line react/prefer-stateless-function
@@ -61,13 +61,13 @@ class Icon extends PureComponent<IconProps> {
6161
render() {
6262
const width = this.props.small ? variables.iconSizeSmall : this.props.width;
6363
const height = this.props.small ? variables.iconSizeSmall : this.props.height;
64-
const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, this.props.additionalStyles];
64+
const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
6565

6666
if (this.props.inline) {
6767
return (
6868
<View
6969
testID={`${this.props.src.name} Icon`}
70-
style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
70+
style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
7171
>
7272
<View style={iconStyles}>
7373
<this.props.src
@@ -99,4 +99,4 @@ class Icon extends PureComponent<IconProps> {
9999
}
100100
}
101101

102-
export default Icon;
102+
export default withThemeStyles(Icon);

‎src/components/LHNOptionsList/OptionRowLHN.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ function OptionRowLHN(props) {
103103
props.style,
104104
);
105105
const contentContainerStyles =
106-
props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1];
106+
props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles(styles)] : [styles.flex1];
107107
const sidebarInnerRowStyle = StyleSheet.flatten(
108108
props.viewMode === CONST.OPTION_MODE.COMPACT
109109
? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]

‎src/components/MultipleAvatars.tsx

+32-24
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
22
import {StyleProp, View, ViewStyle} from 'react-native';
33
import {ValueOf} from 'type-fest';
44
import {AvatarSource} from '@libs/UserUtils';
5-
import styles from '@styles/styles';
65
import * as StyleUtils from '@styles/StyleUtils';
7-
import themeColors from '@styles/themes/default';
6+
import useTheme from '@styles/themes/useTheme';
7+
import useThemeStyles from '@styles/useThemeStyles';
88
import variables from '@styles/variables';
99
import CONST from '@src/CONST';
1010
import type {Icon} from '@src/types/onyx/OnyxCommon';
@@ -63,26 +63,11 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S
6363

6464
type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
6565

66-
const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
67-
[CONST.AVATAR_SIZE.SMALL]: {
68-
singleAvatarStyle: styles.singleAvatarSmall,
69-
secondAvatarStyles: styles.secondAvatarSmall,
70-
},
71-
[CONST.AVATAR_SIZE.LARGE]: {
72-
singleAvatarStyle: styles.singleAvatarMedium,
73-
secondAvatarStyles: styles.secondAvatarMedium,
74-
},
75-
[CONST.AVATAR_SIZE.DEFAULT]: {
76-
singleAvatarStyle: styles.singleAvatar,
77-
secondAvatarStyles: styles.secondAvatar,
78-
},
79-
};
80-
8166
function MultipleAvatars({
8267
fallbackIcon,
8368
icons = [],
8469
size = CONST.AVATAR_SIZE.DEFAULT,
85-
secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
70+
secondAvatarStyle: secondAvatarStyleProp,
8671
shouldStackHorizontally = false,
8772
shouldDisplayAvatarsInRows = false,
8873
isHovered = false,
@@ -93,8 +78,31 @@ function MultipleAvatars({
9378
shouldUseCardBackground = false,
9479
maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
9580
}: MultipleAvatarsProps) {
81+
const theme = useTheme();
82+
const styles = useThemeStyles();
83+
84+
const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
85+
() => ({
86+
[CONST.AVATAR_SIZE.SMALL]: {
87+
singleAvatarStyle: styles.singleAvatarSmall,
88+
secondAvatarStyles: styles.secondAvatarSmall,
89+
},
90+
[CONST.AVATAR_SIZE.LARGE]: {
91+
singleAvatarStyle: styles.singleAvatarMedium,
92+
secondAvatarStyles: styles.secondAvatarMedium,
93+
},
94+
[CONST.AVATAR_SIZE.DEFAULT]: {
95+
singleAvatarStyle: styles.singleAvatar,
96+
secondAvatarStyles: styles.secondAvatar,
97+
},
98+
}),
99+
[styles],
100+
);
101+
102+
const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
103+
96104
let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
97-
const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
105+
const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
98106

99107
const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
100108
const avatarSize = useMemo(() => {
@@ -143,7 +151,7 @@ function MultipleAvatars({
143151
<Avatar
144152
source={icons[0].source}
145153
size={size}
146-
fill={themeColors.iconSuccessFill}
154+
fill={theme.iconSuccessFill}
147155
name={icons[0].name}
148156
type={icons[0].type}
149157
fallbackIcon={icons[0].fallbackIcon}
@@ -193,7 +201,7 @@ function MultipleAvatars({
193201
StyleUtils.getAvatarBorderWidth(size),
194202
]}
195203
source={icon.source ?? fallbackIcon}
196-
fill={themeColors.iconSuccessFill}
204+
fill={theme.iconSuccessFill}
197205
size={size}
198206
name={icon.name}
199207
type={icon.type}
@@ -219,7 +227,7 @@ function MultipleAvatars({
219227
}),
220228

221229
// Set overlay background color with RGBA value so that the text will not inherit opacity
222-
StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
230+
StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
223231
StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
224232
icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
225233
]}
@@ -256,7 +264,7 @@ function MultipleAvatars({
256264
<View>
257265
<Avatar
258266
source={icons[0].source ?? fallbackIcon}
259-
fill={themeColors.iconSuccessFill}
267+
fill={theme.iconSuccessFill}
260268
size={avatarSize}
261269
imageStyles={[singleAvatarStyle]}
262270
name={icons[0].name}
@@ -277,7 +285,7 @@ function MultipleAvatars({
277285
<View>
278286
<Avatar
279287
source={icons[1].source ?? fallbackIcon}
280-
fill={themeColors.iconSuccessFill}
288+
fill={theme.iconSuccessFill}
281289
size={avatarSize}
282290
imageStyles={[singleAvatarStyle]}
283291
name={icons[1].name}

‎src/components/OfflineWithFeedback.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import _ from 'underscore';
55
import useNetwork from '@hooks/useNetwork';
66
import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
77
import stylePropTypes from '@styles/stylePropTypes';
8-
import styles from '@styles/styles';
98
import * as StyleUtils from '@styles/StyleUtils';
9+
import useThemeStyles from '@styles/useThemeStyles';
1010
import CONST from '@src/CONST';
1111
import MessagesRow from './MessagesRow';
1212

@@ -76,22 +76,24 @@ const defaultProps = {
7676
/**
7777
* This method applies the strikethrough to all the children passed recursively
7878
* @param {Array} children
79+
* @param {Object} styles
7980
* @return {Array}
8081
*/
81-
function applyStrikeThrough(children) {
82+
function applyStrikeThrough(children, styles) {
8283
return React.Children.map(children, (child) => {
8384
if (!React.isValidElement(child)) {
8485
return child;
8586
}
8687
const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
8788
if (child.props.children) {
88-
props.children = applyStrikeThrough(child.props.children);
89+
props.children = applyStrikeThrough(child.props.children, styles);
8990
}
9091
return React.cloneElement(child, props);
9192
});
9293
}
9394

9495
function OfflineWithFeedback(props) {
96+
const styles = useThemeStyles();
9597
const {isOffline} = useNetwork();
9698

9799
const hasErrors = !_.isEmpty(props.errors);
@@ -109,7 +111,7 @@ function OfflineWithFeedback(props) {
109111

110112
// Apply strikethrough to children if needed, but skip it if we are not going to render them
111113
if (needsStrikeThrough && !hideChildren) {
112-
children = applyStrikeThrough(children);
114+
children = applyStrikeThrough(children, styles);
113115
}
114116
return (
115117
<View style={props.style}>

0 commit comments

Comments
 (0)