Make Stocks app search actually search

We don't yet reset the scroll offset, so sometimes you can't see your search
results properly.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/1002453003

examples/stocks-fn/stocklist.dart

 part of stocksapp;
 
 class Stocklist extends FixedHeightScrollable {
-
+  String query;
   List<Stock> stocks;
 
   Stocklist({
     Object key,
-    this.stocks
+    this.stocks,
+    this.query
   }) : super(key: key, minOffset: 0.0);
 
   List<Node> buildItems(int start, int count) {
-    var items = [];
-    for (var i = 0; i < count; i++) {
-      items.add(new StockRow(stock: stocks[start + i]));
-    }
-
-    return items;
+    return stocks
+      .skip(start)
+      .where((stock) => query == null || stock.symbol.contains(
+          new RegExp(query, caseSensitive: false)))
+      .take(count)
+      .map((stock) => new StockRow(stock: stock))
+      .toList(growable: false);
   }
 }

examples/stocks-fn/stocksapp.dart

@@ -42,6 +42,7 @@ class StocksApp extends App {
 
   List<Stock> _sortedStocks;
   bool _isSearching = false;
+  String _searchQuery;
 
   StocksApp() : super() {
     _sortedStocks = oracle.stocks;
@@ -54,6 +55,12 @@ class StocksApp extends App {
     });
   }
 
+  void _handleSearchQueryChanged(query) {
+    setState(() {
+      _searchQuery = query;
+    });
+  }
+
   Node build() {
     var drawer = new Drawer(
       animation: _drawerAnimation,
@@ -86,9 +93,13 @@ class StocksApp extends App {
       ]
     );
 
-    Node title = _isSearching
-        ? new Input(focused: true, placeholder: 'Search stocks')
-        : new Text('I am a stocks app');
+    Node title;
+    if (_isSearching) {
+      title = new Input(focused: true, placeholder: 'Search stocks',
+          onChanged: _handleSearchQueryChanged);
+    } else {
+      title = new Text('I am a stocks app');
+    }
 
     var toolbar = new Toolbar(
       children: [
@@ -110,6 +121,8 @@ class StocksApp extends App {
       ]
     );
 
+    var list = new Stocklist(stocks: _sortedStocks, query: _searchQuery);
+
     var fab = new FloatingActionButton(content: new Icon(
       type: 'content/add_white', size: 24));
 
@@ -119,7 +132,7 @@ class StocksApp extends App {
         new Container(
           key: 'Content',
           style: _style,
-          children: [toolbar, new Stocklist(stocks: _sortedStocks)]
+          children: [toolbar, list]
         ),
         fab,
         drawer,

framework/components/input.dart

@@ -35,25 +35,28 @@ class Input extends Component {
     border-bottom: 2px solid ${Blue[500]};''';
 
   ValueChanged onChanged;
-  String value;
   String placeholder;
   bool focused = false;
 
+  String _value = '';
   bool _isAttachedToKeyboard = false;
   EditableString _editableValue;
 
-  Input({Object key, this.value: '', this.placeholder, this.focused})
+  Input({Object key,
+         this.placeholder,
+         this.onChanged,
+         this.focused})
       : super(key: key, stateful: true) {
-    _editableValue = new EditableString(text: value,
+    _editableValue = new EditableString(text: _value,
                                         onUpdated: _handleTextUpdated);
   }
 
   void _handleTextUpdated() {
     setState(() {});
-    if (value != _editableValue.text) {
-      value = _editableValue.text;
+    if (_value != _editableValue.text) {
+      _value = _editableValue.text;
       if (onChanged != null)
-        onChanged(value);
+        onChanged(_value);
     }
   }
 
@@ -70,7 +73,7 @@ class Input extends Component {
 
     List<Node> children = [];
 
-    if (placeholder != null && value.isEmpty) {
+    if (placeholder != null && _value.isEmpty) {
       children.add(new Container(
           style: _placeholderStyle,
           children: [new Text(placeholder)]