Merge pull request Expensify#31728 from rezkiy37/feature/31682-theme-…

…switching-migration-report

[Theme Switching Migration] Report

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js

@@ -3,11 +3,12 @@ import {StyleSheet, View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
 function AttachmentViewPdf(props) {
+    const styles = useThemeStyles();
     const {onScaleChanged, ...restProps} = props;
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const scaleRef = useSharedValue(1);
@@ -41,7 +42,7 @@ function AttachmentViewPdf(props) {
     return (
         <View
             collapsable={false}
-            style={[styles.flex1]}
+            style={styles.flex1}
         >
             <GestureDetector gesture={Pan}>
                 <Animated.View

src/components/ContextMenuItem.js

@@ -98,7 +98,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
             success={!isThrottledButtonActive}
             description={description}
             descriptionTextStyle={styles.breakAll}
-            style={getContextMenuItemStyles(windowWidth)}
+            style={getContextMenuItemStyles(styles, windowWidth)}
             isAnonymousAction={isAnonymousAction}
             focused={isFocused}
             interactive={isThrottledButtonActive}

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -4,7 +4,7 @@ import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvide
 import _ from 'underscore';
 import convertToLTR from '@libs/convertToLTR';
 import singleFontFamily from '@styles/fontFamily/singleFontFamily';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
 
@@ -24,45 +24,49 @@ const defaultProps = {
     enableExperimentalBRCollapsing: false,
 };
 
-// Declare nonstandard tags and their content model here
-const customHTMLElementModels = {
-    edited: defaultHTMLElementModels.span.extend({
-        tagName: 'edited',
-    }),
-    'alert-text': defaultHTMLElementModels.div.extend({
-        tagName: 'alert-text',
-        mixedUAStyles: {...styles.formError, ...styles.mb0},
-    }),
-    'muted-text': defaultHTMLElementModels.div.extend({
-        tagName: 'muted-text',
-        mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
-    }),
-    comment: defaultHTMLElementModels.div.extend({
-        tagName: 'comment',
-        mixedUAStyles: {whiteSpace: 'pre'},
-    }),
-    'email-comment': defaultHTMLElementModels.div.extend({
-        tagName: 'email-comment',
-        mixedUAStyles: {whiteSpace: 'normal'},
-    }),
-    strong: defaultHTMLElementModels.span.extend({
-        tagName: 'strong',
-        mixedUAStyles: {whiteSpace: 'pre'},
-    }),
-    'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
-    'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
-};
-
-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
-
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // Beware that each prop should be referentialy stable between renders to avoid
 // costly invalidations and commits.
 function BaseHTMLEngineProvider(props) {
+    const styles = useThemeStyles();
+
+    // Declare nonstandard tags and their content model here
+    const customHTMLElementModels = useMemo(
+        () => ({
+            edited: defaultHTMLElementModels.span.extend({
+                tagName: 'edited',
+            }),
+            'alert-text': defaultHTMLElementModels.div.extend({
+                tagName: 'alert-text',
+                mixedUAStyles: {...styles.formError, ...styles.mb0},
+            }),
+            'muted-text': defaultHTMLElementModels.div.extend({
+                tagName: 'muted-text',
+                mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
+            }),
+            comment: defaultHTMLElementModels.div.extend({
+                tagName: 'comment',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
+            'email-comment': defaultHTMLElementModels.div.extend({
+                tagName: 'email-comment',
+                mixedUAStyles: {whiteSpace: 'normal'},
+            }),
+            strong: defaultHTMLElementModels.span.extend({
+                tagName: 'strong',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
+            'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
+            'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
+        }),
+        [styles.colorMuted, styles.formError, styles.mb0],
+    );
+
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
+    const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
 
     return (
         <TRenderEngineProvider

src/components/InlineSystemMessage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
-import theme from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
@@ -12,6 +12,9 @@ type InlineSystemMessageProps = {
 };
 
 function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     if (!message) {
         return null;
     }

src/components/MenuItem.js

@@ -7,9 +7,9 @@ import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
-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 * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
@@ -38,11 +38,11 @@ const defaultProps = {
     shouldShowHeaderTitle: false,
     shouldParseTitle: false,
     wrapperStyle: [],
-    style: styles.popoverMenuItem,
+    style: undefined,
     titleStyle: {},
     shouldShowTitleIcon: false,
     titleIcon: () => {},
-    descriptionTextStyle: styles.breakWord,
+    descriptionTextStyle: undefined,
     success: false,
     icon: undefined,
     secondaryIcon: undefined,
@@ -86,10 +86,13 @@ const defaultProps = {
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const style = props.style || styles.popoverMenuItem;
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');
 
-    const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
+    const isDeleted = _.contains(style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const titleTextStyle = StyleUtils.combineStyles(
         [
@@ -109,7 +112,7 @@ const MenuItem = React.forwardRef((props, ref) => {
         styles.textLabelSupporting,
         props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
         props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        props.descriptionTextStyle,
+        props.descriptionTextStyle || styles.breakWord,
         isDeleted ? styles.offlineFeedback.deleted : undefined,
     ]);
 
@@ -176,7 +179,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={props.onSecondaryInteraction}
                     style={({pressed}) => [
-                        props.style,
+                        style,
                         !props.interactive && styles.cursorDefault,
                         StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
                         (isHovered || pressed) && props.hoverAndPressStyle,
@@ -206,9 +209,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             icons={props.icon}
                                             size={props.avatarSize}
                                             secondAvatarStyle={[
-                                                StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
-                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
-                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
+                                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
+                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
                                             ]}
                                         />
                                     )}
@@ -291,7 +294,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 <View style={[styles.ml2]}>
                                                     <Icon
                                                         src={props.titleIcon}
-                                                        fill={themeColors.iconSuccessFill}
+                                                        fill={theme.iconSuccessFill}
                                                     />
                                                 </View>
                                             )}
@@ -342,7 +345,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
                                 {(props.subtitle || props.subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, style]}>{props.subtitle}</Text>
                                     </View>
                                 )}
                                 {!_.isEmpty(props.floatRightAvatars) && (
@@ -361,7 +364,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={props.brickRoadIndicator === 'error' ? themeColors.danger : themeColors.success}
+                                            fill={props.brickRoadIndicator === 'error' ? theme.danger : theme.success}
                                         />
                                     </View>
                                 )}

src/components/PDFView/index.js

@@ -10,10 +10,10 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize from '@components/withLocalize';
+import withThemeStyles from '@components/withThemeStyles';
 import withWindowDimensions from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import * as CanvasSize from '@userActions/CanvasSize';
 import CONST from '@src/CONST';
@@ -262,6 +262,7 @@ class PDFView extends Component {
     }
 
     renderPDFView() {
+        const styles = this.props.themeStyles;
         const pageWidth = this.calculatePageWidth();
         const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter];
 
@@ -323,6 +324,7 @@ class PDFView extends Component {
     }
 
     render() {
+        const styles = this.props.themeStyles;
         return this.props.onPress ? (
             <PressableWithoutFeedback
                 onPress={this.props.onPress}
@@ -344,6 +346,7 @@ PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 export default compose(
     withLocalize,
     withWindowDimensions,
+    withThemeStyles,
     withOnyx({
         maxCanvasArea: {
             key: ONYXKEYS.MAX_CANVAS_AREA,

src/components/PDFView/pdfViewPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import stylePropTypes from '@styles/stylePropTypes';
 
@@ -31,6 +32,8 @@ const propTypes = {
     errorLabelStyles: stylePropTypes,
 
     ...windowDimensionsPropTypes,
+
+    ...withThemeStylesPropTypes,
 };
 
 const defaultProps = {

src/pages/home/report/ReportActionItem.js

@@ -544,7 +544,7 @@ function ReportActionItem(props) {
                 <ReportActionItemSingle
                     action={props.action}
                     showHeader={!props.draftMessage}
-                    wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}
+                    wrapperStyle={isWhisper ? styles.pt1 : {}}
                     shouldShowSubscriptAvatar={props.shouldShowSubscriptAvatar}
                     report={props.report}
                     iouReport={props.iouReport}
@@ -556,7 +556,7 @@ function ReportActionItem(props) {
             );
         }
 
-        return <ReportActionItemGrouped wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}>{content}</ReportActionItemGrouped>;
+        return <ReportActionItemGrouped wrapperStyle={isWhisper ? styles.pt1 : {}}>{content}</ReportActionItemGrouped>;
     };
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
@@ -586,7 +586,6 @@ function ReportActionItem(props) {
                             <ReportActionItemSingle
                                 action={parentReportAction}
                                 showHeader={!props.draftMessage}
-                                wrapperStyles={[styles.chatItem]}
                                 report={props.report}
                             >
                                 <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />

src/pages/home/report/ReportActionItemGrouped.js

@@ -1,25 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Children view component for this action item */
     children: PropTypes.node.isRequired,
 
     /** Styles for the outermost View */
-    // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyles: PropTypes.arrayOf(PropTypes.object),
+    wrapperStyle: stylePropTypes,
 };
 
 const defaultProps = {
-    wrapperStyles: [styles.chatItem],
+    wrapperStyle: undefined,
 };
 
-function ReportActionItemGrouped(props) {
+function ReportActionItemGrouped({wrapperStyle, children}) {
+    const styles = useThemeStyles();
     return (
-        <View style={props.wrapperStyles}>
-            <View style={[styles.chatItemRightGrouped]}>{props.children}</View>
+        <View style={[styles.chatItem, wrapperStyle]}>
+            <View style={styles.chatItemRightGrouped}>{children}</View>
         </View>
     );
 }

src/pages/home/report/ReportActionItemSingle.js

@@ -19,9 +19,10 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
@@ -33,8 +34,7 @@ const propTypes = {
     action: PropTypes.shape(reportActionPropTypes).isRequired,
 
     /** Styles for the outermost View */
-    // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyles: PropTypes.arrayOf(PropTypes.object),
+    wrapperStyle: stylePropTypes,
 
     /** Children view component for this action item */
     children: PropTypes.node.isRequired,
@@ -61,7 +61,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    wrapperStyles: [styles.chatItem],
+    wrapperStyle: undefined,
     showHeader: true,
     shouldShowSubscriptAvatar: false,
     hasBeenFlagged: false,
@@ -79,6 +79,7 @@ const showWorkspaceDetails = (reportID) => {
 };
 
 function ReportActionItemSingle(props) {
+    const styles = useThemeStyles();
     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);
@@ -207,7 +208,7 @@ function ReportActionItemSingle(props) {
     const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;
 
     return (
-        <View style={props.wrapperStyles}>
+        <View style={[styles.chatItem, props.wrapperStyle]}>
             <PressableWithoutFeedback
                 style={[styles.alignSelfStart, styles.mr3]}
                 onPressIn={ControlSelection.block}