Allow editing the range via Controls

hammerlab · Mar 10, 2015 · d91c6c2 · d91c6c2
1 parent bddf462
commit d91c6c2
Showing 1 changed file with 36 additions and 14 deletions.
diff --git a/src/Controls.js b/src/Controls.js
@@ -4,7 +4,8 @@
  */
 
 var React = require('react'),
-    types = require('./types');
+    types = require('./types'),
+    _ = require('underscore');
 
 var Controls = React.createClass({
   propTypes: {
@@ -13,34 +14,55 @@ var Controls = React.createClass({
     // XXX: can we be more specific than this with Flow?
     onChange: React.PropTypes.func.isRequired
   },
-  handleChange: function(e: SyntheticEvent) {
-    var range = {
+  makeRange: function() {
+    // XXX Removing the Number() should lead to type errors, but doesn't.
+    return {
       contig: this.refs.contig.getDOMNode().value,
       start: Number(this.refs.start.getDOMNode().value),
       stop: Number(this.refs.stop.getDOMNode().value)
     };
-    // XXX this should be a type error w/o the Number() above, but it isn't.
-    this.props.onChange(range);
+  },
+  handleContigChange: function(e: SyntheticEvent) {
+    this.props.onChange(this.makeRange());
+  },
+  handleFormSubmit: function(e: SyntheticEvent) {
+    e.preventDefault();
+    this.props.onChange(this.makeRange());
+  },
+  // Sets the values of the input elements to match `props.range`.
+  updateRangeUI: function() {
+    var r = this.props.range || {contig: '', start: '', stop: ''};
+    this.refs.start.getDOMNode().value = r.start;
+    this.refs.stop.getDOMNode().value = r.stop;
+
+    var contigIdx = this.props.contigList.indexOf(r.contig);
+    this.refs.contig.getDOMNode().selectedIndex = contigIdx;
   },
   render: function(): any {
     var contigOptions = this.props.contigList
         ? this.props.contigList.map((contig, i) => <option key={i}>{contig}</option>)
         : null;
 
-    // TODO: this is broken. The UI should show the current range _and_ allow editing.
-    var r = this.props.range || {contig: null, start: null, stop: null};
-
+    // Note: input values are set in componentDidUpdate.
     return (
-      <div className='controls'>
+      <form className='controls' onSubmit={this.handleFormSubmit}>
         Contig:
-        <select ref='contig' onChange={this.handleChange}>
+        <select ref='contig' onChange={this.handleContigChange}>
           {contigOptions}
         </select>
-        <input ref='start' type='text' value={r.start} readOnly />
-        <input ref='stop' type='text' value={r.stop} readOnly />
-        <button onClick={this.handleChange}>Update</button>
-      </div>
+        <input ref='start' type='text' />
+        <input ref='stop' type='text' />
+        <button>Go</button>
+      </form>
     );
+  },
+  componentDidUpdate: function(prevProps, prevState) {
+    if (!_.isEqual(prevProps.range, this.props.range)) {
+      this.updateRangeUI();
+    }
+  },
+  componentDidMount: function() {
+    this.updateRangeUI();
   }
 });