Make a material design Input component

sky/examples/editor/editable_text.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 import '../../framework/fn.dart';
-import '../../framework/shell.dart' as shell;
+import '../../framework/theme/colors.dart';
 import 'dart:async';
-import 'dart:math';
 import 'editable_string.dart';
-import 'package:sky/services/keyboard/keyboard.mojom.dart';
 
 class EditableText extends Component {
-  static Style _style = new Style('''
-    display: paragraph;
-    white-space: pre-wrap;
-    padding: 10px;
-    height: 200px;
-    background-color: lightblue;'''
+  static final Style _style = new Style('''
+    display: inline;'''
   );
 
-  static Style _cusorStyle = new Style('''
+  static final Style _cusorStyle = new Style('''
     display: inline-block;
     width: 2px;
     height: 1.2em;
     vertical-align: top;
-    background-color: blue;'''
+    background-color: ${Blue[500]};'''
   );
 
-  static Style _composingStyle = new Style('''
+  static final Style _composingStyle = new Style('''
     display: inline;
     text-decoration: underline;'''
   );
 
-  KeyboardServiceProxy _service;
-
-  EditableString _string;
+  EditableString value;
+  bool focused;
   Timer _cursorTimer;
   bool _showCursor = false;
 
-  EditableText({Object key}) : super(key: key, stateful: true) {
-    _string = new EditableString(text: '', onChanged: _handleTextChanged);
-    events.listen('click', _handleClick);
-    events.listen('focus', _handleFocus);
-    events.listen('blur', _handleBlur);
-  }
-
-  void _handleTextChanged(EditableString string) {
-    setState(() {
-      _string = string;
-      _showCursor = true;
-      _restartCursorTimer();
-    });
-  }
-
-  void _handleClick(_) {
-    if (_service != null)
-      return;
-    _service = new KeyboardServiceProxy.unbound();
-    shell.requestService(_service);
-    _service.ptr.show(_string.stub);
-    _restartCursorTimer();
-    setState(() {
-      _showCursor = true;
-    });
-  }
-
-  void _handleFocus(_) {
-    print("_handleFocus");
-  }
-
-  void _handleBlur(_) {
-    print("_handleBlur");
+  EditableText({Object key, this.value, this.focused})
+      : super(key: key, stateful: true) {
   }
 
   void _cursorTick(Timer timer) {
     setState(() {
       _showCursor = !_showCursor;
     });
   }
 
-  void _restartCursorTimer() {
-    if (_cursorTimer != null)
-      _cursorTimer.cancel();
+  void _startCursorTimer() {
+    _showCursor = true;
     _cursorTimer = new Timer.periodic(
         new Duration(milliseconds: 500), _cursorTick);
   }
 
+  void _stopCursorTimer() {
+    _cursorTimer.cancel();
+    _cursorTimer = null;
+    _showCursor = false;
+  }
+
   void didUnmount() {
-    _cursorTimer.cancel();
+    if (_cursorTimer != null)
+      _stopCursorTimer();
   }
 
   Node build() {
+    if (focused && _cursorTimer == null)
+      _startCursorTimer();
+    else if (!focused && _cursorTimer != null)
+      _stopCursorTimer();
+
     List<Node> children = new List<Node>();
 
-    if (!_string.composing.isValid) {
-      children.add(new Text(_string.text));
+    if (!value.composing.isValid) {
+      children.add(new Text(value.text));
     } else {
-      String beforeComposing = _string.textBefore(_string.composing);
+      String beforeComposing = value.textBefore(value.composing);
       if (!beforeComposing.isEmpty)
         children.add(new Text(beforeComposing));
 
-      String composing = _string.textInside(_string.composing);
+      String composing = value.textInside(value.composing);
       if (!composing.isEmpty) {
         children.add(new Container(
           key: 'composing', 
           style: _composingStyle,
           children: [new Text(composing)]
         ));
       }
 
-      String afterComposing = _string.textAfter(_string.composing);
+      String afterComposing = value.textAfter(value.composing);
       if (!afterComposing.isEmpty)
         children.add(new Text(afterComposing));
     }
 
     if (_showCursor)
       children.add(new Container(key: 'cursor', style: _cusorStyle));
 
     return new Container(
       style: _style,
       children: children
     );
   }
 }