Add theme support

YoruNoHikage · Jan 11, 2016 · 7f4d585 · 7f4d585
1 parent a87896d
commit 7f4d585
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ Then, just write an JSON action in the field, click on Dispatch, and that's all!
 
 Name                  | Description
 -------------         | -------------
+`theme`               | _Same as in LogMonitor's package_ Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js).
 `initEmpty`           | When `true`, the dispatcher is empty. By default, set to `false`, the dispatcher contains : `{ "type": "" }`.
 
 ### Contributing

diff --git a/examples/counter/src/containers/DevTools.js b/examples/counter/src/containers/DevTools.js
@@ -10,7 +10,7 @@ export default createDevTools(
                changePositionKey='ctrl-q'>
     <MultipleMonitors>
       <LogMonitor />
-      <Dispatcher initEmpty="" />
+      <Dispatcher initEmpty />
     </MultipleMonitors>
   </DockMonitor>
 );
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redux-devtools-dispatch",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Dispatch your actions manually to test if your app reacts well",
   "main": "lib/index.js",
   "scripts": {
@@ -39,5 +39,7 @@
     "react": "^0.14.0",
     "redux-devtools": "^3.0.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "redux-devtools-themes": "^1.0.0"
+  }
 }
diff --git a/src/Dispatcher.js b/src/Dispatcher.js
@@ -1,36 +1,58 @@
 import React, { Component, PropTypes } from 'react';
+import * as themes from 'redux-devtools-themes';
 
-const buttonStyles = {
-  cursor: 'pointer',
-  fontWeight: 'bold',
-  borderRadius: '3px',
-  padding: '4px',
-  margin: '5px 3px',
-  fontSize: '0.8em',
-  color: 'white',
-  textDecoration: 'none',
-  backgroundColor: '#4F5A65',
-  border: 'none',
-  position: 'absolute',
-  bottom: '3px',
-  right: '5px'
-};
-
-const contentStyles = {
-  background: '#2A2F3A',
-  margin: '5px',
-  padding: '5px',
-  borderRadius: '3px',
-  outline: 'none',
-  color: 'white',
-  overflow: 'auto'
+const styles = {
+  button: {
+    cursor: 'pointer',
+    fontWeight: 'bold',
+    borderRadius: '3px',
+    padding: '3px',
+    margin: '5px 3px',
+    fontSize: '0.8em',
+    textDecoration: 'none',
+    border: 'none',
+    position: 'absolute',
+    bottom: '3px',
+    right: '5px'
+  },
+  content: {
+    margin: '5px',
+    padding: '5px',
+    borderRadius: '3px',
+    outline: 'none',
+    overflow: 'auto'
+  },
 };
 
 export default class Dispatcher extends Component {
   static contextTypes = {
     store: PropTypes.object
   };
 
+  static propTypes = {
+    dispatch: PropTypes.func,
+    computedStates: PropTypes.array,
+    actionsById: PropTypes.object,
+    stagedActionIds: PropTypes.array,
+    skippedActionIds: PropTypes.array,
+    monitorState: PropTypes.shape({
+      initialScrollTop: PropTypes.number
+    }),
+
+    initEmpty: PropTypes.bool,
+    theme: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+    ]),
+  };
+
+  static defaultProps = {
+    select: (state) => state,
+    theme: 'nicinabox',
+    preserveScrollTop: true,
+    initEmpty: false,
+  };
+
   static update = () => {};
 
   constructor(props, context) {
@@ -45,11 +67,27 @@ export default class Dispatcher extends Component {
     this.refs.action.innerHTML = this.props.initEmpty ? '<br/>' : '{<br/>"type": ""<br/>}';
   }
 
+  getTheme() {
+    let { theme } = this.props;
+    if (typeof theme !== 'string') {
+      return theme;
+    }
+
+    if (typeof themes[theme] !== 'undefined') {
+      return themes[theme];
+    }
+
+    console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox');
+    return themes.nicinabox;
+  }
+
   render() {
+    const theme = this.getTheme();
+
     return (
-      <div style={{background: '#4F5A65', fontFamily: 'monaco,Consolas,Lucida Console,monospace'}}>
-        <div contentEditable='true' style={contentStyles} ref='action'></div>
-        <button style={buttonStyles} onClick={this.launchAction.bind(this)}>Dispatch</button>
+      <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>
       </div>
     );
   }