Make a material design Input component

sky/examples/editor/input.dart

Index: sky/examples/editor/input.dart
diff --git a/sky/examples/editor/input.dart b/sky/examples/editor/input.dart
new file mode 100644
index 0000000000000000000000000000000000000000..0c5b499b6e9a9c72e8edfc3fee0cefd5a9b64900
--- /dev/null
+++ b/sky/examples/editor/input.dart
@@ -0,0 +1,66 @@
+// 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/theme/colors.dart';
+import 'editable_string.dart';
+import 'editable_text.dart';
+import 'keyboard.dart';
+
+typedef void ValueChanged(value);
+
+class Input extends Component {
+  static final Style _style = new Style('''
+    display: paragraph;
+    margin: 8px;
+    padding: 8px;
+    border-bottom: 1px solid ${Grey[200]};
+    align-self: center;
+    height: 1.2em;
+    white-space: pre;
+    overflow: hidden;'''
+  );
+
+  static final String _focusedInlineStyle = '''
+    padding: 7px;
+    border-bottom: 2px solid ${Blue[500]};''';
+
+  ValueChanged onChanged;
+  String value;
+
+  bool _focused = false;
+  EditableString _editableValue;
+
+  Input({Object key, this.value: ''}) : super(key: key, stateful: true) {
+    _editableValue = new EditableString(text: value,
+                                        onUpdated: _handleTextUpdated);
+    events.listen('click', _handleClick);
+  }
+
+  void _handleClick(_) {
+    keyboard.show(_editableValue.stub);
+    setState(() {
+      _focused = true;
+    });
+  }
+
+  void _handleTextUpdated() {
+    setState(() {});
+    if (value != _editableValue.text) {
+      value = _editableValue.text;
+      if (onChanged != null)
+        onChanged(value);
+    }
+  }
+
+  Node build() {
+    return new Container(
+      style: _style,
+      inlineStyle: _focused ? _focusedInlineStyle : null,
+      children: [
+        new EditableText(value: _editableValue, focused: _focused),
+      ]
+    );
+  }
+}