feat: added open()

Author: foxhound87

README.md

@@ -21,6 +21,10 @@
 npm install --save mobx-react-form-devtools
 ```
 
+## Demo
+
+[MobX React Form DevTools Demo](https://foxhound87.github.io/mobx-react-form/demo.html)
+
 ## Usage
 
 ```javascript
@@ -36,14 +40,13 @@ MobxReactFormDevTools.register({
 // select form to show into the devtools
 MobxReactFormDevTools.select('registerForm');
 
+// open the devtools (closed by default)
+MobxReactFormDevTools.open(true);
+
 // render the component
 <MobxReactFormDevTools.UI />
 ```
 
-## Screenshot
-
-![DevTools](https://github.com/foxhound87/mobx-react-form-devtools/blob/master/screenshot.png?raw=true)
-
 ## Theme
 
 ```javascript
@@ -68,6 +71,10 @@ MobxReactFormDevTools.theme({
 });
 ```
 
+## Screenshot
+
+![DevTools](https://github.com/foxhound87/mobx-react-form-devtools/blob/master/screenshot.png?raw=true)
+
 ## Link DevTools to Demo
 
 ```bash

package.json

@@ -54,47 +54,48 @@
   "dependencies": {
     "glamor": "2.17.14",
     "lodash": "^4.16.2",
-    "mobx-react": "3.5.8",
+    "mobx-react": "3.5.9",
     "react-dock": "0.2.3",
     "react-draggable": "2.2.2",
     "react-icons": "2.2.1",
-    "react-json-tree": "0.9.0",
+    "react-json-tree": "0.10.0",
     "react-tooltip": "3.2.1"
   },
   "peerDependencies": {
     "mobx": "^2.6.0",
     "react": "^15.3.2"
   },
   "devDependencies": {
-    "babel-cli": "6.16.0",
-    "babel-eslint": "7.0.0",
-    "babel-loader": "6.2.5",
+    "babel-cli": "6.18.0",
+    "babel-core": "6.18.2",
+    "babel-eslint": "7.1.0",
+    "babel-loader": "6.2.7",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-lodash": "3.2.9",
-    "babel-plugin-transform-class-properties": "6.16.0",
+    "babel-plugin-transform-class-properties": "6.18.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
-    "babel-preset-es2015": "6.16.0",
+    "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",
     "babel-preset-stage-0": "6.16.0",
-    "babel-register": "6.16.3",
+    "babel-register": "6.18.0",
     "chai": "3.5.0",
     "codecov": "1.0.1",
     "commitizen": "2.8.6",
     "cz-conventional-changelog": "1.2.0",
-    "eslint": "3.8.0",
-    "eslint-config-airbnb": "12.0.0",
-    "eslint-plugin-import": "1.16.0",
+    "eslint": "3.10.0",
+    "eslint-config-airbnb": "13.0.0",
+    "eslint-plugin-import": "2.2.0",
     "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.4.1",
+    "eslint-plugin-react": "6.6.0",
     "ghooks": "1.3.2",
-    "mobx": "2.6.0",
+    "mobx": "2.6.2",
     "mocha": "3.1.2",
-    "npm-run-all": "3.1.0",
-    "nyc": "8.3.1",
+    "npm-run-all": "3.1.1",
+    "nyc": "8.4.0",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "rimraf": "2.5.4",
     "semantic-release": "4.3.5",
-    "webpack": "1.13.2"
+    "webpack": "1.13.3"
   }
 }

src/actions.js

@@ -3,9 +3,9 @@ import _ from 'lodash';
 
 export default $store => ({
 
-  theme: action((theme) => {
-    _.merge($store.theme, theme);
-  }),
+  open: action(flag => _.set($store, 'open', flag)),
+
+  theme: action(theme => _.merge($store.theme, theme)),
 
   selectForm: action((key) => {
     _.map($store.select, ($val, $key) => _.set($store.select, $key, false));
@@ -24,7 +24,7 @@ export default $store => ({
     let $flag;
     if (toggle === 'open') $flag = true;
     if (toggle === 'close') $flag = false;
-    _.set($store.tools, 'open', $flag);
+    _.set($store, 'open', $flag);
   }),
 
   changeDockSize: action((size) => {

src/components/Dock.jsx

@@ -16,16 +16,16 @@ export default observer(({ store, handlers }) => (
   <div className={style.dock}>
     <ReactTooltip />
     <Dock
-      defaultSize={store.tools.open ? store.dock.size : 0}
-      size={store.tools.open ? store.dock.size : 0}
+      defaultSize={store.open ? store.dock.size : 0}
+      size={store.open ? store.dock.size : 0}
       onSizeChange={handlers.handleOnSizeChange}
       position={store.dock.position}
       fluid={store.dock.fluid}
       isVisible={store.dock.visible}
       dimMode={store.dock.mode}
       dockStyle={store.dock.style}
     >
-      <div className={merge(style.draggable, store.tools.open && $U.hidden)}>
+      <div className={merge(style.draggable, store.open && $U.hidden)}>
         <Draggable handlers={handlers} />
       </div>
 

src/components/Header.jsx

@@ -7,7 +7,7 @@ import $U from '../styles/_.utils';
 import style from '../styles/Header';
 
 export default observer(({ store, handlers }) => (
-  <div className={merge(style.heading, !store.tools.open && $U.hidden)}>
+  <div className={merge(style.heading, !store.open && $U.hidden)}>
     <div className={$U.left}>
       <b className={merge(style.hli, !store.tools.heading.name && $U.hidden)}>
         MOBX-REACT-FORM

src/components/RenderFormData.jsx

@@ -36,5 +36,5 @@ export default observer(({ store, handlers }) =>
       theme={store.theme}
       isLightTheme={false}
     />
-  </div>
+  </div>,
 );

src/components/SelectInitialForm.jsx

@@ -18,7 +18,6 @@ export default observer(({ store, handlers }) =>
         onClick={handlers.handleInitialFormSelect}
       >
         <Icons.FaCircleO className={style.icon} /> {val}
-      </button>
-    )}
-  </div>
+      </button>)}
+  </div>,
 );

src/components/SelectMenu.jsx

@@ -12,7 +12,6 @@ export default observer(({ store, handlers }) =>
     className={style.select}
   >
     {_.map(store.menu, ($val, $key) =>
-      <option key={$key} value={$key}>{$val}</option>
-    )}
-  </select>
+      <option key={$key} value={$key}>{$val}</option>)}
+  </select>,
 );

src/handlers.js

@@ -16,7 +16,8 @@ export default $actions => ({
 
   handleOnOpenDoc: (e) => {
     e.preventDefault();
-    window.open('https://foxhound87.github.io/mobx-react-form/', '_blank'); // eslint-disable-line
+    const link = 'https://foxhound87.github.io/mobx-react-form/';
+    window.open(link, '_blank'); // eslint-disable-line
   },
 
   handleSelect: (e) => {

src/index.jsx

@@ -12,6 +12,8 @@ export default {
 
   theme: $actions.theme,
 
+  open: $actions.open,
+
   register: $actions.registerForm,
 
   select: $actions.selectForm,

src/store.js

@@ -3,6 +3,7 @@ import theme from './styles/_.theme';
 
 export default observable({
   theme,
+  open: false,
   forms: {},
   menu: {},
   select: {},
@@ -11,7 +12,6 @@ export default observable({
     form: null,
   },
   tools: {
-    open: true,
     heading: {
       name: true,
       sub: true,