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; +};