Skip to content

Commit

Permalink
Merge pull request Expensify#31034 from Expensify/Rory-AutomatedTheme…
Browse files Browse the repository at this point in the history
…HookMigration

[No QA] Automated theme hook migration
  • Loading branch information
grgia authored Nov 16, 2023
2 parents 2b4909d + d521dd6 commit 69a3358
Show file tree
Hide file tree
Showing 429 changed files with 1,533 additions and 975 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
**/node_modules/*
**/dist/*
.github/actions/**/index.js"
docs/vendor/**
8 changes: 5 additions & 3 deletions src/components/AddPlaidBankAccount.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import useNetwork from '@hooks/useNetwork';
import KeyboardShortcut from '@libs/KeyboardShortcut';
import Log from '@libs/Log';
import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
import styles from '@styles/styles';
import themeColors from '@styles/themes/default';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import * as App from '@userActions/App';
import * as BankAccounts from '@userActions/BankAccounts';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -83,6 +83,8 @@ function AddPlaidBankAccount({
allowDebit,
isPlaidDisabled,
}) {
const theme = useTheme();
const styles = useThemeStyles();
const subscribedKeyboardShortcuts = useRef([]);
const previousNetworkState = useRef();

Expand Down Expand Up @@ -186,7 +188,7 @@ function AddPlaidBankAccount({
{lodashGet(plaidData, 'isLoading') && (
<View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
<ActivityIndicator
color={themeColors.spinner}
color={theme.spinner}
size="large"
/>
</View>
Expand Down
3 changes: 2 additions & 1 deletion src/components/AddressSearch/CurrentLocationButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
import useLocalize from '@hooks/useLocalize';
import getButtonState from '@libs/getButtonState';
import colors from '@styles/colors';
import styles from '@styles/styles';
import * as StyleUtils from '@styles/StyleUtils';
import useThemeStyles from '@styles/useThemeStyles';

const propTypes = {
/** Callback that runs when location button is clicked */
Expand All @@ -24,6 +24,7 @@ const defaultProps = {
};

function CurrentLocationButton({onPress, isDisabled}) {
const styles = useThemeStyles();
const {translate} = useLocalize();

return (
Expand Down
12 changes: 7 additions & 5 deletions src/components/AddressSearch/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import * as ApiUtils from '@libs/ApiUtils';
import compose from '@libs/compose';
import getCurrentPosition from '@libs/getCurrentPosition';
import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
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 CurrentLocationButton from './CurrentLocationButton';
Expand Down Expand Up @@ -144,6 +144,8 @@ const defaultProps = {
// Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
// Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
function AddressSearch(props) {
const theme = useTheme();
const styles = useThemeStyles();
const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
const [isTyping, setIsTyping] = useState(false);
const [isFocused, setIsFocused] = useState(false);
Expand Down Expand Up @@ -392,7 +394,7 @@ function AddressSearch(props) {
listLoaderComponent={
<View style={[styles.pv4]}>
<ActivityIndicator
color={themeColors.spinner}
color={theme.spinner}
size="small"
/>
</View>
Expand Down Expand Up @@ -489,8 +491,8 @@ function AddressSearch(props) {
}}
numberOfLines={2}
isRowScrollable={false}
listHoverColor={themeColors.border}
listUnderlayColor={themeColors.buttonPressedBG}
listHoverColor={theme.border}
listUnderlayColor={theme.buttonPressedBG}
onLayout={(event) => {
// We use the height of the element to determine if we should hide the border of the listView dropdown
// to prevent a lingering border when there are no address suggestions.
Expand Down
3 changes: 2 additions & 1 deletion src/components/AmountTextInput.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import refPropTypes from './refPropTypes';
import TextInput from './TextInput';
Expand Down Expand Up @@ -39,6 +39,7 @@ const defaultProps = {
};

function AmountTextInput(props) {
const styles = useThemeStyles();
return (
<TextInput
disableKeyboard
Expand Down
3 changes: 2 additions & 1 deletion src/components/AnchorForAttachmentsOnly/index.native.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';

function AnchorForAttachmentsOnly(props) {
const styles = useThemeStyles();
return (
<BaseAnchorForAttachmentsOnly
// eslint-disable-next-line react/jsx-props-no-spreading
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
import styles from '@styles/styles';
import * as StyleUtils from '@styles/StyleUtils';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';

Expand All @@ -32,6 +32,7 @@ const propTypes = {
* This is a default anchor component for regular links.
*/
function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style = {}, onPress, ...rest}) {
const styles = useThemeStyles();
useEffect(
() => () => {
ReportActionContextMenu.hideContextMenu();
Expand Down
3 changes: 2 additions & 1 deletion src/components/AnonymousReportFooter.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import {Text, View} from 'react-native';
import reportPropTypes from '@pages/reportPropTypes';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import * as Session from '@userActions/Session';
import AvatarWithDisplayName from './AvatarWithDisplayName';
import Button from './Button';
Expand All @@ -29,6 +29,7 @@ const defaultProps = {
};

function AnonymousReportFooter(props) {
const styles = useThemeStyles();
return (
<View style={styles.anonymousRoomFooter(props.isSmallSizeLayout)}>
<View style={[styles.flexRow, styles.flexShrink1]}>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ArchivedReportFooter.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
import * as ReportUtils from '@libs/ReportUtils';
import personalDetailsPropType from '@pages/personalDetailsPropType';
import reportPropTypes from '@pages/reportPropTypes';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import Banner from './Banner';
Expand Down Expand Up @@ -50,6 +50,7 @@ const defaultProps = {
};

function ArchivedReportFooter(props) {
const styles = useThemeStyles();
const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [props.report.ownerAccountID, 'displayName']);

Expand Down
8 changes: 5 additions & 3 deletions src/components/AttachmentModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ import * as ReportUtils from '@libs/ReportUtils';
import * as TransactionUtils from '@libs/TransactionUtils';
import useNativeDriver from '@libs/useNativeDriver';
import reportPropTypes from '@pages/reportPropTypes';
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 * as IOU from '@userActions/IOU';
import * as Policy from '@userActions/Policy';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -111,6 +111,8 @@ const defaultProps = {
};

function AttachmentModal(props) {
const theme = useTheme();
const styles = useThemeStyles();
const onModalHideCallbackRef = useRef(null);
const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen);
const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
Expand Down Expand Up @@ -411,7 +413,7 @@ function AttachmentModal(props) {
onSubmit={submitAndClose}
onClose={closeModal}
isVisible={isModalOpen}
backgroundColor={themeColors.componentBG}
backgroundColor={theme.componentBG}
onModalShow={() => {
props.onModalShow();
setShouldLoadAttachment(true);
Expand Down
3 changes: 2 additions & 1 deletion src/components/AttachmentPicker/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
import useLocalize from '@hooks/useLocalize';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as FileUtils from '@libs/fileDownload/FileUtils';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
import launchCamera from './launchCamera';
Expand Down Expand Up @@ -101,6 +101,7 @@ const getDataForUpload = (fileData) => {
* @returns {JSX.Element}
*/
function AttachmentPicker({type, children, shouldHideCameraOption}) {
const styles = useThemeStyles();
const [isVisible, setIsVisible] = useState(false);

const completeAttachmentSelection = useRef();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import {PixelRatio, View} from 'react-native';
import useWindowDimensions from '@hooks/useWindowDimensions';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';

const propTypes = {
/** Cell Container styles */
Expand All @@ -14,6 +14,7 @@ const defaultProps = {
};

function AttachmentCarouselCellRenderer(props) {
const styles = useThemeStyles();
const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}];
Expand Down
10 changes: 6 additions & 4 deletions src/components/Attachments/AttachmentCarousel/CarouselButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
import Tooltip from '@components/Tooltip';
import useLocalize from '@hooks/useLocalize';
import useWindowDimensions from '@hooks/useWindowDimensions';
import styles from '@styles/styles';
import themeColors from '@styles/themes/default';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';

const propTypes = {
/** Where the arrows should be visible */
Expand All @@ -36,6 +36,8 @@ const defaultProps = {
};

function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow, autoHideArrow}) {
const theme = useTheme();
const styles = useThemeStyles();
const isBackDisabled = page === 0;
const isForwardDisabled = page === _.size(attachments) - 1;

Expand All @@ -51,7 +53,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
small
innerStyles={[styles.arrowIcon]}
icon={Expensicons.BackArrow}
iconFill={themeColors.text}
iconFill={theme.text}
iconStyles={[styles.mr0]}
onPress={onBack}
onPressIn={cancelAutoHideArrow}
Expand All @@ -67,7 +69,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
small
innerStyles={[styles.arrowIcon]}
icon={Expensicons.ArrowRight}
iconFill={themeColors.text}
iconFill={theme.text}
iconStyles={[styles.mr0]}
onPress={onForward}
onPressIn={cancelAutoHideArrow}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';

const propTypes = {
Expand Down Expand Up @@ -49,6 +49,7 @@ const defaultProps = {
};

function CarouselItem({item, isFocused, onPress}) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
// eslint-disable-next-line es/no-nullish-coalescing-operators
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import Animated, {
withDecay,
withSpring,
} from 'react-native-reanimated';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
import ImageWrapper from './ImageWrapper';

Expand Down Expand Up @@ -60,6 +60,7 @@ const imageTransformerDefaultProps = {
};

function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, scaledImageWidth, scaledImageHeight, isActive, children}) {
const styles = useThemeStyles();
const {canvasWidth, canvasHeight, onTap, onSwipe, onSwipeSuccess, pagerRef, shouldPagerScroll, isScrolling, onPinchGestureChange} = useContext(AttachmentCarouselPagerContext);

const minImageScale = useMemo(() => Math.min(imageScaleX, imageScaleY), [imageScaleX, imageScaleY]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import PropTypes from 'prop-types';
import React from 'react';
import {StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';

const imageWrapperPropTypes = {
children: PropTypes.node.isRequired,
};

function ImageWrapper({children}) {
const styles = useThemeStyles();
return (
<Animated.View
collapsable={false}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Attachments/AttachmentCarousel/Pager/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import PagerView from 'react-native-pager-view';
import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
import _ from 'underscore';
import refPropTypes from '@components/refPropTypes';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';

const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));
Expand Down Expand Up @@ -80,6 +80,7 @@ function AttachmentCarouselPager({
containerWidth,
containerHeight,
}) {
const styles = useThemeStyles();
const shouldPagerScroll = useSharedValue(true);
const pagerRef = useRef(null);

Expand Down
3 changes: 2 additions & 1 deletion src/components/Attachments/AttachmentCarousel/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import withWindowDimensions from '@components/withWindowDimensions';
import compose from '@libs/compose';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import Navigation from '@libs/Navigation/Navigation';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import ONYXKEYS from '@src/ONYXKEYS';
import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer';
Expand All @@ -28,6 +28,7 @@ const viewabilityConfig = {
};

function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction}) {
const styles = useThemeStyles();
const scrollRef = useRef(null);

const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
import withLocalize from '@components/withLocalize';
import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import ONYXKEYS from '@src/ONYXKEYS';
import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
Expand All @@ -19,6 +19,7 @@ import AttachmentCarouselPager from './Pager';
import useCarouselArrows from './useCarouselArrows';

function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction, onClose}) {
const styles = useThemeStyles();
const pagerRef = useRef(null);

const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import ImageView from '@components/ImageView';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import compose from '@libs/compose';
import styles from '@styles/styles';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';

Expand All @@ -13,6 +13,7 @@ const propTypes = {
};

function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, translate, onError}) {
const styles = useThemeStyles();
const children = (
<ImageView
onScaleChanged={onScaleChanged}
Expand Down
Loading

0 comments on commit 69a3358

Please sign in to comment.