OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 import '../../framework/fn.dart'; | 5 import '../../framework/fn.dart'; |
6 import '../../framework/shell.dart' as shell; | 6 import '../../framework/theme/colors.dart'; |
7 import 'dart:async'; | 7 import 'dart:async'; |
8 import 'dart:math'; | |
9 import 'editable_string.dart'; | 8 import 'editable_string.dart'; |
10 import 'package:sky/services/keyboard/keyboard.mojom.dart'; | |
11 | 9 |
12 class EditableText extends Component { | 10 class EditableText extends Component { |
13 static Style _style = new Style(''' | 11 static final Style _style = new Style(''' |
14 display: paragraph; | 12 display: inline;''' |
15 white-space: pre-wrap; | |
16 padding: 10px; | |
17 height: 200px; | |
18 background-color: lightblue;''' | |
19 ); | 13 ); |
20 | 14 |
21 static Style _cusorStyle = new Style(''' | 15 static final Style _cusorStyle = new Style(''' |
22 display: inline-block; | 16 display: inline-block; |
23 width: 2px; | 17 width: 2px; |
24 height: 1.2em; | 18 height: 1.2em; |
25 vertical-align: top; | 19 vertical-align: top; |
26 background-color: blue;''' | 20 background-color: ${Blue[500]};''' |
27 ); | 21 ); |
28 | 22 |
29 static Style _composingStyle = new Style(''' | 23 static final Style _composingStyle = new Style(''' |
30 display: inline; | 24 display: inline; |
31 text-decoration: underline;''' | 25 text-decoration: underline;''' |
32 ); | 26 ); |
33 | 27 |
34 KeyboardServiceProxy _service; | 28 EditableString value; |
35 | 29 bool focused; |
36 EditableString _string; | |
37 Timer _cursorTimer; | 30 Timer _cursorTimer; |
38 bool _showCursor = false; | 31 bool _showCursor = false; |
39 | 32 |
40 EditableText({Object key}) : super(key: key, stateful: true) { | 33 EditableText({Object key, this.value, this.focused}) |
41 _string = new EditableString(text: '', onChanged: _handleTextChanged); | 34 : super(key: key, stateful: true) { |
42 events.listen('click', _handleClick); | |
43 events.listen('focus', _handleFocus); | |
44 events.listen('blur', _handleBlur); | |
45 } | |
46 | |
47 void _handleTextChanged(EditableString string) { | |
48 setState(() { | |
49 _string = string; | |
50 _showCursor = true; | |
51 _restartCursorTimer(); | |
52 }); | |
53 } | |
54 | |
55 void _handleClick(_) { | |
56 if (_service != null) | |
57 return; | |
58 _service = new KeyboardServiceProxy.unbound(); | |
59 shell.requestService(_service); | |
60 _service.ptr.show(_string.stub); | |
61 _restartCursorTimer(); | |
62 setState(() { | |
63 _showCursor = true; | |
64 }); | |
65 } | |
66 | |
67 void _handleFocus(_) { | |
68 print("_handleFocus"); | |
69 } | |
70 | |
71 void _handleBlur(_) { | |
72 print("_handleBlur"); | |
73 } | 35 } |
74 | 36 |
75 void _cursorTick(Timer timer) { | 37 void _cursorTick(Timer timer) { |
76 setState(() { | 38 setState(() { |
77 _showCursor = !_showCursor; | 39 _showCursor = !_showCursor; |
78 }); | 40 }); |
79 } | 41 } |
80 | 42 |
81 void _restartCursorTimer() { | 43 void _startCursorTimer() { |
82 if (_cursorTimer != null) | 44 _showCursor = true; |
83 _cursorTimer.cancel(); | |
84 _cursorTimer = new Timer.periodic( | 45 _cursorTimer = new Timer.periodic( |
85 new Duration(milliseconds: 500), _cursorTick); | 46 new Duration(milliseconds: 500), _cursorTick); |
86 } | 47 } |
87 | 48 |
| 49 void _stopCursorTimer() { |
| 50 _cursorTimer.cancel(); |
| 51 _cursorTimer = null; |
| 52 _showCursor = false; |
| 53 } |
| 54 |
88 void didUnmount() { | 55 void didUnmount() { |
89 _cursorTimer.cancel(); | 56 if (_cursorTimer != null) |
| 57 _stopCursorTimer(); |
90 } | 58 } |
91 | 59 |
92 Node build() { | 60 Node build() { |
| 61 if (focused && _cursorTimer == null) |
| 62 _startCursorTimer(); |
| 63 else if (!focused && _cursorTimer != null) |
| 64 _stopCursorTimer(); |
| 65 |
93 List<Node> children = new List<Node>(); | 66 List<Node> children = new List<Node>(); |
94 | 67 |
95 if (!_string.composing.isValid) { | 68 if (!value.composing.isValid) { |
96 children.add(new Text(_string.text)); | 69 children.add(new Text(value.text)); |
97 } else { | 70 } else { |
98 String beforeComposing = _string.textBefore(_string.composing); | 71 String beforeComposing = value.textBefore(value.composing); |
99 if (!beforeComposing.isEmpty) | 72 if (!beforeComposing.isEmpty) |
100 children.add(new Text(beforeComposing)); | 73 children.add(new Text(beforeComposing)); |
101 | 74 |
102 String composing = _string.textInside(_string.composing); | 75 String composing = value.textInside(value.composing); |
103 if (!composing.isEmpty) { | 76 if (!composing.isEmpty) { |
104 children.add(new Container( | 77 children.add(new Container( |
105 key: 'composing', | 78 key: 'composing', |
106 style: _composingStyle, | 79 style: _composingStyle, |
107 children: [new Text(composing)] | 80 children: [new Text(composing)] |
108 )); | 81 )); |
109 } | 82 } |
110 | 83 |
111 String afterComposing = _string.textAfter(_string.composing); | 84 String afterComposing = value.textAfter(value.composing); |
112 if (!afterComposing.isEmpty) | 85 if (!afterComposing.isEmpty) |
113 children.add(new Text(afterComposing)); | 86 children.add(new Text(afterComposing)); |
114 } | 87 } |
115 | 88 |
116 if (_showCursor) | 89 if (_showCursor) |
117 children.add(new Container(key: 'cursor', style: _cusorStyle)); | 90 children.add(new Container(key: 'cursor', style: _cusorStyle)); |
118 | 91 |
119 return new Container( | 92 return new Container( |
120 style: _style, | 93 style: _style, |
121 children: children | 94 children: children |
122 ); | 95 ); |
123 } | 96 } |
124 } | 97 } |
OLD | NEW |