feat: open in new windows

open in new windows

Author: foxhound87

.github/workflows/ci.yml

@@ -0,0 +1,21 @@
+name: Mobx React Form Devtools
+on:
+  push:
+    branches:
+      - master
+jobs:
+  CI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - run: npm install --force
+      - run: npm run cover
+      - run: npm run coverage:check
+      - run: npm run build
+      - run: npm run coverage:report
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v3
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -34,7 +34,7 @@ npm install --save mobx-react-form-devtools
 ```javascript
 import MobxReactFormDevTools from 'mobx-react-form-devtools';
 
-// register forms
+// register forms (mobx-react-form Instances)
 MobxReactFormDevTools.register({
   loginForm,
   registerForm,

package-lock.json

@@ -55,17 +55,16 @@
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "react-dock": "0.2.4",
-    "react-draggable": "^4.4.5",
     "react-icons": "^2.2.7",
-    "react-json-tree": "0.11.0",
-    "react-tooltip": "^5.8.3"
+    "react-json-tree": "0.11.0"
   },
   "peerDependencies": {
     "mobx": "*",
     "mobx-react": "*",
     "mobx-react-form": "*",
     "prop-types": "*",
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

package.json

@@ -44,5 +44,17 @@ export default $store => ({
     }
   }),
 
+  openInWindow: action(() => {
+    _.set($store, 'mode', 'windowed');
+    _.set($store.dock, 'position', 'left');
+    _.set($store.dock, 'fluid', true);
+  }),
+
+  onCloseWindow: action(() => {
+    _.set($store, 'mode', 'docked');
+    _.set($store.dock, 'position', 'right');
+    _.set($store.dock, 'fluid', false);
+  }),
+
 });
 

src/actions.ts

@@ -1,41 +1,55 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { observer } from 'mobx-react';
 import cx from 'classnames';
-import Draggable from 'react-draggable';
+// import Draggable from 'react-draggable';
 
 import {
   FaBars,
   FaChevronLeft,
   FaBook,
+  FaWindows,
 } from '../icons';
 
 import $U from '../styles/_.utils';
 import style from '../styles/Draggable';
 
-export default observer(({ handlers }) => (
-  <Draggable
-    axis="y"
-    handle=".devtools-handle-drag"
-    defaultPosition={{ x: 0, y: 0 }}
-  >
-    <div>
-      <div className={cx(style.draggable)}>
-        <div className="devtools-handle-drag">
-          <FaBars className={cx(style.icon, style.dragIcon)} />
-        </div>
-        <button
-          className={cx($U.button, style.btn)}
-          onClick={handlers.handleOnOpenTools}
-        >
-          <FaChevronLeft className={style.icon} />
-        </button>
-        <button
-          className={cx($U.button, style.btn)}
-          onClick={handlers.handleOnOpenDoc}
-        >
-          <FaBook className={style.icon} />
-        </button>
-      </div>
+export default observer(({ handlers }) => {
+
+  const handleOnDragEnd = (e) => {
+    e.target.style.top = (e.clientY - 100) + "px";
+  };
+
+  return (
+  // <div
+  //   axis="y"
+  //   handle=".devtools-handle-drag"
+  //   defaultPosition={{ x: 0, y: 0 }}
+  // >
+    <div className={cx(style.draggable)} draggable onDragEnd={handleOnDragEnd}>
+      <button className={cx($U.button, style.dragButton)}>
+        <FaBars className={cx(style.icon, style.dragIcon)} />
+      </button>
+      <button
+        className={cx($U.button, style.btn)}
+        onClick={handlers.handleOnOpenTools}
+        title="Open Tools"
+      >
+        <FaChevronLeft className={style.icon} />
+      </button>
+      <button
+        className={cx($U.button, style.btn)}
+        onClick={handlers.handleOpenInWindow}
+        title="Open in new Window"
+      >
+        <FaWindows className={style.icon} />
+      </button>
+      <button
+        className={cx($U.button, style.btn)}
+        onClick={handlers.handleOnOpenDoc}
+        title="Open Documentation"
+      >
+        <FaBook className={style.icon} />
+      </button>
     </div>
-  </Draggable>
-));
+  // </Draggable>
+)});