CHANGE ResizeDetector to SizeMe (#6950)

CHANGE ResizeDetector to SizeMe

lib/ui/package.json

@@ -46,7 +46,7 @@
     "react-draggable": "^3.1.1",
     "react-helmet-async": "^1.0.2",
     "react-hotkeys": "2.0.0-pre4",
-    "react-resize-detector": "^4.0.5",
+    "react-sizeme": "^2.6.7",
     "recompose": "^0.30.0",
     "resolve-from": "^5.0.0",
     "semver": "^6.0.0",

lib/ui/src/app.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Global, createGlobal, styled } from '@storybook/theming';
-import ResizeDetector from 'react-resize-detector';
 import memoize from 'memoizerific';
+import sizeMe from 'react-sizeme';
 
 import { Route } from '@storybook/router';
 
@@ -41,35 +41,44 @@ const View = styled.div({
   width: '100vw',
 });
 
-const App = React.memo(({ viewMode, layout }) => {
+const App = React.memo(({ viewMode, layout, size: { width, height } }) => {
   const props = createProps();
 
+  let content;
+
+  if (!width || !height) {
+    content = (
+      <div>
+        {width} x {height}
+      </div>
+    );
+  } else if (width < 600) {
+    content = <Mobile {...props} viewMode={viewMode} options={layout} />;
+  } else {
+    content = <Desktop {...props} viewMode={viewMode} options={layout} {...{ width, height }} />;
+  }
+
   return (
     <View>
       <Global styles={createGlobal} />
-      <ResizeDetector handleWidth handleHeight>
-        {({ width, height }) => {
-          if (!width || !height) {
-            return <div />;
-          }
-          if (width < 600) {
-            return <Mobile {...props} viewMode={viewMode} options={layout} />;
-          }
-
-          return <Desktop {...props} viewMode={viewMode} options={layout} {...{ width, height }} />;
-        }}
-      </ResizeDetector>
+      {content}
     </View>
   );
 });
 App.propTypes = {
   viewMode: PropTypes.oneOf(['story', 'info']),
   layout: PropTypes.shape({}).isRequired,
+  size: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number,
+  }).isRequired,
 };
 App.defaultProps = {
   viewMode: undefined,
 };
 
+const SizedApp = sizeMe({ monitorHeight: true })(App);
+
 App.displayName = 'App';
 
-export default App;
+export default SizedApp;

yarn.lock

@@ -18696,11 +18696,6 @@ lock@^0.1.2:
   resolved "https://registry.yarnpkg.com/lock/-/lock-0.1.4.tgz#fec7deaef17e7c3a0a55e1da042803e25d91745d"
   integrity sha1-/sfervF+fDoKVeHaBCgD4l2RdF0=
 
-lodash-es@^4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
-  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
-
 lodash._baseassign@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
@@ -24116,11 +24111,6 @@ quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quick-temp@^0.1.8:
     rimraf "^2.5.4"
     underscore.string "~3.3.4"
 
-raf-schd@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.0.tgz#9855756c5045ff4ed4516e14a47719387c3c907b"
-  integrity sha512-m7zq0JkIrECzw9mO5Zcq6jN4KayE34yoIS9hJoiZNXyOAT06PPA8PrR+WtJIeFW09YjUfNkMMN9lrmAt6BURCA==
-
 raf@3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
@@ -25135,17 +25125,6 @@ react-redux@^7.0.2:
     prop-types "^15.7.2"
     react-is "^16.8.6"
 
-react-resize-detector@^4.0.5:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-4.1.3.tgz#cada852b63b07453e11c9078eb571b9c4bc9d48f"
-  integrity sha512-tzVDVFxhUVdTjxyR1OqNggkbFAA7srawgwhcm4XQjyGq/R8M13MiceI+4C7xfzHqaKk0Oq7ErIXexGGSgQEKcQ==
-  dependencies:
-    lodash "^4.17.11"
-    lodash-es "^4.17.11"
-    prop-types "^15.7.2"
-    raf-schd "^4.0.0"
-    resize-observer-polyfill "^1.5.1"
-
 react-scripts@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768"
@@ -25319,7 +25298,7 @@ react-select@^2.2.0:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
-react-sizeme@^2.5.2:
+react-sizeme@^2.5.2, react-sizeme@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.7.tgz#231339ce8821ac2c26424c791e0027f89dae3e90"
   integrity sha512-xCjPoBP5jmeW58TxIkcviMZqabZis7tTvDFWf0/Wa5XCgVWQTIe74NQBes2N1Kmp64GRLkpm60BaP0kk+v8aCQ==