From 981c6f0671981753998d2fb8341594b47f2c7778 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Sun, 18 Jul 2021 13:36:04 +0300 Subject: [PATCH 01/13] #3770 - persist selected locale --- src/libs/actions/SignInRedirect.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.js index 9e7b787afbe1..2284f504847b 100644 --- a/src/libs/actions/SignInRedirect.js +++ b/src/libs/actions/SignInRedirect.js @@ -19,6 +19,12 @@ Onyx.connect({ }, }); +let currentPreferredLocale; +Onyx.connect({ + key: ONYXKEYS.PREFERRED_LOCALE, + callback: val => currentPreferredLocale = val, +}); + /** * Clears the Onyx store and redirects to the sign in page. * Normally this method would live in Session.js, but that would cause a circular dependency with Network.js. @@ -36,12 +42,16 @@ function redirectToSignIn(errorMessage) { } const activeClients = currentActiveClients; + const preferredLocale = currentPreferredLocale; // We must set the authToken to null so we can navigate to "signin" it's not possible to navigate to the route as // it only exists when the authToken is null. Onyx.set(ONYXKEYS.SESSION, {authToken: null}) .then(() => { Onyx.clear().then(() => { + if (preferredLocale) { + Onyx.set(ONYXKEYS.PREFERRED_LOCALE, preferredLocale); + } if (errorMessage) { Onyx.set(ONYXKEYS.SESSION, {error: errorMessage}); } From 800fd63dde93871960a519dac0a52868e6773b01 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Sun, 18 Jul 2021 14:23:04 +0300 Subject: [PATCH 02/13] #3770 move LocalePicker to a separate component --- src/components/LocalePicker/index.js | 63 +++++++++++++++++++++++++++ src/pages/settings/PreferencesPage.js | 34 ++------------- 2 files changed, 66 insertions(+), 31 deletions(-) create mode 100644 src/components/LocalePicker/index.js diff --git a/src/components/LocalePicker/index.js b/src/components/LocalePicker/index.js new file mode 100644 index 000000000000..f3bda11b06fc --- /dev/null +++ b/src/components/LocalePicker/index.js @@ -0,0 +1,63 @@ +import React from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; +import styles from '../../styles/styles'; +import Picker from '../Picker'; +import compose from '../../libs/compose'; +import {setLocale} from '../../libs/actions/App'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; +import ONYXKEYS from '../../ONYXKEYS'; +import CONST from '../../CONST'; + +const propTypes = { + /** Indicates which locale the user currently has selected */ + preferredLocale: PropTypes.string, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + preferredLocale: CONST.DEFAULT_LOCALE, +}; + +const LocalePicker = ({preferredLocale, translate}) => { + const localesToLanguages = { + default: { + value: 'en', + label: translate('preferencesPage.languages.english'), + }, + es: { + value: 'es', + label: translate('preferencesPage.languages.spanish'), + }, + }; + + return ( + + { + if (locale !== preferredLocale) { + setLocale(locale); + } + }} + items={Object.values(localesToLanguages)} + value={preferredLocale} + /> + + ); +}; + + +LocalePicker.defaultProps = defaultProps; +LocalePicker.propTypes = propTypes; +LocalePicker.displayName = 'LocalePicker'; + +export default compose( + withLocalize, + withOnyx({ + preferredLocale: { + key: ONYXKEYS.PREFERRED_LOCALE, + }, + }), +)(LocalePicker); diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js index 3fd50a75a334..b1538f9c5b28 100755 --- a/src/pages/settings/PreferencesPage.js +++ b/src/pages/settings/PreferencesPage.js @@ -4,6 +4,7 @@ import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; +import LocalePicker from '../../components/LocalePicker'; import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; import ONYXKEYS from '../../ONYXKEYS'; @@ -12,7 +13,6 @@ import Text from '../../components/Text'; import NameValuePair from '../../libs/actions/NameValuePair'; import CONST from '../../CONST'; import {setExpensifyNewsStatus} from '../../libs/actions/User'; -import {setLocale} from '../../libs/actions/App'; import ScreenWrapper from '../../components/ScreenWrapper'; import Switch from '../../components/Switch'; import Picker from '../../components/Picker'; @@ -29,20 +29,16 @@ const propTypes = { expensifyNewsStatus: PropTypes.bool, }), - /** Indicates which locale the user currently has selected */ - preferredLocale: PropTypes.string, - ...withLocalizePropTypes, }; const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, user: {}, - preferredLocale: CONST.DEFAULT_LOCALE, }; const PreferencesPage = ({ - priorityMode, user, translate, preferredLocale, + priorityMode, user, translate, }) => { const priorityModes = { default: { @@ -57,17 +53,6 @@ const PreferencesPage = ({ }, }; - const localesToLanguages = { - default: { - value: 'en', - label: translate('preferencesPage.languages.english'), - }, - es: { - value: 'es', - label: translate('preferencesPage.languages.spanish'), - }, - }; - return ( {translate('preferencesPage.language')} - - { - if (locale !== preferredLocale) { - setLocale(locale); - } - }} - items={Object.values(localesToLanguages)} - value={preferredLocale} - /> - + @@ -142,8 +117,5 @@ export default compose( user: { key: ONYXKEYS.USER, }, - preferredLocale: { - key: ONYXKEYS.PREFERRED_LOCALE, - }, }), )(PreferencesPage); From b2d03e134c882c01955d4528798bc6fa49103cbb Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Sun, 18 Jul 2021 14:46:20 +0300 Subject: [PATCH 03/13] #3770 add betas permission check + move picker label to new component --- src/CONST.js | 1 + src/components/LocalePicker/index.js | 41 +++++++++++++++++++-------- src/libs/Permissions.js | 9 ++++++ src/pages/settings/PreferencesPage.js | 3 -- 4 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 511ba361a309..5858ca5859f6 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -83,6 +83,7 @@ const CONST = { PAY_WITH_EXPENSIFY: 'payWithExpensify', FREE_PLAN: 'freePlan', DEFAULT_ROOMS: 'defaultRooms', + INTERNATIONALIZATION: 'internationalization', }, BUTTON_STATES: { DEFAULT: 'default', diff --git a/src/components/LocalePicker/index.js b/src/components/LocalePicker/index.js index f3bda11b06fc..e90c70bd9acf 100644 --- a/src/components/LocalePicker/index.js +++ b/src/components/LocalePicker/index.js @@ -4,16 +4,21 @@ import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; import Picker from '../Picker'; +import Text from '../Text'; import compose from '../../libs/compose'; import {setLocale} from '../../libs/actions/App'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import ONYXKEYS from '../../ONYXKEYS'; import CONST from '../../CONST'; +import Permissions from '../../libs/Permissions'; const propTypes = { /** Indicates which locale the user currently has selected */ preferredLocale: PropTypes.string, + /** Beta features list */ + betas: PropTypes.arrayOf(PropTypes.string).isRequired, + ...withLocalizePropTypes, }; @@ -21,7 +26,11 @@ const defaultProps = { preferredLocale: CONST.DEFAULT_LOCALE, }; -const LocalePicker = ({preferredLocale, translate}) => { +const LocalePicker = ({preferredLocale, translate, betas}) => { + if (!Permissions.canUseInternationalization(betas)) { + return null; + } + const localesToLanguages = { default: { value: 'en', @@ -34,17 +43,22 @@ const LocalePicker = ({preferredLocale, translate}) => { }; return ( - - { - if (locale !== preferredLocale) { - setLocale(locale); - } - }} - items={Object.values(localesToLanguages)} - value={preferredLocale} - /> - + <> + + {translate('preferencesPage.language')} + + + { + if (locale !== preferredLocale) { + setLocale(locale); + } + }} + items={Object.values(localesToLanguages)} + value={preferredLocale} + /> + + ); }; @@ -59,5 +73,8 @@ export default compose( preferredLocale: { key: ONYXKEYS.PREFERRED_LOCALE, }, + betas: { + key: ONYXKEYS.BETAS, + }, }), )(LocalePicker); diff --git a/src/libs/Permissions.js b/src/libs/Permissions.js index 7063273b245c..1ca31ce88712 100644 --- a/src/libs/Permissions.js +++ b/src/libs/Permissions.js @@ -51,10 +51,19 @@ function canUseDefaultRooms(betas) { return _.contains(betas, CONST.BETAS.DEFAULT_ROOMS) || canUseAllBetas(betas); } +/** + * @param {Array} betas + * @returns {Boolean} + */ +function canUseInternationalization(betas) { + return _.contains(betas, CONST.BETAS.INTERNATIONALIZATION) || canUseAllBetas(betas); +} + export default { canUseChronos, canUseIOU, canUsePayWithExpensify, canUseFreePlan, canUseDefaultRooms, + canUseInternationalization, }; diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js index b1538f9c5b28..39163cdc4215 100755 --- a/src/pages/settings/PreferencesPage.js +++ b/src/pages/settings/PreferencesPage.js @@ -94,9 +94,6 @@ const PreferencesPage = ({ {priorityModes[priorityMode].description} - - {translate('preferencesPage.language')} - From 86a95500faca895028dc2233923737a2191c0180 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Sun, 18 Jul 2021 14:57:05 +0300 Subject: [PATCH 04/13] #3770 add LocalePicker to SignInPageLayout --- src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js | 2 ++ src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 23b169f713b9..34f6bd3c0af9 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -7,6 +7,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import LocalePicker from '../../../components/LocalePicker'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -53,6 +54,7 @@ const SignInPageLayoutNarrow = props => ( + ); diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index ff878c4e8c4a..a8396282a09a 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -7,6 +7,7 @@ import Text from '../../../components/Text'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png'; import variables from '../../../styles/variables'; import TermsAndLicenses from '../TermsAndLicenses'; +import LocalePicker from '../../../components/LocalePicker'; import CONST from '../../../CONST'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import TextLink from '../../../components/TextLink'; @@ -48,6 +49,7 @@ const SignInPageLayoutWide = props => ( + Date: Wed, 21 Jul 2021 11:47:40 +0300 Subject: [PATCH 05/13] #3770 create small picker for locale selector on sign in page --- src/components/LocalePicker/index.js | 33 ++++++----- src/components/Picker/PickerPropTypes.js | 4 ++ src/components/Picker/index.js | 36 +++++++----- src/pages/settings/PreferencesPage.js | 4 +- .../SignInPageLayoutNarrow.js | 2 - .../SignInPageLayout/SignInPageLayoutWide.js | 2 - .../TermsWithLicenses/index.android.js | 7 +++ .../TermsWithLicenses/index.ios.js | 7 +++ .../TermsWithLicenses/index.js | 8 ++- src/styles/styles.js | 56 +++++++++++++++++++ 10 files changed, 124 insertions(+), 35 deletions(-) diff --git a/src/components/LocalePicker/index.js b/src/components/LocalePicker/index.js index e90c70bd9acf..89c9c111cbb8 100644 --- a/src/components/LocalePicker/index.js +++ b/src/components/LocalePicker/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; @@ -16,6 +15,9 @@ const propTypes = { /** Indicates which locale the user currently has selected */ preferredLocale: PropTypes.string, + /** Indicates size of a picker component and whether to render the label or not */ + size: PropTypes.oneOf(['normal', 'small']), + /** Beta features list */ betas: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -24,9 +26,12 @@ const propTypes = { const defaultProps = { preferredLocale: CONST.DEFAULT_LOCALE, + size: 'normal', }; -const LocalePicker = ({preferredLocale, translate, betas}) => { +const LocalePicker = ({ + preferredLocale, translate, betas, size, +}) => { if (!Permissions.canUseInternationalization(betas)) { return null; } @@ -44,25 +49,25 @@ const LocalePicker = ({preferredLocale, translate, betas}) => { return ( <> + {size === 'normal' && ( {translate('preferencesPage.language')} - - { - if (locale !== preferredLocale) { - setLocale(locale); - } - }} - items={Object.values(localesToLanguages)} - value={preferredLocale} - /> - + )} + { + if (locale !== preferredLocale) { + setLocale(locale); + } + }} + items={Object.values(localesToLanguages)} + size={size} + value={preferredLocale} + /> ); }; - LocalePicker.defaultProps = defaultProps; LocalePicker.propTypes = propTypes; LocalePicker.displayName = 'LocalePicker'; diff --git a/src/components/Picker/PickerPropTypes.js b/src/components/Picker/PickerPropTypes.js index 633966a2bef4..631194544414 100644 --- a/src/components/Picker/PickerPropTypes.js +++ b/src/components/Picker/PickerPropTypes.js @@ -36,6 +36,9 @@ const propTypes = { /** An icon to display with the picker */ icon: PropTypes.func, + + /** Size of a picker component */ + size: PropTypes.oneOf(['normal', 'small']), }; const defaultProps = { useDisabledStyles: false, @@ -43,6 +46,7 @@ const defaultProps = { placeholder: {}, value: null, icon: () => , + size: 'normal', }; export { diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index 427d38184ef3..dd0370c69999 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -13,19 +13,29 @@ const Picker = ({ value, icon, disabled, -}) => ( - -); + size, +}) => { + let pickerStyles; + if (size === 'small') { + pickerStyles = styles.pickerSmall; + } else { + pickerStyles = useDisabledStyles ? pickerDisabledStyles : styles.picker; + } + + return ( + + ); +}; Picker.propTypes = pickerPropTypes.propTypes; Picker.defaultProps = pickerPropTypes.defaultProps; diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js index 39163cdc4215..03e8c23c017c 100755 --- a/src/pages/settings/PreferencesPage.js +++ b/src/pages/settings/PreferencesPage.js @@ -94,7 +94,9 @@ const PreferencesPage = ({ {priorityModes[priorityMode].description} - + + + diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 34f6bd3c0af9..23b169f713b9 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -7,7 +7,6 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import LocalePicker from '../../../components/LocalePicker'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -54,7 +53,6 @@ const SignInPageLayoutNarrow = props => ( - ); diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index a8396282a09a..ff878c4e8c4a 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -7,7 +7,6 @@ import Text from '../../../components/Text'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png'; import variables from '../../../styles/variables'; import TermsAndLicenses from '../TermsAndLicenses'; -import LocalePicker from '../../../components/LocalePicker'; import CONST from '../../../CONST'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import TextLink from '../../../components/TextLink'; @@ -49,7 +48,6 @@ const SignInPageLayoutWide = props => ( - ( @@ -61,6 +62,12 @@ const TermsWithLicenses = ({translate}) => ( . + + + + ); diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js index 720c89434bf3..7f8e6dd64218 100644 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js @@ -7,6 +7,7 @@ import withLocalize, { withLocalizePropTypes, } from '../../../../components/withLocalize'; import LogoWordmark from '../../../../../assets/images/expensify-wordmark.svg'; +import LocalePicker from '../../../../components/LocalePicker'; const TermsWithLicenses = ({translate}) => ( @@ -67,6 +68,12 @@ const TermsWithLicenses = ({translate}) => ( . + + + + ); diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js index 175bda985afc..6b332da1ec3c 100755 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js @@ -7,12 +7,10 @@ import withLocalize, { withLocalizePropTypes, } from '../../../../components/withLocalize'; import LogoWordmark from '../../../../../assets/images/expensify-wordmark.svg'; +import LocalePicker from '../../../../components/LocalePicker'; const TermsWithLicenses = ({translate}) => ( - - - {translate('termsOfUse.phrase1')} {' '} @@ -45,6 +43,10 @@ const TermsWithLicenses = ({translate}) => ( . + + + + ); diff --git a/src/styles/styles.js b/src/styles/styles.js index 854cef4d0049..9d533bd3c0ca 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -333,6 +333,62 @@ const styles = { }, }, + pickerSmall: { + inputIOS: { + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeSmall, + paddingLeft: 10, + paddingRight: 26, + paddingTop: 6, + paddingBottom: 6, + borderRadius: variables.componentBorderRadius, + borderWidth: 1, + borderColor: themeColors.border, + color: themeColors.text, + height: variables.componentSizeSmall, + opacity: 1, + backgroundColor: 'transparent', + }, + inputWeb: { + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeSmall, + paddingLeft: 10, + paddingRight: 26, + paddingTop: 6, + paddingBottom: 6, + borderWidth: 1, + borderRadius: variables.componentBorderRadius, + borderColor: themeColors.border, + color: themeColors.text, + appearance: 'none', + height: variables.componentSizeSmall, + opacity: 1, + cursor: 'pointer', + backgroundColor: 'transparent', + }, + inputAndroid: { + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeSmall, + paddingLeft: 10, + paddingRight: 26, + paddingTop: 6, + paddingBottom: 6, + borderWidth: 1, + borderRadius: variables.componentBorderRadius, + borderColor: themeColors.border, + color: themeColors.text, + height: variables.componentSizeSmall, + opacity: 1, + }, + iconContainer: { + top: 8, + right: 13, + width: variables.iconSizeExtraSmall, + height: variables.iconSizeExtraSmall, + pointerEvents: 'none', + }, + }, + badge: { backgroundColor: themeColors.badgeDefaultBG, borderRadius: 14, From b465606ef6a9be5ecdf7955e195c3dd5af5b7787 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Wed, 21 Jul 2021 14:34:32 +0300 Subject: [PATCH 06/13] #3770 fix arrow on native --- assets/images/down-small.svg | 3 +++ src/components/Icon/Expensicons.js | 2 ++ src/components/LocalePicker/index.js | 3 ++- src/components/Picker/PickerPropTypes.js | 21 ++++++++++++++++++--- src/components/Picker/index.js | 2 +- src/styles/styles.js | 18 ++++++++---------- 6 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 assets/images/down-small.svg diff --git a/assets/images/down-small.svg b/assets/images/down-small.svg new file mode 100644 index 000000000000..d0de7b1a4425 --- /dev/null +++ b/assets/images/down-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 42c8dc079b0f..84946a053e7b 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -13,6 +13,7 @@ import Clipboard from '../../../assets/images/clipboard.svg'; import Close from '../../../assets/images/close.svg'; import CreditCard from '../../../assets/images/creditcard.svg'; import DownArrow from '../../../assets/images/down.svg'; +import DownArrowSmall from '../../../assets/images/down-small.svg'; import Download from '../../../assets/images/download.svg'; import Emoji from '../../../assets/images/emoji.svg'; import Exclamation from '../../../assets/images/exclamation.svg'; @@ -68,6 +69,7 @@ export { Close, CreditCard, DownArrow, + DownArrowSmall, Download, Emoji, Exclamation, diff --git a/src/components/LocalePicker/index.js b/src/components/LocalePicker/index.js index 89c9c111cbb8..604f5a0cd136 100644 --- a/src/components/LocalePicker/index.js +++ b/src/components/LocalePicker/index.js @@ -19,7 +19,7 @@ const propTypes = { size: PropTypes.oneOf(['normal', 'small']), /** Beta features list */ - betas: PropTypes.arrayOf(PropTypes.string).isRequired, + betas: PropTypes.arrayOf(PropTypes.string), ...withLocalizePropTypes, }; @@ -27,6 +27,7 @@ const propTypes = { const defaultProps = { preferredLocale: CONST.DEFAULT_LOCALE, size: 'normal', + betas: [], }; const LocalePicker = ({ diff --git a/src/components/Picker/PickerPropTypes.js b/src/components/Picker/PickerPropTypes.js index 631194544414..4cb8f063b682 100644 --- a/src/components/Picker/PickerPropTypes.js +++ b/src/components/Picker/PickerPropTypes.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../Icon'; -import {DownArrow} from '../Icon/Expensicons'; +import {DownArrow, DownArrowSmall} from '../Icon/Expensicons'; const propTypes = { /** A callback method that is called when the value changes and it received the selected value as an argument */ @@ -45,8 +45,23 @@ const defaultProps = { disabled: false, placeholder: {}, value: null, - icon: () => , - size: 'normal', + icon: size => ( + <> + {size === 'small' + ? ( + + ) + : ( + + )} + + ), }; export { diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index dd0370c69999..b963c81601b8 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -30,7 +30,7 @@ const Picker = ({ useNativeAndroidPickerStyle={false} placeholder={placeholder} value={value} - Icon={icon} + Icon={() => icon(size)} disabled={disabled} fixAndroidTouchableBug /> diff --git a/src/styles/styles.js b/src/styles/styles.js index 9d533bd3c0ca..acf4e8f3d83d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -337,8 +337,8 @@ const styles = { inputIOS: { fontFamily: fontFamily.GTA, fontSize: variables.fontSizeSmall, - paddingLeft: 10, - paddingRight: 26, + paddingLeft: 9, + paddingRight: 25, paddingTop: 6, paddingBottom: 6, borderRadius: variables.componentBorderRadius, @@ -352,8 +352,8 @@ const styles = { inputWeb: { fontFamily: fontFamily.GTA, fontSize: variables.fontSizeSmall, - paddingLeft: 10, - paddingRight: 26, + paddingLeft: 9, + paddingRight: 25, paddingTop: 6, paddingBottom: 6, borderWidth: 1, @@ -369,8 +369,8 @@ const styles = { inputAndroid: { fontFamily: fontFamily.GTA, fontSize: variables.fontSizeSmall, - paddingLeft: 10, - paddingRight: 26, + paddingLeft: 9, + paddingRight: 25, paddingTop: 6, paddingBottom: 6, borderWidth: 1, @@ -381,10 +381,8 @@ const styles = { opacity: 1, }, iconContainer: { - top: 8, - right: 13, - width: variables.iconSizeExtraSmall, - height: variables.iconSizeExtraSmall, + top: 7, + right: 9, pointerEvents: 'none', }, }, From c59ac05a1a7cf9669b281e972f7369e15803ef51 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Wed, 21 Jul 2021 14:55:38 +0300 Subject: [PATCH 07/13] #3770 remove duplicate logo watermark on native --- .../signin/TermsAndLicenses/TermsWithLicenses/index.android.js | 3 --- .../signin/TermsAndLicenses/TermsWithLicenses/index.ios.js | 3 --- 2 files changed, 6 deletions(-) diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js index 617ace48ab9c..c7e34d7143de 100644 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js @@ -11,9 +11,6 @@ import LocalePicker from '../../../../components/LocalePicker'; const TermsWithLicenses = ({translate}) => ( - - - ( - - - Date: Wed, 21 Jul 2021 18:42:21 +0300 Subject: [PATCH 08/13] #3770 make legal text aligned to the left --- .../signin/TermsAndLicenses/TermsWithLicenses/index.android.js | 1 - .../signin/TermsAndLicenses/TermsWithLicenses/index.ios.js | 1 - src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js index c7e34d7143de..4ef064130e71 100644 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.android.js @@ -18,7 +18,6 @@ const TermsWithLicenses = ({translate}) => ( styles.flexWrap, styles.textAlignCenter, styles.alignItemsCenter, - styles.justifyContentCenter, ]} > diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js index 3f7abd8d12d6..4851ec32cb30 100644 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js @@ -18,7 +18,6 @@ const TermsWithLicenses = ({translate}) => ( styles.flexWrap, styles.textAlignCenter, styles.alignItemsCenter, - styles.justifyContentCenter, ]} > diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js index 6b332da1ec3c..a022e771f31b 100755 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.js @@ -11,7 +11,7 @@ import LocalePicker from '../../../../components/LocalePicker'; const TermsWithLicenses = ({translate}) => ( - + {translate('termsOfUse.phrase1')} {' '} Date: Wed, 21 Jul 2021 18:59:13 +0300 Subject: [PATCH 09/13] #3770 fix left align for legal text on ios --- .../signin/TermsAndLicenses/TermsWithLicenses/index.ios.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js index 4851ec32cb30..f884c94d7d8e 100644 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses/index.ios.js @@ -17,7 +17,7 @@ const TermsWithLicenses = ({translate}) => ( styles.flexColumn, styles.flexWrap, styles.textAlignCenter, - styles.alignItemsCenter, + styles.justifyContentCenter, ]} > From ed94eb9ac15993bd87d84826fcf9b864f15c87a9 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Wed, 21 Jul 2021 19:39:36 +0300 Subject: [PATCH 10/13] #3770 reuse existing down arrow asset --- assets/images/down-small.svg | 3 --- src/components/Icon/Expensicons.js | 2 -- src/components/Picker/PickerPropTypes.js | 4 ++-- 3 files changed, 2 insertions(+), 7 deletions(-) delete mode 100644 assets/images/down-small.svg diff --git a/assets/images/down-small.svg b/assets/images/down-small.svg deleted file mode 100644 index d0de7b1a4425..000000000000 --- a/assets/images/down-small.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 84946a053e7b..42c8dc079b0f 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -13,7 +13,6 @@ import Clipboard from '../../../assets/images/clipboard.svg'; import Close from '../../../assets/images/close.svg'; import CreditCard from '../../../assets/images/creditcard.svg'; import DownArrow from '../../../assets/images/down.svg'; -import DownArrowSmall from '../../../assets/images/down-small.svg'; import Download from '../../../assets/images/download.svg'; import Emoji from '../../../assets/images/emoji.svg'; import Exclamation from '../../../assets/images/exclamation.svg'; @@ -69,7 +68,6 @@ export { Close, CreditCard, DownArrow, - DownArrowSmall, Download, Emoji, Exclamation, diff --git a/src/components/Picker/PickerPropTypes.js b/src/components/Picker/PickerPropTypes.js index 4cb8f063b682..e7140b0bef5a 100644 --- a/src/components/Picker/PickerPropTypes.js +++ b/src/components/Picker/PickerPropTypes.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../Icon'; -import {DownArrow, DownArrowSmall} from '../Icon/Expensicons'; +import {DownArrow} from '../Icon/Expensicons'; const propTypes = { /** A callback method that is called when the value changes and it received the selected value as an argument */ @@ -52,7 +52,7 @@ const defaultProps = { ) : ( From 37b911ae3ff981d9c7e4e58fe7e9f09d39c69e05 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Thu, 22 Jul 2021 21:45:41 +0300 Subject: [PATCH 11/13] #3770 - use constant for small icon size --- src/components/Picker/PickerPropTypes.js | 5 +++-- src/styles/styles.js | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Picker/PickerPropTypes.js b/src/components/Picker/PickerPropTypes.js index e7140b0bef5a..3a6077b5886c 100644 --- a/src/components/Picker/PickerPropTypes.js +++ b/src/components/Picker/PickerPropTypes.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../Icon'; +import styles from '../../styles/styles'; import {DownArrow} from '../Icon/Expensicons'; const propTypes = { @@ -50,8 +51,8 @@ const defaultProps = { {size === 'small' ? ( ) diff --git a/src/styles/styles.js b/src/styles/styles.js index acf4e8f3d83d..98b866114455 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -385,6 +385,10 @@ const styles = { right: 9, pointerEvents: 'none', }, + icon: { + width: variables.iconSizeExtraSmall, + height: variables.iconSizeExtraSmall, + }, }, badge: { From 35029bbab5e33bb57d80b9e1e37f69b545656aa0 Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Thu, 22 Jul 2021 21:50:39 +0300 Subject: [PATCH 12/13] #3770 move LocalePicker/index.js to LocalePicker.js --- .../{LocalePicker/index.js => LocalePicker.js} | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) rename src/components/{LocalePicker/index.js => LocalePicker.js} (83%) diff --git a/src/components/LocalePicker/index.js b/src/components/LocalePicker.js similarity index 83% rename from src/components/LocalePicker/index.js rename to src/components/LocalePicker.js index 604f5a0cd136..a634ac6ba7e1 100644 --- a/src/components/LocalePicker/index.js +++ b/src/components/LocalePicker.js @@ -1,15 +1,15 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; -import Picker from '../Picker'; -import Text from '../Text'; -import compose from '../../libs/compose'; -import {setLocale} from '../../libs/actions/App'; -import withLocalize, {withLocalizePropTypes} from '../withLocalize'; -import ONYXKEYS from '../../ONYXKEYS'; -import CONST from '../../CONST'; -import Permissions from '../../libs/Permissions'; +import styles from '../styles/styles'; +import Picker from './Picker'; +import Text from './Text'; +import compose from '../libs/compose'; +import {setLocale} from '../libs/actions/App'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import ONYXKEYS from '../ONYXKEYS'; +import CONST from '../CONST'; +import Permissions from '../libs/Permissions'; const propTypes = { /** Indicates which locale the user currently has selected */ From b74d826f96fee4cc65714429b9f5818c9a053d5f Mon Sep 17 00:00:00 2001 From: Dmytro Klymenko Date: Thu, 22 Jul 2021 22:04:48 +0300 Subject: [PATCH 13/13] #3770 do not translate language names --- src/components/LocalePicker.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index a634ac6ba7e1..88a25971d7a3 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -10,6 +10,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import ONYXKEYS from '../ONYXKEYS'; import CONST from '../CONST'; import Permissions from '../libs/Permissions'; +import {translate} from '../libs/translate'; const propTypes = { /** Indicates which locale the user currently has selected */ @@ -30,24 +31,25 @@ const defaultProps = { betas: [], }; +const localesToLanguages = { + default: { + value: 'en', + label: translate('en', 'preferencesPage.languages.english'), + }, + es: { + value: 'es', + label: translate('es', 'preferencesPage.languages.spanish'), + }, +}; + const LocalePicker = ({ + // eslint-disable-next-line no-shadow preferredLocale, translate, betas, size, }) => { if (!Permissions.canUseInternationalization(betas)) { return null; } - const localesToLanguages = { - default: { - value: 'en', - label: translate('preferencesPage.languages.english'), - }, - es: { - value: 'es', - label: translate('preferencesPage.languages.spanish'), - }, - }; - return ( <> {size === 'normal' && (