Add action creators selector and forms, close #2

Author: YoruNoHikage

examples/counter/src/containers/DevTools.js

@@ -5,12 +5,14 @@ import DockMonitor from 'redux-devtools-dock-monitor';
 import MultipleMonitors from 'redux-devtools-dispatch/MultipleMonitors'; // use redux-devtools-dispatch/lib/MultipleMonitors with the package
 import Dispatcher from 'redux-devtools-dispatch';
 
+import * as actionCreators from '../actions/CounterActions';
+
 export default createDevTools(
   <DockMonitor toggleVisibilityKey='ctrl-h'
                changePositionKey='ctrl-q'>
     <MultipleMonitors>
       <LogMonitor />
-      <Dispatcher initEmpty />
+      <Dispatcher actionCreators={actionCreators} initEmpty />
     </MultipleMonitors>
   </DockMonitor>
 );

package.json

@@ -40,6 +40,7 @@
     "redux-devtools": "^3.0.0"
   },
   "dependencies": {
+    "get-params": "^0.1.2",
     "redux-devtools-themes": "^1.0.0"
   }
 }

src/Dispatcher.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import getParams from 'get-params';
 import * as themes from 'redux-devtools-themes';
 
 const styles = {
@@ -11,16 +12,23 @@ const styles = {
     fontSize: '0.8em',
     textDecoration: 'none',
     border: 'none',
-    position: 'absolute',
-    bottom: '3px',
-    right: '5px'
   },
   content: {
     margin: '5px',
     padding: '5px',
     borderRadius: '3px',
     outline: 'none',
-    overflow: 'auto'
+    flex: '1 1 80%',
+    overflow: 'auto',
+  },
+  label: {
+    margin: '5px',
+    padding: '5px',
+    flex: '1 1 20%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    direction: 'rtl',
+    textAlign: 'left',
   },
 };
 
@@ -40,33 +48,122 @@ export default class Dispatcher extends Component {
     }),
 
     initEmpty: PropTypes.bool,
+    actionCreators: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.array,
+    ]),
     theme: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string,
     ]),
   };
 
   static defaultProps = {
-    select: (state) => state,
     theme: 'nicinabox',
-    preserveScrollTop: true,
     initEmpty: false,
+    actionCreators: {},
   };
 
   static update = () => {};
 
   constructor(props, context) {
     super(props, context);
+    this.state = {
+      selectedActionCreator: 'default',
+      args: [],
+      error: null,
+    };
+  }
+
+  selectActionCreator(e) {
+    const selectedActionCreator = e.target.value;
+    let args = [];
+    if(selectedActionCreator !== 'default') {
+      // Shrink the number args to the number of the new ones
+      args = this.state.args.slice(0, this.getActionCreators()[selectedActionCreator].args.length);
+    }
+    this.setState({
+      selectedActionCreator,
+      args,
+    });
+  }
+
+  handleArg(e, argIndex) {
+    const args = [
+      ...this.state.args.slice(0, argIndex),
+      this.refs['arg' + argIndex].textContent,
+      ...this.state.args.slice(argIndex + 1),
+    ];
+    this.setState({args});
   }
 
   launchAction() {
-    this.context.store.dispatch(JSON.parse(this.refs.action.textContent.replace(/\s+/g, ' ')));
+    try {
+      let actionCreator = () => ({}), argsToInject = [];
+      if(this.state.selectedActionCreator !== 'default') {
+        actionCreator = this.getSelectedActionCreator().func;
+        argsToInject = this.state.args.map(
+          (arg) => (new Function('return ' + arg))()
+        );
+      } else {
+        actionCreator = new Function('return ' + this.refs.action.textContent);
+      }
+
+      this.context.store.dispatch(actionCreator(...argsToInject));
+
+      this.setState({error: null});
+    } catch(e) {
+      this.setState({error: e.message});
+    }
   }
 
   componentDidMount() {
+    this.resetCustomAction();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if(this.state.selectedActionCreator === 'default' && prevState.selectedActionCreator !== 'default') {
+      this.resetCustomAction();
+    }
+  }
+
+  resetCustomAction() {
     this.refs.action.innerHTML = this.props.initEmpty ? '<br/>' : '{<br/>"type": ""<br/>}';
   }
 
+  getSelectedActionCreator() {
+    return this.getActionCreators()[this.state.selectedActionCreator];
+  }
+
+  getActionCreators() {
+    const { actionCreators } = this.props;
+
+    if(Array.isArray(actionCreators)) {
+      return actionCreators;
+    }
+
+    const flatTree = function(object, namespace = '') {
+      let functions = [];
+      for(let propertyName in object) {
+        const prop = object[propertyName];
+        if(object.hasOwnProperty(propertyName)) {
+          if(typeof prop === "function") {
+            functions.push({
+              name: namespace + (prop.name || 'anonymous'),
+              func: prop,
+              args: getParams(prop),
+            });
+          } else if(typeof prop === "object") {
+            functions = functions.concat(flatTree(prop, namespace + propertyName + '.'));
+          }
+        }
+      }
+      return functions;
+    };
+
+    return flatTree(actionCreators);
+  }
+
   getTheme() {
     let { theme } = this.props;
     if (typeof theme !== 'string') {
@@ -82,12 +179,61 @@ export default class Dispatcher extends Component {
   }
 
   render() {
-    const theme = this.getTheme();
+    const theme = this.getTheme(),
+          contentEditableStyle = {...styles.content, color: theme.base06, backgroundColor: theme.base00},
+          buttonStyle = {...styles.button, color: theme.base06, backgroundColor: theme.base00},
+          actionCreators = this.getActionCreators();
+
+    let fields = <div contentEditable style={contentEditableStyle} ref='action'></div>;
+    if(this.state.selectedActionCreator !== 'default') {
+      fields = this.getSelectedActionCreator().args.map((param, i) => (
+        <div key={i} style={{display: 'flex'}}>
+          <span style={{...styles.label, color: theme.base06}}>{param}</span>
+          <div contentEditable style={contentEditableStyle} ref={'arg' + i} onInput={(e) => this.handleArg(e, i)}></div>
+        </div>
+      ));
+    }
+
+    let error = '';
+    if(this.state.error) {
+      error = (
+        <div style={{color: theme.base06, background: '#FC2424', padding: '5px', display: 'flex'}}>
+          <div style={{flex: '1', alignItems: 'center'}}><p style={{margin: '0px'}}>{this.state.error}</p></div>
+          <div style={{alignItems: 'center'}}>
+            <button onClick={() => this.setState({error: null})} style={{...buttonStyle, margin: '0'}}>&times;</button>
+          </div>
+        </div>
+      );
+    }
+
+    let dispatchButtonStyle = buttonStyle;
+    if(actionCreators.length <= 0) {
+      dispatchButtonStyle = {
+        ...buttonStyle,
+        position: 'absolute',
+        bottom: '3px',
+        right: '5px',
+        background: theme.base02,
+      };
+    }
+
+    const dispatchButton = <button style={dispatchButtonStyle} onClick={this.launchAction.bind(this)}>Dispatch</button>;
 
     return (
       <div style={{background: theme.base02, fontFamily: 'monaco,Consolas,Lucida Console,monospace'}}>
-        <div contentEditable='true' style={{...styles.content, color: theme.base06, backgroundColor: theme.base00}} ref='action'></div>
-        <button style={{...styles.button, color: theme.base06, backgroundColor: theme.base02}} onClick={this.launchAction.bind(this)}>Dispatch</button>
+        {error}
+        {fields}
+        {actionCreators.length > 0 ? <div style={{display: 'flex'}}>
+          <select onChange={this.selectActionCreator.bind(this)} style={{flex: '1', fontFamily: 'inherit'}} defaultValue={this.state.selectedActionCreator || 'default'}>
+            <option value="default">Custom action</option>
+            {actionCreators.map(({ name, func, args }, i) => (
+              <option key={i} value={i}>
+                {name + '(' + args.join(', ') + ')'}
+              </option>
+            ))}
+          </select>
+          {dispatchButton}
+        </div> : dispatchButton}
       </div>
     );
   }