fix: introduced form controls

Author: foxhound87

package.json

@@ -59,7 +59,7 @@
     "react-draggable": "2.2.2",
     "react-icons": "2.2.1",
     "react-json-tree": "0.9.0",
-    "react-tooltip": "3.2.1"
+    "react-tooltip": "^3.2.1"
   },
   "peerDependencies": {
     "mobx": "^2.6.0",

screenshot.png

@@ -33,5 +33,14 @@ export default $store => ({
     _.set($store.tools, 'heading.sub', (size > 0.11));
   }),
 
+  handleFormControls: action((type) => {
+    switch (type) {
+      case 'submit': $store.selected.form.submit(); break;
+      case 'clear': $store.selected.form.clear(); break;
+      case 'reset': $store.selected.form.reset(); break;
+      default: $store.selected.form.submit();
+    }
+  }),
+
 });
 

src/actions.js

@@ -10,13 +10,13 @@ import style from '../styles/Draggable';
 export default observer(({ handlers }) => (
   <Draggable
     axis="y"
-    handle=".devtools-drag"
+    handle=".devtools-handle-drag"
     zIndex={99999999999}
     defaultPosition={{ x: 0, y: 0 }}
   >
     <div>
       <div className={style.draggable}>
-        <div className="devtools-drag" data-tip="DRAG">
+        <div className="devtools-handle-drag" data-tip="DRAG">
           <Icons.FaBars className={merge(style.icon, style.dragIcon)} />
         </div>
         <button

src/components/Draggable.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { merge } from 'glamor';
 import JSONTree from 'react-json-tree';
+import ReactTooltip from 'react-tooltip';
 
 import SelectMenu from './SelectMenu';
 
@@ -12,7 +13,8 @@ import $U from '../styles/_.utils';
 import style from '../styles/RenderFormData';
 
 export default observer(({ store, handlers }) =>
-  <div className="tree">
+  <div>
+    <ReactTooltip />
     <h4 className={merge(style.heading, $U.clearfix)}>
       <div className={$U.left}>
         <Icons.FaTh className={style.icon} /> Form
@@ -21,6 +23,17 @@ export default observer(({ store, handlers }) =>
         <SelectMenu store={store} handlers={handlers} />
       </div>
     </h4>
+    <div className={merge($U.clearfix)}>
+      <button type="button"className={style.controls.button} onClick={handlers.handleFormOnSubmit} data-tip="SUBMIT">
+        <Icons.FaDotCircleO className={style.controls.icon} />
+      </button>
+      <button type="button"className={style.controls.button} onClick={handlers.handleFormOnClear} data-tip="CLEAR">
+        <Icons.FaEraser className={style.controls.icon} />
+      </button>
+      <button type="button"className={style.controls.button} onClick={handlers.handleFormOnReset} data-tip="RESET">
+        <Icons.FaRefresh className={style.controls.icon} />
+      </button>
+    </div>
     <JSONTree
       hideRoot
       data={parseFormData(store.selected.form)}

src/components/RenderFormData.jsx

@@ -29,4 +29,19 @@ export default $actions => ({
     $actions.selectForm(e.target.value);
   },
 
+  handleFormOnSubmit: (e) => {
+    e.preventDefault();
+    $actions.handleFormControls('submit');
+  },
+
+  handleFormOnClear: (e) => {
+    e.preventDefault();
+    $actions.handleFormControls('clear');
+  },
+
+  handleFormOnReset: (e) => {
+    e.preventDefault();
+    $actions.handleFormControls('reset');
+  },
+
 });

src/handlers.js

@@ -1,15 +1,21 @@
 import FaTh from 'react-icons/lib/fa/th';
 import FaBars from 'react-icons/lib/fa/bars';
 import FaBook from 'react-icons/lib/fa/book';
+import FaRefresh from 'react-icons/lib/fa/refresh';
+import FaEraser from 'react-icons/lib/fa/eraser';
 import FaCircleO from 'react-icons/lib/fa/circle-o';
+import FaDotCircleO from 'react-icons/lib/fa/dot-circle-o';
 import FaChevronLeft from 'react-icons/lib/fa/chevron-left';
 import FaChevronCircleRight from 'react-icons/lib/fa/chevron-circle-right';
 
 export default {
   FaTh,
   FaBars,
   FaBook,
+  FaRefresh,
+  FaEraser,
   FaCircleO,
+  FaDotCircleO,
   FaChevronLeft,
   FaChevronCircleRight,
 };

src/icons.js

@@ -16,4 +16,21 @@ export default {
   icon: style({
     marginTop: '-3px',
   }),
+  controls: {
+    button: style({
+      'borderRadius': 0,
+      'width': '33.333%',
+      'display': 'block',
+      'float': 'left',
+      'fontSize': '20px',
+      'padding': '3px 0 6px 0',
+      'background': theme.base01,
+      ':hover': {
+        background: theme.base03,
+      },
+    }),
+    icon: style({
+      color: theme.base00,
+    }),
+  },
 };