Skip to content

Commit

Permalink
Merge pull request Expensify#31774 from koko57/feat/31678-theme-switc…
Browse files Browse the repository at this point in the history 
…hing-migration-selectionlist-batch

Feat/31678 theme switching migration selectionlist batch
  • Loading branch information
@grgia
grgia authored Nov 29, 2023
2 parents 0483854 + bd315c8 commit daceac6
Show file tree
Hide file tree
Showing 11 changed files with 106 additions and 65 deletions.
10 changes: 5 additions & 5 deletions src/components/Icon/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {PureComponent} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import styles from '@styles/styles';
import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
import * as StyleUtils from '@styles/StyleUtils';
import themeColors from '@styles/themes/default';
import variables from '@styles/variables';
Expand Down Expand Up @@ -41,7 +41,7 @@ type IconProps = {

/** Additional styles to add to the Icon */
additionalStyles?: StyleProp<ViewStyle>;
};
} & ThemeStylesProps;

// We must use a class component to create an animatable component with the Animated API
// eslint-disable-next-line react/prefer-stateless-function
Expand All @@ -61,13 +61,13 @@ class Icon extends PureComponent<IconProps> {
render() {
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, styles.pAbsolute, this.props.additionalStyles];
const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];

if (this.props.inline) {
return (
<View
testID={`${this.props.src.name} Icon`}
style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
>
<View style={iconStyles}>
<this.props.src
Expand Down Expand Up @@ -99,4 +99,4 @@ class Icon extends PureComponent<IconProps> {
}
}

export default Icon;
export default withThemeStyles(Icon);
2 changes: 1 addition & 1 deletion src/components/LHNOptionsList/OptionRowLHN.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ function OptionRowLHN(props) {
props.style,
);
const contentContainerStyles =
props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1];
props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles(styles)] : [styles.flex1];
const sidebarInnerRowStyle = StyleSheet.flatten(
props.viewMode === CONST.OPTION_MODE.COMPACT
? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
Expand Down
56 changes: 32 additions & 24 deletions src/components/MultipleAvatars.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {ValueOf} from 'type-fest';
import {AvatarSource} from '@libs/UserUtils';
import styles from '@styles/styles';
import * as StyleUtils from '@styles/StyleUtils';
import themeColors from '@styles/themes/default';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type {Icon} from '@src/types/onyx/OnyxCommon';
Expand Down Expand Up @@ -63,26 +63,11 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S

type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;

const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
[CONST.AVATAR_SIZE.SMALL]: {
singleAvatarStyle: styles.singleAvatarSmall,
secondAvatarStyles: styles.secondAvatarSmall,
},
[CONST.AVATAR_SIZE.LARGE]: {
singleAvatarStyle: styles.singleAvatarMedium,
secondAvatarStyles: styles.secondAvatarMedium,
},
[CONST.AVATAR_SIZE.DEFAULT]: {
singleAvatarStyle: styles.singleAvatar,
secondAvatarStyles: styles.secondAvatar,
},
};

function MultipleAvatars({
fallbackIcon,
icons = [],
size = CONST.AVATAR_SIZE.DEFAULT,
secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
secondAvatarStyle: secondAvatarStyleProp,
shouldStackHorizontally = false,
shouldDisplayAvatarsInRows = false,
isHovered = false,
Expand All @@ -93,8 +78,31 @@ function MultipleAvatars({
shouldUseCardBackground = false,
maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
}: MultipleAvatarsProps) {
const theme = useTheme();
const styles = useThemeStyles();

const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
() => ({
[CONST.AVATAR_SIZE.SMALL]: {
singleAvatarStyle: styles.singleAvatarSmall,
secondAvatarStyles: styles.secondAvatarSmall,
},
[CONST.AVATAR_SIZE.LARGE]: {
singleAvatarStyle: styles.singleAvatarMedium,
secondAvatarStyles: styles.secondAvatarMedium,
},
[CONST.AVATAR_SIZE.DEFAULT]: {
singleAvatarStyle: styles.singleAvatar,
secondAvatarStyles: styles.secondAvatar,
},
}),
[styles],
);

const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];

let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);

const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
const avatarSize = useMemo(() => {
Expand Down Expand Up @@ -143,7 +151,7 @@ function MultipleAvatars({
<Avatar
source={icons[0].source}
size={size}
fill={themeColors.iconSuccessFill}
fill={theme.iconSuccessFill}
name={icons[0].name}
type={icons[0].type}
fallbackIcon={icons[0].fallbackIcon}
Expand Down Expand Up @@ -193,7 +201,7 @@ function MultipleAvatars({
StyleUtils.getAvatarBorderWidth(size),
]}
source={icon.source ?? fallbackIcon}
fill={themeColors.iconSuccessFill}
fill={theme.iconSuccessFill}
size={size}
name={icon.name}
type={icon.type}
Expand All @@ -219,7 +227,7 @@ function MultipleAvatars({
}),

// Set overlay background color with RGBA value so that the text will not inherit opacity
StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
]}
Expand Down Expand Up @@ -256,7 +264,7 @@ function MultipleAvatars({
<View>
<Avatar
source={icons[0].source ?? fallbackIcon}
fill={themeColors.iconSuccessFill}
fill={theme.iconSuccessFill}
size={avatarSize}
imageStyles={[singleAvatarStyle]}
name={icons[0].name}
Expand All @@ -277,7 +285,7 @@ function MultipleAvatars({
<View>
<Avatar
source={icons[1].source ?? fallbackIcon}
fill={themeColors.iconSuccessFill}
fill={theme.iconSuccessFill}
size={avatarSize}
imageStyles={[singleAvatarStyle]}
name={icons[1].name}
Expand Down
10 changes: 6 additions & 4 deletions src/components/OfflineWithFeedback.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import _ from 'underscore';
import useNetwork from '@hooks/useNetwork';
import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
import stylePropTypes from '@styles/stylePropTypes';
import styles from '@styles/styles';
import * as StyleUtils from '@styles/StyleUtils';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import MessagesRow from './MessagesRow';

Expand Down Expand Up @@ -76,22 +76,24 @@ const defaultProps = {
/**
* This method applies the strikethrough to all the children passed recursively
* @param {Array} children
* @param {Object} styles
* @return {Array}
*/
function applyStrikeThrough(children) {
function applyStrikeThrough(children, styles) {
return React.Children.map(children, (child) => {
if (!React.isValidElement(child)) {
return child;
}
const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
if (child.props.children) {
props.children = applyStrikeThrough(child.props.children);
props.children = applyStrikeThrough(child.props.children, styles);
}
return React.cloneElement(child, props);
});
}

function OfflineWithFeedback(props) {
const styles = useThemeStyles();
const {isOffline} = useNetwork();

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

// Apply strikethrough to children if needed, but skip it if we are not going to render them
if (needsStrikeThrough && !hideChildren) {
children = applyStrikeThrough(children);
children = applyStrikeThrough(children, styles);
}
return (
<View style={props.style}>
Expand Down
Loading

0 comments on commit daceac6

Please sign in to comment.