add optional progress to every node

Author: jasonford

src/Keyboard.js

@@ -3,6 +3,8 @@ let pressedEvents = [];
 let pressedKeys = '';
 
 document.body.addEventListener('keypress', function (e) {
+  //  only catch keypresses not in a box
+  if (e.target !== document.body) return;
   pressedKeys += e.key;
   let handlers = [];
   pressedEvents.forEach((pressHandlers)=>{
@@ -25,6 +27,9 @@ let onlyKeyDownKeys = {
 };
 
 document.body.addEventListener('keydown', function (e) {
+  //  only catch keypresses not in a box
+  if (e.target !== document.body) return;
+
   if (onlyKeyDownKeys[e.key]) {
     pressedKeys += e.key;
     let handlers = [];

src/TreeChartChildEditor.js

@@ -28,22 +28,40 @@ let TreeChartChildEditor = React.createClass({
     let that = this;
     return function (e) {
       let update = {};
-      update[field] = e.target.value;
+      let value = e.target.value;
+      if (e.target.type === 'checkbox') {
+        value = e.target.checked;
+      }
       if (validate) {
-        update[field] = validate(e.target.value);
+        value = validate(value);
       }
+      update[field] = value;
       firebase.database().ref(that.props.path).update(update);
     }
   },
   render() {
+    let progressEnabled = this.state.element.progress === 0 || this.state.element.progress > 0;
+    let progressBar = <div>
+      <input type="range" onChange={this.update('progress', parseInt)} value={this.state.element.progress}/>
+      {this.state.element.progress}
+    </div>
     return <div ref="root" className="TreeChartChildEditor">
       <input type="text" className="TreeChartChildEditorTitle" value={this.state.element.title} onChange={this.update('title')}/>
       <select className="TreeChartChildEditorImportance" default={this.state.element.importance} value={this.state.element.importance} onChange={this.update('importance', parseInt)}>
         {[1,2,3,4,5].map((importance)=>{return <option key={importance} value={importance}>{importance}</option>})}
       </select>
-      <select className="TreeChartChildEditorType" default={this.state.element.type} value={this.state.element.type} onChange={this.update('type')}>
+      <select
+        className="TreeChartChildEditorType"
+        default={this.state.element.type}
+        value={this.state.element.type}
+        onChange={this.update('type')}>
         {types.map((type)=>{return <option key={type} value={type}>{type}</option>})}
       </select>
+      <input
+        type="checkbox"
+        checked={progressEnabled}
+        onChange={this.update('progress', (val)=>{return val ? 0 : null})}/>
+      {progressEnabled ? progressBar : null}
     </div>;
   }
 });