fn: make menu items have material splashes also, by factoring out the splashes

TBR=raf

Review URL: https://codereview.chromium.org/974903005

examples/fn/widgets/button.dart

@@ -3,6 +3,7 @@ part of widgets;
 class Button extends ButtonBase {
 
   static Style _style = new Style('''
+    transform: translateX(0);
     display: inline-flex;
     border-radius: 4px;
     justify-content: center;
@@ -13,6 +14,7 @@ class Button extends ButtonBase {
   );
 
   static Style _highlightStyle = new Style('''
+    transform: translateX(0);
     display: inline-flex;
     border-radius: 4px;
     justify-content: center;
@@ -36,7 +38,7 @@ class Button extends ButtonBase {
       onPointerDown: _handlePointerDown,
       onPointerUp: _handlePointerUp,
       onPointerCancel: _handlePointerCancel,
-      children: [content]
+      children: [super.render(), content]
     );
   }
 }

examples/fn/widgets/buttonbase.dart

@@ -1,6 +1,6 @@
 part of widgets;
 
-abstract class ButtonBase extends Component {
+abstract class ButtonBase extends MaterialComponent {
 
   bool _highlight = false;
 

examples/fn/widgets/checkbox.dart

@@ -6,6 +6,7 @@ class Checkbox extends ButtonBase {
   ValueChanged onChanged;
 
   static Style _style = new Style('''
+    transform: translateX(0);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -61,6 +62,7 @@ class Checkbox extends ButtonBase {
       onPointerUp: _handlePointerUp,
       onPointerCancel: _handlePointerCancel,
       children: [
+        super.render(),
         new Container(
           style: _highlight ? _containerHighlightStyle : _containerStyle,
           children: [

examples/fn/widgets/drawer.dart

@@ -120,6 +120,7 @@ class Drawer extends Component {
     background-color: #FAFAFA;
     will-change: transform;
     position: absolute;
+    z-index: 3;
     width: 256px;
     top: 0;
     left: 0;

examples/fn/widgets/material.dart

@@ -0,0 +1,81 @@
+part of widgets;
+
+abstract class MaterialComponent extends Component {
+
+  static const _splashesKey = const Object();
+
+  static Style _style = new Style('''
+    transform: translateX(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0'''
+  );
+
+  LinkedHashSet<SplashAnimation> _splashes;
+
+  MaterialComponent({ Object key }) : super(key: key);
+
+  Node render() {
+    List<Node> children = [];
+
+    if (_splashes != null) {
+      children.addAll(_splashes.map((s) => new InkSplash(s.onStyleChanged)));
+    }
+
+    return new Container(
+      style: _style,
+      onScrollStart: _cancelSplashes,
+      onWheel: _cancelSplashes,
+      onPointerDown: _startSplash,
+      children: children,
+      key: _splashesKey
+    );
+  }
+
+  sky.ClientRect _getBoundingRect() => getRoot().getBoundingClientRect();
+
+  void _startSplash(sky.Event event) {
+    setState(() {
+      if (_splashes == null) {
+        _splashes = new LinkedHashSet<SplashAnimation>();
+      }
+
+      var splash;
+      splash = new SplashAnimation(_getBoundingRect(), event.x, event.y,
+                                   onDone: () { _splashDone(splash); });
+
+      _splashes.add(splash);
+    });
+  }
+
+  void _cancelSplashes(sky.Event event) {
+    if (_splashes == null) {
+      return;
+    }
+
+    setState(() {
+      var splashes = _splashes;
+      _splashes = null;
+      splashes.forEach((s) { s.cancel(); });
+    });
+  }
+
+  void willUnmount() {
+    _cancelSplashes(null);
+  }
+
+  void _splashDone(SplashAnimation splash) {
+    if (_splashes == null) {
+      return;
+    }
+
+    setState(() {
+      _splashes.remove(splash);
+      if (_splashes.length == 0) {
+        _splashes = null;
+      }
+    });
+  }
+}

examples/fn/widgets/menuitem.dart

@@ -1,14 +1,24 @@
 part of widgets;
 
-class MenuItem extends Component {
+class MenuItem extends ButtonBase {
 
   static Style _style = new Style('''
+    transform: translateX(0);
     display: flex;
     align-items: center;
     height: 48px;
     -webkit-user-select: none;'''
   );
 
+  static Style _highlightStyle = new Style('''
+    transform: translateX(0);
+    display: flex;
+    align-items: center;
+    height: 48px;
+    background: rgba(153, 153, 153, 0.4);
+    -webkit-user-select: none;'''
+  );
+
   static Style _iconStyle = new Style('''
     padding: 0px 16px;'''
   );
@@ -23,13 +33,20 @@ class MenuItem extends Component {
   List<Node> children;
   String icon;
 
-  MenuItem({ Object key, this.icon, this.children }) : super(key: key) {
+  sky.EventListener onClick;
+
+  MenuItem({ Object key, this.icon, this.children, this.onClick }) : super(key: key) {
   }
 
   Node render() {
     return new Container(
-      style: _style,
+      style: _highlight ? _highlightStyle : _style,
+      onClick: onClick,
+      onPointerDown: _handlePointerDown,
+      onPointerUp: _handlePointerUp,
+      onPointerCancel: _handlePointerCancel,
       children: [
+        super.render(),
         new Icon(
           style: _iconStyle,
           size: 24,

examples/fn/widgets/radio.dart

@@ -7,6 +7,7 @@ class Radio extends ButtonBase {
   ValueChanged onChanged;
 
   static Style _style = new Style('''
+    transform: translateX(0);
     display: inline-block;
     -webkit-user-select: none;
     width: 14px;
@@ -17,6 +18,7 @@ class Radio extends ButtonBase {
   );
 
   static Style _highlightStyle = new Style('''
+    transform: translateX(0);
     display: inline-block;
     -webkit-user-select: none;
     width: 14px;
@@ -51,7 +53,7 @@ class Radio extends ButtonBase {
       onPointerUp: _handlePointerUp,
       onPointerCancel: _handlePointerCancel,
       children: value == groupValue ?
-          [new Container( style : _dotStyle )] : null
+          [super.render(), new Container( style : _dotStyle )] : [super.render()]
     );
   }
 

examples/fn/widgets/widgets.dart

@@ -1,6 +1,7 @@
 library widgets;
 
 import '../lib/fn.dart';
+import 'dart:collection';
 import 'dart:async';
 import 'dart:math' as math;
 import 'dart:sky' as sky;
@@ -16,6 +17,7 @@ part 'fixedheightscrollable.dart';
 part 'flingcurve.dart';
 part 'icon.dart';
 part 'inksplash.dart';
+part 'material.dart';
 part 'menudivider.dart';
 part 'menuitem.dart';
 part 'radio.dart';

examples/stocks-fn/stockrow.dart

@@ -1,9 +1,8 @@
 part of stocksapp;
 
-class StockRow extends Component {
+class StockRow extends MaterialComponent {
 
   Stock stock;
-  LinkedHashSet<SplashAnimation> _splashes;
 
   static Style _style = new Style('''
     transform: translateX(0);
@@ -64,61 +63,11 @@ class StockRow extends Component {
       )
     ];
 
-    if (_splashes != null) {
-      children.addAll(_splashes.map((s) => new InkSplash(s.onStyleChanged)));
-    }
+    children.add(super.render());
 
     return new Container(
       style: _style,
-      onScrollStart: _cancelSplashes,
-      onWheel: _cancelSplashes,
-      onPointerDown: _handlePointerDown,
       children: children
     );
   }
-
-  sky.ClientRect _getBoundingRect() => getRoot().getBoundingClientRect();
-
-  void _handlePointerDown(sky.Event event) {
-    setState(() {
-      if (_splashes == null) {
-        _splashes = new LinkedHashSet<SplashAnimation>();
-      }
-
-      var splash;
-      splash = new SplashAnimation(_getBoundingRect(), event.x, event.y,
-                                   onDone: () { _splashDone(splash); });
-
-      _splashes.add(splash);
-    });
-  }
-
-  void _cancelSplashes(sky.Event event) {
-    if (_splashes == null) {
-      return;
-    }
-
-    setState(() {
-      var splashes = _splashes;
-      _splashes = null;
-      splashes.forEach((s) { s.cancel(); });
-    });
-  }
-
-  void willUnmount() {
-    _cancelSplashes(null);
-  }
-
-  void _splashDone(SplashAnimation splash) {
-    if (_splashes == null) {
-      return;
-    }
-
-    setState(() {
-      _splashes.remove(splash);
-      if (_splashes.length == 0) {
-        _splashes = null;
-      }
-    });
-  }
 }