From d4f0bb44370afa71e74882c5e8722eeb74706bc7 Mon Sep 17 00:00:00 2001 From: Michael Laktionov Date: Mon, 15 Jun 2020 10:23:47 +0300 Subject: [PATCH 1/2] Add Edge Chromium, isWindows, isMacOs, isLegacyEdge types. --- README.md | 11 +++++---- index.d.ts | 12 ++++++++++ main.js | 35 +++++++++++++++++++++++++---- package-lock.json | 8 +++---- package.json | 2 +- src/components/helpers/selectors.js | 16 ++++++++++++- src/components/helpers/types.js | 7 ++++-- 7 files changed, 75 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index eb0aac5..126f283 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,7 @@ const styles = { | isSafari | bool | returns true if browser is `Safari` | | isOpera | bool | returns true if browser is `Opera` | | isIE | bool | returns true if browser is `Internet Explorer` | -| isEdge | bool | returns true if browser is `Edge` | +| isEdge | bool | returns true if browser is `Edge` or `Edge Chromium` | | isYandex | bool | returns true if browser is `Yandex` | | isChromium | bool | returns true if browser is `Chromium` | | isMobileSafari | bool | returns true if browser is `Mobile Safari` | @@ -146,9 +146,12 @@ const styles = { | isIPhone13 | boolean | returns true/false if device is iPhone and running on iOS13 | | isIPad13 | boolean | returns true/false if device is iPad and running on iOS13 | | isIPod13 | boolean | returns true/false if device is iPod and running on iOS13 | -| isElectron | boolean | returns true/false if running on Electron | -| deviceDetect | function | return data object which includes all data about device (e.g version, engine, os etc.) | - +| isElectron | boolean | returns true/false if running on `Electron` | +| isEdgeChromium | boolean | returns true/false if browser is `Edge Chromium` | +| isLegacyEdge | boolean | returns true if browser is `Edge` | +| isWindows | boolean | returns true/false if os is `Windows` | +| isMacOs | boolean | returns true/false if os is `Mac OS` | +| deviceDetect | boolean | return data object which includes all data about device (e.g version, engine, os etc.) | ### Views Available views: diff --git a/index.d.ts b/index.d.ts index c26c22a..134fe13 100644 --- a/index.d.ts +++ b/index.d.ts @@ -56,6 +56,10 @@ declare module "react-device-detect" { export import isIPhone13 = ReactDeviceDetect.isIPhone13; export import isIPod13 = ReactDeviceDetect.isIPod13; export import isElectron = ReactDeviceDetect.isElectron; + export import isEdgeChromium = ReactDeviceDetect.isEdgeChromium; + export import isLegacyEdge = ReactDeviceDetect.isLegacyEdge; + export import isWindows = ReactDeviceDetect.isWindows; + export import isMacOs = ReactDeviceDetect.isMacOs; export import withOrientationChange = ReactDeviceDetect.withOrientationChange; } @@ -184,4 +188,12 @@ declare namespace ReactDeviceDetect { export const isIPod13: boolean; export const isElectron: boolean; + + export const isEdgeChromium: boolean; + + export const isLegacyEdge: boolean; + + export const isWindows: boolean; + + export const isMacOs: boolean; } diff --git a/main.js b/main.js index 1ee1fd7..753e2ed 100644 --- a/main.js +++ b/main.js @@ -32,7 +32,7 @@ var getNavigatorInstance = function getNavigatorInstance() { }; var isIOS13Check = function isIOS13Check(type) { var nav = getNavigatorInstance(); - return nav && (nav.platform.indexOf(type) !== -1 || nav.platform === 'MacIntel' && nav.maxTouchPoints > 1 && !window.MSStream); + return nav && nav.platform && (nav.platform.indexOf(type) !== -1 || nav.platform === 'MacIntel' && nav.maxTouchPoints > 1 && !window.MSStream); }; function _typeof(obj) { @@ -203,12 +203,15 @@ var BROWSER_TYPES = { EDGE: "Edge", CHROMIUM: "Chromium", IE: 'IE', - MOBILE_SAFARI: "Mobile Safari" + MOBILE_SAFARI: "Mobile Safari", + EDGE_CHROMIUM: "Edge Chromium" }; var OS_TYPES = { IOS: 'iOS', ANDROID: "Android", - WINDOWS_PHONE: "Windows Phone" + WINDOWS_PHONE: "Windows Phone", + WINDOWS: 'Windows', + MAC_OS: 'Mac OS' }; var initialData = { isMobile: false, @@ -361,6 +364,14 @@ var isMobileAndTabletType = function isMobileAndTabletType() { } }; +var isEdgeChromiumType = function isEdgeChromiumType() { + if (os.name === OS_TYPES.WINDOWS && os.version === '10') { + return typeof ua === 'string' && ua.indexOf('Edg/') !== -1; + } + + return false; +}; + var isSmartTVType = function isSmartTVType() { return device.type === DEVICE_TYPES.SMART_TV; }; @@ -381,6 +392,14 @@ var isAndroidType = function isAndroidType() { return os.name === OS_TYPES.ANDROID; }; +var isWindowsType = function isWindowsType() { + return os.name === OS_TYPES.WINDOWS; +}; + +var isMacOsType = function isMacOsType() { + return os.name === OS_TYPES.MAC_OS; +}; + var isWinPhoneType = function isWinPhoneType() { return os.name === OS_TYPES.WINDOWS_PHONE; }; @@ -519,7 +538,7 @@ var mobileModel = getMobileModel(); var engineName = getEngineName(); var engineVersion = getEngineVersion(); var getUA = getUseragent(); -var isEdge = isEdgeType(); +var isEdge = isEdgeType() || isEdgeChromiumType(); var isYandex = isYandexType(); var deviceType = getDeviceType(); var isIOS13 = getIOS13(); @@ -527,6 +546,10 @@ var isIPad13 = getIPad13(); var isIPhone13 = getIphone13(); var isIPod13 = getIPod13(); var isElectron = isElectronType(); +var isEdgeChromium = isEdgeChromiumType(); +var isLegacyEdge = isEdgeType(); +var isWindows = isWindowsType(); +var isMacOs = isMacOsType(); var AndroidView = function AndroidView(_ref) { var renderWithFragment = _ref.renderWithFragment, @@ -756,6 +779,7 @@ exports.isChrome = isChrome; exports.isChromium = isChromium; exports.isConsole = isConsole; exports.isEdge = isEdge; +exports.isEdgeChromium = isEdgeChromium; exports.isElectron = isElectron; exports.isFirefox = isFirefox; exports.isIE = isIE; @@ -764,6 +788,8 @@ exports.isIOS13 = isIOS13; exports.isIPad13 = isIPad13; exports.isIPhone13 = isIPhone13; exports.isIPod13 = isIPod13; +exports.isLegacyEdge = isLegacyEdge; +exports.isMacOs = isMacOs; exports.isMobile = isMobile; exports.isMobileOnly = isMobileOnly; exports.isMobileSafari = isMobileSafari; @@ -773,6 +799,7 @@ exports.isSmartTV = isSmartTV; exports.isTablet = isTablet; exports.isWearable = isWearable; exports.isWinPhone = isWinPhone; +exports.isWindows = isWindows; exports.isYandex = isYandex; exports.mobileModel = mobileModel; exports.mobileVendor = mobileVendor; diff --git a/package-lock.json b/package-lock.json index ef8c519..4d2f106 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-device-detect", - "version": "1.11.14", + "version": "1.13.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -9017,9 +9017,9 @@ } }, "yargs-parser": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz", - "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==", + "version": "13.1.2", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz", + "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==", "dev": true, "requires": { "camelcase": "^5.0.0", diff --git a/package.json b/package.json index 98dc1c5..f238a69 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-device-detect", - "version": "1.12.1", + "version": "1.13.1", "description": "Detect device type and render your component according to it", "main": "main.js", "typings": "./index.d.ts", diff --git a/src/components/helpers/selectors.js b/src/components/helpers/selectors.js index 641ef57..da33849 100644 --- a/src/components/helpers/selectors.js +++ b/src/components/helpers/selectors.js @@ -14,11 +14,21 @@ const isMobileAndTabletType = () => { } }; +const isEdgeChromiumType = () => { + if (os.name === OS_TYPES.WINDOWS && os.version === '10') { + return typeof ua === 'string' && ua.indexOf('Edg/') !== -1; + } + + return false; +}; + const isSmartTVType = () => device.type === DEVICE_TYPES.SMART_TV; const isBrowserType = () => device.type === DEVICE_TYPES.BROWSER; const isWearableType = () => device.type === DEVICE_TYPES.WEARABLE; const isConsoleType = () => device.type === DEVICE_TYPES.CONSOLE; const isAndroidType = () => os.name === OS_TYPES.ANDROID; +const isWindowsType = () => os.name === OS_TYPES.WINDOWS; +const isMacOsType = () => os.name === OS_TYPES.MAC_OS; const isWinPhoneType = () => os.name === OS_TYPES.WINDOWS_PHONE; const isIOSType = () => os.name === OS_TYPES.IOS; const isChromeType = () => browser.name === BROWSER_TYPES.CHROME; @@ -89,7 +99,7 @@ export const mobileModel = getMobileModel(); export const engineName = getEngineName(); export const engineVersion = getEngineVersion(); export const getUA = getUseragent(); -export const isEdge = isEdgeType(); +export const isEdge = isEdgeType() || isEdgeChromiumType(); export const isYandex = isYandexType(); export const deviceType = getDeviceType(); export const isIOS13 = getIOS13(); @@ -97,3 +107,7 @@ export const isIPad13 = getIPad13(); export const isIPhone13 = getIphone13(); export const isIPod13 = getIPod13(); export const isElectron = isElectronType(); +export const isEdgeChromium = isEdgeChromiumType(); +export const isLegacyEdge = isEdgeType(); +export const isWindows = isWindowsType(); +export const isMacOs = isMacOsType(); diff --git a/src/components/helpers/types.js b/src/components/helpers/types.js index eb12ec7..51d3760 100644 --- a/src/components/helpers/types.js +++ b/src/components/helpers/types.js @@ -19,13 +19,16 @@ export const BROWSER_TYPES = { EDGE: "Edge", CHROMIUM: "Chromium", IE: 'IE', - MOBILE_SAFARI: "Mobile Safari" + MOBILE_SAFARI: "Mobile Safari", + EDGE_CHROMIUM: "Edge Chromium" }; export const OS_TYPES = { IOS: 'iOS', ANDROID: "Android", - WINDOWS_PHONE: "Windows Phone" + WINDOWS_PHONE: "Windows Phone", + WINDOWS: 'Windows', + MAC_OS: 'Mac OS' }; const initialData = { From ee0ae0dd4360fc5f59dff0e210770952a50dfd1c Mon Sep 17 00:00:00 2001 From: Michael Laktionov Date: Mon, 15 Jun 2020 10:27:40 +0300 Subject: [PATCH 2/2] add testing clause to readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 126f283..9c360ea 100644 --- a/README.md +++ b/README.md @@ -199,6 +199,17 @@ App = withOrientationChange(App) export { App } ``` +### Testing + +```js +import * as rdd from 'react-device-detect'; + +rdd.isMobile = true; + +// use in tests + +``` + ## License MIT