Port Input and EditableText to fn3

packages/flutter/lib/src/fn3.dart

@@ -18,6 +18,7 @@ export 'fn3/drawer.dart';
 export 'fn3/drawer_divider.dart';
 export 'fn3/drawer_header.dart';
 export 'fn3/drawer_item.dart';
+export 'fn3/editable_text.dart';
 export 'fn3/flat_button.dart';
 export 'fn3/floating_action_button.dart';
 export 'fn3/focus.dart';
@@ -27,6 +28,7 @@ export 'fn3/homogeneous_viewport.dart';
 export 'fn3/icon.dart';
 export 'fn3/icon_button.dart';
 export 'fn3/ink_well.dart';
+export 'fn3/input.dart';
 export 'fn3/material.dart';
 export 'fn3/material_button.dart';
 export 'fn3/mixed_viewport.dart';

packages/flutter/lib/src/fn3/editable_text.dart

@@ -7,8 +7,8 @@ import 'dart:sky' as sky;
 
 import 'package:mojo_services/keyboard/keyboard.mojom.dart';
 import 'package:sky/painting.dart';
-import 'package:sky/src/widgets/basic.dart';
-import 'package:sky/src/widgets/framework.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/framework.dart';
 
 const _kCursorBlinkPeriod = 500; // milliseconds
 const _kCursorGap = 1.0;
@@ -133,7 +133,6 @@ class EditableString implements KeyboardClient {
 }
 
 class EditableText extends StatefulComponent {
-
   EditableText({
     Key key,
     this.value,
@@ -141,18 +140,15 @@ class EditableText extends StatefulComponent {
     this.style,
     this.cursorColor}) : super(key: key);
 
-  EditableString value;
-  bool focused;
-  TextStyle style;
-  Color cursorColor;
+  final EditableString value;
+  final bool focused;
+  final TextStyle style;
+  final Color cursorColor;
 
-  void syncConstructorArguments(EditableText source) {
-    value = source.value;
-    focused = source.focused;
-    style = source.style;
-    cursorColor = source.cursorColor;
-  }
+  EditableTextState createState() => new EditableTextState();
+}
 
+class EditableTextState extends State<EditableText> {
   Timer _cursorTimer;
   bool _showCursor = false;
 
@@ -175,10 +171,10 @@ class EditableText extends StatefulComponent {
       new Duration(milliseconds: _kCursorBlinkPeriod), _cursorTick);
   }
 
-  void didUnmount() {
+  void dispose() {
     if (_cursorTimer != null)
       _stopCursorTimer();
-    super.didUnmount();
+    super.dispose();
   }
 
   void _stopCursorTimer() {
@@ -191,26 +187,29 @@ class EditableText extends StatefulComponent {
     if (!_showCursor)
       return;
 
-    double cursorHeight = style.fontSize + 2.0 * _kCursorHeightOffset;
+    double cursorHeight = config.style.fontSize + 2.0 * _kCursorHeightOffset;
     Rect cursorRect =  new Rect.fromLTWH(
       _kCursorGap,
       (size.height - cursorHeight) / 2.0,
       _kCursorWidth,
       cursorHeight
     );
-    canvas.drawRect(cursorRect, new Paint()..color = cursorColor);
+    canvas.drawRect(cursorRect, new Paint()..color = config.cursorColor);
   }
 
-  Widget build() {
-    assert(style != null);
-    assert(focused != null);
-    assert(cursorColor != null);
+  Widget build(BuildContext context) {
+    assert(config.style != null);
+    assert(config.focused != null);
+    assert(config.cursorColor != null);
 
-    if (focused && _cursorTimer == null)
+    if (config.focused && _cursorTimer == null)
       _startCursorTimer();
-    else if (!focused && _cursorTimer != null)
+    else if (!config.focused && _cursorTimer != null)
       _stopCursorTimer();
 
+    final EditableString value = config.value;
+    final TextStyle style = config.style;
+
     Widget text;
     if (value.composing.isValid) {
       TextStyle composingStyle = style.merge(const TextStyle(decoration: underline));

packages/flutter/lib/src/fn3/input.dart

@@ -4,11 +4,11 @@
 
 import 'package:sky/services.dart';
 import 'package:sky/painting.dart';
-import 'package:sky/src/widgets/basic.dart';
-import 'package:sky/src/widgets/editable_text.dart';
-import 'package:sky/src/widgets/focus.dart';
-import 'package:sky/src/widgets/framework.dart';
-import 'package:sky/src/widgets/theme.dart';
+import 'package:sky/src/fn3/basic.dart';
+import 'package:sky/src/fn3/editable_text.dart';
+import 'package:sky/src/fn3/focus.dart';
+import 'package:sky/src/fn3/framework.dart';
+import 'package:sky/src/fn3/theme.dart';
 
 export 'package:sky/services.dart' show KeyboardType;
 
@@ -19,35 +19,34 @@ typedef void StringValueChanged(String value);
 const EdgeDims _kTextfieldPadding = const EdgeDims.symmetric(vertical: 8.0);
 
 class Input extends StatefulComponent {
-
   Input({
     GlobalKey key,
-    String initialValue: '',
+    this.initialValue: '',
     this.placeholder,
     this.onChanged,
-    this.keyboardType : KeyboardType.TEXT
-  }): _value = initialValue, super(key: key);
+    this.keyboardType: KeyboardType.TEXT
+  }): super(key: key);
+
+  final String initialValue;
+  final KeyboardType keyboardType;
+  final String placeholder;
+  final StringValueChanged onChanged;
 
-  KeyboardType keyboardType;
-  String placeholder;
-  StringValueChanged onChanged;
+  InputState createState() => new InputState();
+}
 
+class InputState extends State<Input> {
   String _value;
   EditableString _editableValue;
   KeyboardHandle _keyboardHandle = KeyboardHandle.unattached;
 
-  void initState() {
+  void initState(BuildContext context) {
+    super.initState(context);
+    _value = config.initialValue;
     _editableValue = new EditableString(
       text: _value,
       onUpdated: _handleTextUpdated
     );
-    super.initState();
-  }
-
-  void syncConstructorArguments(Input source) {
-    placeholder = source.placeholder;
-    onChanged = source.onChanged;
-    keyboardType = source.keyboardType;
   }
 
   void _handleTextUpdated() {
@@ -55,17 +54,17 @@ class Input extends StatefulComponent {
       setState(() {
         _value = _editableValue.text;
       });
-      if (onChanged != null)
-        onChanged(_value);
+      if (config.onChanged != null)
+        config.onChanged(_value);
     }
   }
 
-  Widget build() {
-    ThemeData themeData = Theme.of(this);
-    bool focused = Focus.at(this);
+  Widget build(BuildContext context) {
+    ThemeData themeData = Theme.of(context);
+    bool focused = FocusState.at(context, config);
 
     if (focused && !_keyboardHandle.attached) {
-      _keyboardHandle = keyboard.show(_editableValue.stub, keyboardType);
+      _keyboardHandle = keyboard.show(_editableValue.stub, config.keyboardType);
     } else if (!focused && _keyboardHandle.attached) {
       _keyboardHandle.release();
     }
@@ -73,10 +72,10 @@ class Input extends StatefulComponent {
     TextStyle textStyle = themeData.text.subhead;
     List<Widget> textChildren = <Widget>[];
 
-    if (placeholder != null && _value.isEmpty) {
+    if (config.placeholder != null && _value.isEmpty) {
       Widget child = new Opacity(
         key: const ValueKey<String>('placeholder'),
-        child: new Text(placeholder, style: textStyle),
+        child: new Text(config.placeholder, style: textStyle),
         opacity: themeData.hintOpacity
       );
       textChildren.add(child);
@@ -109,23 +108,21 @@ class Input extends StatefulComponent {
 
     return new Listener(
       child: input,
-      onPointerDown: focus
-    );
-  }
-
-  void focus(_) {
-    if (Focus.at(this)) {
+      onPointerDown: (_) {
+        if (FocusState.at(context, config)) {
           assert(_keyboardHandle.attached);
           _keyboardHandle.showByRequest();
         } else {
-      Focus.moveTo(this);
+          FocusState.moveTo(context, config);
           // we'll get told to rebuild and we'll take care of the keyboard then
         }
       }
+    );
+  }
 
-  void didUnmount() {
+  void dispose() {
     if (_keyboardHandle.attached)
       _keyboardHandle.release();
-    super.didUnmount();
+    super.dispose();
   }
 }