diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29316da..715db4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
+### Changed
+- Use vtex.device-detector for device detection.
## [2.15.2] - 2019-07-24
diff --git a/manifest.json b/manifest.json
index 7c03423..e0a4cf8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -21,7 +21,8 @@
"vtex.menu": "2.x",
"vtex.shop-review-interfaces": "0.x",
"vtex.flex-layout": "0.x",
- "vtex.native-types": "0.x"
+ "vtex.native-types": "0.x",
+ "vtex.device-detector": "0.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
diff --git a/react/Footer.js b/react/Footer.js
index f92a1f0..43ffbb8 100644
--- a/react/Footer.js
+++ b/react/Footer.js
@@ -1,45 +1,29 @@
import React from 'react'
-import { ExtensionPoint, useChildBlock, useRuntime } from 'vtex.render-runtime'
+import { ExtensionPoint, useChildBlock } from 'vtex.render-runtime'
import LegacyFooter from './legacy/Footer'
-import Media from 'react-media'
+import { useDevice } from 'vtex.device-detector'
const Footer = props => {
- const footerDesktop = !!useChildBlock({
+ const hasFooterDesktop = !!useChildBlock({
id: 'footer-layout.desktop',
})
- const footerMobile = !!useChildBlock({
+ const hasFooterMobile = !!useChildBlock({
id: 'footer-layout.mobile',
})
- const {
- hints: { mobile },
- } = useRuntime()
+ const { isMobile } = useDevice()
- const hasFooterLayout = footerDesktop || footerMobile
+ const hasFooterLayout = hasFooterDesktop || hasFooterMobile
if (!hasFooterLayout) {
return
}
// SSR fallback
- if (!window || !window.matchMedia) {
- return mobile ? (
-
- ) : (
-
- )
- }
-
- return (
-
- {matches =>
- matches ? (
-
- ) : (
-
- )
- }
-
+ return isMobile ? (
+
+ ) : (
+
)
}
diff --git a/react/package.json b/react/package.json
index f3f4968..25b19d2 100644
--- a/react/package.json
+++ b/react/package.json
@@ -13,7 +13,6 @@
"react": "^16.8.3",
"react-collapse": "^4.0.3",
"react-intl": "^2.7.2",
- "react-media": "^1.9.2",
"react-motion": "^0.5.2"
},
"devDependencies": {
diff --git a/react/yarn.lock b/react/yarn.lock
index 084ef65..bfeef55 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -670,13 +670,6 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-typescript" "^7.3.2"
-"@babel/runtime@^7.2.0":
- version "7.4.3"
- resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
- integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
- dependencies:
- regenerator-runtime "^0.13.2"
-
"@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4":
version "7.3.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
@@ -4499,13 +4492,6 @@ json-stringify-safe@~5.0.1:
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-json2mq@^0.2.0:
- version "0.2.0"
- resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
- integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
- dependencies:
- string-convert "^0.2.0"
-
json5@^0.5.0, json5@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
@@ -5386,15 +5372,6 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
- version "15.7.2"
- resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
- integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
- dependencies:
- loose-envify "^1.4.0"
- object-assign "^4.1.1"
- react-is "^16.8.1"
-
prop-types@^15.5.8:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
@@ -5403,6 +5380,15 @@ prop-types@^15.5.8:
loose-envify "^1.3.1"
object-assign "^4.1.1"
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+ version "15.7.2"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+ integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+ dependencies:
+ loose-envify "^1.4.0"
+ object-assign "^4.1.1"
+ react-is "^16.8.1"
+
psl@^1.1.24, psl@^1.1.28:
version "1.1.31"
resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
@@ -5533,16 +5519,6 @@ react-is@^16.8.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.3.tgz#4ad8b029c2a718fc0cfc746c8d4e1b7221e5387d"
integrity sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==
-react-media@^1.9.2:
- version "1.9.2"
- resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.9.2.tgz#423ee12f952e1d69f1b994a58d3cbed21a92b370"
- integrity sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==
- dependencies:
- "@babel/runtime" "^7.2.0"
- invariant "^2.2.2"
- json2mq "^0.2.0"
- prop-types "^15.5.10"
-
react-motion@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -5666,11 +5642,6 @@ regenerator-runtime@^0.13.1:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz#522ea2aafd9200a00eee143dc14219a35a0f3991"
integrity sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==
-regenerator-runtime@^0.13.2:
- version "0.13.2"
- resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
- integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
-
regenerator-transform@^0.10.0:
version "0.10.1"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -6197,11 +6168,6 @@ stealthy-require@^1.1.1:
resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-string-convert@^0.2.0:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
- integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
-
string-length@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"