StationPicker

src/js/components/root.js

@@ -37,6 +37,50 @@ class ElevatorWidget extends Component {
   }
 }
 
+// cf. https://github.com/urbit/urbit/blob/0c57e65b3871f1c40f1ecaf784722d4595c0d0ea/pkg/interface/chat/src/js/components/lib/ship-search.js
+class StationPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchTerm: ""
+    };
+    this.search = this.search.bind(this);
+  }
+
+  search(evt) {
+    this.setState({searchTerm: evt.target.value});
+  }
+
+  render() {
+    const props = this.props;
+    const state = this.state;
+
+    return (
+      <div
+        className="b--gray2 b--solid ba bg-white bg-gray0-d"
+      >
+        {props.from ? "From: " : "To: "}
+        <textarea
+          style={{ resize: 'none', maxWidth: '200px' }}
+          className="ma2 pa2 b--gray4 ba b--solid w7 db bg-gray0-d white-d"
+          rows={1}
+          autocapitalise="none"
+          autoFocus={
+            /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
+              navigator.userAgent
+            )
+              ? false
+              : true
+          }
+          placeholder="Station..."
+          value={state.searchTerm}
+          onChange={this.search}
+        />
+      </div>
+    );
+  }
+}
+
 class TimeScheduleWidget extends Component {
   constructor(props) {
     super(props)
@@ -130,7 +174,11 @@ class RoutePlanner extends Component {
           </div>
           <div className="searchsidebar" style={{gridColumn: "2", gridRow: "2"}}>
             Search scheduled trains:
-            { this.renderStationForm() }
+            <div>
+              <StationPicker from/>
+              <br/>
+              <StationPicker to/>
+            </div>
           </div>
         </div>
       </div>