diff --git a/.eslintrc.js b/.eslintrc.js index b71338d0c1a5..85a4e86797b6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -174,6 +174,7 @@ module.exports = { 'rulesdir/prefer-underscore-method': 'off', 'rulesdir/prefer-import-module-contents': 'off', 'react/require-default-props': 'off', + 'react/prop-types': 'off', 'no-restricted-syntax': [ 'error', { diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh index 1411fffc8389..193149e609af 100755 --- a/.github/scripts/findUnusedKeys.sh +++ b/.github/scripts/findUnusedKeys.sh @@ -6,10 +6,11 @@ LIB_PATH="$(cd "$(dirname "${BASH_SOURCE[0]}")" && cd ../../ && pwd)" readonly SRC_DIR="${LIB_PATH}/src" readonly STYLES_DIR="${LIB_PATH}/src/styles" -readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.ts" -readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities" +readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts" +readonly UTILS_STYLES_FILE="${LIB_PATH}/src/styles/utils" +readonly UTILS_STYLES_GENERATORS_FILE="${LIB_PATH}/src/styles/utils/generators" readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt" -readonly UTILITY_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt" +readonly UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/util_keys_list_temp.txt" readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt" readonly AMOUNT_LINES_TO_SHOW=3 @@ -29,7 +30,7 @@ ctrl_c() { delete_temp_files exit 1 } - + count_lines() { local file=$1 if [[ -e "$file" ]]; then @@ -43,11 +44,11 @@ count_lines() { show_unused_style_keywords() { while IFS=: read -r key file line_number; do title "File: $file:$line_number" - + # Get lines before and after the error line local lines_before=$((line_number - AMOUNT_LINES_TO_SHOW)) local lines_after=$((line_number + AMOUNT_LINES_TO_SHOW)) - + # Read the lines into an array local lines=() while IFS= read -r line; do @@ -84,14 +85,14 @@ lookfor_unused_keywords() { # Search for keywords starting with "styles" while IFS= read -r keyword; do - + # Remove any [ ] characters from the keyword local clean_keyword="${keyword//[\[\]]/}" # skip styles. keyword that might be used in comments if [[ "$clean_keyword" == "styles." ]]; then continue fi - + if ! remove_keyword "$clean_keyword" ; then # In case of a leaf of the styles object is being used, it means the parent objects is being used # we need to mark it as used. @@ -99,7 +100,7 @@ lookfor_unused_keywords() { # Keyword has more than two words, remove words after the second word local keyword_prefix="${clean_keyword%.*}" remove_keyword "$keyword_prefix" - fi + fi fi done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/') done < <(find "${SRC_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \)) @@ -134,10 +135,10 @@ find_styles_object_and_store_keys() { if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then continue fi - + if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then key="${BASH_REMATCH[2]%%:*{*)}" - echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE" + echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE" fi done < "$file" } @@ -225,7 +226,7 @@ find_theme_style_and_store_keys() { continue fi - + if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then # Removing all the extra lines after the ":" local key="${line%%:*}" @@ -295,63 +296,64 @@ lookfor_unused_spread_keywords() { done < "$STYLES_FILE" } -find_utility_styles_store_prefix() { +find_util_styles_store_prefix() { # Loop through all files in the src folder while read -r file; do # Search for keywords starting with "styles" while IFS= read -r keyword; do local variable="${keyword##*/}" local variable_trimmed="${variable// /}" # Trim spaces - - echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE" - done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/') + + echo "$variable_trimmed" >> "$UTIL_STYLES_KEYS_FILE" + done < <(grep -E -o './utils/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/') done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \)) # Sort and remove duplicates from the temporary file - sort -u -o "${UTILITY_STYLES_KEYS_FILE}" "${UTILITY_STYLES_KEYS_FILE}" + sort -u -o "${UTIL_STYLES_KEYS_FILE}" "${UTIL_STYLES_KEYS_FILE}" } -find_utility_usage_as_styles() { +find_util_usage_as_styles() { while read -r file; do local root_key local parent_dir - # Get the folder name, given this utility files are index.js + # Get the folder name, given this util files are index.js parent_dir=$(dirname "$file") root_key=$(basename "${parent_dir}") - if [[ "${root_key}" == "utilities" ]]; then + if [[ "${root_key}" == "utils" ]]; then continue fi find_theme_style_and_store_keys "${file}" 0 "${root_key}" - done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \)) + done < <(find "${UTILS_STYLES_FILE}" -type f \( -path "${UTILS_STYLES_GENERATORS_FILE}" -prune -o -name "${FILE_EXTENSIONS[@]}" \) -print) + } -lookfor_unused_utilities() { - # Read each utility keyword from the file +lookfor_unused_utils() { + # Read each util keyword from the file while read -r keyword; do - # Creating a copy so later the replacement can reference it + # Creating a copy so later the replacement can reference it local original_keyword="${keyword}" # Iterate through all files in "src/styles" while read -r file; do # Find all words that match "$keyword.[a-zA-Z0-9_-]+" while IFS= read -r match; do - # Replace the utility prefix with "styles" + # Replace the util prefix with "styles" local variable="${match/#$original_keyword/styles}" # Call the remove_keyword function with the variable remove_keyword "${variable}" remove_keyword "${match}" done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/') done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \)) - done < "$UTILITY_STYLES_KEYS_FILE" + done < "$UTIL_STYLES_KEYS_FILE" } echo "🔍 Looking for styles." -# Find and store the name of the utility files as keys -find_utility_styles_store_prefix -find_utility_usage_as_styles +# Find and store the name of the util files as keys +find_util_styles_store_prefix +find_util_usage_as_styles # Find and store keys from styles.ts find_styles_object_and_store_keys "$STYLES_FILE" @@ -360,8 +362,8 @@ collect_theme_keys_from_styles "$STYLES_FILE" echo "🗄️ Now going through the codebase and looking for unused keys." -# Look for usages of utilities into src/styles -lookfor_unused_utilities +# Look for usages of utils into src/styles +lookfor_unused_utils lookfor_unused_spread_keywords lookfor_unused_keywords diff --git a/.storybook/theme.js b/.storybook/theme.js index 67898fb00943..08d8b584d580 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -1,5 +1,5 @@ import {create} from '@storybook/theming'; -import colors from '../src/styles/colors'; +import colors from '../src/styles/theme/colors'; export default create({ brandTitle: 'New Expensify UI Docs', diff --git a/android/app/build.gradle b/android/app/build.gradle index 685e9f206eb4..dbc0935e9b76 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -91,8 +91,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001041200 - versionName "1.4.12-0" + versionCode 1001041300 + versionName "1.4.13-0" } flavorDimensions "default" diff --git a/desktop/package-lock.json b/desktop/package-lock.json index dbd9fc8eb017..6f62e6a5ba00 100644 --- a/desktop/package-lock.json +++ b/desktop/package-lock.json @@ -9,7 +9,7 @@ "dependencies": { "electron-context-menu": "^2.3.0", "electron-log": "^4.4.8", - "electron-serve": "^1.0.0", + "electron-serve": "^1.2.0", "electron-updater": "^6.1.6", "node-machine-id": "^1.1.12" } @@ -145,9 +145,15 @@ "integrity": "sha512-QQ4GvrXO+HkgqqEOYbi+DHL7hj5JM+nHi/j+qrN9zeeXVKy8ZABgbu4CnG+BBqDZ2+tbeq9tUC4DZfIWFU5AZA==" }, "node_modules/electron-serve": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.1.0.tgz", - "integrity": "sha512-tQJBCbXKoKCfkBC143QCqnEtT1s8dNE2V+b/82NF6lxnGO/2Q3a3GSLHtKl3iEDQgdzTf9pH7p418xq2rXbz1Q==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.2.0.tgz", + "integrity": "sha512-zJG3wisMrDn2G/gnjrhyB074COvly1FnS0U7Edm8bfXLB8MYX7UtwR9/y2LkFreYjzQHm9nEbAfgCmF+9M9LHQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/electron-updater": { "version": "6.1.6", @@ -530,9 +536,9 @@ "integrity": "sha512-QQ4GvrXO+HkgqqEOYbi+DHL7hj5JM+nHi/j+qrN9zeeXVKy8ZABgbu4CnG+BBqDZ2+tbeq9tUC4DZfIWFU5AZA==" }, "electron-serve": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.1.0.tgz", - "integrity": "sha512-tQJBCbXKoKCfkBC143QCqnEtT1s8dNE2V+b/82NF6lxnGO/2Q3a3GSLHtKl3iEDQgdzTf9pH7p418xq2rXbz1Q==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.2.0.tgz", + "integrity": "sha512-zJG3wisMrDn2G/gnjrhyB074COvly1FnS0U7Edm8bfXLB8MYX7UtwR9/y2LkFreYjzQHm9nEbAfgCmF+9M9LHQ==" }, "electron-updater": { "version": "6.1.6", diff --git a/desktop/package.json b/desktop/package.json index cde88130184a..7545e4b57dba 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -6,7 +6,7 @@ "dependencies": { "electron-context-menu": "^2.3.0", "electron-log": "^4.4.8", - "electron-serve": "^1.0.0", + "electron-serve": "^1.2.0", "electron-updater": "^6.1.6", "node-machine-id": "^1.1.12" }, diff --git a/docs/_includes/floating-concierge-button.html b/docs/_includes/floating-concierge-button.html deleted file mode 100644 index ed183058388f..000000000000 --- a/docs/_includes/floating-concierge-button.html +++ /dev/null @@ -1,5 +0,0 @@ -{% include CONST.html %} - - - Chat with concierge - diff --git a/docs/_includes/platform.html b/docs/_includes/platform.html index 6aa88f9208ae..a5653b89d7a8 100644 --- a/docs/_includes/platform.html +++ b/docs/_includes/platform.html @@ -10,9 +10,4 @@

{{ platform.hub-title }}

{% include hub-card.html hub=hub platform=selectedPlatform %} {% endfor %} - -
- - {% include floating-concierge-button.html id="floating-concierge-button-global" %} -
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index de3fbc203243..7d98500ecf32 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -57,9 +57,6 @@
{% endif %} - - - {% include floating-concierge-button.html id="floating-concierge-button-lhn" %}
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index eaaa1c63badb..9276443c3813 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -712,41 +712,11 @@ button { } } -#floating-concierge-button-global { - position: fixed; - display: block; - @include breakpoint($breakpoint-tablet) { - display: none; - } -} - -#floating-concierge-button-lhn { - position: absolute; - display: none; - @include breakpoint($breakpoint-tablet) { - display: block; - } -} - .get-help { flex-wrap: wrap; margin-top: 40px; } -.floating-concierge-button { - bottom: 2rem; - right: 2rem; - - img { - width: 4rem; - height: 4rem; - - &:hover { - filter: saturate(2); - } - } -} - .disable-scrollbar { @media screen and (max-width: $breakpoint-tablet) { overflow: hidden; diff --git a/docs/articles/new-expensify/get-paid-back/Referral-Program.md b/docs/articles/new-expensify/get-paid-back/Referral-Program.md index 683e93d0277a..34a35f5dc7c8 100644 --- a/docs/articles/new-expensify/get-paid-back/Referral-Program.md +++ b/docs/articles/new-expensify/get-paid-back/Referral-Program.md @@ -1,53 +1,53 @@ --- -title: Expensify Referral Program -description: Send your joining link, submit a receipt or invoice, and we'll pay you if your referral adopts Expensify. +title: New Expensify Referral Program +description: Share your invite link with a friend, start a chat with a coworker, request money from your boss -- we'll pay you $250 if your referral adopts New Expensify. --- # About -Expensify has grown thanks to our users who love Expensify so much that they tell their friends, colleagues, managers, and fellow business founders to use it, too. +[New Expensify](https://new.expensify.com/) is growing thanks to members like you who love it so much that they tell their friends, family, colleagues, managers, and fellow business founders to use it, too. -As a thank you, every time you bring a new user into the platform who directly or indirectly leads to the adoption of a paid annual plan on Expensify, you will earn $250. +As a thank you, every time you bring a new customer into New Expensify, you'll get $250. Here's how it works. -# How to get paid for referring people to Expensify +# How to get paid to refer anyone to New Expensify -1. Submit a report or invoice, or share your referral link with anyone you know who is spending too much time on expenses, or works at a company that could benefit from using Expensify. +The sky's the limit for this referral program! Your referral can be anyone - a friend, family member, boss, coworker, neighbor, or even social media follower. We're making it as easy as possible to get that cold hard referral $$$. -2. You will get $250 for any referred business that commits to an annual subscription, has 2 or more active users, and makes two monthly payments. +1. There are a bunch of different ways to kick off a referral in New Expensify: + - Start a chat + - Request money + - Send money + - @ mention someone + - Add them to a workspace + +2. You'll get $250 for each referral as long as: + - You're the first to refer them to Expensify + - They start an annual subscription with two or more active users + - They make two payments toward that annual subscription -That’s right! You can refer anyone working at any company you know. - -If their company goes on to become an Expensify customer with an annual subscription, and you are the earliest recorded referrer of a user on that company’s paid Expensify Policy, you'll get paid a referral reward. - -The best way to start is to submit any receipt to your manager (you'll get paid back and set yourself up for $250 if they start a subscription: win-win!) - -Referral rewards for the Spring/Summer 2023 campaign will be paid by direct deposit. +For now, referral rewards will be paid via direct deposit into bank accounts that are connected to Expensify. # FAQ -- **How will I know if I am the first person to refer a company to Expensify?** +- **How will I know if I'm the first person to refer a company to Expensify?** -Successful referrers are notified after their referral pays for 2 months of an annual subscription. We will check for the earliest recorded referrer of a user on the policy, and if that is you, then we will let you know. +Successful referrers are notified after their referral pays for two months of an annual Expensify subscription. We'll check for the earliest recorded referrer of a member on the workspace, and if that's you, we'll let you know. - **How will you pay me if I am successful?** -In the Spring 2023 campaign, Expensify will be paying successful referrers via direct deposit to the Deposit-Only account you have on file. Referral payouts will happen once a month for the duration of the campaign. If you do not have a Deposit-Only account at the time of your referral payout, your deposit will be processed in the next batch. +For now, Expensify will pay successful referrers via direct deposit to the Deposit-Only bank account you have on file. Referral payouts will happen once a month. If you don't have a Deposit-Only bank account connected to Expensify at the time of your referral payout, your deposit will be processed in the next batch. -Learn how to add a Deposit-Only account [here](https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-account-both-personal-and-business). +Learn how to add a Deposit-Only bank account [here](https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-account-both-personal-and-business). - **I’m outside of the US, how do I get paid?** -While our referral payouts are in USD, you will be able to get paid via a Wise Borderless account. Learn more [here](https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees). +While our referral payouts are in USD, you'll be able to get paid via a Wise Borderless account. Learn more [here](https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees). - **My referral wasn’t counted! How can I appeal?** -Expensify reserves the right to modify the terms of the referral program at any time, and pays out referral bonuses for eligible companies at its own discretion. - -Please send a message to concierge@expensify.com with the billing owner of the company you have referred and our team will review the referral and get back to you. - -- **Where can I find my referral link?** +Expensify reserves the right to modify the terms of the referral program at any time, and pays out referral bonuses for eligible members at its own discretion. If you think there's been a mistake, please send a message to concierge@expensify.com with the email of your referral and our team will review your case. -Expensify members who are opted-in for our newsletters will have received an email containing their unique referral link. +- **Where can I find my referral link?** -On the mobile app, go to **Settings** > **Invite a Friend** > **Share Invite Link** to retrieve your referral link. +In New Expensify, go to **Settings** > **Share code** > **Get $250** to retrieve your invite link. diff --git a/docs/index.html b/docs/index.html index 70bd5f31545a..ceea63cb398a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,9 +12,4 @@

{{ site.data.routes.home.title }}

{% include platform-card.html href=platform.platform_href %} {% endfor %}
- -
- - {% include floating-concierge-button.html id="floating-concierge-button-global" %} -
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index f4ef6d22bea6..a917b6a4499c 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.4.12 + 1.4.13 CFBundleSignature ???? CFBundleURLTypes @@ -40,7 +40,7 @@ CFBundleVersion - 1.4.12.0 + 1.4.13.0 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index c7fb13979540..b1e7c2a22e26 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 1.4.12 + 1.4.13 CFBundleSignature ???? CFBundleVersion - 1.4.12.0 + 1.4.13.0 diff --git a/package-lock.json b/package-lock.json index 05d9221a3f58..86c0950a0b12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.4.12-0", + "version": "1.4.13-0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.4.12-0", + "version": "1.4.13-0", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -35,7 +35,7 @@ "@react-native-google-signin/google-signin": "^10.0.1", "@react-native-picker/picker": "^2.4.3", "@react-navigation/material-top-tabs": "^6.6.3", - "@react-navigation/native": "6.1.6", + "@react-navigation/native": "6.1.8", "@react-navigation/stack": "6.3.16", "@react-ng/bounds-observer": "^0.2.1", "@rnmapbox/maps": "^10.0.11", @@ -8563,16 +8563,16 @@ } }, "node_modules/@react-navigation/core": { - "version": "6.4.8", - "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz", - "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==", + "version": "6.4.10", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz", + "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==", "dependencies": { - "@react-navigation/routers": "^6.1.8", + "@react-navigation/routers": "^6.1.9", "escape-string-regexp": "^4.0.0", "nanoid": "^3.1.23", "query-string": "^7.1.3", "react-is": "^16.13.0", - "use-latest-callback": "^0.1.5" + "use-latest-callback": "^0.1.7" }, "peerDependencies": { "react": "*" @@ -8608,11 +8608,11 @@ } }, "node_modules/@react-navigation/native": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz", - "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==", + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz", + "integrity": "sha512-0alti852nV+8oCVm9H80G6kZvrHoy51+rXBvVCRUs2rNDDozC/xPZs8tyeCJkqdw3cpxZDK8ndXF22uWq28+0Q==", "dependencies": { - "@react-navigation/core": "^6.4.8", + "@react-navigation/core": "^6.4.9", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.1.23" @@ -8623,9 +8623,9 @@ } }, "node_modules/@react-navigation/routers": { - "version": "6.1.8", - "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz", - "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz", + "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==", "dependencies": { "nanoid": "^3.1.23" } @@ -50723,9 +50723,9 @@ } }, "node_modules/use-latest-callback": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz", - "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz", + "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==", "peerDependencies": { "react": ">=16.8" } @@ -58884,16 +58884,16 @@ } }, "@react-navigation/core": { - "version": "6.4.8", - "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz", - "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==", + "version": "6.4.10", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz", + "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==", "requires": { - "@react-navigation/routers": "^6.1.8", + "@react-navigation/routers": "^6.1.9", "escape-string-regexp": "^4.0.0", "nanoid": "^3.1.23", "query-string": "^7.1.3", "react-is": "^16.13.0", - "use-latest-callback": "^0.1.5" + "use-latest-callback": "^0.1.7" } }, "@react-navigation/devtools": { @@ -58915,20 +58915,20 @@ } }, "@react-navigation/native": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz", - "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==", + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz", + "integrity": "sha512-0alti852nV+8oCVm9H80G6kZvrHoy51+rXBvVCRUs2rNDDozC/xPZs8tyeCJkqdw3cpxZDK8ndXF22uWq28+0Q==", "requires": { - "@react-navigation/core": "^6.4.8", + "@react-navigation/core": "^6.4.9", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.1.23" } }, "@react-navigation/routers": { - "version": "6.1.8", - "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz", - "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz", + "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==", "requires": { "nanoid": "^3.1.23" } @@ -89240,9 +89240,9 @@ } }, "use-latest-callback": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz", - "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz", + "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==", "requires": {} }, "use-memo-one": { diff --git a/package.json b/package.json index 3d3bcf99a2cd..a3dd3776d125 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.4.12-0", + "version": "1.4.13-0", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", @@ -83,7 +83,7 @@ "@react-native-google-signin/google-signin": "^10.0.1", "@react-native-picker/picker": "^2.4.3", "@react-navigation/material-top-tabs": "^6.6.3", - "@react-navigation/native": "6.1.6", + "@react-navigation/native": "6.1.8", "@react-navigation/stack": "6.3.16", "@react-ng/bounds-observer": "^0.2.1", "@rnmapbox/maps": "^10.0.11", diff --git a/patches/@react-navigation+native+6.1.6.patch b/patches/@react-navigation+native+6.1.8.patch similarity index 90% rename from patches/@react-navigation+native+6.1.6.patch rename to patches/@react-navigation+native+6.1.8.patch index eb933683c850..c461d7e510fe 100644 --- a/patches/@react-navigation+native+6.1.6.patch +++ b/patches/@react-navigation+native+6.1.8.patch @@ -133,7 +133,7 @@ index 0000000..16da117 +//# sourceMappingURL=findFocusedRouteKey.js.map \ No newline at end of file diff --git a/node_modules/@react-navigation/native/lib/module/useLinking.js b/node_modules/@react-navigation/native/lib/module/useLinking.js -index 5bf2a88..a4318ef 100644 +index 6f0ac51..a77b608 100644 --- a/node_modules/@react-navigation/native/lib/module/useLinking.js +++ b/node_modules/@react-navigation/native/lib/module/useLinking.js @@ -2,6 +2,7 @@ import { findFocusedRoute, getActionFromState as getActionFromStateDefault, getP @@ -144,37 +144,7 @@ index 5bf2a88..a4318ef 100644 import ServerContext from './ServerContext'; /** * Find the matching navigation state that changed between 2 navigation states -@@ -34,32 +35,52 @@ const findMatchingState = (a, b) => { - /** - * Run async function in series as it's called. - */ --const series = cb => { -- // Whether we're currently handling a callback -- let handling = false; -- let queue = []; -- const callback = async () => { -- try { -- if (handling) { -- // If we're currently handling a previous event, wait before handling this one -- // Add the callback to the beginning of the queue -- queue.unshift(callback); -- return; -- } -- handling = true; -- await cb(); -- } finally { -- handling = false; -- if (queue.length) { -- // If we have queued items, handle the last one -- const last = queue.pop(); -- last === null || last === void 0 ? void 0 : last(); -- } -- } -+const series = (cb) => { -+ let queue = Promise.resolve(); -+ const callback = () => { -+ queue = queue.then(cb); - }; +@@ -42,6 +43,44 @@ export const series = cb => { return callback; }; let linkingHandlers = []; @@ -219,7 +189,7 @@ index 5bf2a88..a4318ef 100644 export default function useLinking(ref, _ref) { let { independent, -@@ -251,6 +272,9 @@ export default function useLinking(ref, _ref) { +@@ -231,6 +270,9 @@ export default function useLinking(ref, _ref) { // Otherwise it's likely a change triggered by `popstate` path !== pendingPath) { const historyDelta = (focusedState.history ? focusedState.history.length : focusedState.routes.length) - (previousFocusedState.history ? previousFocusedState.history.length : previousFocusedState.routes.length); @@ -229,7 +199,7 @@ index 5bf2a88..a4318ef 100644 if (historyDelta > 0) { // If history length is increased, we should pushState // Note that path might not actually change here, for example, drawer open should pushState -@@ -262,34 +286,55 @@ export default function useLinking(ref, _ref) { +@@ -242,34 +284,55 @@ export default function useLinking(ref, _ref) { // If history length is decreased, i.e. entries were removed, we want to go back const nextIndex = history.backIndex({ diff --git a/src/App.js b/src/App.js index e273dcce1e47..3553900bbc7f 100644 --- a/src/App.js +++ b/src/App.js @@ -8,14 +8,17 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'; import '../wdyr'; import ColorSchemeWrapper from './components/ColorSchemeWrapper'; import ComposeProviders from './components/ComposeProviders'; -import CustomStatusBar from './components/CustomStatusBar'; -import CustomStatusBarContextProvider from './components/CustomStatusBar/CustomStatusBarContextProvider'; +import CustomStatusBarAndBackground from './components/CustomStatusBarAndBackground'; +import CustomStatusBarAndBackgroundContextProvider from './components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider'; import ErrorBoundary from './components/ErrorBoundary'; import HTMLEngineProvider from './components/HTMLEngineProvider'; import {LocaleContextProvider} from './components/LocaleContextProvider'; import OnyxProvider from './components/OnyxProvider'; import PopoverContextProvider from './components/PopoverProvider'; import SafeArea from './components/SafeArea'; +import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider'; +import ThemeProvider from './components/ThemeProvider'; +import ThemeStylesProvider from './components/ThemeStylesProvider'; import {CurrentReportIDContextProvider} from './components/withCurrentReportID'; import {EnvironmentProvider} from './components/withEnvironment'; import {KeyboardStateProvider} from './components/withKeyboardState'; @@ -26,9 +29,6 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager'; import * as Session from './libs/actions/Session'; import * as Environment from './libs/Environment/Environment'; import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext'; -import ThemeIllustrationsProvider from './styles/illustrations/ThemeIllustrationsProvider'; -import ThemeProvider from './styles/themes/ThemeProvider'; -import ThemeStylesProvider from './styles/ThemeStylesProvider'; // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx if (window && Environment.isDevelopment()) { @@ -68,10 +68,10 @@ function App() { ReportAttachmentsProvider, PickerStateProvider, EnvironmentProvider, - CustomStatusBarContextProvider, + CustomStatusBarAndBackgroundContextProvider, ]} > - + diff --git a/src/CONST.ts b/src/CONST.ts index d3f24b3fbacd..c0e3d64b5eee 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -255,6 +255,7 @@ const CONST = { BETA_COMMENT_LINKING: 'commentLinking', POLICY_ROOMS: 'policyRooms', VIOLATIONS: 'violations', + REPORT_FIELDS: 'reportFields', }, BUTTON_STATES: { DEFAULT: 'default', @@ -706,9 +707,10 @@ const CONST = { DEFAULT: 'default', }, THEME: { - DEFAULT: 'dark', - LIGHT: 'light', + DEFAULT: 'system', + FALLBACK: 'dark', DARK: 'dark', + LIGHT: 'light', SYSTEM: 'system', }, COLOR_SCHEME: { @@ -2961,7 +2963,7 @@ const CONST = { SHARE_CODE: 'shareCode', }, REVENUE: 250, - LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/billing-and-plan-types/Referral-Program', + LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/get-paid-back/Referral-Program', LINK: 'https://join.my.expensify.com', }, diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js index 4d01fa108e2a..4abe5655e307 100644 --- a/src/components/AddPaymentMethodMenu.js +++ b/src/components/AddPaymentMethodMenu.js @@ -48,6 +48,9 @@ const propTypes = { /** Currently logged in user accountID */ accountID: PropTypes.number, }), + + /** Whether the personal bank account option should be shown */ + shouldShowPersonalBankAccountOption: PropTypes.bool, }; const defaultProps = { @@ -59,9 +62,10 @@ const defaultProps = { }, anchorRef: () => {}, session: {}, + shouldShowPersonalBankAccountOption: false, }; -function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session}) { +function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, shouldShowPersonalBankAccountOption}) { const {translate} = useLocalize(); // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report @@ -70,6 +74,8 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme ReportUtils.isExpenseReport(iouReport) || (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0))); + const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || ReportUtils.isIOUReport(iouReport); + return ( !loadComplete && setLoadComplete(true)} - errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]} + errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} /> diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 07db455968a3..c2320f7c0202 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -4,9 +4,10 @@ import {View} from 'react-native'; // We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another import {ScrollView} from 'react-native-gesture-handler'; import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import viewForwardedRef from '@src/types/utils/viewForwardedRef'; import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types'; @@ -84,18 +85,20 @@ function BaseAutoCompleteSuggestions( style={[styles.autoCompleteSuggestionsContainer, animatedStyles]} exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))} > - rowHeight.value} - extraData={highlightedSuggestionIndex} - /> + + rowHeight.value} + extraData={highlightedSuggestionIndex} + /> + ); } diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx index 3ccbb4efaf5a..baca4011a177 100644 --- a/src/components/AutoCompleteSuggestions/index.tsx +++ b/src/components/AutoCompleteSuggestions/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import {View} from 'react-native'; +import useStyleUtils from '@hooks/useStyleUtils'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useStyleUtils from '@styles/useStyleUtils'; import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions'; import type {AutoCompleteSuggestionsProps} from './types'; diff --git a/src/components/AutoEmailLink.js b/src/components/AutoEmailLink.js index bffd2493aa5d..af581525ab69 100644 --- a/src/components/AutoEmailLink.js +++ b/src/components/AutoEmailLink.js @@ -2,7 +2,7 @@ import {CONST} from 'expensify-common/lib/CONST'; import PropTypes from 'prop-types'; import React from 'react'; import _ from 'underscore'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import Text from './Text'; import TextLink from './TextLink'; diff --git a/src/components/AutoUpdateTime.js b/src/components/AutoUpdateTime.js index 1970839ec320..b9aa3446fa12 100644 --- a/src/components/AutoUpdateTime.js +++ b/src/components/AutoUpdateTime.js @@ -5,8 +5,8 @@ import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import Text from './Text'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index f801cb11e9df..978d2f097cbf 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -1,11 +1,11 @@ import React, {useEffect, useState} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import useNetwork from '@hooks/useNetwork'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; import {AvatarSource} from '@libs/UserUtils'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import type {AvatarSizeName} from '@styles/utils'; import CONST from '@src/CONST'; import {AvatarType} from '@src/types/onyx/OnyxCommon'; diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index 419891d9bdef..a39daeb78ba7 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -15,11 +15,11 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import cropOrRotateImage from '@libs/cropOrRotateImage'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ImageCropView from './ImageCropView'; import Slider from './Slider'; diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js index 94289b24d6ca..3f6263cf7b95 100644 --- a/src/components/AvatarCropModal/ImageCropView.js +++ b/src/components/AvatarCropModal/ImageCropView.js @@ -5,9 +5,9 @@ import {PanGestureHandler} from 'react-native-gesture-handler'; import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import gestureHandlerPropTypes from './gestureHandlerPropTypes'; const propTypes = { diff --git a/src/components/AvatarCropModal/Slider.js b/src/components/AvatarCropModal/Slider.js index 9df6ac3c0498..ba2e1471ce9e 100644 --- a/src/components/AvatarCropModal/Slider.js +++ b/src/components/AvatarCropModal/Slider.js @@ -5,8 +5,8 @@ import {PanGestureHandler} from 'react-native-gesture-handler'; import Animated, {useAnimatedStyle} from 'react-native-reanimated'; import Tooltip from '@components/Tooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; -import useThemeStyles from '@styles/useThemeStyles'; import gestureHandlerPropTypes from './gestureHandlerPropTypes'; const propTypes = { diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx index d2706447f756..0887830aa07a 100644 --- a/src/components/AvatarSkeleton.tsx +++ b/src/components/AvatarSkeleton.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Circle} from 'react-native-svg'; -import useTheme from '@styles/themes/useTheme'; +import useTheme from '@hooks/useTheme'; import SkeletonViewContentLoader from './SkeletonViewContentLoader'; function AvatarSkeleton() { diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx index 3cc39f9e815f..5ea21502f2ca 100644 --- a/src/components/AvatarWithDisplayName.tsx +++ b/src/components/AvatarWithDisplayName.tsx @@ -2,12 +2,12 @@ import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx'; import {ValueOf} from 'type-fest'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 9b061ba5c670..325d4706da71 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -4,12 +4,12 @@ import React, {useEffect, useRef, useState} from 'react'; import {StyleSheet, View} from 'react-native'; import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import getImageResolution from '@libs/fileDownload/getImageResolution'; import stylePropTypes from '@styles/stylePropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import AttachmentModal from './AttachmentModal'; diff --git a/src/components/AvatarWithIndicator.tsx b/src/components/AvatarWithIndicator.tsx index 3ae9507350c8..2fd733d4b072 100644 --- a/src/components/AvatarWithIndicator.tsx +++ b/src/components/AvatarWithIndicator.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as UserUtils from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import Avatar from './Avatar'; import AvatarSkeleton from './AvatarSkeleton'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index b670921dff4c..70aebc30ee83 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -1,7 +1,7 @@ import React, {useCallback} from 'react'; import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import Text from './Text'; diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index 3eb2316aa9d0..7ceb3deb9e63 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -1,9 +1,9 @@ import React, {memo} from 'react'; import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import Hoverable from './Hoverable'; import Icon from './Icon'; diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index 082c0e20801a..8d115a37cba7 100644 --- a/src/components/BaseMiniContextMenuItem.tsx +++ b/src/components/BaseMiniContextMenuItem.tsx @@ -1,10 +1,10 @@ import React, {ForwardedRef} from 'react'; import {PressableStateCallbackType, View} from 'react-native'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import DomUtils from '@libs/DomUtils'; import getButtonState from '@libs/getButtonState'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import Tooltip from './Tooltip/PopoverAnchorTooltip'; diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx index 3204b39cb19c..8b840f9d1b57 100644 --- a/src/components/BigNumberPad.tsx +++ b/src/components/BigNumberPad.tsx @@ -1,9 +1,9 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ControlSelection from '@libs/ControlSelection'; -import useThemeStyles from '@styles/useThemeStyles'; import Button from './Button'; type BigNumberPadProps = { diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js index aec414cdeb74..44f6b7100509 100644 --- a/src/components/BlockingViews/BlockingView.js +++ b/src/components/BlockingViews/BlockingView.js @@ -6,9 +6,9 @@ import Icon from '@components/Icon'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; const propTypes = { diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js index b82474aa0694..ce76b96c0eb0 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.js +++ b/src/components/BlockingViews/FullPageNotFoundView.js @@ -4,8 +4,8 @@ import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Illustrations from '@components/Icon/Illustrations'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import ROUTES from '@src/ROUTES'; import BlockingView from './BlockingView'; diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 06577c3ac813..af8ec33683de 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -9,9 +9,9 @@ import Text from '@components/Text'; import withNavigationFallback from '@components/withNavigationFallback'; import useActiveElement from '@hooks/useActiveElement'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import HapticFeedback from '@libs/HapticFeedback'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; import validateSubmitShortcut from './validateSubmitShortcut'; diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index a5f311740f19..0291143a9dbc 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -2,10 +2,10 @@ import PropTypes from 'prop-types'; import React, {useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import Button from './Button'; import Icon from './Icon'; diff --git a/src/components/CardPreview.tsx b/src/components/CardPreview.tsx index 6dc8abfb80ef..e3ddbd54b892 100644 --- a/src/components/CardPreview.tsx +++ b/src/components/CardPreview.tsx @@ -3,7 +3,7 @@ import {View} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; import ExpensifyCardImage from '@assets/images/expensify-card.svg'; import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; import {PrivatePersonalDetails, Session} from '@src/types/onyx'; diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index 36cf9b1deadc..d170def12276 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -4,8 +4,8 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import OptionsSelector from '@components/OptionsSelector'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {defaultProps, propTypes} from './categoryPickerPropTypes'; diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 5dd3164eadcc..23bc068e8fe0 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -1,8 +1,8 @@ import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react'; import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; import Icon from './Icon'; diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 92cd7ea38eea..24f61c305dda 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, {useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import Checkbox from './Checkbox'; import FormHelpMessage from './FormHelpMessage'; diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx index 04574c5fd057..bc7bf6e89dba 100644 --- a/src/components/CollapsibleSection/index.tsx +++ b/src/components/CollapsibleSection/index.tsx @@ -4,7 +4,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; import Collapsible from './Collapsible'; diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx index 2909f1ffbe9f..0a1ccc5e5d67 100644 --- a/src/components/ColorSchemeWrapper/index.tsx +++ b/src/components/ColorSchemeWrapper/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement { const theme = useTheme(); diff --git a/src/components/CommunicationsLink.js b/src/components/CommunicationsLink.js index dbbe5737b3aa..01ae0354a66d 100644 --- a/src/components/CommunicationsLink.js +++ b/src/components/CommunicationsLink.js @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import Clipboard from '@libs/Clipboard'; -import useThemeStyles from '@styles/useThemeStyles'; import ContextMenuItem from './ContextMenuItem'; import * as Expensicons from './Icon/Expensicons'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js index 698c68cc78e9..af64831df117 100644 --- a/src/components/Composer/index.android.js +++ b/src/components/Composer/index.android.js @@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import {StyleSheet} from 'react-native'; import _ from 'underscore'; import RNTextInput from '@components/RNTextInput'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ComposerUtils from '@libs/ComposerUtils'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** Maximum number of lines in the text input */ diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js index 9852e607562b..c9947999b273 100644 --- a/src/components/Composer/index.ios.js +++ b/src/components/Composer/index.ios.js @@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import {StyleSheet} from 'react-native'; import _ from 'underscore'; import RNTextInput from '@components/RNTextInput'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ComposerUtils from '@libs/ComposerUtils'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** If the input should clear, it actually gets intercepted instead of .clear() */ diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 4bb3df5c1b85..3af22b63ed69 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -8,6 +8,10 @@ import RNTextInput from '@components/RNTextInput'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withNavigation from '@components/withNavigation'; +import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; @@ -15,9 +19,6 @@ import * as ComposerUtils from '@libs/ComposerUtils'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { @@ -86,6 +87,9 @@ const propTypes = { /** Whether the sull composer is open */ isComposerFullSize: PropTypes.bool, + /** Should make the input only scroll inside the element avoid scroll out to parent */ + shouldContainScroll: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -113,6 +117,7 @@ const defaultProps = { checkComposerVisibility: () => false, isReportActionCompose: false, isComposerFullSize: false, + shouldContainScroll: false, }; /** @@ -164,6 +169,7 @@ function Composer({ selection: selectionProp, isReportActionCompose, isComposerFullSize, + shouldContainScroll, ...props }) { const theme = useTheme(); @@ -180,6 +186,7 @@ function Composer({ const [caretContent, setCaretContent] = useState(''); const [valueBeforeCaret, setValueBeforeCaret] = useState(''); const [textInputWidth, setTextInputWidth] = useState(''); + const isScrollBarVisible = useIsScrollBarVisible(textInput, value); useEffect(() => { if (!shouldClear) { @@ -418,18 +425,26 @@ function Composer({ ); - const inputStyleMemo = useMemo( - () => [ + const scrollStyleMemo = useMemo(() => { + if (shouldContainScroll) { + return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden; + } + return [ // We are hiding the scrollbar to prevent it from reducing the text input width, // so we can get the correct scroll height while calculating the number of lines. numberOfLines < maxLines ? styles.overflowHidden : {}, + ]; + }, [shouldContainScroll, isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]); + const inputStyleMemo = useMemo( + () => [ StyleSheet.flatten([style, {outline: 'none'}]), StyleUtils.getComposeTextAreaPadding(numberOfLines, isComposerFullSize), Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {}, + scrollStyleMemo, ], - [numberOfLines, maxLines, styles.overflowHidden, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize], + [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize], ); return ( diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js index ff8ee4f861a4..8574cc02014e 100644 --- a/src/components/ConfirmContent.js +++ b/src/components/ConfirmContent.js @@ -4,7 +4,7 @@ import {View} from 'react-native'; import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import Button from './Button'; import Header from './Header'; diff --git a/src/components/ConfirmationPage.tsx b/src/components/ConfirmationPage.tsx index 12e8b40a0f25..21813edd693d 100644 --- a/src/components/ConfirmationPage.tsx +++ b/src/components/ConfirmationPage.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import Button from './Button'; import FixedFooter from './FixedFooter'; import Lottie from './Lottie'; diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js index 79b97b38194a..3abec6d0d1f4 100644 --- a/src/components/ConfirmedRoute.js +++ b/src/components/ConfirmedRoute.js @@ -5,9 +5,9 @@ import React, {useCallback, useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import useNetwork from '@hooks/useNetwork'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as TransactionUtils from '@libs/TransactionUtils'; -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'; diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js index 6afd3d57d4e6..f036918d9429 100644 --- a/src/components/ConnectBankAccountButton.js +++ b/src/components/ConnectBankAccountButton.js @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as ReimbursementAccount from '@userActions/ReimbursementAccount'; import Button from './Button'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 2cabd71b11cb..307cfcde9b10 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -1,10 +1,10 @@ import PropTypes from 'prop-types'; import React, {forwardRef, useImperativeHandle} from 'react'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWindowDimensions from '@hooks/useWindowDimensions'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import BaseMiniContextMenuItem from './BaseMiniContextMenuItem'; import Icon from './Icon'; import MenuItem from './MenuItem'; diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js index b138bc949937..68a6486bce48 100644 --- a/src/components/CountrySelector.js +++ b/src/components/CountrySelector.js @@ -2,8 +2,8 @@ import PropTypes from 'prop-types'; import React, {useEffect} from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import ROUTES from '@src/ROUTES'; import FormHelpMessage from './FormHelpMessage'; import MenuItemWithTopDescription from './MenuItemWithTopDescription'; diff --git a/src/components/CurrencySymbolButton.js b/src/components/CurrencySymbolButton.js index 47c25a43ad11..d03834fc1fd6 100644 --- a/src/components/CurrencySymbolButton.js +++ b/src/components/CurrencySymbolButton.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import Text from './Text'; diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx index 6f6daddc51b8..02c308705994 100644 --- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx +++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx @@ -3,9 +3,9 @@ import {View} from 'react-native'; import {Circle, Rect} from 'react-native-svg'; import {ValueOf} from 'type-fest'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx index 9a5b2cd0227b..28a83fb1ae50 100644 --- a/src/components/CurrentWalletBalance.tsx +++ b/src/components/CurrentWalletBalance.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {StyleProp, TextStyle} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import ONYXKEYS from '@src/ONYXKEYS'; import UserWallet from '@src/types/onyx/UserWallet'; import Text from './Text'; diff --git a/src/components/CustomStatusBar/CustomStatusBarContext.tsx b/src/components/CustomStatusBar/CustomStatusBarContext.tsx deleted file mode 100644 index b2c317b05c25..000000000000 --- a/src/components/CustomStatusBar/CustomStatusBarContext.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {createContext} from 'react'; - -type CustomStatusBarContextType = { - isRootStatusBarDisabled: boolean; - disableRootStatusBar: (isDisabled: boolean) => void; -}; - -const CustomStatusBarContext = createContext({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined}); - -export default CustomStatusBarContext; -export {type CustomStatusBarContextType}; diff --git a/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx b/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx deleted file mode 100644 index 27a5cac5d8cc..000000000000 --- a/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, {useMemo, useState} from 'react'; -import CustomStatusBarContext from './CustomStatusBarContext'; - -function CustomStatusBarContextProvider({children}: React.PropsWithChildren) { - const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false); - const value = useMemo( - () => ({ - isRootStatusBarDisabled, - disableRootStatusBar, - }), - [isRootStatusBarDisabled], - ); - - return {children}; -} - -export default CustomStatusBarContextProvider; diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx deleted file mode 100644 index 3b5022c60898..000000000000 --- a/src/components/CustomStatusBar/index.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native'; -import PropTypes from 'prop-types'; -import React, {useCallback, useContext, useEffect} from 'react'; -import {navigationRef} from '@libs/Navigation/Navigation'; -import StatusBar from '@libs/StatusBar'; -import useTheme from '@styles/themes/useTheme'; -import CustomStatusBarContext from './CustomStatusBarContext'; -import updateStatusBarAppearance from './updateStatusBarAppearance'; - -type CustomStatusBarProps = { - isNested: boolean; -}; - -const propTypes = { - /** Whether the CustomStatusBar is nested within another CustomStatusBar. - * A nested CustomStatusBar will disable the "root" CustomStatusBar. */ - isNested: PropTypes.bool, -}; - -type CustomStatusBarType = { - (props: CustomStatusBarProps): React.ReactNode; - displayName: string; - propTypes: typeof propTypes; -}; - -// eslint-disable-next-line react/function-component-definition -const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => { - const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext); - const theme = useTheme(); - - const isDisabled = !isNested && isRootStatusBarDisabled; - - useEffect(() => { - if (isNested) { - disableRootStatusBar(true); - } - - return () => { - if (!isNested) { - return; - } - disableRootStatusBar(false); - }; - }, [disableRootStatusBar, isNested]); - - const updateStatusBarStyle = useCallback>(() => { - if (isDisabled) { - return; - } - - // Set the status bar colour depending on the current route. - // If we don't have any colour defined for a route, fall back to - // appBG color. - const currentRoute = navigationRef.getCurrentRoute(); - - let currentScreenBackgroundColor = theme.appBG; - let statusBarStyle = theme.statusBarStyle; - if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) { - const screenTheme = theme.PAGE_THEMES[currentRoute.name]; - currentScreenBackgroundColor = screenTheme.backgroundColor; - statusBarStyle = screenTheme.statusBarStyle; - } - - updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle}); - }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]); - - useEffect(() => { - navigationRef.addListener('state', updateStatusBarStyle); - - return () => navigationRef.removeListener('state', updateStatusBarStyle); - }, [updateStatusBarStyle]); - - useEffect(() => { - if (isDisabled) { - return; - } - - updateStatusBarAppearance({statusBarStyle: theme.statusBarStyle}); - }, [isDisabled, theme.statusBarStyle]); - - if (isDisabled) { - return null; - } - - return ; -}; - -CustomStatusBar.displayName = 'CustomStatusBar'; -CustomStatusBar.propTypes = propTypes; - -export default CustomStatusBar; diff --git a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx new file mode 100644 index 000000000000..4a1a1cd2f964 --- /dev/null +++ b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx @@ -0,0 +1,11 @@ +import {createContext} from 'react'; + +type CustomStatusBarAndBackgroundContextType = { + isRootStatusBarDisabled: boolean; + disableRootStatusBar: (isDisabled: boolean) => void; +}; + +const CustomStatusBarAndBackgroundContext = createContext({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined}); + +export default CustomStatusBarAndBackgroundContext; +export {type CustomStatusBarAndBackgroundContextType}; diff --git a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx new file mode 100644 index 000000000000..b4d553b60d0f --- /dev/null +++ b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx @@ -0,0 +1,17 @@ +import React, {useMemo, useState} from 'react'; +import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext'; + +function CustomStatusBarAndBackgroundContextProvider({children}: React.PropsWithChildren) { + const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false); + const value = useMemo( + () => ({ + isRootStatusBarDisabled, + disableRootStatusBar, + }), + [isRootStatusBarDisabled], + ); + + return {children}; +} + +export default CustomStatusBarAndBackgroundContextProvider; diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx new file mode 100644 index 000000000000..b84f9c6a6630 --- /dev/null +++ b/src/components/CustomStatusBarAndBackground/index.tsx @@ -0,0 +1,113 @@ +import React, {useCallback, useContext, useEffect, useRef, useState} from 'react'; +import useTheme from '@hooks/useTheme'; +import {navigationRef} from '@libs/Navigation/Navigation'; +import StatusBar from '@libs/StatusBar'; +import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext'; +import updateGlobalBackgroundColor from './updateGlobalBackgroundColor'; +import updateStatusBarAppearance from './updateStatusBarAppearance'; + +type CustomStatusBarAndBackgroundProps = { + /** Whether the CustomStatusBar is nested within another CustomStatusBar. + * A nested CustomStatusBar will disable the "root" CustomStatusBar. */ + isNested: boolean; +}; + +function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) { + const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarAndBackgroundContext); + const theme = useTheme(); + const [statusBarStyle, setStatusBarStyle] = useState(theme.statusBarStyle); + + const isDisabled = !isNested && isRootStatusBarDisabled; + + // Disable the root status bar when a nested status bar is rendered + useEffect(() => { + if (isNested) { + disableRootStatusBar(true); + } + + return () => { + if (!isNested) { + return; + } + disableRootStatusBar(false); + }; + }, [disableRootStatusBar, isNested]); + + const listenerCount = useRef(0); + const updateStatusBarStyle = useCallback( + (listenerId?: number) => { + // Check if this function is either called through the current navigation listener or the general useEffect which listens for theme changes. + if (listenerId !== undefined && listenerId !== listenerCount.current) { + return; + } + + // Set the status bar colour depending on the current route. + // If we don't have any colour defined for a route, fall back to + // appBG color. + let currentRoute: ReturnType | undefined; + if (navigationRef.isReady()) { + currentRoute = navigationRef.getCurrentRoute(); + } + + let currentScreenBackgroundColor = theme.appBG; + let newStatusBarStyle = theme.statusBarStyle; + if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) { + const screenTheme = theme.PAGE_THEMES[currentRoute.name]; + currentScreenBackgroundColor = screenTheme.backgroundColor; + newStatusBarStyle = screenTheme.statusBarStyle; + } + + // Don't update the status bar style if it's the same as the current one, to prevent flashing. + if (newStatusBarStyle === statusBarStyle) { + updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor}); + } else { + updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle: newStatusBarStyle}); + setStatusBarStyle(newStatusBarStyle); + } + }, + [statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle], + ); + + // Add navigation state listeners to update the status bar every time the route changes + // We have to pass a count as the listener id, because "react-navigation" somehow doesn't remove listeners properyl + useEffect(() => { + if (isDisabled) { + return; + } + + const listenerId = ++listenerCount.current; + const listener = () => updateStatusBarStyle(listenerId); + + navigationRef.addListener('state', listener); + return () => navigationRef.removeListener('state', listener); + }, [isDisabled, theme.appBG, updateStatusBarStyle]); + + // Update the status bar style everytime the theme changes + useEffect(() => { + if (isDisabled) { + return; + } + + updateStatusBarStyle(); + }, [isDisabled, theme, updateStatusBarStyle]); + + // Update the global background (on web) everytime the theme changes. + // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web. + useEffect(() => { + if (isDisabled) { + return; + } + + updateGlobalBackgroundColor(theme); + }, [isDisabled, theme]); + + if (isDisabled) { + return null; + } + + return ; +} + +CustomStatusBarAndBackground.displayName = 'CustomStatusBarAndBackground'; + +export default CustomStatusBarAndBackground; diff --git a/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts new file mode 100644 index 000000000000..dac994ba8597 --- /dev/null +++ b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts @@ -0,0 +1,5 @@ +import type UpdateGlobalBackgroundColor from './types'; + +const updateGlobalBackgroundColor: UpdateGlobalBackgroundColor = () => undefined; + +export default updateGlobalBackgroundColor; diff --git a/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts new file mode 100644 index 000000000000..481d866dbe4f --- /dev/null +++ b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts @@ -0,0 +1,8 @@ +import UpdateGlobalBackgroundColor from './types'; + +const updateGlobalBackgroundColor: UpdateGlobalBackgroundColor = (theme) => { + const htmlElement = document.getElementsByTagName('html')[0]; + htmlElement.style.setProperty('background-color', theme.appBG); +}; + +export default updateGlobalBackgroundColor; diff --git a/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts new file mode 100644 index 000000000000..83bd36a9428a --- /dev/null +++ b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts @@ -0,0 +1,5 @@ +import {ThemeColors} from '@styles/theme/types'; + +type UpdateGlobalBackgroundColor = (theme: ThemeColors) => void; + +export default UpdateGlobalBackgroundColor; diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.android.ts similarity index 100% rename from src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.android.ts diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ios.ts similarity index 100% rename from src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ios.ts diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ts similarity index 100% rename from src/components/CustomStatusBar/updateStatusBarAppearance/index.ts rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ts diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/types.ts similarity index 77% rename from src/components/CustomStatusBar/updateStatusBarAppearance/types.ts rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/types.ts index 3d16b5944a31..823f0059eccf 100644 --- a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts +++ b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/types.ts @@ -1,4 +1,4 @@ -import {StatusBarStyle} from '@styles/styles'; +import {StatusBarStyle} from '@styles/index'; type UpdateStatusBarAppearanceProps = { backgroundColor?: string; diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.js b/src/components/DatePicker/CalendarPicker/ArrowIcon.js index a03e18085706..793aca9e7635 100644 --- a/src/components/DatePicker/CalendarPicker/ArrowIcon.js +++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.js @@ -3,8 +3,8 @@ import React from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.js b/src/components/DatePicker/CalendarPicker/YearPickerModal.js index f51d869efbac..e8883648051c 100644 --- a/src/components/DatePicker/CalendarPicker/YearPickerModal.js +++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.js @@ -7,7 +7,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import {radioListItemPropTypes} from '@components/SelectionList/selectionListPropTypes'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index ac6454d25975..8af550c9dc66 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -8,7 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import TextInput from '@components/TextInput'; import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import CalendarPicker from './CalendarPicker'; diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js index 3c7366949ac1..622767b8a5f8 100644 --- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js +++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js @@ -8,10 +8,10 @@ import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx index 82f9c5799b78..440457d22965 100644 --- a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx +++ b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx @@ -2,8 +2,8 @@ import React, {RefObject, useCallback} from 'react'; import {Text as RNText, StyleProp, TextStyle} from 'react-native'; import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; +import useThemeStyles from '@hooks/useThemeStyles'; import {AvatarSource} from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; type DisplayNamesTooltipItemProps = { index?: number; diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx index 8c8720c7c99f..43061ada9a94 100644 --- a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx +++ b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx @@ -2,7 +2,7 @@ import React, {Fragment, useCallback, useRef} from 'react'; import {Text as RNText, View} from 'react-native'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import DisplayNamesTooltipItem from './DisplayNamesTooltipItem'; import DisplayNamesProps from './types'; diff --git a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx index 1854ebe2353d..761b0b66ee2c 100644 --- a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx +++ b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {StyleProp, TextStyle} from 'react-native'; import Text from '@components/Text'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; type DisplayNamesWithoutTooltipProps = { /** The full title of the DisplayNames component (not split up) */ diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index cbf25fd2753b..7d1d3c99f48d 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -5,13 +5,13 @@ import _ from 'underscore'; import EReceiptBackground from '@assets/images/eReceipt_background.svg'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ReceiptUtils from '@libs/ReceiptUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import PendingMapView from './MapView/PendingMapView'; diff --git a/src/components/DistanceMapView/index.android.js b/src/components/DistanceMapView/index.android.js index 532d42ac0be5..fa40bd50673e 100644 --- a/src/components/DistanceMapView/index.android.js +++ b/src/components/DistanceMapView/index.android.js @@ -6,8 +6,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import MapView from '@components/MapView'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as distanceMapViewPropTypes from './distanceMapViewPropTypes'; function DistanceMapView(props) { diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js index d374f90a1b6c..d2813c152a64 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.js +++ b/src/components/DistanceRequest/DistanceRequestFooter.js @@ -10,9 +10,9 @@ import DistanceMapView from '@components/DistanceMapView'; import * as Expensicons from '@components/Icon/Expensicons'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as TransactionUtils from '@libs/TransactionUtils'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.js index 1735e244a347..2aa2ac58f379 100644 --- a/src/components/DistanceRequest/DistanceRequestRenderItem.js +++ b/src/components/DistanceRequest/DistanceRequestRenderItem.js @@ -5,7 +5,7 @@ import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@styles/themes/useTheme'; +import useTheme from '@hooks/useTheme'; const propTypes = { /** The waypoints for the distance request */ diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js index be34a42ead5e..b2fd16cb7d97 100644 --- a/src/components/DistanceRequest/index.js +++ b/src/components/DistanceRequest/index.js @@ -14,12 +14,12 @@ import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as IOUUtils from '@libs/IOUUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as TransactionUtils from '@libs/TransactionUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as MapboxToken from '@userActions/MapboxToken'; import * as Transaction from '@userActions/Transaction'; diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx index 6a7d78768ed7..65afe8c7e4eb 100644 --- a/src/components/DotIndicatorMessage.tsx +++ b/src/components/DotIndicatorMessage.tsx @@ -1,11 +1,11 @@ /* eslint-disable react/no-array-index-key */ import React from 'react'; import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import fileDownload from '@libs/fileDownload'; import * as Localize from '@libs/Localize'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/DragAndDrop/NoDropZone/index.tsx b/src/components/DragAndDrop/NoDropZone/index.tsx index 9f2c700b8918..4760a16fd20b 100644 --- a/src/components/DragAndDrop/NoDropZone/index.tsx +++ b/src/components/DragAndDrop/NoDropZone/index.tsx @@ -1,7 +1,7 @@ import React, {useRef} from 'react'; import {View} from 'react-native'; import useDragAndDrop from '@hooks/useDragAndDrop'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import type NoDropZoneProps from './types'; function NoDropZone({children}: NoDropZoneProps) { diff --git a/src/components/DragAndDrop/Provider/index.tsx b/src/components/DragAndDrop/Provider/index.tsx index 761c512497ac..a5da9cc45a36 100644 --- a/src/components/DragAndDrop/Provider/index.tsx +++ b/src/components/DragAndDrop/Provider/index.tsx @@ -3,7 +3,7 @@ import Str from 'expensify-common/lib/str'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import {View} from 'react-native'; import useDragAndDrop from '@hooks/useDragAndDrop'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import type {DragAndDropContextParams, DragAndDropProviderProps, SetOnDropHandlerCallback} from './types'; const DragAndDropContext = React.createContext({}); diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx index e7ff058234b7..f532b21720da 100644 --- a/src/components/DraggableList/index.native.tsx +++ b/src/components/DraggableList/index.native.tsx @@ -1,7 +1,7 @@ import React from 'react'; import DraggableFlatList from 'react-native-draggable-flatlist'; import {FlatList} from 'react-native-gesture-handler'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import type {DraggableListProps} from './types'; function DraggableList({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps, ref: React.ForwardedRef>) { diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx index 28128002c589..b92691075424 100644 --- a/src/components/DraggableList/index.tsx +++ b/src/components/DraggableList/index.tsx @@ -1,7 +1,7 @@ import React, {useCallback} from 'react'; import {DragDropContext, Draggable, Droppable, type OnDragEndResponder} from 'react-beautiful-dnd'; import {ScrollView} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import type {DraggableListProps} from './types'; import useDraggableInPortal from './useDraggableInPortal'; diff --git a/src/components/EReceipt.js b/src/components/EReceipt.js index f5e5b7f2f6b3..12cea0df04ac 100644 --- a/src/components/EReceipt.js +++ b/src/components/EReceipt.js @@ -3,11 +3,11 @@ import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.js index 1f719862412b..7c782a0aa327 100644 --- a/src/components/EReceiptThumbnail.js +++ b/src/components/EReceiptThumbnail.js @@ -2,9 +2,9 @@ import PropTypes from 'prop-types'; import React, {useMemo, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js index c0c9fb8ea161..facafea13a70 100644 --- a/src/components/EmojiPicker/CategoryShortcutBar.js +++ b/src/components/EmojiPicker/CategoryShortcutBar.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CategoryShortcutButton from './CategoryShortcutButton'; const propTypes = { diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 1fcbe7e863e4..a7dc0d7bf564 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -4,10 +4,10 @@ import Icon from '@components/Icon'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import getButtonState from '@libs/getButtonState'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js index 96d7ee88b816..6c05a4b6a5b5 100644 --- a/src/components/EmojiPicker/EmojiPicker.js +++ b/src/components/EmojiPicker/EmojiPicker.js @@ -4,10 +4,10 @@ import {Dimensions} from 'react-native'; import _ from 'underscore'; import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; import withViewportOffsetTop from '@components/withViewportOffsetTop'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import calculateAnchorPosition from '@libs/calculateAnchorPosition'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import EmojiPickerMenu from './EmojiPickerMenu'; diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index 165646d4795d..869fe1edbfe5 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -5,9 +5,9 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; const propTypes = { diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js index 5dc43ef47699..43687ec4b7a8 100644 --- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js +++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js @@ -7,9 +7,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import Text from '@components/Text'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import CONST from '@src/CONST'; diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 263f5929d567..36594dabcd30 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -11,6 +11,8 @@ import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; @@ -18,8 +20,6 @@ import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import * as ReportUtils from '@libs/ReportUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index eb8217bb5633..6ad93538c83b 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -12,11 +12,11 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js index 69690fa882c9..2b574b0b533f 100644 --- a/src/components/EmojiPicker/EmojiSkinToneList.js +++ b/src/components/EmojiPicker/EmojiSkinToneList.js @@ -6,7 +6,7 @@ import * as Emojis from '@assets/emojis'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import EmojiPickerMenuItem from './EmojiPickerMenuItem'; import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex'; diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx index 01f840677e5e..2fcf8e827b4e 100644 --- a/src/components/EmojiSuggestions.tsx +++ b/src/components/EmojiSuggestions.tsx @@ -1,10 +1,10 @@ import React, {ReactElement, useCallback} from 'react'; import {View} from 'react-native'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import type {SimpleEmoji} from '@libs/EmojiTrie'; import * as EmojiUtils from '@libs/EmojiUtils'; import getStyledTextArray from '@libs/GetStyledTextArray'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import AutoCompleteSuggestions from './AutoCompleteSuggestions'; import Text from './Text'; diff --git a/src/components/EnvironmentBadge.tsx b/src/components/EnvironmentBadge.tsx index a3f321072988..6babbf119445 100644 --- a/src/components/EnvironmentBadge.tsx +++ b/src/components/EnvironmentBadge.tsx @@ -1,7 +1,7 @@ import React from 'react'; import useEnvironment from '@hooks/useEnvironment'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Environment from '@libs/Environment/Environment'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import pkg from '../../package.json'; import Badge from './Badge'; diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js index 6353bdf40283..3fd6688944f7 100644 --- a/src/components/ExceededCommentLength.js +++ b/src/components/ExceededCommentLength.js @@ -1,52 +1,23 @@ -import {debounce} from 'lodash'; import PropTypes from 'prop-types'; -import React, {useEffect, useMemo, useState} from 'react'; -import {withOnyx} from 'react-native-onyx'; +import React from 'react'; import useLocalize from '@hooks/useLocalize'; -import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import Text from './Text'; const propTypes = { - /** Report ID to get the comment from (used in withOnyx) */ - // eslint-disable-next-line react/no-unused-prop-types - reportID: PropTypes.string.isRequired, - - /** Text Comment */ - comment: PropTypes.string, - - /** Update UI on parent when comment length is exceeded */ - onExceededMaxCommentLength: PropTypes.func.isRequired, + shouldShowError: PropTypes.bool.isRequired, }; -const defaultProps = { - comment: '', -}; +const defaultProps = {}; function ExceededCommentLength(props) { const styles = useThemeStyles(); const {numberFormat, translate} = useLocalize(); - const [commentLength, setCommentLength] = useState(0); - const updateCommentLength = useMemo( - () => - debounce((comment, onExceededMaxCommentLength) => { - const newCommentLength = ReportUtils.getCommentLength(comment); - setCommentLength(newCommentLength); - onExceededMaxCommentLength(newCommentLength > CONST.MAX_COMMENT_LENGTH); - }, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME), - [], - ); - - useEffect(() => { - updateCommentLength(props.comment, props.onExceededMaxCommentLength); - }, [props.comment, props.onExceededMaxCommentLength, updateCommentLength]); - if (commentLength <= CONST.MAX_COMMENT_LENGTH) { + if (!props.shouldShowError) { return null; } - return ( `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, - initialValue: '', - }, -})(ExceededCommentLength); +export default ExceededCommentLength; diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx index 49559d1cc6d5..b1ef7c093e29 100644 --- a/src/components/ExpensifyWordmark.tsx +++ b/src/components/ExpensifyWordmark.tsx @@ -5,9 +5,9 @@ import DevLogo from '@assets/images/expensify-logo--dev.svg'; import StagingLogo from '@assets/images/expensify-logo--staging.svg'; import ProductionLogo from '@assets/images/expensify-wordmark.svg'; import useEnvironment from '@hooks/useEnvironment'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import withWindowDimensions from './withWindowDimensions'; diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js index 7b0c70372579..bf0852d179f1 100644 --- a/src/components/FeatureList.js +++ b/src/components/FeatureList.js @@ -3,7 +3,7 @@ import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import MenuItem from './MenuItem'; import menuItemPropTypes from './menuItemPropTypes'; import Text from './Text'; diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx index 4b32e1b8ce81..7fd6811c1df6 100644 --- a/src/components/FixedFooter.tsx +++ b/src/components/FixedFooter.tsx @@ -1,6 +1,6 @@ import React, {ReactNode} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; type FixedFooterProps = { /** Children to wrap in FixedFooter. */ diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js index ea6db244091a..e846c1f188e2 100644 --- a/src/components/FocusModeNotification.js +++ b/src/components/FocusModeNotification.js @@ -1,7 +1,7 @@ import React, {useEffect} from 'react'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Link from '@userActions/Link'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; @@ -10,9 +10,9 @@ import Text from './Text'; import TextLinkWithRef from './TextLink'; function FocusModeNotification() { + const styles = useThemeStyles(); const {environmentURL} = useEnvironment(); const {translate} = useLocalize(); - const styles = useThemeStyles(); useEffect(() => { User.updateChatPriorityMode(CONST.PRIORITY_MODE.GSD, true); }, []); diff --git a/src/components/Form.js b/src/components/Form.js index e129ad7f9209..7b6f587e7bd1 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -4,13 +4,13 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, import {Keyboard, ScrollView, StyleSheet} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import FormUtils from '@libs/FormUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Visibility from '@libs/Visibility'; import stylePropTypes from '@styles/stylePropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as FormActions from '@userActions/FormActions'; import CONST from '@src/CONST'; import FormAlertWithSubmitButton from './FormAlertWithSubmitButton'; diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js index 638b6e5f8d19..da34262a8af8 100644 --- a/src/components/Form/FormWrapper.js +++ b/src/components/Form/FormWrapper.js @@ -8,9 +8,9 @@ import FormSubmit from '@components/FormSubmit'; import refPropTypes from '@components/refPropTypes'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; import ScrollViewWithContext from '@components/ScrollViewWithContext'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import stylePropTypes from '@styles/stylePropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import errorsPropType from './errorsPropType'; const propTypes = { diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js index 6886b6fdcaaf..86e88c27b388 100644 --- a/src/components/FormAlertWithSubmitButton.js +++ b/src/components/FormAlertWithSubmitButton.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import Button from './Button'; import FormAlertWrapper from './FormAlertWrapper'; diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index d6612f6ae688..6062ea8f7803 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -2,8 +2,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; -import useThemeStyles from '@styles/useThemeStyles'; import FormHelpMessage from './FormHelpMessage'; import networkPropTypes from './networkPropTypes'; import {withNetwork} from './OnyxProvider'; diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index 3d0b2df443f2..43709b51db44 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -1,9 +1,9 @@ import isEmpty from 'lodash/isEmpty'; import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Localize from '@libs/Localize'; -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'; diff --git a/src/components/FormScrollView.tsx b/src/components/FormScrollView.tsx index c2f01e1d0511..4646a534e750 100644 --- a/src/components/FormScrollView.tsx +++ b/src/components/FormScrollView.tsx @@ -1,6 +1,6 @@ import React, {ForwardedRef} from 'react'; import {ScrollView, ScrollViewProps} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; type FormScrollViewProps = ScrollViewProps & { /** Form elements */ diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx index fc0687f6da18..2b5f7b3ada72 100644 --- a/src/components/FullscreenLoadingIndicator.tsx +++ b/src/components/FullscreenLoadingIndicator.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {ActivityIndicator, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; type FullScreenLoadingIndicatorProps = { style?: StyleProp; diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.js index 82672edb14c2..ccc404d415d7 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.js +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.js @@ -1,7 +1,7 @@ import React from 'react'; import {Animated} from 'react-native'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes'; const propTypes = { diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js index 457a9dce66d9..207033f8fac2 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js @@ -1,8 +1,8 @@ import React from 'react'; import {Animated} from 'react-native'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes'; const propTypes = { diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index faf1ec9cfa16..bcb4a8703b94 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -5,10 +5,10 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Pressables from '@components/Pressable'; import Text from '@components/Text'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Growl from '@libs/Growl'; import useNativeDriver from '@libs/useNativeDriver'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import GrowlNotificationContainer from './GrowlNotificationContainer'; diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index 9a2d7c673c5b..86ddf0a52bb3 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -2,9 +2,9 @@ import PropTypes from 'prop-types'; import React, {useMemo} from 'react'; import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html'; import _ from 'underscore'; +import useThemeStyles from '@hooks/useThemeStyles'; import convertToLTR from '@libs/convertToLTR'; -import singleFontFamily from '@styles/fontFamily/singleFontFamily'; -import useThemeStyles from '@styles/useThemeStyles'; +import singleFontFamily from '@styles/utils/fontFamily/singleFontFamily'; import * as HTMLEngineUtils from './htmlEngineUtils'; import htmlRenderers from './HTMLRenderers'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js index 49642308a357..8fd907470c19 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js @@ -6,8 +6,8 @@ import AnchorForCommentsOnly from '@components/AnchorForCommentsOnly'; import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils'; import Text from '@components/Text'; import useEnvironment from '@hooks/useEnvironment'; +import useThemeStyles from '@hooks/useThemeStyles'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import htmlRendererPropTypes from './htmlRendererPropTypes'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js index 9d101b8a5190..1932eaaf8a4f 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js @@ -3,7 +3,7 @@ import {splitBoxModelStyle} from 'react-native-render-html'; import _ from 'underscore'; import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils'; import InlineCodeBlock from '@components/InlineCodeBlock'; -import useStyleUtils from '@styles/useStyleUtils'; +import useStyleUtils from '@hooks/useStyleUtils'; import htmlRendererPropTypes from './htmlRendererPropTypes'; function CodeRenderer(props) { diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js index e97d01808a6e..9ff5fdecae13 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js @@ -2,9 +2,8 @@ import React from 'react'; import _ from 'underscore'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import editedLabelStyles from '@styles/editedLabelStyles'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import htmlRendererPropTypes from './htmlRendererPropTypes'; @@ -32,7 +31,7 @@ function EditedRenderer(props) { {...defaultRendererProps} fontSize={variables.fontSizeSmall} color={theme.textSupporting} - style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]} + style={[styles.editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]} > {props.translate('reportActionCompose.edited')} diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index f5ecc106d629..05016a25394a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -5,10 +5,10 @@ import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; import ThumbnailImage from '@components/ThumbnailImage'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js index 82769598d84a..93ede229876d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js @@ -2,7 +2,7 @@ import React from 'react'; import {TNodeChildrenRenderer} from 'react-native-render-html'; import _ from 'underscore'; import Text from '@components/Text'; -import useStyleUtils from '@styles/useStyleUtils'; +import useStyleUtils from '@hooks/useStyleUtils'; import htmlRendererPropTypes from './htmlRendererPropTypes'; function MentionHereRenderer(props) { diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js index 14580bf90bfb..11ffabe4fe6a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js @@ -8,13 +8,13 @@ import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import htmlRendererPropTypes from './htmlRendererPropTypes'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index ea8d3858c49b..07954cc97a00 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -6,8 +6,8 @@ import htmlRendererPropTypes from '@components/HTMLEngineProvider/HTMLRenderers/ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; import withLocalize from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 46fe1a25c920..c02f21d7c6f2 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,6 @@ import React, {ReactElement} from 'react'; import {StyleProp, TextStyle, View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import EnvironmentBadge from './EnvironmentBadge'; import Text from './Text'; diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js deleted file mode 100644 index 07ea1ea6f48d..000000000000 --- a/src/components/HeaderGap/index.desktop.js +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {memo} from 'react'; -import {View} from 'react-native'; -import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; -import compose from '@libs/compose'; - -const propTypes = { - /** Styles to apply to the HeaderGap */ - // eslint-disable-next-line react/forbid-prop-types - styles: PropTypes.arrayOf(PropTypes.object), - ...withThemeStylesPropTypes, -}; - -const defaultProps = { - styles: [], -}; - -function HeaderGap(props) { - return ; -} - -HeaderGap.displayName = 'HeaderGap'; -HeaderGap.propTypes = propTypes; -HeaderGap.defaultProps = defaultProps; -export default compose(memo, withThemeStyles)(HeaderGap); diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx new file mode 100644 index 000000000000..3687bb2e6b02 --- /dev/null +++ b/src/components/HeaderGap/index.desktop.tsx @@ -0,0 +1,13 @@ +import React, {memo} from 'react'; +import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; +import type {HeaderGapProps, HeaderGapReturnType} from './types'; + +function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType { + const themeStyles = useThemeStyles(); + return ; +} + +HeaderGap.displayName = 'HeaderGap'; + +export default memo(HeaderGap); diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js deleted file mode 100644 index 35e6bf92fb5d..000000000000 --- a/src/components/HeaderGap/index.js +++ /dev/null @@ -1,6 +0,0 @@ -function HeaderGap() { - return null; -} - -HeaderGap.displayName = 'HeaderGap'; -export default HeaderGap; diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx new file mode 100644 index 000000000000..191923efd7c8 --- /dev/null +++ b/src/components/HeaderGap/index.tsx @@ -0,0 +1,10 @@ +import type {HeaderGapProps, HeaderGapReturnType} from './types'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType { + return null; +} + +HeaderGap.displayName = 'HeaderGap'; + +export default HeaderGap; diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts new file mode 100644 index 000000000000..55a202c2e48c --- /dev/null +++ b/src/components/HeaderGap/types.ts @@ -0,0 +1,10 @@ +import {ReactNode} from 'react'; +import {StyleProp, ViewStyle} from 'react-native'; + +type HeaderGapProps = { + styles?: StyleProp; +}; + +type HeaderGapReturnType = ReactNode; + +export type {HeaderGapProps, HeaderGapReturnType}; diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js index 27c9656abd1a..9ef5d4f83a06 100644 --- a/src/components/HeaderPageLayout.js +++ b/src/components/HeaderPageLayout.js @@ -3,11 +3,11 @@ import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; import _ from 'underscore'; import useNetwork from '@hooks/useNetwork'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import FixedFooter from './FixedFooter'; import HeaderWithBackButton from './HeaderWithBackButton'; import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes'; diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js index 9de8bd6a22c7..5c76d1665310 100755 --- a/src/components/HeaderWithBackButton/index.js +++ b/src/components/HeaderWithBackButton/index.js @@ -10,12 +10,12 @@ import ThreeDotsMenu from '@components/ThreeDotsMenu'; import Tooltip from '@components/Tooltip'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import getButtonState from '@libs/getButtonState'; import Navigation from '@libs/Navigation/Navigation'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import headerWithBackButtonPropTypes from './headerWithBackButtonPropTypes'; diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 5e4c0192ca86..5a843af6690b 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -1,7 +1,7 @@ import {SvgProps} from 'react-native-svg'; import GenericBank from '@assets/images/bankicons/generic-bank-account.svg'; import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; -import {type ThemeStyles} from '@styles/styles'; +import {type ThemeStyles} from '@styles/index'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank'; diff --git a/src/components/Icon/svgs/LoungeAccessIcon.tsx b/src/components/Icon/svgs/LoungeAccessIcon.tsx index 48b140da3bc8..e57573c439f1 100644 --- a/src/components/Icon/svgs/LoungeAccessIcon.tsx +++ b/src/components/Icon/svgs/LoungeAccessIcon.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Svg, {G, Path, Polygon} from 'react-native-svg'; -import useTheme from '@styles/themes/useTheme'; +import useTheme from '@hooks/useTheme'; type LoungeAccessIconProps = { /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */ diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js index 0557c7a6ca7b..9980d8a7879a 100644 --- a/src/components/IllustratedHeaderPageLayout.js +++ b/src/components/IllustratedHeaderPageLayout.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import HeaderPageLayout from './HeaderPageLayout'; import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes'; import Lottie from './Lottie'; diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 7ec5b0c33432..0db1f87cd704 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -4,9 +4,9 @@ import {View} from 'react-native'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Image from '@components/Image'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js index 5ebd03170d92..6c04a1c83ee5 100644 --- a/src/components/ImageView/index.native.js +++ b/src/components/ImageView/index.native.js @@ -5,8 +5,8 @@ import ImageZoom from 'react-native-image-pan-zoom'; import _ from 'underscore'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Image from '@components/Image'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; /** diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx index 82b4b4759112..cffbc8941388 100644 --- a/src/components/ImageWithSizeCalculation.tsx +++ b/src/components/ImageWithSizeCalculation.tsx @@ -2,8 +2,8 @@ import delay from 'lodash/delay'; import React, {useEffect, useRef, useState} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import {OnLoadEvent} from 'react-native-fast-image'; +import useThemeStyles from '@hooks/useThemeStyles'; import Log from '@libs/Log'; -import useThemeStyles from '@styles/useThemeStyles'; import FullscreenLoadingIndicator from './FullscreenLoadingIndicator'; import Image from './Image'; import RESIZE_MODES from './Image/resizeModes'; diff --git a/src/components/Indicator.tsx b/src/components/Indicator.tsx index 5332c4bd984f..7b7eae97fd86 100644 --- a/src/components/Indicator.tsx +++ b/src/components/Indicator.tsx @@ -2,10 +2,10 @@ import React from 'react'; import {StyleSheet, View} from 'react-native'; import {OnyxCollection, withOnyx} from 'react-native-onyx'; import {OnyxEntry} from 'react-native-onyx/lib/types'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as UserUtils from '@libs/UserUtils'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as PaymentMethods from '@userActions/PaymentMethods'; import ONYXKEYS from '@src/ONYXKEYS'; import type {BankAccountList, FundList, LoginList, Policy, PolicyMembers, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx'; diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx index 6dbd17f18e2a..f0bb4e3ffd53 100644 --- a/src/components/InlineCodeBlock/WrappedText.tsx +++ b/src/components/InlineCodeBlock/WrappedText.tsx @@ -1,7 +1,7 @@ import React, {Fragment} from 'react'; import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import Text from '@components/Text'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx index 308b88e76e88..3a70308fa0cc 100644 --- a/src/components/InlineCodeBlock/index.native.tsx +++ b/src/components/InlineCodeBlock/index.native.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type {TText} from 'react-native-render-html'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import type InlineCodeBlockProps from './types'; import WrappedText from './WrappedText'; diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx index 6e6423a19a35..bef4c21289d5 100644 --- a/src/components/InlineSystemMessage.tsx +++ b/src/components/InlineSystemMessage.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; diff --git a/src/components/InvertedFlatList/index.native.js b/src/components/InvertedFlatList/index.native.js index d52d5a6d08f7..59810cba62c4 100644 --- a/src/components/InvertedFlatList/index.native.js +++ b/src/components/InvertedFlatList/index.native.js @@ -1,5 +1,5 @@ import React, {forwardRef} from 'react'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import BaseInvertedFlatList from './BaseInvertedFlatList'; import CellRendererComponent from './CellRendererComponent'; diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js index e9eb1e4c54c8..5ad25d23f484 100644 --- a/src/components/KYCWall/BaseKYCWall.js +++ b/src/components/KYCWall/BaseKYCWall.js @@ -42,6 +42,7 @@ function KYCWall({ source, userWallet, walletTerms, + shouldShowPersonalBankAccountOption, }) { const anchorRef = useRef(null); const transferBalanceButtonRef = useRef(null); @@ -213,6 +214,7 @@ function KYCWall({ setShouldShowAddPaymentMenu(false); selectPaymentMethod(item); }} + shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption} /> {children(continueAction, anchorRef)} diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js index 58db2c1c1940..2f14f1e12e11 100644 --- a/src/components/KYCWall/kycWallPropTypes.js +++ b/src/components/KYCWall/kycWallPropTypes.js @@ -62,6 +62,9 @@ const propTypes = { /** Callback for when a payment method has been selected */ onSelectPaymentMethod: PropTypes.func, + + /** Whether the personal bank account option should be shown */ + shouldShowPersonalBankAccountOption: PropTypes.bool, }; const defaultProps = { @@ -82,6 +85,7 @@ const defaultProps = { }, shouldIncludeDebitCard: true, onSelectPaymentMethod: () => {}, + shouldShowPersonalBankAccountOption: false, }; export {propTypes, defaultProps}; diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index 8febd7f247d6..71b14b6fadcd 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/src/components/LHNOptionsList/LHNOptionsList.js @@ -8,13 +8,13 @@ import _ from 'underscore'; import participantPropTypes from '@components/participantPropTypes'; import transactionPropTypes from '@components/transactionPropTypes'; import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import reportPropTypes from '@pages/reportPropTypes'; import stylePropTypes from '@styles/stylePropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 9b7141249180..9e50c4b1690a 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -15,6 +15,9 @@ import SubscriptAvatar from '@components/SubscriptAvatar'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; import DomUtils from '@libs/DomUtils'; @@ -24,9 +27,6 @@ import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManag import * as ReportUtils from '@libs/ReportUtils'; import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx index c04b0131744f..46adb1a4895e 100644 --- a/src/components/LocalePicker.tsx +++ b/src/components/LocalePicker.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as App from '@userActions/App'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js index 5c0552e6bce7..14601c7c4ba2 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js @@ -8,9 +8,9 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import Tooltip from '@components/Tooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import colors from '@styles/colors'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; +import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes'; diff --git a/src/components/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx index 868eaf8cb95e..2bf7df056c4d 100644 --- a/src/components/Lottie/Lottie.tsx +++ b/src/components/Lottie/Lottie.tsx @@ -3,7 +3,7 @@ import React, {ForwardedRef, forwardRef} from 'react'; import {View} from 'react-native'; import DotLottieAnimation from '@components/LottieAnimations/types'; import useNetwork from '@hooks/useNetwork'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; type Props = { source: DotLottieAnimation; diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 91430602a115..55a65237a691 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -4,10 +4,10 @@ import {StyleSheet, View} from 'react-native'; import {TapGestureHandler} from 'react-native-gesture-handler'; import _ from 'underscore'; import useNetwork from '@hooks/useNetwork'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import FormHelpMessage from './FormHelpMessage'; import networkPropTypes from './networkPropTypes'; diff --git a/src/components/MapView/Direction.tsx b/src/components/MapView/Direction.tsx index ca4b26f2f2db..b3162149a48d 100644 --- a/src/components/MapView/Direction.tsx +++ b/src/components/MapView/Direction.tsx @@ -1,5 +1,5 @@ import Mapbox from '@rnmapbox/maps'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import {DirectionProps} from './MapViewTypes'; function Direction({coordinates}: DirectionProps) { diff --git a/src/components/MapView/Direction.website.tsx b/src/components/MapView/Direction.website.tsx index 9e5af2aa2b1d..f85bda125473 100644 --- a/src/components/MapView/Direction.website.tsx +++ b/src/components/MapView/Direction.website.tsx @@ -5,7 +5,7 @@ import React from 'react'; import {Layer, Source} from 'react-map-gl'; import {View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import {DirectionProps} from './MapViewTypes'; function Direction({coordinates}: DirectionProps) { diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 91f9d9930079..7b3d73479dde 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -3,10 +3,10 @@ import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps'; import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import useThemeStyles from '@hooks/useThemeStyles'; import setUserLocation from '@libs/actions/UserLocation'; import compose from '@libs/compose'; import getCurrentPosition from '@libs/getCurrentPosition'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index ecdb62efbe15..7910d7f93a29 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -9,9 +9,9 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState import Map, {MapRef, Marker} from 'react-map-gl'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import setUserLocation from '@userActions/UserLocation'; import CONST from '@src/CONST'; import useLocalize from '@src/hooks/useLocalize'; diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 2acdb59d3782..0af816785e9a 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -4,7 +4,7 @@ import {View} from 'react-native'; import BlockingView from '@components/BlockingViews/BlockingView'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import {PendingMapViewProps} from './MapViewTypes'; diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index b42540bacb13..f1daaaa229be 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -1,9 +1,9 @@ import React, {useCallback} from 'react'; import {View} from 'react-native'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import getStyledTextArray from '@libs/GetStyledTextArray'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import {Icon} from '@src/types/onyx/OnyxCommon'; import AutoCompleteSuggestions from './AutoCompleteSuggestions'; diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 679e8853742d..b1f6b7f7319a 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -2,14 +2,14 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ControlSelection from '@libs/ControlSelection'; import convertToLTR from '@libs/convertToLTR'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import getButtonState from '@libs/getButtonState'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/components/MessagesRow.tsx b/src/components/MessagesRow.tsx index c0b0a7807deb..e019bd1aef30 100644 --- a/src/components/MessagesRow.tsx +++ b/src/components/MessagesRow.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Localize from '@libs/Localize'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import DotIndicatorMessage from './DotIndicatorMessage'; diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 1ea284b55280..89640c56f5ef 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -4,12 +4,12 @@ import ReactNativeModal from 'react-native-modal'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import usePrevious from '@hooks/usePrevious'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ComposerFocusManager from '@libs/ComposerFocusManager'; import useNativeDriver from '@libs/useNativeDriver'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index bfc899f9c278..4269420dcd7f 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,8 +1,8 @@ import React, {useState} from 'react'; import withWindowDimensions from '@components/withWindowDimensions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; import StatusBar from '@libs/StatusBar'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; import CONST from '@src/CONST'; import BaseModal from './BaseModal'; import BaseModalProps from './types'; diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 9a1f59d64efa..f73ddef0dfa0 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -5,6 +5,7 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -12,7 +13,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import iouReportPropTypes from '@pages/iouReportPropTypes'; import nextStepPropTypes from '@pages/nextStepPropTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js index e693ce5e502b..687bc92ffbcd 100644 --- a/src/components/MoneyReportHeaderStatusBar.js +++ b/src/components/MoneyReportHeaderStatusBar.js @@ -1,9 +1,9 @@ import React, {useMemo} from 'react'; import {Text, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as NextStepUtils from '@libs/NextStepUtils'; import nextStepPropTypes from '@pages/nextStepPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import RenderHTML from './RenderHTML'; diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 1bd7b71c5aa3..fc3e4b095873 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -9,6 +9,8 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; @@ -22,8 +24,6 @@ import * as ReceiptUtils from '@libs/ReceiptUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -521,6 +521,7 @@ function MoneyRequestConfirmationList(props) { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }} + shouldShowPersonalBankAccountOption /> ) : ( ReactElement; diff --git a/src/components/PinButton.js b/src/components/PinButton.js index 4b336b1d71d4..182e49054100 100644 --- a/src/components/PinButton.js +++ b/src/components/PinButton.js @@ -1,7 +1,7 @@ import React from 'react'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 2106efb9d31e..1bb50dfbd89e 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -9,8 +9,8 @@ import Text from '@components/Text'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes'; diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js index b2c94c81770f..7de5be113e53 100644 --- a/src/components/PopoverWithMeasuredContent.js +++ b/src/components/PopoverWithMeasuredContent.js @@ -2,9 +2,9 @@ import PropTypes from 'prop-types'; import React, {useMemo, useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import PopoverWithMeasuredContentStyleUtils from '@styles/PopoverWithMeasuredContentStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import PopoverWithMeasuredContentUtils from '@libs/PopoverWithMeasuredContentUtils'; import CONST from '@src/CONST'; import Popover from './Popover'; import {defaultProps as defaultPopoverProps, propTypes as popoverPropTypes} from './Popover/popoverPropTypes'; @@ -128,8 +128,8 @@ function PopoverWithMeasuredContent(props) { }; }, [props.anchorPosition, props.anchorAlignment, popoverWidth, popoverHeight]); - const horizontalShift = PopoverWithMeasuredContentStyleUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth); - const verticalShift = PopoverWithMeasuredContentStyleUtils.computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight); + const horizontalShift = PopoverWithMeasuredContentUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth); + const verticalShift = PopoverWithMeasuredContentUtils.computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight); const shiftedAnchorPosition = { left: adjustedAnchorPosition.left + horizontalShift, bottom: windowHeight - (adjustedAnchorPosition.top + popoverHeight) - verticalShift, diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index c13d9e1a0931..43ca1c0de818 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -5,8 +5,8 @@ import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes'; import {PopoverContext} from '@components/PopoverProvider'; import withWindowDimensions from '@components/withWindowDimensions'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Modal from '@userActions/Modal'; function Popover(props) { diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 0d0ed33d5138..0a9f544bcee1 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -2,11 +2,11 @@ import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from ' // eslint-disable-next-line no-restricted-imports import {GestureResponderEvent, Pressable, View} from 'react-native'; import useSingleExecution from '@hooks/useSingleExecution'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import Accessibility from '@libs/Accessibility'; import HapticFeedback from '@libs/HapticFeedback'; import KeyboardShortcut from '@libs/KeyboardShortcut'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import PressableProps, {PressableRef} from './types'; diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index ec9e54c83b7e..e768f0d0b3fa 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -6,10 +6,10 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import PressableProps, {PressableRef} from './GenericPressable/types'; import PressableWithoutFeedback from './PressableWithoutFeedback'; diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 437123dbe952..0cb53e40325a 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -2,9 +2,9 @@ import React, {forwardRef, useEffect, useRef} from 'react'; import {GestureResponderEvent} from 'react-native'; import {PressableRef} from '@components/Pressable/GenericPressable/types'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import PressableWithSecondaryInteractionProps from './types'; /** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */ diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx index 5363281ddc67..99a3a1f64118 100644 --- a/src/components/QRCode.tsx +++ b/src/components/QRCode.tsx @@ -1,7 +1,7 @@ import React, {Ref} from 'react'; import {ImageSourcePropType} from 'react-native'; import QRCodeLibrary from 'react-native-qrcode-svg'; -import useTheme from '@styles/themes/useTheme'; +import useTheme from '@hooks/useTheme'; import CONST from '@src/CONST'; type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO; diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js index f7bb5cb5f788..f644db844e53 100644 --- a/src/components/QRShare/index.js +++ b/src/components/QRShare/index.js @@ -4,8 +4,8 @@ import _ from 'underscore'; import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg'; import QRCode from '@components/QRCode'; import Text from '@components/Text'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import {qrShareDefaultProps, qrSharePropTypes} from './propTypes'; diff --git a/src/components/RNTextInput.tsx b/src/components/RNTextInput.tsx index 28555abe3266..ff812e7c799b 100644 --- a/src/components/RNTextInput.tsx +++ b/src/components/RNTextInput.tsx @@ -2,16 +2,20 @@ import React, {ForwardedRef} from 'react'; // eslint-disable-next-line no-restricted-imports import {TextInput, TextInputProps} from 'react-native'; import Animated, {AnimatedProps} from 'react-native-reanimated'; +import useTheme from '@hooks/useTheme'; // Convert the underlying TextInput into an Animated component so that we can take an animated ref and pass it to a worklet const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); // eslint-disable-next-line @typescript-eslint/no-explicit-any function RNTextInputWithRef(props: TextInputProps, ref: ForwardedRef>>) { + const theme = useTheme(); + return ( { if (typeof ref !== 'function') { return; diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx index 68fcda6677c8..2d18ccb480b8 100644 --- a/src/components/RadioButton.tsx +++ b/src/components/RadioButton.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/RadioButtonWithLabel.tsx b/src/components/RadioButtonWithLabel.tsx index 7d8df23bae49..4c223262ac50 100644 --- a/src/components/RadioButtonWithLabel.tsx +++ b/src/components/RadioButtonWithLabel.tsx @@ -1,6 +1,6 @@ import React, {ComponentType} from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import FormHelpMessage from './FormHelpMessage'; import * as Pressables from './Pressable'; import RadioButton from './RadioButton'; diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx index b83710bd85bf..8aa3ef7e8ffe 100644 --- a/src/components/RadioButtons.tsx +++ b/src/components/RadioButtons.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import RadioButtonWithLabel from './RadioButtonWithLabel'; type Choice = { diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js index 128eafd51ee8..61ad4ce76d64 100644 --- a/src/components/Reactions/AddReactionBubble.js +++ b/src/components/Reactions/AddReactionBubble.js @@ -7,9 +7,9 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as Session from '@userActions/Session'; diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 7ec72468ee91..3fd22a758f67 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -4,8 +4,8 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar import Text from '@components/Text'; import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js index 92913a7c4c5e..34d336887031 100644 --- a/src/components/Reactions/MiniQuickEmojiReactions.js +++ b/src/components/Reactions/MiniQuickEmojiReactions.js @@ -8,11 +8,11 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; import getButtonState from '@libs/getButtonState'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js index 9d32b0240a23..c932632f7bff 100644 --- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js +++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js @@ -7,8 +7,8 @@ import AddReactionBubble from '@components/Reactions/AddReactionBubble'; import EmojiReactionBubble from '@components/Reactions/EmojiReactionBubble'; import EmojiReactionsPropTypes from '@components/Reactions/EmojiReactionsPropTypes'; import Tooltip from '@components/Tooltip'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as EmojiUtils from '@libs/EmojiUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js index 1a7a06e9487d..bb6b03c5918b 100644 --- a/src/components/Reactions/ReactionTooltipContent.js +++ b/src/components/Reactions/ReactionTooltipContent.js @@ -5,8 +5,8 @@ import _ from 'underscore'; import Text from '@components/Text'; import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js index 7c504e35cb9f..547f4089857f 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.js +++ b/src/components/Reactions/ReportActionItemEmojiReactions.js @@ -7,11 +7,11 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import Tooltip from '@components/Tooltip'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import {ReactionListContext} from '@pages/home/ReportScreenContext'; -import useThemeStyles from '@styles/useThemeStyles'; import AddReactionBubble from './AddReactionBubble'; import EmojiReactionBubble from './EmojiReactionBubble'; import EmojiReactionsPropTypes from './EmojiReactionsPropTypes'; diff --git a/src/components/ReceiptEmptyState.js b/src/components/ReceiptEmptyState.js index 6af1cadd48c5..371518dd9a77 100644 --- a/src/components/ReceiptEmptyState.js +++ b/src/components/ReceiptEmptyState.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js index 72bf3ce1896d..bc0e70e64419 100644 --- a/src/components/ReimbursementAccountLoadingIndicator.js +++ b/src/components/ReimbursementAccountLoadingIndicator.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {StyleSheet, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView'; import FullScreenLoadingIndicator from './FullscreenLoadingIndicator'; import HeaderWithBackButton from './HeaderWithBackButton'; diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.js index 7c918b6a2d9c..f90ae67796b9 100644 --- a/src/components/ReportActionItem/ChronosOOOListActions.js +++ b/src/components/ReportActionItem/ChronosOOOListActions.js @@ -7,9 +7,9 @@ import Button from '@components/Button'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Chronos from '@userActions/Chronos'; const propTypes = { diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index c52d4abe371c..c12659e94673 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -7,13 +7,13 @@ import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; const propTypes = { diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index 040682990d2c..e0a3152a41b4 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -8,6 +8,7 @@ import {withNetwork} from '@components/OnyxProvider'; import refPropTypes from '@components/refPropTypes'; import RenderHTML from '@components/RenderHTML'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as IOUUtils from '@libs/IOUUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -17,7 +18,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import iouReportPropTypes from '@pages/iouReportPropTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 210a0575a310..12c6d0629370 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -14,9 +14,11 @@ import refPropTypes from '@components/refPropTypes'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import transactionPropTypes from '@components/transactionPropTypes'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import ControlSelection from '@libs/ControlSelection'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -28,9 +30,8 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import iouReportPropTypes from '@pages/iouReportPropTypes'; +import reportPropTypes from '@pages/reportPropTypes'; import * as PaymentMethods from '@userActions/PaymentMethods'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; @@ -64,20 +65,11 @@ const propTypes = { /* Onyx Props */ - /** Active IOU Report for current report */ - iouReport: PropTypes.shape({ - /** Account ID of the manager in this iou report */ - managerID: PropTypes.number, + /** chatReport associated with iouReport */ + chatReport: reportPropTypes, - /** Account ID of the creator of this iou report */ - ownerAccountID: PropTypes.number, - - /** Outstanding amount in cents of this transaction */ - total: PropTypes.number, - - /** Currency of outstanding amount of this transaction */ - currency: PropTypes.string, - }), + /** IOU report data object */ + iouReport: iouReportPropTypes, /** True if this is this IOU is a split instead of a 1:1 request */ isBillSplit: PropTypes.bool.isRequired, @@ -112,8 +104,6 @@ const propTypes = { /** Whether a message is a whisper */ isWhisper: PropTypes.bool, - - ...withLocalizePropTypes, }; const defaultProps = { @@ -124,6 +114,7 @@ const defaultProps = { checkIfContextMenuActive: () => {}, containerStyles: [], walletTerms: {}, + chatReport: {}, isHovered: false, personalDetails: {}, session: { @@ -138,6 +129,7 @@ function MoneyRequestPreview(props) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); if (_.isEmpty(props.iouReport) && !props.isBillSplit) { @@ -179,14 +171,9 @@ function MoneyRequestPreview(props) { const getSettledMessage = () => { if (isExpensifyCardTransaction) { - return props.translate('common.done'); - } - switch (lodashGet(props.action, 'originalMessage.paymentType', '')) { - case CONST.IOU.PAYMENT_TYPE.EXPENSIFY: - return props.translate('iou.settledExpensify'); - default: - return props.translate('iou.settledElsewhere'); + return translate('common.done'); } + return translate('iou.settledExpensify'); }; const showContextMenu = (event) => { @@ -195,43 +182,43 @@ function MoneyRequestPreview(props) { const getPreviewHeaderText = () => { if (isDistanceRequest) { - return props.translate('common.distance'); + return translate('common.distance'); } if (isScanning) { - return props.translate('common.receipt'); + return translate('common.receipt'); } if (props.isBillSplit) { - return props.translate('iou.split'); + return translate('iou.split'); } if (isExpensifyCardTransaction) { - let message = props.translate('iou.card'); + let message = translate('iou.card'); if (TransactionUtils.isPending(props.transaction)) { - message += ` • ${props.translate('iou.pending')}`; + message += ` • ${translate('iou.pending')}`; } return message; } - let message = props.translate('iou.cash'); + let message = translate('iou.cash'); if (ReportUtils.isGroupPolicyExpenseReport(props.iouReport) && ReportUtils.isReportApproved(props.iouReport) && !ReportUtils.isSettled(props.iouReport)) { - message += ` • ${props.translate('iou.approved')}`; + message += ` • ${translate('iou.approved')}`; } else if (props.iouReport.isWaitingOnBankAccount) { - message += ` • ${props.translate('iou.pending')}`; + message += ` • ${translate('iou.pending')}`; } else if (props.iouReport.isCancelledIOU) { - message += ` • ${props.translate('iou.canceled')}`; + message += ` • ${translate('iou.canceled')}`; } return message; }; const getDisplayAmountText = () => { if (isDistanceRequest) { - return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : props.translate('common.tbd'); + return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : translate('common.tbd'); } if (isScanning) { - return props.translate('iou.receiptScanning'); + return translate('iou.receiptScanning'); } if (TransactionUtils.hasMissingSmartscanFields(props.transaction)) { @@ -331,14 +318,14 @@ function MoneyRequestPreview(props) { {shouldShowMerchant && !props.isBillSplit && ( - {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, props.translate('common.tbd')) : requestMerchant} + {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd')) : requestMerchant} )} {!isCurrentUserManager && props.shouldShowPendingConversionMessage && ( - {props.translate('iou.pendingConversionMessage')} + {translate('iou.pendingConversionMessage')} )} {(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && ( {shouldShowDescription ? description : requestMerchant} @@ -346,7 +333,7 @@ function MoneyRequestPreview(props) { {props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && ( - {props.translate('iou.amountEach', { + {translate('iou.amountEach', { amount: CurrencyUtils.convertToDisplayString( IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency), requestCurrency, @@ -374,7 +361,7 @@ function MoneyRequestPreview(props) { onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} onPressOut={() => ControlSelection.unblock()} onLongPress={showContextMenu} - accessibilityLabel={props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')} + accessibilityLabel={props.isBillSplit ? translate('iou.split') : translate('iou.cash')} accessibilityHint={CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)} style={[styles.moneyRequestPreviewBox, ...props.containerStyles, shouldDisableOnPress && styles.cursorDefault]} > @@ -387,26 +374,23 @@ MoneyRequestPreview.propTypes = propTypes; MoneyRequestPreview.defaultProps = defaultProps; MoneyRequestPreview.displayName = 'MoneyRequestPreview'; -export default compose( - withLocalize, - withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - chatReport: { - key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, - }, - iouReport: { - key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`, - }, - session: { - key: ONYXKEYS.SESSION, - }, - transaction: { - key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`, - }, - walletTerms: { - key: ONYXKEYS.WALLET_TERMS, - }, - }), -)(MoneyRequestPreview); +export default withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + chatReport: { + key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, + }, + iouReport: { + key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`, + }, + session: { + key: ONYXKEYS.SESSION, + }, + transaction: { + key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`, + }, + walletTerms: { + key: ONYXKEYS.WALLET_TERMS, + }, +})(MoneyRequestPreview); diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 1afc909b54df..817c88d456db 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -17,6 +17,9 @@ import transactionPropTypes from '@components/transactionPropTypes'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CardUtils from '@libs/CardUtils'; import compose from '@libs/compose'; @@ -32,9 +35,6 @@ import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateB import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import iouReportPropTypes from '@pages/iouReportPropTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/ReportActionItem/RenameAction.js b/src/components/ReportActionItem/RenameAction.js index b4f4b23c9ebf..52039b7b593b 100644 --- a/src/components/ReportActionItem/RenameAction.js +++ b/src/components/ReportActionItem/RenameAction.js @@ -4,9 +4,9 @@ import React from 'react'; import Text from '@components/Text'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** All the data of the action */ diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js index 534a92dae830..2c5ef22b1b8e 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.js +++ b/src/components/ReportActionItem/ReportActionItemImage.js @@ -10,9 +10,9 @@ import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; import ThumbnailImage from '@components/ThumbnailImage'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as TransactionUtils from '@libs/TransactionUtils'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js index b20513d63fe3..96f919aea750 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.js +++ b/src/components/ReportActionItem/ReportActionItemImages.js @@ -5,9 +5,9 @@ import {Polygon, Svg} from 'react-native-svg'; import _ from 'underscore'; import Text from '@components/Text'; import transactionPropTypes from '@components/transactionPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import ReportActionItemImage from './ReportActionItemImage'; diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index e6b387f362ef..aa3c02b76fc0 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -14,6 +14,8 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import ControlSelection from '@libs/ControlSelection'; import * as CurrencyUtils from '@libs/CurrencyUtils'; @@ -25,8 +27,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js index d79bb6f78b93..5825d623a5ca 100644 --- a/src/components/ReportActionItem/TaskAction.js +++ b/src/components/ReportActionItem/TaskAction.js @@ -3,8 +3,8 @@ import React from 'react'; import {View} from 'react-native'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as TaskUtils from '@libs/TaskUtils'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** Name of the reportAction action */ diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js index 3b04364ee69a..ed875bb04af2 100644 --- a/src/components/ReportActionItem/TaskPreview.js +++ b/src/components/ReportActionItem/TaskPreview.js @@ -14,6 +14,8 @@ import RenderHTML from '@components/RenderHTML'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import ControlSelection from '@libs/ControlSelection'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -23,8 +25,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as TaskUtils from '@libs/TaskUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index ea02dba705a6..bb8945495018 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -17,6 +17,8 @@ import Text from '@components/Text'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions from '@components/withWindowDimensions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import convertToLTR from '@libs/convertToLTR'; import getButtonState from '@libs/getButtonState'; @@ -24,8 +26,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx index 3451e13298b3..c4c2a3f43eb3 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {Circle, Rect} from 'react-native-svg'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; type SkeletonViewLinesProps = { diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx index fc739b5d06d8..91adb26faff5 100644 --- a/src/components/ReportHeaderSkeletonView.tsx +++ b/src/components/ReportHeaderSkeletonView.tsx @@ -2,9 +2,9 @@ import React from 'react'; import {View} from 'react-native'; import {Circle, Rect} from 'react-native-svg'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import Icon from './Icon'; diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 6613517b2ed2..a204d0c59aaf 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -4,13 +4,13 @@ import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index a51219122e0a..5a6363d4a642 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -2,10 +2,10 @@ import PropTypes from 'prop-types'; import React, {memo} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as UserUtils from '@libs/UserUtils'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import AttachmentModal from './AttachmentModal'; import Avatar from './Avatar'; diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js index d6d061122eff..84f9098e564f 100644 --- a/src/components/SAMLLoadingIndicator.js +++ b/src/components/SAMLLoadingIndicator.js @@ -1,16 +1,17 @@ import React from 'react'; import {StyleSheet, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; -import themeColors from '@styles/themes/default'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import * as Illustrations from './Icon/Illustrations'; import Text from './Text'; function SAMLLoadingIndicator() { - const {translate} = useLocalize(); + const theme = useTheme(); const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( @@ -30,7 +31,7 @@ function SAMLLoadingIndicator() { diff --git a/src/components/SafeArea/index.ios.tsx b/src/components/SafeArea/index.ios.tsx index 194919b3eef4..1b2e1881ade3 100644 --- a/src/components/SafeArea/index.ios.tsx +++ b/src/components/SafeArea/index.ios.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {SafeAreaView} from 'react-native-safe-area-context'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import SafeAreaProps from './types'; function SafeArea({children}: SafeAreaProps) { diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx index 5117000627cf..4e6c9bbd3528 100644 --- a/src/components/SafeAreaConsumer/index.android.tsx +++ b/src/components/SafeAreaConsumer/index.android.tsx @@ -1,8 +1,8 @@ import React from 'react'; // eslint-disable-next-line no-restricted-imports import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; +import useStyleUtils from '@hooks/useStyleUtils'; import StatusBar from '@libs/StatusBar'; -import useStyleUtils from '@styles/useStyleUtils'; import SafeAreaConsumerProps from './types'; /** diff --git a/src/components/SafeAreaConsumer/index.tsx b/src/components/SafeAreaConsumer/index.tsx index 54c5d984be5f..c05e836a2348 100644 --- a/src/components/SafeAreaConsumer/index.tsx +++ b/src/components/SafeAreaConsumer/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; // eslint-disable-next-line no-restricted-imports import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; -import useStyleUtils from '@styles/useStyleUtils'; +import useStyleUtils from '@hooks/useStyleUtils'; import SafeAreaConsumerProps from './types'; /** diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 6af67c51ffaf..bd277ffa1ab8 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -14,9 +14,9 @@ import useEnvironment from '@hooks/useEnvironment'; import useInitialDimensions from '@hooks/useInitialWindowDimensions'; import useKeyboardState from '@hooks/useKeyboardState'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; -import useThemeStyles from '@styles/useThemeStyles'; import toggleTestToolsModal from '@userActions/TestTool'; import CONST from '@src/CONST'; import {defaultProps, propTypes} from './propTypes'; diff --git a/src/components/Section.js b/src/components/Section.js index ad52bf0e3509..a59476fb0c05 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import Icon from './Icon'; import MenuItemList from './MenuItemList'; import menuItemPropTypes from './menuItemPropTypes'; diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx index 7a7e23388722..637c06f4d35f 100644 --- a/src/components/SelectCircle.tsx +++ b/src/components/SelectCircle.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js index 39bd10ca5a9d..ac679f32d103 100644 --- a/src/components/SelectionList/BaseListItem.js +++ b/src/components/SelectionList/BaseListItem.js @@ -7,9 +7,9 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import RadioListItem from './RadioListItem'; import {baseListItemPropTypes} from './selectionListPropTypes'; diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 4f88b3ddc78a..454127612e0d 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -17,10 +17,10 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar import useActiveElement from '@hooks/useActiveElement'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Log from '@libs/Log'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import BaseListItem from './BaseListItem'; diff --git a/src/components/SelectionList/RadioListItem.js b/src/components/SelectionList/RadioListItem.js index 6d69b01e5d5e..2de0c96932ea 100644 --- a/src/components/SelectionList/RadioListItem.js +++ b/src/components/SelectionList/RadioListItem.js @@ -2,7 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import {radioListItemPropTypes} from './selectionListPropTypes'; function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}) { diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js index 0b4b6b52e0ac..39b7e02df3eb 100644 --- a/src/components/SelectionList/UserListItem.js +++ b/src/components/SelectionList/UserListItem.js @@ -4,7 +4,7 @@ import {View} from 'react-native'; import SubscriptAvatar from '@components/SubscriptAvatar'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import {userListItemPropTypes} from './selectionListPropTypes'; function UserListItem({item, textStyles, alternateTextStyles, showTooltip}) { diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js index 1ffdfd78664d..0c8e193af4cc 100644 --- a/src/components/SettlementButton.js +++ b/src/components/SettlementButton.js @@ -81,6 +81,9 @@ const propTypes = { horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), }), + + /** Whether the personal bank account option should be shown */ + shouldShowPersonalBankAccountOption: PropTypes.bool, }; const defaultProps = { @@ -110,6 +113,7 @@ const defaultProps = { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, // caret for dropdown is at right, so horizontal anchor is at RIGHT vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP }, + shouldShowPersonalBankAccountOption: false, }; function SettlementButton({ @@ -132,6 +136,7 @@ function SettlementButton({ shouldHidePaymentOptions, shouldShowApproveButton, style, + shouldShowPersonalBankAccountOption, }) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); @@ -220,6 +225,7 @@ function SettlementButton({ chatReportID={chatReportID} iouReport={iouReport} anchorAlignment={kycWallAnchorAlignment} + shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption} > {(triggerKYCFlow, buttonRef) => ( {}}: SplashScreenHiderProps) { +function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType { const styles = useThemeStyles(); const logoSizeRatio = BootSplash.logoSizeRatio || 1; const navigationBarHeight = BootSplash.navigationBarHeight || 0; diff --git a/src/components/SplashScreenHider/index.tsx b/src/components/SplashScreenHider/index.tsx index d3f5c52c1e3e..5710055b80ed 100644 --- a/src/components/SplashScreenHider/index.tsx +++ b/src/components/SplashScreenHider/index.tsx @@ -1,8 +1,8 @@ import {useEffect} from 'react'; import BootSplash from '@libs/BootSplash'; -import type SplashScreenHiderProps from './types'; +import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types'; -function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) { +function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType { useEffect(() => { BootSplash.hide().then(() => onHide()); }, [onHide]); diff --git a/src/components/SplashScreenHider/types.ts b/src/components/SplashScreenHider/types.ts index 4ea25da93290..ff7b2beb1520 100644 --- a/src/components/SplashScreenHider/types.ts +++ b/src/components/SplashScreenHider/types.ts @@ -1,6 +1,10 @@ +import {ReactNode} from 'react'; + type SplashScreenHiderProps = { /** Splash screen has been hidden */ onHide: () => void; }; -export default SplashScreenHiderProps; +type SplashScreenHiderReturnType = ReactNode; + +export type {SplashScreenHiderProps, SplashScreenHiderReturnType}; diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js index 908bb5eb5b2a..003211478529 100644 --- a/src/components/StatePicker/StateSelectorModal.js +++ b/src/components/StatePicker/StateSelectorModal.js @@ -7,9 +7,9 @@ import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import searchCountryOptions from '@libs/searchCountryOptions'; import StringUtils from '@libs/StringUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/StatePicker/index.js b/src/components/StatePicker/index.js index d9c137ac9dc1..6fa60fbba947 100644 --- a/src/components/StatePicker/index.js +++ b/src/components/StatePicker/index.js @@ -7,7 +7,7 @@ import FormHelpMessage from '@components/FormHelpMessage'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import refPropTypes from '@components/refPropTypes'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import StateSelectorModal from './StateSelectorModal'; const propTypes = { diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx index 7fa2900eaffb..9a0aa934ff1b 100644 --- a/src/components/SubscriptAvatar.tsx +++ b/src/components/SubscriptAvatar.tsx @@ -1,10 +1,10 @@ import React, {memo} from 'react'; import {View} from 'react-native'; import {ValueOf} from 'type-fest'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import type {AvatarSource} from '@libs/UserUtils'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import {AvatarType} from '@src/types/onyx/OnyxCommon'; import Avatar from './Avatar'; diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index 5195c0040add..fd9d9ae315ff 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useRef} from 'react'; import {Animated} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import useNativeDriver from '@libs/useNativeDriver'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js index 76217b69e9f3..d96ae19897f4 100644 --- a/src/components/TabSelector/TabIcon.js +++ b/src/components/TabSelector/TabIcon.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {Animated, StyleSheet, View} from 'react-native'; import Icon from '@components/Icon'; -import useTheme from '@styles/themes/useTheme'; +import useTheme from '@hooks/useTheme'; const propTypes = { /** Icon to display on tab */ diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js index 5dc050731fc5..fdf204011152 100644 --- a/src/components/TabSelector/TabLabel.js +++ b/src/components/TabSelector/TabLabel.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; const propTypes = { /** Title of the tab */ diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index e968226e83fa..444bb62263d9 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 useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import TabSelectorItem from './TabSelectorItem'; diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js index 116b5db02d2c..88aa98766fae 100644 --- a/src/components/TabSelector/TabSelectorItem.js +++ b/src/components/TabSelector/TabSelectorItem.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {Animated, StyleSheet} from 'react-native'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import TabIcon from './TabIcon'; import TabLabel from './TabLabel'; diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index 334ca3e38370..cb3d9bf260e6 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -4,10 +4,10 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import OptionsSelector from '@components/OptionsSelector'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {defaultProps, propTypes} from './tagPickerPropTypes'; diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx index 5f8461d8e324..47975fd7fc1e 100644 --- a/src/components/TaskHeaderActionButton.tsx +++ b/src/components/TaskHeaderActionButton.tsx @@ -2,8 +2,8 @@ import React from 'react'; import {View} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import * as Task from '@userActions/Task'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 53953b861d7d..82b597f77268 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Network from '@userActions/Network'; import * as Session from '@userActions/Session'; import * as User from '@userActions/User'; diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx index 4999866b27ee..4ed1aa126002 100644 --- a/src/components/TestToolRow.tsx +++ b/src/components/TestToolRow.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import Text from './Text'; type TestToolRowProps = { diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx index f555c2b0b4fe..4138df64adc2 100644 --- a/src/components/TestToolsModal.tsx +++ b/src/components/TestToolsModal.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import toggleTestToolsModal from '@userActions/TestTool'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/Text.tsx b/src/components/Text.tsx index ae2f6ba99392..0d201bd253c4 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -1,8 +1,8 @@ import React, {ForwardedRef} from 'react'; import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native'; import type {TextStyle} from 'react-native'; -import fontFamily from '@styles/fontFamily'; -import useTheme from '@styles/themes/useTheme'; +import useTheme from '@hooks/useTheme'; +import fontFamily from '@styles/utils/fontFamily'; import variables from '@styles/variables'; import ChildrenProps from '@src/types/utils/ChildrenProps'; diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js index bd33cac02f17..67776d6c7e91 100644 --- a/src/components/TextInput/BaseTextInput/index.js +++ b/src/components/TextInput/BaseTextInput/index.js @@ -13,12 +13,12 @@ import Text from '@components/Text'; import * as styleConst from '@components/TextInput/styleConst'; import TextInputLabel from '@components/TextInput/TextInputLabel'; import withLocalize from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import isInputAutoFilled from '@libs/isInputAutoFilled'; import useNativeDriver from '@libs/useNativeDriver'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import * as baseTextInputPropTypes from './baseTextInputPropTypes'; diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js index b9bbf567f9cb..2151af206149 100644 --- a/src/components/TextInput/BaseTextInput/index.native.js +++ b/src/components/TextInput/BaseTextInput/index.native.js @@ -13,12 +13,12 @@ import Text from '@components/Text'; import * as styleConst from '@components/TextInput/styleConst'; import TextInputLabel from '@components/TextInput/TextInputLabel'; import withLocalize from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType'; import isInputAutoFilled from '@libs/isInputAutoFilled'; import useNativeDriver from '@libs/useNativeDriver'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import * as baseTextInputPropTypes from './baseTextInputPropTypes'; diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js index dbd6fa765503..61af88fe317b 100644 --- a/src/components/TextInput/TextInputLabel/index.js +++ b/src/components/TextInput/TextInputLabel/index.js @@ -1,6 +1,6 @@ import React, {useEffect, useRef} from 'react'; import {Animated} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import {defaultProps, propTypes} from './TextInputLabelPropTypes'; diff --git a/src/components/TextInput/TextInputLabel/index.native.js b/src/components/TextInput/TextInputLabel/index.native.js index afc2aa09c84e..eb0f8b17e8b7 100644 --- a/src/components/TextInput/TextInputLabel/index.native.js +++ b/src/components/TextInput/TextInputLabel/index.native.js @@ -1,7 +1,7 @@ import React, {useState} from 'react'; import {Animated} from 'react-native'; import * as styleConst from '@components/TextInput/styleConst'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as TextInputLabelPropTypes from './TextInputLabelPropTypes'; function TextInputLabel(props) { diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 27ca1d524eda..87db18754ed8 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -1,9 +1,9 @@ import React, {useEffect, useRef} from 'react'; import _ from 'underscore'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import DomUtils from '@libs/DomUtils'; import Visibility from '@libs/Visibility'; -import useThemeStyles from '@styles/useThemeStyles'; import BaseTextInput from './BaseTextInput'; import * as baseTextInputPropTypes from './BaseTextInput/baseTextInputPropTypes'; import * as styleConst from './styleConst'; diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.native.js index 14591167a425..e5aba76957ad 100644 --- a/src/components/TextInput/index.native.js +++ b/src/components/TextInput/index.native.js @@ -1,6 +1,6 @@ import React, {forwardRef, useEffect} from 'react'; import {AppState, Keyboard} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import BaseTextInput from './BaseTextInput'; import * as baseTextInputPropTypes from './BaseTextInput/baseTextInputPropTypes'; diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 95c456ddc8e3..1a67e7bc4c5f 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,7 +1,7 @@ import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler} from 'react'; import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native'; import useEnvironment from '@hooks/useEnvironment'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import Text, {TextProps} from './Text'; diff --git a/src/components/TextWithEllipsis/index.tsx b/src/components/TextWithEllipsis/index.tsx index ee2ec72d1248..fda0d5ab576e 100644 --- a/src/components/TextWithEllipsis/index.tsx +++ b/src/components/TextWithEllipsis/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import Text from '@components/Text'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; type TextWithEllipsisProps = { /** Leading text before the ellipsis */ diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/components/ThemeIllustrationsProvider.tsx similarity index 58% rename from src/styles/illustrations/ThemeIllustrationsProvider.tsx rename to src/components/ThemeIllustrationsProvider.tsx index 423e0c1866b1..3b83a00960a4 100644 --- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx +++ b/src/components/ThemeIllustrationsProvider.tsx @@ -1,8 +1,7 @@ import React, {useMemo} from 'react'; -import useThemePreference from '@styles/themes/useThemePreference'; -import DarkIllustrations from './dark'; -import LightIllustrations from './light'; -import ThemeIllustrationsContext from './ThemeIllustrationsContext'; +import useThemePreference from '@hooks/useThemePreference'; +import ThemeIllustrationsContext from '@styles/theme/context/ThemeIllustrationsContext'; +import Illustrations from '@styles/theme/illustrations'; type ThemeIllustrationsProviderProps = { children: React.ReactNode; @@ -11,7 +10,7 @@ type ThemeIllustrationsProviderProps = { function ThemeIllustrationsProvider({children}: ThemeIllustrationsProviderProps) { const themePreference = useThemePreference(); - const illustrations = useMemo(() => (themePreference === 'dark' ? DarkIllustrations : LightIllustrations), [themePreference]); + const illustrations = useMemo(() => Illustrations[themePreference], [themePreference]); return {children}; } diff --git a/src/styles/themes/ThemeProvider.tsx b/src/components/ThemeProvider.tsx similarity index 74% rename from src/styles/themes/ThemeProvider.tsx rename to src/components/ThemeProvider.tsx index 0d302b5ae056..34bc32be9c99 100644 --- a/src/styles/themes/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -1,10 +1,10 @@ /* eslint-disable react/jsx-props-no-spreading */ import PropTypes from 'prop-types'; import React, {useMemo} from 'react'; -import ThemeContext from './ThemeContext'; -import themes from './themes'; -import {ThemePreferenceWithoutSystem} from './types'; -import useThemePreferenceWithStaticOverride from './useThemePreferenceWithStaticOverride'; +import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride'; +import themes from '@styles/theme'; +import ThemeContext from '@styles/theme/context/ThemeContext'; +import {ThemePreferenceWithoutSystem} from '@styles/theme/types'; const propTypes = { /** Rendered child component */ diff --git a/src/styles/ThemeStylesProvider.tsx b/src/components/ThemeStylesProvider.tsx similarity index 75% rename from src/styles/ThemeStylesProvider.tsx rename to src/components/ThemeStylesProvider.tsx index 766cb00bd09b..f0d25d9e4dde 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/components/ThemeStylesProvider.tsx @@ -1,8 +1,8 @@ import React, {useMemo} from 'react'; -import stylesGenerator from './styles'; -import useTheme from './themes/useTheme'; -import ThemeStylesContext from './ThemeStylesContext'; -import createStyleUtils from './utils'; +import useTheme from '@hooks/useTheme'; +import stylesGenerator from '@styles/index'; +import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext'; +import createStyleUtils from '@styles/utils'; type ThemeStylesProviderProps = React.PropsWithChildren; diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index 341ac6e5eb9a..0e84b4beeb7c 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -8,8 +8,8 @@ import PopoverMenu from '@components/PopoverMenu'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes'; diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx index a4a200d96082..08b269e45f62 100644 --- a/src/components/ThumbnailImage.tsx +++ b/src/components/ThumbnailImage.tsx @@ -1,10 +1,10 @@ import lodashClamp from 'lodash/clamp'; import React, {useCallback, useState} from 'react'; import {Dimensions, StyleProp, View, ViewStyle} from 'react-native'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import ImageWithSizeCalculation from './ImageWithSizeCalculation'; type ThumbnailImageProps = { diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js index 7da6084b5312..5b49739150cc 100644 --- a/src/components/TimePicker/TimePicker.js +++ b/src/components/TimePicker/TimePicker.js @@ -10,11 +10,11 @@ import refPropTypes from '@components/refPropTypes'; import Text from '@components/Text'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import setSelection from './setSelection'; diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.tsx b/src/components/Tooltip/TooltipRenderedOnPageBody.tsx index 2ed885c9d3d7..4549f48501bf 100644 --- a/src/components/Tooltip/TooltipRenderedOnPageBody.tsx +++ b/src/components/Tooltip/TooltipRenderedOnPageBody.tsx @@ -2,8 +2,8 @@ import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'reac import ReactDOM from 'react-dom'; import {Animated, View} from 'react-native'; import Text from '@components/Text'; +import useStyleUtils from '@hooks/useStyleUtils'; import Log from '@libs/Log'; -import useStyleUtils from '@styles/useStyleUtils'; import textRef from '@src/types/utils/textRef'; import viewRef from '@src/types/utils/viewRef'; import TooltipProps from './types'; diff --git a/src/components/UnorderedList.tsx b/src/components/UnorderedList.tsx index a51cefce9ce6..a2b836bd4d80 100644 --- a/src/components/UnorderedList.tsx +++ b/src/components/UnorderedList.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import Text from './Text'; type UnorderedListProps = { diff --git a/src/components/UnreadActionIndicator.tsx b/src/components/UnreadActionIndicator.tsx index b34f962e57bd..f422ae24bd4f 100755 --- a/src/components/UnreadActionIndicator.tsx +++ b/src/components/UnreadActionIndicator.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import Text from './Text'; diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js index b689f2b73de9..5e88a7994e51 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js @@ -7,10 +7,10 @@ import Avatar from '@components/Avatar'; import {usePersonalDetails} from '@components/OnyxProvider'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import {defaultProps, propTypes} from './userDetailsTooltipPropTypes'; diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js index caeef8a14a0a..cb880a0a2844 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.js +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js @@ -5,8 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; const propTypes = { diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js index 0ae4c882784c..fedb92c49ee3 100644 --- a/src/components/ValidateCode/JustSignedInModal.js +++ b/src/components/ValidateCode/JustSignedInModal.js @@ -6,8 +6,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; const propTypes = { diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js index 58f9b24e3c91..a2fea513f851 100644 --- a/src/components/ValidateCode/ValidateCodeModal.js +++ b/src/components/ValidateCode/ValidateCodeModal.js @@ -10,8 +10,8 @@ import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js index b70bcc5cbbb7..edc5a48d0bb3 100644 --- a/src/components/ValuePicker/ValueSelectorModal.js +++ b/src/components/ValuePicker/ValueSelectorModal.js @@ -5,7 +5,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js index 6eb20d1bde6a..b5ddaa7dcb73 100644 --- a/src/components/ValuePicker/index.js +++ b/src/components/ValuePicker/index.js @@ -5,8 +5,8 @@ import {View} from 'react-native'; import FormHelpMessage from '@components/FormHelpMessage'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import refPropTypes from '@components/refPropTypes'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import ValueSelectorModal from './ValueSelectorModal'; diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js index 3d1488ec8521..54e7309ee48b 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -12,9 +12,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx index c0c02877828e..224734089810 100644 --- a/src/components/WalletSection.tsx +++ b/src/components/WalletSection.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {SvgProps} from 'react-native-svg'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import ChildrenProps from '@src/types/utils/ChildrenProps'; import Section from './Section'; diff --git a/src/components/WalletStatementModal/index.tsx b/src/components/WalletStatementModal/index.tsx index 0f1d1804df60..d6120b842ddc 100644 --- a/src/components/WalletStatementModal/index.tsx +++ b/src/components/WalletStatementModal/index.tsx @@ -2,8 +2,8 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/withStyleUtils.tsx b/src/components/withStyleUtils.tsx index 6ea044fce70c..821587a1ae43 100644 --- a/src/components/withStyleUtils.tsx +++ b/src/components/withStyleUtils.tsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react'; +import useStyleUtils from '@hooks/useStyleUtils'; import getComponentDisplayName from '@libs/getComponentDisplayName'; -import useStyleUtils from '@styles/useStyleUtils'; import {StyleUtilsType} from '@styles/utils'; const withStyleUtilsPropTypes = { diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx index 59380110904a..93349e8e2ba4 100644 --- a/src/components/withTheme.tsx +++ b/src/components/withTheme.tsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react'; +import useTheme from '@hooks/useTheme'; import getComponentDisplayName from '@libs/getComponentDisplayName'; -import {type ThemeColors} from '@styles/themes/types'; -import useTheme from '@styles/themes/useTheme'; +import {type ThemeColors} from '@styles/theme/types'; const withThemePropTypes = { theme: PropTypes.object.isRequired, diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx index d811573d1730..0ae960bd4351 100644 --- a/src/components/withThemeStyles.tsx +++ b/src/components/withThemeStyles.tsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react'; +import useThemeStyles from '@hooks/useThemeStyles'; import getComponentDisplayName from '@libs/getComponentDisplayName'; -import {type ThemeStyles} from '@styles/styles'; -import useThemeStyles from '@styles/useThemeStyles'; +import {type ThemeStyles} from '@styles/index'; const withThemeStylesPropTypes = { themeStyles: PropTypes.object.isRequired, diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx index 0e3e91d09bf2..974ce3b7f855 100644 --- a/src/components/withToggleVisibilityView.tsx +++ b/src/components/withToggleVisibilityView.tsx @@ -1,8 +1,8 @@ import React, {ComponentType, ForwardedRef, ReactElement, RefAttributes} from 'react'; import {View} from 'react-native'; import {SetOptional} from 'type-fest'; +import useThemeStyles from '@hooks/useThemeStyles'; import getComponentDisplayName from '@libs/getComponentDisplayName'; -import useThemeStyles from '@styles/useThemeStyles'; type ToggleVisibilityViewProps = { /** Whether the content is visible. */ diff --git a/src/hooks/useAutoFocusInput.js b/src/hooks/useAutoFocusInput.ts similarity index 73% rename from src/hooks/useAutoFocusInput.js rename to src/hooks/useAutoFocusInput.ts index b65b5242fa32..ad66a01b157d 100644 --- a/src/hooks/useAutoFocusInput.js +++ b/src/hooks/useAutoFocusInput.ts @@ -1,24 +1,29 @@ import {useFocusEffect} from '@react-navigation/native'; import {useCallback, useContext, useEffect, useRef, useState} from 'react'; -import {InteractionManager} from 'react-native'; +import {InteractionManager, TextInput} from 'react-native'; import CONST from '@src/CONST'; import * as Expensify from '@src/Expensify'; -export default function useAutoFocusInput() { +type UseAutoFocusInput = { + inputCallbackRef: (ref: TextInput | null) => void; +}; + +export default function useAutoFocusInput(): UseAutoFocusInput { const [isInputInitialized, setIsInputInitialized] = useState(false); const [isScreenTransitionEnded, setIsScreenTransitionEnded] = useState(false); + // @ts-expect-error TODO: Remove this when Expensify.js is migrated. const {isSplashHidden} = useContext(Expensify.SplashScreenHiddenContext); - const inputRef = useRef(null); - const focusTimeoutRef = useRef(null); + const inputRef = useRef(null); + const focusTimeoutRef = useRef(null); useEffect(() => { if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || !isSplashHidden) { return; } InteractionManager.runAfterInteractions(() => { - inputRef.current.focus(); + inputRef.current?.focus(); setIsScreenTransitionEnded(false); }); }, [isScreenTransitionEnded, isInputInitialized, isSplashHidden]); @@ -38,7 +43,7 @@ export default function useAutoFocusInput() { }, []), ); - const inputCallbackRef = (ref) => { + const inputCallbackRef = (ref: TextInput | null) => { inputRef.current = ref; setIsInputInitialized(true); }; diff --git a/src/hooks/useDelayedInputFocus.js b/src/hooks/useDelayedInputFocus.ts similarity index 62% rename from src/hooks/useDelayedInputFocus.js rename to src/hooks/useDelayedInputFocus.ts index 7a4a64104e48..d062f8a03d25 100644 --- a/src/hooks/useDelayedInputFocus.js +++ b/src/hooks/useDelayedInputFocus.ts @@ -1,19 +1,17 @@ import {useFocusEffect} from '@react-navigation/native'; -import {useCallback, useRef} from 'react'; +import {MutableRefObject, useCallback, useRef} from 'react'; +import {TextInput} from 'react-native'; import CONST from '@src/CONST'; /** * Focus a text input when a screen is navigated to, after the specified time delay has elapsed. - * - * @param {Object} inputRef - * @param {Number} [delay] */ -export default function useDelayedInputFocus(inputRef, delay = CONST.ANIMATED_TRANSITION) { - const timeoutRef = useRef(null); +export default function useDelayedInputFocus(inputRef: MutableRefObject, delay: number = CONST.ANIMATED_TRANSITION) { + const timeoutRef = useRef(null); useFocusEffect( useCallback(() => { - timeoutRef.current = setTimeout(() => inputRef.current && inputRef.current.focus(), delay); + timeoutRef.current = setTimeout(() => inputRef.current?.focus(), delay); return () => { if (!timeoutRef.current) { return; diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts new file mode 100644 index 000000000000..9700999bb004 --- /dev/null +++ b/src/hooks/useHandleExceedMaxCommentLength.ts @@ -0,0 +1,27 @@ +import _ from 'lodash'; +import {useCallback, useMemo, useState} from 'react'; +import * as ReportUtils from '@libs/ReportUtils'; +import CONST from '@src/CONST'; + +const useHandleExceedMaxCommentLength = () => { + const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false); + + const handleValueChange = useCallback( + (value: string) => { + if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { + if (hasExceededMaxCommentLength) { + setHasExceededMaxCommentLength(false); + } + return; + } + setHasExceededMaxCommentLength(true); + }, + [hasExceededMaxCommentLength], + ); + + const validateCommentMaxLength = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); + + return {hasExceededMaxCommentLength, validateCommentMaxLength}; +}; + +export default useHandleExceedMaxCommentLength; diff --git a/src/hooks/useInitialWindowDimensions/index.js b/src/hooks/useInitialWindowDimensions/index.ts similarity index 80% rename from src/hooks/useInitialWindowDimensions/index.js rename to src/hooks/useInitialWindowDimensions/index.ts index 5878c8b3371f..e0882e820e9b 100644 --- a/src/hooks/useInitialWindowDimensions/index.js +++ b/src/hooks/useInitialWindowDimensions/index.ts @@ -1,14 +1,24 @@ // eslint-disable-next-line no-restricted-imports import {useEffect, useState} from 'react'; -import {Dimensions} from 'react-native'; +import {Dimensions, type ScaledSize} from 'react-native'; + +type InitialWindowDimensions = { + initialWidth: number; + initialHeight: number; +}; + +type NewDimensions = { + window: ScaledSize; + screen: ScaledSize; +}; /** * A convenience hook that provides initial size (width and height). * An initial height allows to know the real height of window, * while the standard useWindowDimensions hook return the height minus Virtual keyboard height - * @returns {Object} with information about initial width and height + * @returns with information about initial width and height */ -export default function () { +export default function (): InitialWindowDimensions { const [dimensions, setDimensions] = useState(() => { const window = Dimensions.get('window'); const screen = Dimensions.get('screen'); @@ -22,7 +32,7 @@ export default function () { }); useEffect(() => { - const onDimensionChange = (newDimensions) => { + const onDimensionChange = (newDimensions: NewDimensions) => { const {window, screen} = newDimensions; setDimensions((oldState) => { diff --git a/src/hooks/useIsScrollBarVisible/index.native.ts b/src/hooks/useIsScrollBarVisible/index.native.ts new file mode 100644 index 000000000000..a461e1b7b074 --- /dev/null +++ b/src/hooks/useIsScrollBarVisible/index.native.ts @@ -0,0 +1,7 @@ +/** + * Native doesn't have the DOM, so we just return null. + * + */ +const useIsScrollBarVisible = () => null; + +export default useIsScrollBarVisible; diff --git a/src/hooks/useIsScrollBarVisible/index.ts b/src/hooks/useIsScrollBarVisible/index.ts new file mode 100644 index 000000000000..4ab3a7bb24db --- /dev/null +++ b/src/hooks/useIsScrollBarVisible/index.ts @@ -0,0 +1,28 @@ +import {useCallback, useEffect, useState} from 'react'; + +const useIsScrollBarVisible = (ref: React.RefObject, value: string) => { + const [isScrollBarVisible, setIsScrollBarVisible] = useState(false); + + const handleResize = useCallback(() => { + if (!ref.current) { + return; + } + const {scrollHeight, clientHeight} = ref.current; + setIsScrollBarVisible(scrollHeight > clientHeight); + }, [ref]); + + useEffect(() => { + if (!ref.current || !('ResizeObserver' in (window || {}))) { + return; + } + + const resizeObserver = new ResizeObserver(handleResize); + resizeObserver.observe(ref.current); + return () => { + resizeObserver.disconnect(); + }; + }, [handleResize, ref, value]); + return isScrollBarVisible; +}; + +export default useIsScrollBarVisible; diff --git a/src/styles/useStyleUtils.ts b/src/hooks/useStyleUtils.ts similarity index 83% rename from src/styles/useStyleUtils.ts rename to src/hooks/useStyleUtils.ts index aadb3f884220..8e6ad31396d5 100644 --- a/src/styles/useStyleUtils.ts +++ b/src/hooks/useStyleUtils.ts @@ -1,5 +1,5 @@ import {useContext} from 'react'; -import ThemeStylesContext from './ThemeStylesContext'; +import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext'; function useStyleUtils() { const themeStylesContext = useContext(ThemeStylesContext); diff --git a/src/hooks/useTabNavigatorFocus/index.js b/src/hooks/useTabNavigatorFocus/index.ts similarity index 83% rename from src/hooks/useTabNavigatorFocus/index.js rename to src/hooks/useTabNavigatorFocus/index.ts index f83ec5bd9270..9138cbbdab48 100644 --- a/src/hooks/useTabNavigatorFocus/index.js +++ b/src/hooks/useTabNavigatorFocus/index.ts @@ -1,8 +1,17 @@ import {useTabAnimation} from '@react-navigation/material-top-tabs'; import {useIsFocused} from '@react-navigation/native'; import {useEffect, useState} from 'react'; +import {Animated} from 'react-native'; import DomUtils from '@libs/DomUtils'; +type UseTabNavigatorFocusParams = { + tabIndex: number; +}; + +type PositionAnimationListenerCallback = { + value: number; +}; + /** * Custom React hook to determine the focus status of a tab in a Material Top Tab Navigator. * It evaluates whether the current tab is focused based on the tab's animation position and @@ -17,15 +26,16 @@ import DomUtils from '@libs/DomUtils'; * might not be used within a Material Top Tabs Navigator context. Proper usage should ensure that * this hook is only used where appropriate. * - * @param {Object} params - The parameters object. - * @param {Number} params.tabIndex - The index of the tab for which focus status is being determined. - * @returns {Boolean} Returns `true` if the tab is both animation-focused and screen-focused, otherwise `false`. + * @param params - The parameters object. + * @param params.tabIndex - The index of the tab for which focus status is being determined. + * @returns Returns `true` if the tab is both animation-focused and screen-focused, otherwise `false`. * * @example * const isTabFocused = useTabNavigatorFocus({ tabIndex: 1 }); */ -function useTabNavigatorFocus({tabIndex}) { - let tabPositionAnimation = null; +function useTabNavigatorFocus({tabIndex}: UseTabNavigatorFocusParams): boolean { + let tabPositionAnimation: Animated.AnimatedInterpolation | null = null; + try { // Retrieve the animation value from the tab navigator, which ranges from 0 to the total number of pages displayed. // Even a minimal scroll towards the camera page (e.g., a value of 0.001 at start) should activate the camera for immediate responsiveness. @@ -46,7 +56,7 @@ function useTabNavigatorFocus({tabIndex}) { } const index = Number(tabIndex); - const listenerId = tabPositionAnimation.addListener(({value}) => { + const listenerId = tabPositionAnimation.addListener(({value}: PositionAnimationListenerCallback) => { // Activate camera as soon the index is animating towards the `tabIndex` DomUtils.requestAnimationFrame(() => { setIsTabFocused(value > index - 1 && value < index + 1); @@ -56,6 +66,7 @@ function useTabNavigatorFocus({tabIndex}) { // We need to get the position animation value on component initialization to determine // if the tab is focused or not. Since it's an Animated.Value the only synchronous way // to retrieve the value is to use a private method. + // @ts-expect-error -- __getValue is a private method // eslint-disable-next-line no-underscore-dangle const initialTabPositionValue = tabPositionAnimation.__getValue(); diff --git a/src/styles/themes/useTheme.ts b/src/hooks/useTheme.ts similarity index 72% rename from src/styles/themes/useTheme.ts rename to src/hooks/useTheme.ts index adeaffbcae8a..966e9b499e2f 100644 --- a/src/styles/themes/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -1,6 +1,6 @@ import {useContext} from 'react'; -import ThemeContext from './ThemeContext'; -import {type ThemeColors} from './types'; +import ThemeContext from '@styles/theme/context/ThemeContext'; +import {type ThemeColors} from '@styles/theme/types'; function useTheme(): ThemeColors { const theme = useContext(ThemeContext); diff --git a/src/styles/illustrations/useThemeIllustrations.ts b/src/hooks/useThemeIllustrations.ts similarity index 81% rename from src/styles/illustrations/useThemeIllustrations.ts rename to src/hooks/useThemeIllustrations.ts index 32f986dc655a..5bc07185f882 100644 --- a/src/styles/illustrations/useThemeIllustrations.ts +++ b/src/hooks/useThemeIllustrations.ts @@ -1,5 +1,5 @@ import {useContext} from 'react'; -import ThemeIllustrationsContext from './ThemeIllustrationsContext'; +import ThemeIllustrationsContext from '@styles/theme/context/ThemeIllustrationsContext'; function useThemeIllustrations() { const illustrations = useContext(ThemeIllustrationsContext); diff --git a/src/styles/themes/useThemePreference.ts b/src/hooks/useThemePreference.ts similarity index 51% rename from src/styles/themes/useThemePreference.ts rename to src/hooks/useThemePreference.ts index ac87e2488b31..5d3ec4c3a860 100644 --- a/src/styles/themes/useThemePreference.ts +++ b/src/hooks/useThemePreference.ts @@ -1,26 +1,20 @@ import {useContext, useEffect, useState} from 'react'; -import {Appearance, ColorSchemeName} from 'react-native'; +import {useColorScheme} from 'react-native'; import {PreferredThemeContext} from '@components/OnyxProvider'; +import {ThemePreferenceWithoutSystem} from '@styles/theme/types'; import CONST from '@src/CONST'; -import {ThemePreferenceWithoutSystem} from './types'; function useThemePreference() { - const [themePreference, setThemePreference] = useState(CONST.THEME.DEFAULT); - const [systemTheme, setSystemTheme] = useState(); + const [themePreference, setThemePreference] = useState(CONST.THEME.FALLBACK); const preferredThemeFromStorage = useContext(PreferredThemeContext); - - useEffect(() => { - // This is used for getting the system theme, that can be set in the OS's theme settings. This will always return either "light" or "dark" and will update automatically if the OS theme changes. - const systemThemeSubscription = Appearance.addChangeListener(({colorScheme}) => setSystemTheme(colorScheme)); - return () => systemThemeSubscription.remove(); - }, []); + const systemTheme = useColorScheme(); useEffect(() => { const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT; // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme if (theme === CONST.THEME.SYSTEM) { - setThemePreference(systemTheme ?? CONST.THEME.DEFAULT); + setThemePreference(systemTheme ?? CONST.THEME.FALLBACK); } else { setThemePreference(theme); } diff --git a/src/styles/themes/useThemePreferenceWithStaticOverride.ts b/src/hooks/useThemePreferenceWithStaticOverride.ts similarity index 90% rename from src/styles/themes/useThemePreferenceWithStaticOverride.ts rename to src/hooks/useThemePreferenceWithStaticOverride.ts index b447740a0de1..4619da1966ce 100644 --- a/src/styles/themes/useThemePreferenceWithStaticOverride.ts +++ b/src/hooks/useThemePreferenceWithStaticOverride.ts @@ -1,4 +1,4 @@ -import {ThemePreferenceWithoutSystem} from './types'; +import {ThemePreferenceWithoutSystem} from '@styles/theme/types'; import useThemePreference from './useThemePreference'; const useThemePreferenceWithStaticOverride = (staticThemePreference: ThemePreferenceWithoutSystem | undefined) => { diff --git a/src/styles/useThemeStyles.ts b/src/hooks/useThemeStyles.ts similarity index 83% rename from src/styles/useThemeStyles.ts rename to src/hooks/useThemeStyles.ts index 164806a908e4..05f36ff52cc5 100644 --- a/src/styles/useThemeStyles.ts +++ b/src/hooks/useThemeStyles.ts @@ -1,5 +1,5 @@ import {useContext} from 'react'; -import ThemeStylesContext from './ThemeStylesContext'; +import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext'; function useThemeStyles() { const themeStylesContext = useContext(ThemeStylesContext); diff --git a/src/languages/en.ts b/src/languages/en.ts index 00191eb0a7d8..644655bf4e9f 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1492,6 +1492,8 @@ export default { companyCards: 'Company credit cards', reimbursements: 'Easy reimbursements', }, + notFound: 'No workspace found', + description: 'Rooms are a great place to discuss and work with multiple people. To begin collaborating, create or join a workspace', }, new: { newWorkspace: 'New workspace', diff --git a/src/languages/es.ts b/src/languages/es.ts index 0f14b6e6d02a..6ecde0f44c55 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1515,6 +1515,8 @@ export default { companyCards: 'Tarjetas de crédito corporativas', reimbursements: 'Reembolsos fáciles', }, + notFound: 'No se encontró ningún espacio de trabajo', + description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para comenzar a colaborar, cree o únase a un espacio de trabajo', }, new: { newWorkspace: 'Nuevo espacio de trabajo', diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts index 5e109afe8959..c121eaaef319 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts @@ -1,6 +1,6 @@ import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native'; import ComposerProps from '@libs/ComposerUtils/types'; -import {type ThemeStyles} from '@styles/styles'; +import {type ThemeStyles} from '@styles/index'; type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent, styles: ThemeStyles) => void; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 008015db7a90..f6572c84709d 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -1,6 +1,7 @@ import React, {memo, useEffect, useRef} from 'react'; import {View} from 'react-native'; import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import getCurrentUrl from '@libs/Navigation/currentUrl'; @@ -14,7 +15,6 @@ import DemoSetupPage from '@pages/DemoSetupPage'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage'; import SearchInputManager from '@pages/workspace/SearchInputManager'; -import useThemeStyles from '@styles/useThemeStyles'; import * as App from '@userActions/App'; import * as Download from '@userActions/Download'; import * as Modal from '@userActions/Modal'; diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index ebdfe849327e..256ea6d4eceb 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -1,6 +1,7 @@ import {ParamListBase} from '@react-navigation/routers'; import {CardStyleInterpolators, createStackNavigator, StackNavigationOptions} from '@react-navigation/stack'; import React, {useMemo} from 'react'; +import useThemeStyles from '@hooks/useThemeStyles'; import type { AddPersonalBankAccountNavigatorParamList, DetailsNavigatorParamList, @@ -28,7 +29,6 @@ import type { TeachersUniteNavigatorParamList, WalletStatementNavigatorParamList, } from '@navigation/types'; -import useThemeStyles from '@styles/useThemeStyles'; import SCREENS from '@src/SCREENS'; import type {Screen} from '@src/SCREENS'; @@ -197,8 +197,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require('../../../pages/settings/Preferences/PriorityModePage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require('../../../pages/settings/Preferences/LanguagePage').default as React.ComponentType, - // Will be uncommented as part of https://github.com/Expensify/App/issues/21670 - // [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType, + [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType, [SCREENS.SETTINGS.CLOSE]: () => require('../../../pages/settings/Security/CloseAccountPage').default as React.ComponentType, [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 228ea6bd3dce..f2cdd140f7d8 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -1,9 +1,9 @@ import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; +import useThemeStyles from '@hooks/useThemeStyles'; import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper'; import getCurrentUrl from '@libs/Navigation/currentUrl'; import type {CentralPaneNavigatorParamList} from '@navigation/types'; -import useThemeStyles from '@styles/useThemeStyles'; import SCREENS from '@src/SCREENS'; const Stack = createStackNavigator(); diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx index 09099cb493f6..065de8da578b 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {Animated, View} from 'react-native'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; type OverlayProps = { diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 10b8129bc3e7..bd790589c8d1 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -2,11 +2,11 @@ import {createStackNavigator, StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; -import useThemeStyles from '@styles/useThemeStyles'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import Overlay from './Overlay'; diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts index 6cae31a219f9..814c61ad32a3 100644 --- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts @@ -1,5 +1,5 @@ import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/stack'; -import {ThemeStyles} from '@styles/styles'; +import {ThemeStyles} from '@styles/index'; /** * RHP stack navigator screen options generator function diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts index b294e6d7ab11..379c5281b78f 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -1,6 +1,6 @@ import {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack'; -import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles'; -import {ThemeStyles} from '@styles/styles'; +import {ThemeStyles} from '@styles/index'; +import getNavigationModalCardStyle from '@styles/utils/getNavigationModalCardStyles'; import variables from '@styles/variables'; import CONFIG from '@src/CONFIG'; import modalCardStyleInterpolator from './modalCardStyleInterpolator'; diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts index f7e772148e79..eff88422cc5c 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts @@ -1,6 +1,6 @@ import type {StackCardInterpolatedStyle, StackCardInterpolationProps} from '@react-navigation/stack'; import {Animated} from 'react-native'; -import getCardStyles from '@styles/cardStyles'; +import getCardStyles from '@styles/utils/cardStyles'; import variables from '@styles/variables'; export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => { diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index 7c0b9ef4fc8c..48523162ba2e 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -2,9 +2,9 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} fr import React, {useEffect, useMemo, useRef} from 'react'; import useCurrentReportID from '@hooks/useCurrentReportID'; import useFlipper from '@hooks/useFlipper'; +import useTheme from '@hooks/useTheme'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Log from '@libs/Log'; -import useTheme from '@styles/themes/useTheme'; import AppNavigator from './AppNavigator'; import linkingConfig from './linkingConfig'; import Navigation, {navigationRef} from './Navigation'; diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts index ac5c999d5388..b58f2af1eeac 100644 --- a/src/libs/NextStepUtils.ts +++ b/src/libs/NextStepUtils.ts @@ -15,9 +15,9 @@ function parseMessage(messages: Message[] | undefined) { }); const formattedHtml = nextStepHTML - .replace(/%expenses/g, 'this expense') - .replace(/%Expenses/g, 'This expense') - .replace(/%tobe/g, 'is'); + .replace(/%expenses/g, 'these expenses') + .replace(/%Expenses/g, 'These expenses') + .replace(/%tobe/g, 'are'); return `${formattedHtml}`; } diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 95a8c52649d3..4da344c3608b 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -390,14 +390,14 @@ function getLastMessageTextForReport(report) { lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForMoneyRequestMessage); } else if (ReportActionUtils.isReportPreviewAction(lastReportAction)) { const iouReport = ReportUtils.getReport(ReportActionUtils.getIOUReportIDFromReportActionPreview(lastReportAction)); - const lastIOUMoneyReport = _.find( + const lastIOUMoneyReportAction = _.find( allSortedReportActions[iouReport.reportID], (reportAction, key) => ReportActionUtils.shouldReportActionBeVisible(reportAction, key) && reportAction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && ReportActionUtils.isMoneyRequestAction(reportAction), ); - lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true, ReportUtils.isChatReport(report)); + lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReportAction, true, ReportUtils.isChatReport(report)); } else if (ReportActionUtils.isReimbursementQueuedAction(lastReportAction)) { lastMessageTextFromReport = ReportUtils.getReimbursementQueuedActionMessage(lastReportAction, report); } else if (ReportActionUtils.isReimbursementDeQueuedAction(lastReportAction)) { diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index ee7a293f6ad1..e41b3295a2c5 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -1,5 +1,5 @@ import getBankIcon from '@components/Icon/BankIcons'; -import {type ThemeStyles} from '@styles/styles'; +import {type ThemeStyles} from '@styles/index'; import CONST from '@src/CONST'; import BankAccount from '@src/types/onyx/BankAccount'; import Fund from '@src/types/onyx/Fund'; diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 43e7ef9fbbc8..9cde613ebb5a 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -18,6 +18,10 @@ function canUseCommentLinking(betas: OnyxEntry): boolean { return !!betas?.includes(CONST.BETAS.BETA_COMMENT_LINKING) || canUseAllBetas(betas); } +function canUseReportFields(betas: OnyxEntry): boolean { + return !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas); +} + /** * We're requiring you to be added to the policy rooms beta on dev, * since contributors have been reporting a number of false issues related to the feature being under development. @@ -45,4 +49,5 @@ export default { canUsePolicyRooms, canUseLinkPreviews, canUseViolations, + canUseReportFields, }; diff --git a/src/styles/PopoverWithMeasuredContentStyleUtils.ts b/src/libs/PopoverWithMeasuredContentUtils.ts similarity index 88% rename from src/styles/PopoverWithMeasuredContentStyleUtils.ts rename to src/libs/PopoverWithMeasuredContentUtils.ts index 94a0fb77d8bb..b932249211be 100644 --- a/src/styles/PopoverWithMeasuredContentStyleUtils.ts +++ b/src/libs/PopoverWithMeasuredContentUtils.ts @@ -1,5 +1,5 @@ -import roundToNearestMultipleOfFour from './utils/roundToNearestMultipleOfFour'; -import variables from './variables'; +import roundToNearestMultipleOfFour from '@styles/utils/roundToNearestMultipleOfFour'; +import variables from '@styles/variables'; /** * Compute the amount that the Context menu's Anchor needs to be horizontally shifted @@ -50,6 +50,6 @@ function computeVerticalShift(anchorTopEdge: number, menuHeight: number, windowH return 0; } -const PopoverWithMeasuredContentStyleUtils = {computeHorizontalShift, computeVerticalShift}; +const PopoverWithMeasuredContentUtils = {computeHorizontalShift, computeVerticalShift}; -export default PopoverWithMeasuredContentStyleUtils; +export default PopoverWithMeasuredContentUtils; diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts index 21c382346e57..9a3099ba6c02 100644 --- a/src/libs/ReportActionsUtils.ts +++ b/src/libs/ReportActionsUtils.ts @@ -375,7 +375,7 @@ function shouldReportActionBeVisible(reportAction: OnyxEntry, key: // All other actions are displayed except thread parents, deleted, or non-pending actions const isDeleted = isDeletedAction(reportAction); - const isPending = !!reportAction.pendingAction; + const isPending = !!reportAction.pendingAction && !(!isNetworkOffline && reportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE); return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction); } diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 63037416c923..8729bb1bf957 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1211,7 +1211,8 @@ function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC { function getWorkspaceAvatar(report: OnyxEntry): UserUtils.AvatarSource { const workspaceName = getPolicyName(report, false, allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]); - return allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatar ?? getDefaultWorkspaceAvatar(workspaceName); + const avatar = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatar ?? ''; + return !isEmpty(avatar) ? avatar : getDefaultWorkspaceAvatar(workspaceName); } /** diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index f0a7f0848850..7513989d08c4 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -938,6 +938,30 @@ function getUpdateMoneyRequestParams(transactionID, transactionThreadReportID, t }, }); + // Update recently used categories if the category is changed + if (_.has(transactionChanges, 'category')) { + const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category); + if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) { + optimisticData.push({ + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`, + value: optimisticPolicyRecentlyUsedCategories, + }); + } + } + + // Update recently used categories if the tag is changed + if (_.has(transactionChanges, 'tag')) { + const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag); + if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) { + optimisticData.push({ + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`, + value: optimisticPolicyRecentlyUsedTags, + }); + } + } + // Clear out the error fields and loading states on success successData.push({ onyxMethod: Onyx.METHOD.MERGE, @@ -2040,8 +2064,6 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans updatedChatReport.lastMessageHtml = messageText; } - const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag); - const isScanning = TransactionUtils.hasReceipt(updatedTransaction) && TransactionUtils.isReceiptBeingScanned(updatedTransaction); // STEP 4: Compose the optimistic data @@ -2101,12 +2123,28 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans : []), ]; - if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) { - optimisticData.push({ - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`, - value: optimisticPolicyRecentlyUsedTags, - }); + // Update recently used categories if the category is changed + if (_.has(transactionChanges, 'category')) { + const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category); + if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) { + optimisticData.push({ + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`, + value: optimisticPolicyRecentlyUsedCategories, + }); + } + } + + // Update recently used categories if the tag is changed + if (_.has(transactionChanges, 'tag')) { + const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag); + if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) { + optimisticData.push({ + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`, + value: optimisticPolicyRecentlyUsedTags, + }); + } } const successData = [ diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index bea4ab8aed77..9977693896ee 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -2054,29 +2054,22 @@ function leaveRoom(reportID: string, isWorkspaceMemberLeavingWorkspaceRoom = fal // If a workspace member is leaving a workspace room, they don't actually lose the room from Onyx. // Instead, their notification preference just gets set to "hidden". const optimisticData: OnyxUpdate[] = [ - isWorkspaceMemberLeavingWorkspaceRoom - ? { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - value: { + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: isWorkspaceMemberLeavingWorkspaceRoom + ? { notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN, - }, - } - : { - onyxMethod: Onyx.METHOD.SET, - key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - value: { - reportID, + } + : { + reportID: null, stateNum: CONST.REPORT.STATE_NUM.SUBMITTED, statusNum: CONST.REPORT.STATUS.CLOSED, - chatType: report.chatType, - parentReportID: report.parentReportID, - parentReportActionID: report.parentReportActionID, - policyID: report.policyID, - type: report.type, + notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN, }, - }, + }, ]; + const successData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts index 82b51651cacc..82d371e16bed 100644 --- a/src/libs/actions/Session/index.ts +++ b/src/libs/actions/Session/index.ts @@ -4,14 +4,20 @@ import {ChannelAuthorizationCallback} from 'pusher-js/with-encryption'; import {Linking} from 'react-native'; import Onyx, {OnyxUpdate} from 'react-native-onyx'; import {ValueOf} from 'type-fest'; +import * as PersistedRequests from '@libs/actions/PersistedRequests'; import * as API from '@libs/API'; import * as Authentication from '@libs/Authentication'; import * as ErrorUtils from '@libs/ErrorUtils'; +import HttpUtils from '@libs/HttpUtils'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; +import navigationRef from '@libs/Navigation/navigationRef'; +import * as MainQueue from '@libs/Network/MainQueue'; import * as NetworkStore from '@libs/Network/NetworkStore'; +import NetworkConnection from '@libs/NetworkConnection'; import * as Pusher from '@libs/Pusher/pusher'; import * as ReportUtils from '@libs/ReportUtils'; +import * as SessionUtils from '@libs/SessionUtils'; import Timers from '@libs/Timers'; import {hideContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import * as Device from '@userActions/Device'; @@ -23,6 +29,7 @@ import CONFIG from '@src/CONFIG'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; import Credentials from '@src/types/onyx/Credentials'; import {AutoAuthState} from '@src/types/onyx/Session'; import clearCache from './clearCache'; @@ -583,14 +590,40 @@ function clearSignInData() { }); } +/** + * Reset all current params of the Home route + */ +function resetHomeRouteParams() { + Navigation.isNavigationReady().then(() => { + const routes = navigationRef.current?.getState().routes; + const homeRoute = routes?.find((route) => route.name === SCREENS.HOME); + + const emptyParams: Record = {}; + Object.keys(homeRoute?.params ?? {}).forEach((paramKey) => { + emptyParams[paramKey] = undefined; + }); + + Navigation.setParams(emptyParams, homeRoute?.key ?? ''); + Onyx.set(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, false); + }); +} + /** * Put any logic that needs to run when we are signed out here. This can be triggered when the current tab or another tab signs out. + * - Cancels pending network calls - any lingering requests are discarded to prevent unwanted storage writes + * - Clears all current params of the Home route - the login page URL should not contain any parameter */ function cleanupSession() { Pusher.disconnect(); Timers.clearAll(); Welcome.resetReadyCheck(); PriorityMode.resetHasReadRequiredDataFromStorage(); + MainQueue.clear(); + HttpUtils.cancelPendingRequests(); + PersistedRequests.clear(); + NetworkConnection.clearReconnectionCallbacks(); + SessionUtils.resetDidUserLogInDuringSession(); + resetHomeRouteParams(); } function clearAccountMessages() { diff --git a/src/libs/actions/SignInRedirect.ts b/src/libs/actions/SignInRedirect.ts index 9ca4e6813567..6c9e7f55d887 100644 --- a/src/libs/actions/SignInRedirect.ts +++ b/src/libs/actions/SignInRedirect.ts @@ -1,14 +1,6 @@ import Onyx from 'react-native-onyx'; import * as ErrorUtils from '@libs/ErrorUtils'; -import HttpUtils from '@libs/HttpUtils'; -import Navigation from '@libs/Navigation/Navigation'; -import navigationRef from '@libs/Navigation/navigationRef'; -import * as MainQueue from '@libs/Network/MainQueue'; -import NetworkConnection from '@libs/NetworkConnection'; -import * as SessionUtils from '@libs/SessionUtils'; import ONYXKEYS, {OnyxKey} from '@src/ONYXKEYS'; -import SCREENS from '@src/SCREENS'; -import * as PersistedRequests from './PersistedRequests'; let currentIsOffline: boolean | undefined; let currentShouldForceOffline: boolean | undefined; @@ -45,42 +37,16 @@ function clearStorageAndRedirect(errorMessage?: string) { }); } -/** - * Reset all current params of the Home route - */ -function resetHomeRouteParams() { - Navigation.isNavigationReady().then(() => { - const routes = navigationRef.current?.getState().routes; - const homeRoute = routes?.find((route) => route.name === SCREENS.HOME); - - const emptyParams: Record = {}; - Object.keys(homeRoute?.params ?? {}).forEach((paramKey) => { - emptyParams[paramKey] = undefined; - }); - - Navigation.setParams(emptyParams, homeRoute?.key ?? ''); - Onyx.set(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, false); - }); -} - /** * Cleanup actions resulting in the user being redirected to the Sign-in page * - Clears the Onyx store - removing the authToken redirects the user to the Sign-in page - * - Cancels pending network calls - any lingering requests are discarded to prevent unwanted storage writes - * - Clears all current params of the Home route - the login page URL should not contain any parameter * * Normally this method would live in Session.js, but that would cause a circular dependency with Network.js. * * @param [errorMessage] error message to be displayed on the sign in page */ function redirectToSignIn(errorMessage?: string) { - MainQueue.clear(); - HttpUtils.cancelPendingRequests(); - PersistedRequests.clear(); - NetworkConnection.clearReconnectionCallbacks(); clearStorageAndRedirect(errorMessage); - resetHomeRouteParams(); - SessionUtils.resetDidUserLogInDuringSession(); } export default redirectToSignIn; diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js index 8e24a2a92310..b1e46ec40861 100644 --- a/src/libs/actions/User.js +++ b/src/libs/actions/User.js @@ -17,7 +17,6 @@ import * as OnyxUpdates from './OnyxUpdates'; import * as PersonalDetails from './PersonalDetails'; import * as Report from './Report'; import * as Session from './Session'; -import redirectToSignIn from './SignInRedirect'; let currentUserAccountID = ''; let currentEmail = ''; @@ -69,8 +68,6 @@ function closeAccount(message) { ], }, ); - // Run cleanup actions to prevent reconnection callbacks from blocking logging in again - redirectToSignIn(); } /** diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index a4d75a7c73a0..09b73ea158f9 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -9,9 +9,9 @@ import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as PaymentMethods from '@userActions/PaymentMethods'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 9145459e42d1..b0362a69b4d6 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -20,10 +20,10 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js index 290c05f0c494..205b4bf66dfa 100644 --- a/src/pages/EditRequestCategoryPage.js +++ b/src/pages/EditRequestCategoryPage.js @@ -5,8 +5,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** Transaction default category value */ diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js index c2b05d9e6dfa..fbe1b3c782a7 100644 --- a/src/pages/EditRequestCreatedPage.js +++ b/src/pages/EditRequestCreatedPage.js @@ -5,7 +5,7 @@ import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import ONYXKEYS from '@src/ONYXKEYS'; const propTypes = { diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js index 3a895d2b09f5..9b2a9e465746 100644 --- a/src/pages/EditRequestDescriptionPage.js +++ b/src/pages/EditRequestDescriptionPage.js @@ -8,9 +8,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import updateMultilineInputRange from '@libs/updateMultilineInputRange'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js index af6ff89296f1..5fa14d850f45 100644 --- a/src/pages/EditRequestMerchantPage.js +++ b/src/pages/EditRequestMerchantPage.js @@ -8,7 +8,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js index 03c0aa777d5e..1525ec162963 100644 --- a/src/pages/EditRequestReceiptPage.js +++ b/src/pages/EditRequestReceiptPage.js @@ -5,8 +5,8 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import ReceiptSelector from './iou/ReceiptSelector'; const propTypes = { diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js index 74cf69944f2c..8ecc4a953065 100644 --- a/src/pages/EditRequestTagPage.js +++ b/src/pages/EditRequestTagPage.js @@ -5,8 +5,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import TagPicker from '@components/TagPicker'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** Transaction default tag value */ diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index 9ed85447a3b3..f6ba2bb509fb 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -15,10 +15,10 @@ import TextInput from '@components/TextInput'; import TextLink from '@components/TextLink'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ValidationUtils from '@libs/ValidationUtils'; import AddressForm from '@pages/ReimbursementAccount/AddressForm'; -import useThemeStyles from '@styles/useThemeStyles'; import * as PersonalDetails from '@userActions/PersonalDetails'; import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; diff --git a/src/pages/EnablePayments/FailedKYC.js b/src/pages/EnablePayments/FailedKYC.js index de170bec4070..fc54ea9c1074 100644 --- a/src/pages/EnablePayments/FailedKYC.js +++ b/src/pages/EnablePayments/FailedKYC.js @@ -3,7 +3,7 @@ import {View} from 'react-native'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js index 9e4f9d697fca..8f21d68abe4f 100644 --- a/src/pages/EnablePayments/IdologyQuestions.js +++ b/src/pages/EnablePayments/IdologyQuestions.js @@ -9,7 +9,7 @@ import SingleChoiceQuestion from '@components/SingleChoiceQuestion'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/EnablePayments/OnfidoPrivacy.js b/src/pages/EnablePayments/OnfidoPrivacy.js index c542df0196cf..77b884fb2934 100644 --- a/src/pages/EnablePayments/OnfidoPrivacy.js +++ b/src/pages/EnablePayments/OnfidoPrivacy.js @@ -10,9 +10,9 @@ import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes'; diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js index 2ed7854ee6ba..d95f80e99673 100644 --- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js @@ -6,8 +6,8 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Localize from '@libs/Localize'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const termsData = [ diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js index 898aec9b2c16..77f77f3cb34b 100644 --- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js +++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js @@ -2,9 +2,9 @@ import React from 'react'; import {View} from 'react-native'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Localize from '@libs/Localize'; import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js index 368f92f0db27..8297ca54c2b4 100644 --- a/src/pages/EnablePayments/TermsStep.js +++ b/src/pages/EnablePayments/TermsStep.js @@ -7,9 +7,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; import LongTermsForm from './TermsPage/LongTermsForm'; diff --git a/src/pages/ErrorPage/ErrorBodyText/index.js b/src/pages/ErrorPage/ErrorBodyText/index.js index d3436a2fc0a8..47b765f8f5e8 100644 --- a/src/pages/ErrorPage/ErrorBodyText/index.js +++ b/src/pages/ErrorPage/ErrorBodyText/index.js @@ -2,7 +2,7 @@ import React from 'react'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js index 01c4990cbc62..85d49a8b9074 100644 --- a/src/pages/ErrorPage/GenericErrorPage.js +++ b/src/pages/ErrorPage/GenericErrorPage.js @@ -9,9 +9,9 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js index 3695896ea473..6c6421593837 100644 --- a/src/pages/FlagCommentPage.js +++ b/src/pages/FlagCommentPage.js @@ -10,11 +10,11 @@ import MenuItem from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js index 08c9a6bf6815..a880637ca100 100644 --- a/src/pages/GetAssistancePage.js +++ b/src/pages/GetAssistancePage.js @@ -10,9 +10,9 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Section from '@components/Section'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; diff --git a/src/pages/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js index c44c6213d3a5..809d2ce6dc07 100644 --- a/src/pages/KeyboardShortcutsPage.js +++ b/src/pages/KeyboardShortcutsPage.js @@ -6,8 +6,8 @@ import MenuItem from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import KeyboardShortcut from '@libs/KeyboardShortcut'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; function KeyboardShortcutsPage() { diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js index 16d0c3909d62..1fe9b67eef16 100644 --- a/src/pages/LogInWithShortLivedAuthTokenPage.js +++ b/src/pages/LogInWithShortLivedAuthTokenPage.js @@ -10,9 +10,9 @@ import * as Illustrations from '@components/Icon/Illustrations'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 2bbd0556aad8..6f45c0b33f5a 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -11,13 +11,13 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Permissions from '@libs/Permissions'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js index 88bf2ac569c2..c62fbe3edcb5 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.js +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js @@ -16,6 +16,7 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import withLocalize from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; @@ -23,7 +24,6 @@ import updateMultilineInputRange from '@libs/updateMultilineInputRange'; import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js index e9a4f11a7202..a34eb0ce596d 100644 --- a/src/pages/PrivateNotes/PrivateNotesListPage.js +++ b/src/pages/PrivateNotes/PrivateNotesListPage.js @@ -13,12 +13,12 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/PrivateNotes/PrivateNotesViewPage.js b/src/pages/PrivateNotes/PrivateNotesViewPage.js index 76057d3d74bc..1406dfd76748 100644 --- a/src/pages/PrivateNotes/PrivateNotesViewPage.js +++ b/src/pages/PrivateNotes/PrivateNotesViewPage.js @@ -10,12 +10,12 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 3e5e8863bf22..3772b8127ef7 100755 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -23,12 +23,12 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as PersonalDetails from '@userActions/PersonalDetails'; import * as Report from '@userActions/Report'; diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index 73e1ac393615..e05b6c5b0553 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -11,9 +11,9 @@ import MenuItem from '@components/MenuItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Clipboard from '@libs/Clipboard'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 4161932b35b6..d10d440a0af5 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -12,8 +12,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as FormActions from '@userActions/FormActions'; import CONST from '@src/CONST'; diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index e18a5ae04ab7..d1d43f6a4108 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -5,7 +5,7 @@ import AddressSearch from '@components/AddressSearch'; import InputWrapper from '@components/Form/InputWrapper'; import StatePicker from '@components/StatePicker'; import TextInput from '@components/TextInput'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index 7103d650b2fb..8e79a492bfe3 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -11,9 +11,9 @@ import TextInput from '@components/TextInput'; import TextLink from '@components/TextLink'; import {withLocalizePropTypes} from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import shouldDelayFocus from '@libs/shouldDelayFocus'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 298862570271..c235a31f626f 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as ReimbursementAccount from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index e60830054376..408c0e46a47d 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -15,10 +15,10 @@ import Section from '@components/Section'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize from '@components/withLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as BankAccounts from '@userActions/BankAccounts'; import * as Link from '@userActions/Link'; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 51fd467c28ff..957965f9ed7d 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -18,9 +18,9 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import TextLink from '@components/TextLink'; import withLocalize from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js index 45c503494c3d..d1ac0989ae38 100644 --- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js +++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js @@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Section from '@components/Section'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import * as ReimbursementAccountProps from './reimbursementAccountPropTypes'; diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js index d91c8df7bed0..90752a57c50b 100644 --- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js +++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js @@ -6,8 +6,8 @@ import * as Illustrations from '@components/Icon/Illustrations'; import Section from '@components/Section'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import ROUTES from '@src/ROUTES'; const propTypes = { diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index e7bdcf4082d2..d8d76d6cfb2f 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -15,10 +15,10 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Section from '@components/Section'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import userPropTypes from '@pages/settings/userPropTypes'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import * as BankAccounts from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; diff --git a/src/pages/ReimbursementAccount/ExampleCheck.js b/src/pages/ReimbursementAccount/ExampleCheck.js index aa32caf8144d..47bb59af1050 100644 --- a/src/pages/ReimbursementAccount/ExampleCheck.js +++ b/src/pages/ReimbursementAccount/ExampleCheck.js @@ -1,8 +1,8 @@ import React from 'react'; import {Image} from 'react-native'; import useLocalize from '@hooks/useLocalize'; -import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeIllustrations from '@hooks/useThemeIllustrations'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; function ExampleCheckImage() { diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index bab1a0bca81e..c1ee79f56a14 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -6,7 +6,7 @@ import _ from 'underscore'; import DatePicker from '@components/DatePicker'; import InputWrapper from '@components/Form/InputWrapper'; import TextInput from '@components/TextInput'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import AddressForm from './AddressForm'; diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index de1c02cd1dbd..81d4af93d86c 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -13,6 +13,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import BankAccount from '@libs/models/BankAccount'; @@ -20,7 +21,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import shouldReopenOnfido from '@libs/shouldReopenOnfido'; import withPolicy from '@pages/workspace/withPolicy'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -159,7 +159,7 @@ function getRouteForCurrentStep(currentStep) { } function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, policy, account, isLoadingApp, session, plaidLinkToken, plaidCurrentEvent, reimbursementAccountDraft}) { - /** + /** The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the user left off. This view will refer to the achData as the single source of truth to determine which route to display. We can also specify a specific route to navigate to via route params when the component first @@ -235,7 +235,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol return achData.state === BankAccount.STATE.PENDING || _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''], getStepToOpenFromRouteParams(route)); } - /** + /** When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx or could be partially loaded such that `reimbursementAccount.achData.currentStep` is unavailable. Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js index dc6cff300b09..b149e28d7f11 100644 --- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js +++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js @@ -8,8 +8,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Onfido from '@components/Onfido'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Growl from '@libs/Growl'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 31f5f0f4d315..e5e0c36aeaa2 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -10,8 +10,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 00b6e6928c7c..f1dfc944a24c 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -18,11 +18,11 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import BankAccount from '@libs/models/BankAccount'; import * as ValidationUtils from '@libs/ValidationUtils'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index fcc497111b92..dc8b77db4ac8 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -16,12 +16,12 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import RoomHeaderAvatars from '@components/RoomHeaderAvatars'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js index ceaa53a41a6b..4ec31b29f914 100755 --- a/src/pages/ReportParticipantsPage.js +++ b/src/pages/ReportParticipantsPage.js @@ -9,13 +9,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OptionsList from '@components/OptionsList'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js index a17e1efe6a0c..ae8a4635a98e 100644 --- a/src/pages/ReportWelcomeMessagePage.js +++ b/src/pages/ReportWelcomeMessagePage.js @@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import updateMultilineInputRange from '@libs/updateMultilineInputRange'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js index 9b5b4f461652..cb72b2f8b08a 100644 --- a/src/pages/RoomInvitePage.js +++ b/src/pages/RoomInvitePage.js @@ -10,6 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; @@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js index a48ab08408f2..d8e7dbdaf76e 100644 --- a/src/pages/RoomMembersPage.js +++ b/src/pages/RoomMembersPage.js @@ -13,6 +13,7 @@ import SelectionList from '@components/SelectionList'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import Log from '@libs/Log'; @@ -21,7 +22,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js index 2dad59fc01b7..e9564bfffe0b 100644 --- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js +++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js @@ -6,8 +6,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js index f44356347273..3e2a2a2775a3 100644 --- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js +++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js @@ -12,10 +12,10 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import TeachersUnite from '@userActions/TeachersUnite'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js index f2a5732b6a0a..61e03017b7ea 100644 --- a/src/pages/TeachersUnite/KnowATeacherPage.js +++ b/src/pages/TeachersUnite/KnowATeacherPage.js @@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import TeachersUnite from '@userActions/TeachersUnite'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js index d179b7d1db95..36e03f0b4716 100644 --- a/src/pages/TeachersUnite/SaveTheWorldPage.js +++ b/src/pages/TeachersUnite/SaveTheWorldPage.js @@ -8,9 +8,9 @@ import LottieAnimations from '@components/LottieAnimations'; import MenuItem from '@components/MenuItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index f5f50244d274..0647310940bd 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -20,6 +20,8 @@ import Text from '@components/Text'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {getGroupChatName} from '@libs/GroupChatUtils'; import * as HeaderUtils from '@libs/HeaderUtils'; @@ -28,8 +30,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import * as Session from '@userActions/Session'; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 50d6531096fc..c910f170cc2b 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -16,7 +16,9 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton'; import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID'; import withViewportOffsetTop from '@components/withViewportOffsetTop'; import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; @@ -26,7 +28,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportMetadataPropTypes from '@pages/reportMetadataPropTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as ComposerActions from '@userActions/Composer'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; @@ -152,6 +153,7 @@ function ReportScreen({ const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); + const {isOffline} = useNetwork(); const firstRenderRef = useRef(true); const flatListRef = useRef(); @@ -166,8 +168,11 @@ function ReportScreen({ const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report); const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}]; + // eslint-disable-next-line react-hooks/exhaustive-deps -- need to re-filter the report actions when network status changes + const filteredReportActions = useMemo(() => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true), [isOffline, reportActions]); + // There are no reportActions at all to display and we are still in the process of loading the next set of actions. - const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions; + const isLoadingInitialReportActions = _.isEmpty(filteredReportActions) && reportMetadata.isLoadingInitialReportActions; const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED; @@ -422,7 +427,7 @@ function ReportScreen({ > {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && ( `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, canEvict: false, - selector: (reportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true), }, report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js index 0ff401a9d3f4..7e259b7473cf 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.js +++ b/src/pages/home/report/AnimatedEmptyStateBackground.js @@ -1,9 +1,9 @@ import React from 'react'; import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeIllustrations from '@hooks/useThemeIllustrations'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as NumberUtils from '@libs/NumberUtils'; -import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations'; -import useStyleUtils from '@styles/useStyleUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js index 33adfa4b35f9..0a9941072df7 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js @@ -11,8 +11,8 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useNetwork from '@hooks/useNetwork'; +import useStyleUtils from '@hooks/useStyleUtils'; import compose from '@libs/compose'; -import useStyleUtils from '@styles/useStyleUtils'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js index f5a688e9d8ed..d858206cdfc3 100644 --- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js +++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js @@ -2,12 +2,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import useStyleUtils from '@hooks/useStyleUtils'; import BaseReportActionContextMenu from '@pages/home/report/ContextMenu/BaseReportActionContextMenu'; import { defaultProps as GenericReportActionContextMenuDefaultProps, propTypes as genericReportActionContextMenuPropTypes, } from '@pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes'; -import useStyleUtils from '@styles/useStyleUtils'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js index 873e7fa243af..700a2fb399e4 100644 --- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js +++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js @@ -1,6 +1,6 @@ import React from 'react'; import {Animated, View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes'; function FloatingMessageCounterContainer(props) { diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js index 0b721067631c..19123e65cbf2 100644 --- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js +++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js @@ -1,6 +1,6 @@ import React from 'react'; import {Animated} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes'; function FloatingMessageCounterContainer(props) { diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js index fe0a343e973b..07138104bf74 100644 --- a/src/pages/home/report/FloatingMessageCounter/index.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -6,9 +6,9 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useNativeDriver from '@libs/useNativeDriver'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import FloatingMessageCounterContainer from './FloatingMessageCounterContainer'; diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js index 5c16d5596774..f62295a6fb71 100644 --- a/src/pages/home/report/LinkPreviewer.js +++ b/src/pages/home/report/LinkPreviewer.js @@ -5,9 +5,9 @@ import {Image, View} from 'react-native'; import _ from 'underscore'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; const IMAGE_TYPES = ['jpg', 'jpeg', 'png']; diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js index 7184944d5902..77bcc7bdd38e 100644 --- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js +++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js @@ -3,8 +3,8 @@ import React from 'react'; import {ActivityIndicator, View} from 'react-native'; import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView'; import useNetwork from '@hooks/useNetwork'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js index 5efd53fe6ae7..1992953c959e 100644 --- a/src/pages/home/report/ParticipantLocalTime.js +++ b/src/pages/home/report/ParticipantLocalTime.js @@ -4,9 +4,9 @@ import {View} from 'react-native'; import participantPropTypes from '@components/participantPropTypes'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import Timers from '@libs/Timers'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/home/report/ReactionList/BaseReactionList.js b/src/pages/home/report/ReactionList/BaseReactionList.js index f94f6cdfde0d..2d881d080c31 100755 --- a/src/pages/home/report/ReactionList/BaseReactionList.js +++ b/src/pages/home/report/ReactionList/BaseReactionList.js @@ -6,9 +6,9 @@ import {FlatList} from 'react-native'; import OptionRow from '@components/OptionRow'; import participantPropTypes from '@components/participantPropTypes'; import withWindowDimensions from '@components/withWindowDimensions'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as UserUtils from '@libs/UserUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js index 1b1751e32eef..04b124f969a9 100644 --- a/src/pages/home/report/ReactionList/HeaderReactionList.js +++ b/src/pages/home/report/ReactionList/HeaderReactionList.js @@ -4,10 +4,10 @@ import {View} from 'react-native'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import reactionPropTypes from './reactionPropTypes'; const propTypes = { diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 31a5a0857577..1aeae46c252f 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -9,11 +9,11 @@ import PopoverMenu from '@components/PopoverMenu'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import * as Report from '@userActions/Report'; import * as Task from '@userActions/Task'; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index f5a321f72799..8def3a53ca0d 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -9,7 +9,11 @@ import withKeyboardState from '@components/withKeyboardState'; import useDebounce from '@hooks/useDebounce'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as Browser from '@libs/Browser'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import compose from '@libs/compose'; import * as ComposerUtils from '@libs/ComposerUtils'; @@ -26,9 +30,6 @@ import updateMultilineInputRange from '@libs/updateMultilineInputRange'; import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside'; import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater'; import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerActions from '@userActions/EmojiPickerAction'; import * as InputFocus from '@userActions/InputFocus'; import * as Report from '@userActions/Report'; @@ -76,6 +77,7 @@ function ComposerWithSuggestions({ // Focus onFocus, onBlur, + onValueChange, // Composer isComposerFullSize, isMenuVisible, @@ -515,6 +517,10 @@ function ComposerWithSuggestions({ [blur, focus, prepareCommentAndResetComposer, replaceSelectionWithText], ); + useEffect(() => { + onValueChange(value); + }, [onValueChange, value]); + return ( <> @@ -556,6 +562,7 @@ function ComposerWithSuggestions({ setComposerHeight(composerLayoutHeight); }} onScroll={hideSuggestionMenu} + shouldContainScroll={Browser.isMobileSafari()} /> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 2632324a963f..396e94d9cf9d 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -13,7 +13,9 @@ import OfflineIndicator from '@components/OfflineIndicator'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {usePersonalDetails, withNetwork} from '@components/OnyxProvider'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; +import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import compose from '@libs/compose'; @@ -28,7 +30,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import ReportDropUI from '@pages/home/report/ReportDropUI'; import ReportTypingIndicator from '@pages/home/report/ReportTypingIndicator'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerActions from '@userActions/EmojiPickerAction'; import * as Report from '@userActions/Report'; import * as User from '@userActions/User'; @@ -144,7 +145,7 @@ function ReportActionCompose({ * Updates the composer when the comment length is exceeded * Shows red borders and prevents the comment from being sent */ - const [hasExceededMaxCommentLength, setExceededMaxCommentLength] = useState(false); + const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength(); const suggestionsRef = useRef(null); const composerRef = useRef(null); @@ -408,6 +409,7 @@ function ReportActionCompose({ onBlur={onBlur} measureParentContainer={measureContainer} listHeight={listHeight} + onValueChange={validateCommentMaxLength} /> { @@ -444,10 +446,7 @@ function ReportActionCompose({ > {!isSmallScreenWidth && } - + diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js index fde40998fa8c..d0b0453ace2f 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.js +++ b/src/pages/home/report/ReportActionCompose/SendButton.js @@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 3e4eebffe48f..2e888a5471b8 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -32,6 +32,9 @@ import UnreadActionIndicator from '@components/UnreadActionIndicator'; import withLocalize from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import usePrevious from '@hooks/usePrevious'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import ControlSelection from '@libs/ControlSelection'; import * as CurrencyUtils from '@libs/CurrencyUtils'; @@ -46,9 +49,6 @@ import SelectionScraper from '@libs/SelectionScraper'; import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes'; import {ReactionListContext} from '@pages/home/ReportScreenContext'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as store from '@userActions/ReimbursementAccount/store'; diff --git a/src/pages/home/report/ReportActionItemBasicMessage.tsx b/src/pages/home/report/ReportActionItemBasicMessage.tsx index bf53ee16450d..63e6d2424a7c 100644 --- a/src/pages/home/report/ReportActionItemBasicMessage.tsx +++ b/src/pages/home/report/ReportActionItemBasicMessage.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import Text from '@components/Text'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import ChildrenProps from '@src/types/utils/ChildrenProps'; type ReportActionItemBasicMessageProps = ChildrenProps & { diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 633701f0b375..e5ec3e4b8744 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -10,12 +10,12 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import ReportWelcomeText from '@components/ReportWelcomeText'; import withLocalize from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js index a65bdd4aa7d7..58471a88061f 100644 --- a/src/pages/home/report/ReportActionItemDate.js +++ b/src/pages/home/report/ReportActionItemDate.js @@ -3,8 +3,8 @@ import React, {memo} from 'react'; import {withCurrentDate} from '@components/OnyxProvider'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** UTC timestamp for when the action was created */ diff --git a/src/pages/home/report/ReportActionItemDraft.tsx b/src/pages/home/report/ReportActionItemDraft.tsx index b46af5401ee4..de4458d7b39f 100644 --- a/src/pages/home/report/ReportActionItemDraft.tsx +++ b/src/pages/home/report/ReportActionItemDraft.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import ChildrenProps from '@src/types/utils/ChildrenProps'; function ReportActionItemDraft({children}: ChildrenProps) { diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index c5097bdfc4a5..f05b3decc6d7 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -7,10 +7,10 @@ import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import convertToLTR from '@libs/convertToLTR'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import AttachmentCommentFragment from './comment/AttachmentCommentFragment'; import TextCommentFragment from './comment/TextCommentFragment'; diff --git a/src/pages/home/report/ReportActionItemGrouped.tsx b/src/pages/home/report/ReportActionItemGrouped.tsx index 5e49f7af9d10..2dff5b81c6a7 100644 --- a/src/pages/home/report/ReportActionItemGrouped.tsx +++ b/src/pages/home/report/ReportActionItemGrouped.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import ChildrenProps from '@src/types/utils/ChildrenProps'; type ReportActionItemGroupedProps = ChildrenProps & { diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js index 46e0438f250a..b47d941f40b5 100644 --- a/src/pages/home/report/ReportActionItemMessage.js +++ b/src/pages/home/report/ReportActionItemMessage.js @@ -4,9 +4,9 @@ import React from 'react'; import {Text, View} from 'react-native'; import _ from 'underscore'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import TextCommentFragment from './comment/TextCommentFragment'; import ReportActionItemFragment from './ReportActionItemFragment'; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index fc03c67d70a0..3da0fad72f0a 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -13,9 +13,13 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import refPropTypes from '@components/refPropTypes'; import Tooltip from '@components/Tooltip'; +import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useReportScrollManager from '@hooks/useReportScrollManager'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as ComposerUtils from '@libs/ComposerUtils'; @@ -27,9 +31,6 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as InputFocus from '@userActions/InputFocus'; import * as Report from '@userActions/Report'; @@ -116,7 +117,7 @@ function ReportActionItemMessageEdit(props) { }); const [selection, setSelection] = useState(getInitialSelection); const [isFocused, setIsFocused] = useState(false); - const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false); + const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength(); const [modal, setModal] = useState(false); const [onyxFocused, setOnyxFocused] = useState(false); @@ -369,6 +370,10 @@ function ReportActionItemMessageEdit(props) { */ const focus = focusComposerWithDelay(textInputRef.current); + useEffect(() => { + validateCommentMaxLength(draft); + }, [draft, validateCommentMaxLength]); + return ( <> @@ -470,11 +475,7 @@ function ReportActionItemMessageEdit(props) { - setHasExceededMaxCommentLength(hasExceeded)} - /> + ); } diff --git a/src/pages/home/report/ReportActionItemParentAction.js b/src/pages/home/report/ReportActionItemParentAction.js index 4a125d1d5633..c11200ccc4db 100644 --- a/src/pages/home/report/ReportActionItemParentAction.js +++ b/src/pages/home/report/ReportActionItemParentAction.js @@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import withLocalize from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 2c4df44d8b57..81827073aa49 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -13,6 +13,9 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -20,9 +23,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; import reportPropTypes from '@pages/reportPropTypes'; import stylePropTypes from '@styles/stylePropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import ReportActionItemDate from './ReportActionItemDate'; diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.js index a3da95147020..35ef49dc97fd 100644 --- a/src/pages/home/report/ReportActionItemThread.js +++ b/src/pages/home/report/ReportActionItemThread.js @@ -6,8 +6,8 @@ import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 55995a8059e7..46abbfc71b84 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -12,12 +12,12 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useReportScrollManager from '@hooks/useReportScrollManager'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import DateUtils from '@libs/DateUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; diff --git a/src/pages/home/report/ReportDropUI.js b/src/pages/home/report/ReportDropUI.js index 2f4c81313ec2..c1c3b8e506ab 100644 --- a/src/pages/home/report/ReportDropUI.js +++ b/src/pages/home/report/ReportDropUI.js @@ -6,7 +6,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; const propTypes = { /** Callback to execute when a file is dropped. */ diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js index e5dd5da19ad5..48bfd5d18bcc 100644 --- a/src/pages/home/report/ReportFooter.js +++ b/src/pages/home/report/ReportFooter.js @@ -9,10 +9,10 @@ import participantPropTypes from '@components/participantPropTypes'; import SwipeableView from '@components/SwipeableView'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 3a2c611ac358..74778b364db1 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -7,8 +7,8 @@ import {withNetwork} from '@components/OnyxProvider'; import Text from '@components/Text'; import TextWithEllipsis from '@components/TextWithEllipsis'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; -import useThemeStyles from '@styles/useThemeStyles'; import * as PersonalDetails from '@userActions/PersonalDetails'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.js b/src/pages/home/report/comment/AttachmentCommentFragment.js index ec75edd18a35..30c131b57060 100644 --- a/src/pages/home/report/comment/AttachmentCommentFragment.js +++ b/src/pages/home/report/comment/AttachmentCommentFragment.js @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType'; -import useThemeStyles from '@styles/useThemeStyles'; import RenderCommentHTML from './RenderCommentHTML'; const propTypes = { diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js index 403c470dfc9d..3d6482344450 100644 --- a/src/pages/home/report/comment/TextCommentFragment.js +++ b/src/pages/home/report/comment/TextCommentFragment.js @@ -5,15 +5,14 @@ import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import ZeroWidthView from '@components/ZeroWidthView'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import convertToLTR from '@libs/convertToLTR'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as EmojiUtils from '@libs/EmojiUtils'; import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes'; import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType'; -import editedLabelStyles from '@styles/editedLabelStyles'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import RenderCommentHTML from './RenderCommentHTML'; @@ -103,7 +102,7 @@ function TextCommentFragment(props) { {props.translate('reportActionCompose.edited')} diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js index 487514ce199f..0bad9e845e9c 100644 --- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js +++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js @@ -6,8 +6,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import PressableAvatarWithIndicator from './PressableAvatarWithIndicator'; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 6f860010e9d7..eb4f9000d2b4 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -12,6 +12,9 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Navigation from '@libs/Navigation/Navigation'; @@ -19,9 +22,6 @@ import onyxSubscribe from '@libs/onyxSubscribe'; import SidebarUtils from '@libs/SidebarUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as App from '@userActions/App'; import * as Session from '@userActions/Session'; diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 97f119bbd2e8..dbc77a41817b 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -10,10 +10,10 @@ import {withNetwork} from '@components/OnyxProvider'; import withCurrentReportID from '@components/withCurrentReportID'; import withNavigationFocus from '@components/withNavigationFocus'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import SidebarUtils from '@libs/SidebarUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import SidebarLinks, {basePropTypes} from './SidebarLinks'; diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 5b7a126a4655..a6853316b582 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -1,10 +1,10 @@ import React, {useEffect} from 'react'; import {View} from 'react-native'; import ScreenWrapper from '@components/ScreenWrapper'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import Performance from '@libs/Performance'; import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData'; -import useThemeStyles from '@styles/useThemeStyles'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import sidebarPropTypes from './sidebarPropTypes'; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 1da45bc71777..65b79ed5af78 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -11,10 +11,10 @@ import withNavigation from '@components/withNavigation'; import withNavigationFocus from '@components/withNavigationFocus'; import withWindowDimensions from '@components/withWindowDimensions'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as App from '@userActions/App'; import * as IOU from '@userActions/IOU'; import * as Policy from '@userActions/Policy'; diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js index f820298b0a22..9edcc9584dbd 100644 --- a/src/pages/home/sidebar/SignInButton.js +++ b/src/pages/home/sidebar/SignInButton.js @@ -4,7 +4,7 @@ import {View} from 'react-native'; import Button from '@components/Button'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js index 7f3bf7985ba6..ceb2152d2b49 100644 --- a/src/pages/iou/MoneyRequestCategoryPage.js +++ b/src/pages/iou/MoneyRequestCategoryPage.js @@ -7,10 +7,10 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js index 8121bb381f32..b7d1c4002da1 100644 --- a/src/pages/iou/MoneyRequestDatePage.js +++ b/src/pages/iou/MoneyRequestDatePage.js @@ -8,9 +8,9 @@ import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js index 2d3e7d887e60..fe3100b8c3bd 100644 --- a/src/pages/iou/MoneyRequestDescriptionPage.js +++ b/src/pages/iou/MoneyRequestDescriptionPage.js @@ -11,12 +11,12 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as IOU from '@libs/actions/IOU'; import * as Browser from '@libs/Browser'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; import updateMultilineInputRange from '@libs/updateMultilineInputRange'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js index be57f0b6c534..bf799cd0957b 100644 --- a/src/pages/iou/MoneyRequestMerchantPage.js +++ b/src/pages/iou/MoneyRequestMerchantPage.js @@ -11,8 +11,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js index ee4ee88d7008..e367709cb010 100644 --- a/src/pages/iou/MoneyRequestSelectorPage.js +++ b/src/pages/iou/MoneyRequestSelectorPage.js @@ -11,6 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import TabSelector from '@components/TabSelector/TabSelector'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as IOUUtils from '@libs/IOUUtils'; @@ -19,7 +20,6 @@ import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator'; import * as ReportUtils from '@libs/ReportUtils'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js index d16a7aa6679c..60e40d665580 100644 --- a/src/pages/iou/MoneyRequestTagPage.js +++ b/src/pages/iou/MoneyRequestTagPage.js @@ -9,11 +9,11 @@ import TagPicker from '@components/TagPicker'; import tagPropTypes from '@components/tagPropTypes'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/ReceiptDropUI.js b/src/pages/iou/ReceiptDropUI.js index 18ad31e036e4..67330860a052 100644 --- a/src/pages/iou/ReceiptDropUI.js +++ b/src/pages/iou/ReceiptDropUI.js @@ -4,7 +4,7 @@ import {Text, View} from 'react-native'; import ReceiptUpload from '@assets/images/receipt-upload.svg'; import DragAndDropConsumer from '@components/DragAndDrop/Consumer'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js index e9e734ddf2f8..adbfc0618de7 100644 --- a/src/pages/iou/ReceiptSelector/index.js +++ b/src/pages/iou/ReceiptSelector/index.js @@ -15,6 +15,8 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as FileUtils from '@libs/fileDownload/FileUtils'; @@ -22,8 +24,6 @@ import Navigation from '@libs/Navigation/Navigation'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; import ReceiptDropUI from '@pages/iou/ReceiptDropUI'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js index 0073725a2c50..109e7ebdaa71 100644 --- a/src/pages/iou/ReceiptSelector/index.native.js +++ b/src/pages/iou/ReceiptSelector/index.native.js @@ -13,13 +13,13 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index dd9e7ce93cc6..94c2f1c31242 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -11,6 +11,7 @@ import MoneyRequestHeaderStatusBar from '@components/MoneyRequestHeaderStatusBar import ScreenWrapper from '@components/ScreenWrapper'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -19,7 +20,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import withReportAndReportActionOrNotFound from '@pages/home/report/withReportAndReportActionOrNotFound'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 3c0d8802c5d0..e8d3c8520ca8 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -15,11 +15,11 @@ import ScreenWrapper from '@components/ScreenWrapper'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Transaction from '@userActions/Transaction'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/request/IOURequestStartPage.js b/src/pages/iou/request/IOURequestStartPage.js index c24e4f4e9e5f..6572e154ee14 100644 --- a/src/pages/iou/request/IOURequestStartPage.js +++ b/src/pages/iou/request/IOURequestStartPage.js @@ -13,6 +13,7 @@ import TabSelector from '@components/TabSelector/TabSelector'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as IOUUtils from '@libs/IOUUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -20,7 +21,6 @@ import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index daa874488980..8d7d5cfceb77 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -10,6 +10,7 @@ import OptionsSelector from '@components/OptionsSelector'; import refPropTypes from '@components/refPropTypes'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; @@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/request/step/IOURequestStepCategory.js b/src/pages/iou/request/step/IOURequestStepCategory.js index 7614683f1e1e..2218262e1877 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.js +++ b/src/pages/iou/request/step/IOURequestStepCategory.js @@ -3,10 +3,10 @@ import CategoryPicker from '@components/CategoryPicker'; import Text from '@components/Text'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import ROUTES from '@src/ROUTES'; import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes'; diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js index cb90103c6ffc..1f458ef37f01 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.js +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js @@ -11,6 +11,7 @@ import transactionPropTypes from '@components/transactionPropTypes'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -22,7 +23,6 @@ import * as TransactionUtils from '@libs/TransactionUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; import {policyPropTypes} from '@pages/workspace/withPolicy'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; diff --git a/src/pages/iou/request/step/IOURequestStepDate.js b/src/pages/iou/request/step/IOURequestStepDate.js index 58c67b26052a..c90779af47ee 100644 --- a/src/pages/iou/request/step/IOURequestStepDate.js +++ b/src/pages/iou/request/step/IOURequestStepDate.js @@ -5,10 +5,10 @@ import DatePicker from '@components/DatePicker'; import FormProvider from '@components/Form/FormProvider'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as IOUUtils from '@libs/IOUUtils'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/request/step/IOURequestStepDescription.js b/src/pages/iou/request/step/IOURequestStepDescription.js index 6cf9f86068a6..849f3276667e 100644 --- a/src/pages/iou/request/step/IOURequestStepDescription.js +++ b/src/pages/iou/request/step/IOURequestStepDescription.js @@ -7,11 +7,11 @@ import InputWrapperWithRef from '@components/Form/InputWrapper'; import TextInput from '@components/TextInput'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import updateMultilineInputRange from '@libs/updateMultilineInputRange'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js index 39e9d6f03afa..a4b1e97425ee 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.js +++ b/src/pages/iou/request/step/IOURequestStepDistance.js @@ -11,12 +11,12 @@ import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as TransactionUtils from '@libs/TransactionUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import * as IOU from '@userActions/IOU'; import * as MapboxToken from '@userActions/MapboxToken'; @@ -51,9 +51,9 @@ function IOURequestStepDistance({ }, transaction, }) { + const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {translate} = useLocalize(); - const styles = useThemeStyles(); const [optimisticWaypoints, setOptimisticWaypoints] = useState(null); const [hasError, setHasError] = useState(false); diff --git a/src/pages/iou/request/step/IOURequestStepMerchant.js b/src/pages/iou/request/step/IOURequestStepMerchant.js index 2dbb6f8473b9..3234b6046f31 100644 --- a/src/pages/iou/request/step/IOURequestStepMerchant.js +++ b/src/pages/iou/request/step/IOURequestStepMerchant.js @@ -7,9 +7,9 @@ import TextInput from '@components/TextInput'; import transactionPropTypes from '@components/transactionPropTypes'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js index e4c50ff25b5c..c51727f0143b 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.js +++ b/src/pages/iou/request/step/IOURequestStepScan/index.js @@ -13,6 +13,8 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; @@ -24,8 +26,6 @@ import StepScreenDragAndDropWrapper from '@pages/iou/request/step/StepScreenDrag import withFullTransactionOrNotFound from '@pages/iou/request/step/withFullTransactionOrNotFound'; import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.js b/src/pages/iou/request/step/IOURequestStepScan/index.native.js index e80fbbce0676..8745600924e8 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.js +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.js @@ -11,6 +11,8 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import Log from '@libs/Log'; @@ -20,8 +22,6 @@ import StepScreenWrapper from '@pages/iou/request/step/StepScreenWrapper'; import withFullTransactionOrNotFound from '@pages/iou/request/step/withFullTransactionOrNotFound'; import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound'; import reportPropTypes from '@pages/reportPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/request/step/IOURequestStepTag.js b/src/pages/iou/request/step/IOURequestStepTag.js index 12e5dc8f9dab..7e2ccbe1a9dd 100644 --- a/src/pages/iou/request/step/IOURequestStepTag.js +++ b/src/pages/iou/request/step/IOURequestStepTag.js @@ -6,11 +6,11 @@ import tagPropTypes from '@components/tagPropTypes'; import Text from '@components/Text'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.js b/src/pages/iou/request/step/IOURequestStepWaypoint.js index 7af58a7e0352..dc5b9f7d6275 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.js +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.js @@ -16,12 +16,12 @@ import ScreenWrapper from '@components/ScreenWrapper'; import transactionPropTypes from '@components/transactionPropTypes'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Transaction from '@userActions/Transaction'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js index a369775d7110..ceb0d5a44351 100644 --- a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js +++ b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js @@ -4,8 +4,8 @@ import {View} from 'react-native'; import DragAndDropProvider from '@components/DragAndDrop/Provider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** The things to display inside the screenwrapper */ @@ -32,9 +32,10 @@ const defaultProps = { }; function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, onEntryTransitionEnd, children, shouldShowWrapper}) { - const [isDraggingOver, setIsDraggingOver] = useState(false); const styles = useThemeStyles(); + const [isDraggingOver, setIsDraggingOver] = useState(false); + if (!shouldShowWrapper) { return children; } diff --git a/src/pages/iou/request/step/StepScreenWrapper.js b/src/pages/iou/request/step/StepScreenWrapper.js index 5131a9c60dc6..eae542f0f6f9 100644 --- a/src/pages/iou/request/step/StepScreenWrapper.js +++ b/src/pages/iou/request/step/StepScreenWrapper.js @@ -4,8 +4,8 @@ import {View} from 'react-native'; import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** The things to display inside the screenwrapper */ diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js index a8e56f7a41e8..c9075d896deb 100644 --- a/src/pages/iou/steps/MoneyRequestAmountForm.js +++ b/src/pages/iou/steps/MoneyRequestAmountForm.js @@ -9,13 +9,13 @@ import FormHelpMessage from '@components/FormHelpMessage'; import refPropTypes from '@components/refPropTypes'; import TextInputWithCurrencySymbol from '@components/TextInputWithCurrencySymbol'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import getOperatingSystem from '@libs/getOperatingSystem'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index 03ebb9bdb562..3476b2304875 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -13,6 +13,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro import withLocalize from '@components/withLocalize'; import useInitialValue from '@hooks/useInitialValue'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import * as FileUtils from '@libs/fileDownload/FileUtils'; @@ -22,7 +23,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js index d44c40db209f..7826643d4283 100644 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js @@ -10,13 +10,13 @@ import ScreenWrapper from '@components/ScreenWrapper'; import transactionPropTypes from '@components/transactionPropTypes'; import useInitialValue from '@hooks/useInitialValue'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as TransactionUtils from '@libs/TransactionUtils'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index a8b4dae0facc..d8d644479270 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -10,6 +10,7 @@ import OptionsSelector from '@components/OptionsSelector'; import refPropTypes from '@components/refPropTypes'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; @@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js index bf92c420e82c..569e2ce693ee 100644 --- a/src/pages/iou/steps/NewRequestAmountPage.js +++ b/src/pages/iou/steps/NewRequestAmountPage.js @@ -9,13 +9,13 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as IOUUtils from '@libs/IOUUtils'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js index c192abf84e43..16ae590cf86b 100644 --- a/src/pages/settings/AboutPage/AboutPage.js +++ b/src/pages/settings/AboutPage/AboutPage.js @@ -11,13 +11,13 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import compose from '@libs/compose'; import * as Environment from '@libs/Environment/Environment'; import Navigation from '@libs/Navigation/Navigation'; import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js index 182a25a121b5..471a38b039b2 100644 --- a/src/pages/settings/AppDownloadLinks.js +++ b/src/pages/settings/AppDownloadLinks.js @@ -7,11 +7,11 @@ import MenuItem from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 2af5b145caab..ede356f3bb02 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -21,6 +21,8 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import * as CardUtils from '@libs/CardUtils'; import compose from '@libs/compose'; @@ -34,8 +36,6 @@ import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActi import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import policyMemberPropType from '@pages/policyMemberPropType'; import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import * as PaymentMethods from '@userActions/PaymentMethods'; import * as Session from '@userActions/Session'; diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 6fa3e2df3474..e98cd2b19c39 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -11,9 +11,9 @@ import TestToolMenu from '@components/TestToolMenu'; import Text from '@components/Text'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -24,6 +24,9 @@ const propTypes = { /** The chat priority mode */ priorityMode: PropTypes.string, + /** The app's color theme */ + preferredTheme: PropTypes.string, + /** The details about the user that is signed in */ user: PropTypes.shape({ /** Whether or not the user is subscribed to news updates */ @@ -33,6 +36,7 @@ const propTypes = { const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, + preferredTheme: CONST.DEFAULT_THEME, user: {}, }; @@ -80,6 +84,12 @@ function PreferencesPage(props) { description={translate('languagePage.language')} onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} /> + Navigation.navigate(ROUTES.SETTINGS_THEME)} + /> {/* Enable additional test features in non-production environments */} {!isProduction && ( @@ -102,4 +112,7 @@ export default withOnyx({ user: { key: ONYXKEYS.USER, }, + preferredTheme: { + key: ONYXKEYS.PREFERRED_THEME, + }, })(PreferencesPage); diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js index 0778394d2b28..2a9d9c5b0d9e 100644 --- a/src/pages/settings/Preferences/PriorityModePage.js +++ b/src/pages/settings/Preferences/PriorityModePage.js @@ -7,8 +7,8 @@ import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js index f4acd10a7230..453bf0a72aa8 100644 --- a/src/pages/settings/Preferences/ThemePage.js +++ b/src/pages/settings/Preferences/ThemePage.js @@ -6,18 +6,15 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import compose from '@libs/compose'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import useThemeStyles from '@styles/useThemeStyles'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; const propTypes = { - ...withLocalizePropTypes, - /** The theme of the app */ preferredTheme: PropTypes.string, }; @@ -28,9 +25,10 @@ const defaultProps = { function ThemePage(props) { const styles = useThemeStyles(); - const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT')), (theme) => ({ + const {translate} = useLocalize(); + const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT', 'FALLBACK')), (theme) => ({ value: theme, - text: props.translate(`themePage.themes.${theme}.label`), + text: translate(`themePage.themes.${theme}.label`), keyForList: theme, isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === theme, })); @@ -41,13 +39,13 @@ function ThemePage(props) { testID={ThemePage.displayName} > Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)} onCloseButtonPress={() => Navigation.dismissModal(true)} /> - {props.translate('themePage.chooseThemeBelowOrSync')} + {translate('themePage.chooseThemeBelowOrSync')} { setShouldShowDefaultDeleteMenu(false); - InteractionManager.runAfterInteractions(() => { - setShowConfirmDeleteContent(false); - }); - }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteContent]); + setShowConfirmDeleteModal(false); + }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]); const makeDefaultPaymentMethod = useCallback(() => { const paymentCardList = fundList || {}; @@ -487,11 +485,9 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod top: anchorPosition.anchorPositionTop, right: anchorPosition.anchorPositionRight, }} - withoutOverlay anchorRef={paymentMethodButtonRef} - onModalHide={resetSelectedPaymentMethodData} > - {!showConfirmDeleteContent ? ( + {!showConfirmDeleteModal && ( {isPopoverBottomMount && ( )}