Merge pull request #4 from SimonBrandner/feature/resizable-devtools/3

Make devtools resizable

package-lock.json

@@ -13,6 +13,7 @@
         "events": "^3.3.0",
         "lodash-move": "^1.1.1",
         "matrix-js-sdk": "^12.0.1",
+        "re-resizable": "^6.9.0",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
         "react-router-dom": "^5.2.0",
@@ -1021,6 +1022,11 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "node_modules/fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "node_modules/forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -1570,6 +1576,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/re-resizable": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
+      "integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
+      "dependencies": {
+        "fast-memoize": "^2.5.1"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0",
+        "react-dom": "^16.13.1 || ^17.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
@@ -2688,6 +2706,11 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -3096,6 +3119,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "re-resizable": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
+      "integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
+      "requires": {
+        "fast-memoize": "^2.5.1"
+      }
+    },
     "react": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "events": "^3.3.0",
     "lodash-move": "^1.1.1",
     "matrix-js-sdk": "^12.0.1",
+    "re-resizable": "^6.9.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-router-dom": "^5.2.0",

src/DevTools.jsx

@@ -18,6 +18,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import ColorHash from "color-hash";
 import classNames from "classnames";
 import styles from "./DevTools.module.css";
+import { Resizable } from "re-resizable";
 
 const colorHash = new ColorHash({ lightness: 0.8 });
 
@@ -77,7 +78,19 @@ export function DevTools({ manager }) {
   }
 
   return (
-    <div className={styles.devTools}>
+    <Resizable
+      enable={{
+        top: true,
+        right: false,
+        bottom: false,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false,
+      }}
+      className={styles.devTools}
+    >
       <div className={styles.toolbar}>
         <div
           className={classNames(styles.tab, {
@@ -128,7 +141,7 @@ export function DevTools({ manager }) {
           onClose={() => setSelectedEvent(null)}
         />
       )}
-    </div>
+    </Resizable>
   );
 }