OLD | NEW |
| (Empty) |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 import '../editing/editable_string.dart'; | |
6 import '../editing/editable_text.dart'; | |
7 import '../editing/keyboard.dart'; | |
8 import '../fn.dart'; | |
9 import '../layout.dart'; | |
10 import '../theme/colors.dart'; | |
11 import '../theme/typography.dart' as typography; | |
12 import 'dart:sky' as sky; | |
13 | |
14 typedef void ValueChanged(value); | |
15 | |
16 class Input extends Component { | |
17 static final Style _style = new Style(''' | |
18 transform: translateX(0); | |
19 margin: 8px; | |
20 padding: 8px; | |
21 border-bottom: 1px solid ${Grey[200]}; | |
22 align-self: center; | |
23 height: 1.2em; | |
24 white-space: pre; | |
25 overflow: hidden;''' | |
26 ); | |
27 | |
28 static final Style _placeholderStyle = new Style(''' | |
29 top: 8px; | |
30 left: 8px; | |
31 position: absolute; | |
32 ${typography.black.caption};''' | |
33 ); | |
34 | |
35 static final String _focusedInlineStyle = ''' | |
36 padding: 7px; | |
37 border-bottom: 2px solid ${Blue[500]};'''; | |
38 | |
39 ValueChanged onChanged; | |
40 String placeholder; | |
41 bool focused = false; | |
42 | |
43 String _value = ''; | |
44 bool _isAttachedToKeyboard = false; | |
45 EditableString _editableValue; | |
46 | |
47 Input({Object key, | |
48 this.placeholder, | |
49 this.onChanged, | |
50 this.focused}) | |
51 : super(key: key, stateful: true) { | |
52 _editableValue = new EditableString(text: _value, | |
53 onUpdated: _handleTextUpdated); | |
54 onDidUnmount(() { | |
55 if (_isAttachedToKeyboard) | |
56 keyboard.hide(); | |
57 }); | |
58 } | |
59 | |
60 void _handleTextUpdated() { | |
61 scheduleBuild(); | |
62 if (_value != _editableValue.text) { | |
63 _value = _editableValue.text; | |
64 if (onChanged != null) | |
65 onChanged(_value); | |
66 } | |
67 } | |
68 | |
69 UINode build() { | |
70 if (focused && !_isAttachedToKeyboard) { | |
71 keyboard.show(_editableValue.stub); | |
72 _isAttachedToKeyboard = true; | |
73 } | |
74 | |
75 List<UINode> children = []; | |
76 | |
77 if (placeholder != null && _value.isEmpty) { | |
78 children.add(new Container( | |
79 style: _placeholderStyle, | |
80 children: [new Text(placeholder)] | |
81 )); | |
82 } | |
83 | |
84 children.add(new EditableText(value: _editableValue, focused: focused)); | |
85 | |
86 return new EventListenerNode( | |
87 new FlexContainer( | |
88 direction: FlexDirection.Column, | |
89 style: _style, | |
90 inlineStyle: focused ? _focusedInlineStyle : null, | |
91 children: children | |
92 ), | |
93 onPointerDown: (sky.Event e) => keyboard.showByRequest() | |
94 ); | |
95 } | |
96 } | |
OLD | NEW |