From bf73f5c6b7621eccd6b686d9c7b8eb4eb3d913be Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 25 Aug 2021 03:52:35 +0530 Subject: [PATCH 1/4] fix Locale Picker and small picker styles --- src/components/ExpensiPicker.js | 4 ++-- src/components/Picker/index.js | 4 ++++ src/libs/actions/App.js | 4 +++- src/styles/styles.js | 3 +++ 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/ExpensiPicker.js b/src/components/ExpensiPicker.js index c80744146298..9a14d3c45e4c 100644 --- a/src/components/ExpensiPicker.js +++ b/src/components/ExpensiPicker.js @@ -1,4 +1,4 @@ -import React, {PureComponent} from 'react'; +import React, {Component} from 'react'; import {Text, View} from 'react-native'; import PropTypes from 'prop-types'; import Picker from './Picker'; @@ -17,7 +17,7 @@ const defaultProps = { isDisabled: false, }; -class ExpensiPicker extends PureComponent { +class ExpensiPicker extends Component { constructor() { super(); this.state = { diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js index 28ff3ff877ea..028f8d23563b 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker/index.js @@ -28,6 +28,10 @@ const Picker = ({ fixAndroidTouchableBug onOpen={onOpen} onClose={onClose} + pickerProps={{ + onFocus: onOpen, + onBlur: onClose, + }} /> ); diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js index e6a4ffb7cd5c..03511072c32c 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -36,7 +36,9 @@ function setCurrentURL(url) { * @param {String} locale */ function setLocale(locale) { - API.PreferredLocale_Update({name: 'preferredLocale', value: locale}); + if (currentUserAccountID) { + API.PreferredLocale_Update({name: 'preferredLocale', value: locale}); + } Onyx.merge(ONYXKEYS.NVP_PREFERRED_LOCALE, locale); } diff --git a/src/styles/styles.js b/src/styles/styles.js index 2b08dfa7bc6d..66c5858464ee 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -370,6 +370,7 @@ const styles = { borderRadius: variables.componentBorderRadius, borderWidth: 1, borderColor: themeColors.border, + borderStyle: 'solid', color: themeColors.text, height: variables.componentSizeSmall, opacity: 1, @@ -385,6 +386,7 @@ const styles = { borderWidth: 1, borderRadius: variables.componentBorderRadius, borderColor: themeColors.border, + borderStyle: 'solid', color: themeColors.text, appearance: 'none', height: variables.componentSizeSmall, @@ -402,6 +404,7 @@ const styles = { borderWidth: 1, borderRadius: variables.componentBorderRadius, borderColor: themeColors.border, + borderStyle: 'solid', color: themeColors.text, height: variables.componentSizeSmall, opacity: 1, From 1fb5be3fdb0b6f3002762eebcde454cc212996f8 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 26 Aug 2021 15:28:28 +0530 Subject: [PATCH 2/4] Fix the Picker styles for firefox --- src/CONST.js | 10 ++++ src/components/Picker/pickerStyles/index.js | 19 +++++++- src/libs/getBrowser/index.js | 1 + src/libs/getBrowser/index.web.js | 51 +++++++++++++++++++++ 4 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 src/libs/getBrowser/index.js create mode 100644 src/libs/getBrowser/index.web.js diff --git a/src/CONST.js b/src/CONST.js index f055faaa97e6..95b9d23abca5 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -329,6 +329,16 @@ const CONST = { NATIVE: 'Native', }, + BROWSER: { + CHROME: 'chrome', + FIREFOX: 'firefox', + IE: 'ie', + EDGE: 'edge', + Opera: 'opera', + SAFARI: 'safari', + OTHER: 'other', + }, + IOU: { // Note: These payment types are used when building IOU reportAction message values in the server and should // not be changed. diff --git a/src/components/Picker/pickerStyles/index.js b/src/components/Picker/pickerStyles/index.js index 7c11a9f8ed86..ecd3e398bdb1 100644 --- a/src/components/Picker/pickerStyles/index.js +++ b/src/components/Picker/pickerStyles/index.js @@ -1,5 +1,22 @@ +import CONST from '../../../CONST'; +import getBrowser from '../../../libs/getBrowser'; import styles from '../../../styles/styles'; -const pickerStyles = disabled => styles.expensiPicker(disabled); +const pickerStylesWeb = () => { + if ([CONST.BROWSER.FIREFOX].includes(getBrowser())) { + return { + textIndent: -2, + }; + } + return {}; +}; + +const pickerStyles = disabled => ({ + ...styles.expensiPicker(disabled), + inputWeb: { + ...styles.expensiPicker(disabled).inputWeb, + ...pickerStylesWeb(), + }, +}); export default pickerStyles; diff --git a/src/libs/getBrowser/index.js b/src/libs/getBrowser/index.js new file mode 100644 index 000000000000..94bc2b70e392 --- /dev/null +++ b/src/libs/getBrowser/index.js @@ -0,0 +1 @@ +export default () => ''; diff --git a/src/libs/getBrowser/index.web.js b/src/libs/getBrowser/index.web.js new file mode 100644 index 000000000000..3453629feb5c --- /dev/null +++ b/src/libs/getBrowser/index.web.js @@ -0,0 +1,51 @@ +import CONST from '../../CONST'; + +/** + * fetch Browser Name and version from UA string + * + * @return {String} e.g. Chrome 80 + */ +function getBrowserVersion() { + const {userAgent} = window.navigator; + let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; + let temp; + + if (/trident/i.test(match[1])) { + temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []; + + return `IE ${temp[1] || ''}`; + } + + if (match[1] === 'Chrome') { + temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/); + + if (temp !== null) { + return temp.slice(1).join(' ').replace('OPR', 'Opera'); + } + + temp = userAgent.match(/\b(Edg)\/(\d+)/); + + if (temp !== null) { + return temp.slice(1).join(' ').replace('Edg', 'Edge'); + } + } + + match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?']; + temp = userAgent.match(/version\/(\d+)/i); + + if (temp !== null) { + match.splice(1, 1, temp[1]); + } + + return match.join(' '); +} + +/** + * Get the Browser name + * @returns {String} + */ +export default () => { + const browserAndVersion = getBrowserVersion(); + const [browser] = browserAndVersion.split(' '); + return browser ? browser.toLowerCase() : CONST.BROWSER.OTHER; +}; From fc5f99b49d4015ffdbd51e255bd463defcb4ef44 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 26 Aug 2021 22:08:09 +0530 Subject: [PATCH 3/4] code refactor --- src/components/ExpensiPicker.js | 4 +-- src/components/Picker/pickerStyles/index.js | 2 +- src/libs/getBrowser/index.web.js | 31 ++++++++------------- 3 files changed, 14 insertions(+), 23 deletions(-) diff --git a/src/components/ExpensiPicker.js b/src/components/ExpensiPicker.js index 9a14d3c45e4c..c80744146298 100644 --- a/src/components/ExpensiPicker.js +++ b/src/components/ExpensiPicker.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {PureComponent} from 'react'; import {Text, View} from 'react-native'; import PropTypes from 'prop-types'; import Picker from './Picker'; @@ -17,7 +17,7 @@ const defaultProps = { isDisabled: false, }; -class ExpensiPicker extends Component { +class ExpensiPicker extends PureComponent { constructor() { super(); this.state = { diff --git a/src/components/Picker/pickerStyles/index.js b/src/components/Picker/pickerStyles/index.js index ecd3e398bdb1..beee55bd1fc9 100644 --- a/src/components/Picker/pickerStyles/index.js +++ b/src/components/Picker/pickerStyles/index.js @@ -3,7 +3,7 @@ import getBrowser from '../../../libs/getBrowser'; import styles from '../../../styles/styles'; const pickerStylesWeb = () => { - if ([CONST.BROWSER.FIREFOX].includes(getBrowser())) { + if (CONST.BROWSER.FIREFOX === getBrowser()) { return { textIndent: -2, }; diff --git a/src/libs/getBrowser/index.web.js b/src/libs/getBrowser/index.web.js index 3453629feb5c..bdfdab0d46f5 100644 --- a/src/libs/getBrowser/index.web.js +++ b/src/libs/getBrowser/index.web.js @@ -1,43 +1,35 @@ import CONST from '../../CONST'; /** - * fetch Browser Name and version from UA string + * fetch Browser name from UA string * - * @return {String} e.g. Chrome 80 + * @return {String} e.g. Chrome */ -function getBrowserVersion() { +function getBrowser() { const {userAgent} = window.navigator; - let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; + let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))/i) || []; let temp; if (/trident/i.test(match[1])) { - temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []; - - return `IE ${temp[1] || ''}`; + return 'IE'; } - if (match[1] === 'Chrome') { + if (match[1] && (match[1].toLowerCase() === 'chrome')) { temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/); if (temp !== null) { - return temp.slice(1).join(' ').replace('OPR', 'Opera'); + return temp.slice(1).replace('OPR', 'Opera'); } temp = userAgent.match(/\b(Edg)\/(\d+)/); if (temp !== null) { - return temp.slice(1).join(' ').replace('Edg', 'Edge'); + return temp.slice(1).replace('Edg', 'Edge'); } } - match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?']; - temp = userAgent.match(/version\/(\d+)/i); - - if (temp !== null) { - match.splice(1, 1, temp[1]); - } - - return match.join(' '); + match = match[1] ? match[1] : navigator.appName; + return match; } /** @@ -45,7 +37,6 @@ function getBrowserVersion() { * @returns {String} */ export default () => { - const browserAndVersion = getBrowserVersion(); - const [browser] = browserAndVersion.split(' '); + const browser = getBrowser(); return browser ? browser.toLowerCase() : CONST.BROWSER.OTHER; }; From 358ff1e9ee04a4a69b81b978004ac5dd33d73363 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 27 Aug 2021 14:13:16 +0530 Subject: [PATCH 4/4] make CLA happy --- src/libs/getBrowser/index.web.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/getBrowser/index.web.js b/src/libs/getBrowser/index.web.js index bdfdab0d46f5..8adc6591d02a 100644 --- a/src/libs/getBrowser/index.web.js +++ b/src/libs/getBrowser/index.web.js @@ -1,7 +1,7 @@ import CONST from '../../CONST'; /** - * fetch Browser name from UA string + * Fetch browser name from UA string * * @return {String} e.g. Chrome */