Skip to content

Commit

Permalink
feat: open in new windows
Browse files Browse the repository at this point in the history
open in new windows
  • Loading branch information
foxhound87 committed Jul 1, 2023
1 parent 290d1ed commit 84bc15c
Show file tree
Hide file tree
Showing 19 changed files with 217 additions and 181 deletions.
21 changes: 21 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -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 }}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
129 changes: 6 additions & 123 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 3 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 12 additions & 0 deletions src/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}),

});

70 changes: 42 additions & 28 deletions src/components/Draggable.tsx
Original file line number Diff line number Diff line change
@@ -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>
)});
Loading

0 comments on commit 84bc15c

Please sign in to comment.