Add bindings for transition / animation events

lib/react.dart

@@ -836,6 +836,56 @@ class SyntheticTouchEvent extends SyntheticEvent {
             isTrusted, nativeEvent, target, timeStamp, type) {}
 }
 
+class SyntheticTransitionEvent extends SyntheticEvent {
+  final String propertyName;
+  final num elapsedTime;
+  final String pseudoElement;
+
+  SyntheticTransitionEvent(
+      bubbles,
+      cancelable,
+      currentTarget,
+      _defaultPrevented,
+      _preventDefault,
+      stopPropagation,
+      eventPhase,
+      isTrusted,
+      nativeEvent,
+      target,
+      timeStamp,
+      type,
+      this.propertyName,
+      this.elapsedTime,
+      this.pseudoElement)
+      : super(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase,
+            isTrusted, nativeEvent, target, timeStamp, type) {}
+}
+
+class SyntheticAnimationEvent extends SyntheticEvent {
+  final String animationName;
+  final num elapsedTime;
+  final String pseudoElement;
+
+  SyntheticAnimationEvent(
+      bubbles,
+      cancelable,
+      currentTarget,
+      _defaultPrevented,
+      _preventDefault,
+      stopPropagation,
+      eventPhase,
+      isTrusted,
+      nativeEvent,
+      target,
+      timeStamp,
+      type,
+      this.animationName,
+      this.elapsedTime,
+      this.pseudoElement)
+      : super(bubbles, cancelable, currentTarget, _defaultPrevented, _preventDefault, stopPropagation, eventPhase,
+            isTrusted, nativeEvent, target, timeStamp, type) {}
+}
+
 class SyntheticUIEvent extends SyntheticEvent {
   final num detail;
   final /*DOMAbstractView*/ view;

lib/react_client.dart

@@ -731,6 +731,48 @@ SyntheticTouchEvent syntheticTouchEventFactory(events.SyntheticTouchEvent e) {
   );
 }
 
+/// Wrapper for [SyntheticTransitionEvent].
+SyntheticTransitionEvent syntheticTransitionEventFactory(events.SyntheticTransitionEvent e) {
+  return new SyntheticTransitionEvent(
+    e.bubbles,
+    e.cancelable,
+    e.currentTarget,
+    e.defaultPrevented,
+    () => e.preventDefault(),
+    () => e.stopPropagation(),
+    e.eventPhase,
+    e.isTrusted,
+    e.nativeEvent,
+    e.target,
+    e.timeStamp,
+    e.type,
+    e.propertyName,
+    e.elapsedTime,
+    e.pseudoElement,
+  );
+}
+
+/// Wrapper for [SyntheticAnimationEvent].
+SyntheticAnimationEvent syntheticAnimationEventFactory(events.SyntheticAnimationEvent e) {
+  return new SyntheticAnimationEvent(
+    e.bubbles,
+    e.cancelable,
+    e.currentTarget,
+    e.defaultPrevented,
+    () => e.preventDefault(),
+    () => e.stopPropagation(),
+    e.eventPhase,
+    e.isTrusted,
+    e.nativeEvent,
+    e.target,
+    e.timeStamp,
+    e.type,
+    e.animationName,
+    e.elapsedTime,
+    e.pseudoElement,
+  );
+}
+
 /// Wrapper for [SyntheticUIEvent].
 SyntheticUIEvent syntheticUIEventFactory(events.SyntheticUIEvent e) {
   return new SyntheticUIEvent(

lib/react_test_utils.dart

@@ -58,6 +58,12 @@ typedef bool ComponentTestFunction(/* [1] */ component);
 /// This should include all events documented at:
 /// http://facebook.github.io/react/docs/events.html
 class Simulate {
+  static void animationEnd(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.Simulate.animationEnd(componentOrNode, jsify(eventData));
+  static void animationIteration(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.Simulate.animationIteration(componentOrNode, jsify(eventData));
+  static void animationStart(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.Simulate.animationStart(componentOrNode, jsify(eventData));
   static void blur(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
       simulate_wrappers.Simulate.blur(componentOrNode, jsify(eventData));
   static void change(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
@@ -122,6 +128,8 @@ class Simulate {
       simulate_wrappers.Simulate.touchMove(componentOrNode, jsify(eventData));
   static void touchStart(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
       simulate_wrappers.Simulate.touchStart(componentOrNode, jsify(eventData));
+  static void transitionEnd(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.Simulate.transitionEnd(componentOrNode, jsify(eventData));
   static void wheel(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
       simulate_wrappers.Simulate.wheel(componentOrNode, jsify(eventData));
 }
@@ -143,6 +151,12 @@ class Simulate {
 ///   which the `react` Dart package will be upgrading to in the `5.0.0` release.
 @Deprecated('5.0.0')
 class SimulateNative {
+  static void animationEnd(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.SimulateNative.animationEnd(componentOrNode, jsify(eventData));
+  static void animationIteration(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.SimulateNative.animationIteration(componentOrNode, jsify(eventData));
+  static void animationStart(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.SimulateNative.animationStart(componentOrNode, jsify(eventData));
   static void blur(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
       simulate_wrappers.SimulateNative.blur(componentOrNode, jsify(eventData));
   static void click(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
@@ -203,6 +217,8 @@ class SimulateNative {
       simulate_wrappers.SimulateNative.touchMove(componentOrNode, jsify(eventData));
   static void touchStart(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
       simulate_wrappers.SimulateNative.touchStart(componentOrNode, jsify(eventData));
+  static void transitionEnd(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
+      simulate_wrappers.SimulateNative.transitionEnd(componentOrNode, jsify(eventData));
   static void wheel(/* [1] */ componentOrNode, [Map eventData = const {}]) =>
       simulate_wrappers.SimulateNative.wheel(componentOrNode, jsify(eventData));
 }

lib/src/react_client/event_prop_key_to_event_factory.dart

@@ -51,6 +51,14 @@ final Map<String, Function> eventPropKeyToEventFactory = (() {
     'onTouchMove': syntheticTouchEventFactory,
     'onTouchStart': syntheticTouchEventFactory,
 
+    // SyntheticTransitionEvent
+    'onTransitionEnd': syntheticTransitionEventFactory,
+
+    // SyntheticAnimationEvent
+    'onAnimationEnd': syntheticAnimationEventFactory,
+    'onAnimationIteration': syntheticAnimationEventFactory,
+    'onAnimationStart': syntheticAnimationEventFactory,
+
     // SyntheticUIEvent
     'onScroll': syntheticUIEventFactory,
 

lib/src/react_client/synthetic_event_wrappers.dart

@@ -99,6 +99,22 @@ class SyntheticTouchEvent extends SyntheticEvent {
   external TouchList get touches;
 }
 
+@JS()
+@anonymous
+class SyntheticTransitionEvent extends SyntheticEvent {
+  external String get propertyName;
+  external num get elapsedTime;
+  external String get pseudoElement;
+}
+
+@JS()
+@anonymous
+class SyntheticAnimationEvent extends SyntheticEvent {
+  external String get animationName;
+  external num get elapsedTime;
+  external String get pseudoElement;
+}
+
 @JS()
 @anonymous
 class SyntheticUIEvent extends SyntheticEvent {

lib/src/react_test_utils/simulate_wrappers.dart

@@ -9,6 +9,9 @@ import 'package:js/js.dart';
 
 @JS('React.addons.TestUtils.Simulate')
 abstract class Simulate {
+  external static void animationEnd(componentOrNode, [eventData]);
+  external static void animationIteration(componentOrNode, [eventData]);
+  external static void animationStart(componentOrNode, [eventData]);
   external static void blur(componentOrNode, [eventData]);
   external static void change(componentOrNode, [eventData]);
   external static void click(componentOrNode, [eventData]);
@@ -41,11 +44,15 @@ abstract class Simulate {
   external static void touchEnd(componentOrNode, [eventData]);
   external static void touchMove(componentOrNode, [eventData]);
   external static void touchStart(componentOrNode, [eventData]);
+  external static void transitionEnd(componentOrNode, [eventData]);
   external static void wheel(componentOrNode, [eventData]);
 }
 
 @JS('React.addons.TestUtils.SimulateNative')
 abstract class SimulateNative {
+  external static void animationEnd(componentOrNode, [eventData]);
+  external static void animationIteration(componentOrNode, [eventData]);
+  external static void animationStart(componentOrNode, [eventData]);
   external static void blur(componentOrNode, [eventData]);
   external static void click(componentOrNode, [eventData]);
   external static void contextMenu(componentOrNode, [eventData]);
@@ -76,5 +83,6 @@ abstract class SimulateNative {
   external static void touchEnd(componentOrNode, [eventData]);
   external static void touchMove(componentOrNode, [eventData]);
   external static void touchStart(componentOrNode, [eventData]);
+  external static void transitionEnd(componentOrNode, [eventData]);
   external static void wheel(componentOrNode, [eventData]);
 }

test/react_test_utils_test.dart

@@ -82,9 +82,10 @@ void main() {
       });
     }
 
-    ;
-
     group('event', () {
+      group('animationEnd', () => testEvent(Simulate.animationEnd, 'animationEnd'));
+      group('animationIteration', () => testEvent(Simulate.animationIteration, 'animationIteration'));
+      group('animationStart', () => testEvent(Simulate.animationStart, 'animationStart'));
       group('blur', () => testEvent(Simulate.blur, 'blur'));
       group('change', () => testEvent(Simulate.change, 'change'));
       group('click', () => testEvent(Simulate.click, 'click'));
@@ -116,10 +117,14 @@ void main() {
       group('touchEnd', () => testEvent(Simulate.touchEnd, 'touchEnd'));
       group('touchMove', () => testEvent(Simulate.touchMove, 'touchMove'));
       group('touchStart', () => testEvent(Simulate.touchStart, 'touchStart'));
+      group('transitionEnd', () => testEvent(Simulate.transitionEnd, 'transitionEnd'));
       group('wheel', () => testEvent(Simulate.wheel, 'wheel'));
     });
 
     group('native event', () {
+      group('animationEnd', () => testEvent(SimulateNative.animationEnd, 'animationEnd'));
+      group('animationIteration', () => testEvent(SimulateNative.animationIteration, 'animationIteration'));
+      group('animationStart', () => testEvent(SimulateNative.animationStart, 'animationStart'));
       group('blur', () => testEvent(SimulateNative.blur, 'blur'));
       group('click', () => testEvent(SimulateNative.click, 'click'));
       group('copy', () => testEvent(SimulateNative.copy, 'copy'));
@@ -149,6 +154,7 @@ void main() {
       group('touchEnd', () => testEvent(SimulateNative.touchEnd, 'touchEnd'));
       group('touchMove', () => testEvent(SimulateNative.touchMove, 'touchMove'));
       group('touchStart', () => testEvent(SimulateNative.touchStart, 'touchStart'));
+      group('transitionEnd', () => testEvent(SimulateNative.transitionEnd, 'transitionEnd'));
       group('wheel', () => testEvent(SimulateNative.wheel, 'wheel'));
     });
   });

test/test_components.dart

@@ -5,6 +5,9 @@ class EventComponent extends Component {
   getInitialState() => {'text': ''};
   onEvent(SyntheticEvent e) => setState({'text': '${e.type} ${e.timeStamp}'});
   render() => div({
+        'onAnimationEnd': onEvent,
+        'onAnimationIteration': onEvent,
+        'onAnimationStart': onEvent,
         'onBlur': onEvent,
         'onChange': onEvent,
         'onClick': onEvent,
@@ -37,6 +40,7 @@ class EventComponent extends Component {
         'onTouchEnd': onEvent,
         'onTouchMove': onEvent,
         'onTouchStart': onEvent,
+        'onTransitionEnd': onEvent,
         'onWheel': onEvent
       }, state['text']);
 }