UIP-2091 Release over_react 1.8.0

CHANGELOG.md

@@ -1,6 +1,13 @@
 # OverReact Changelog
 
 
+## 1.8.0
+
+> [Complete `1.8.0` Changeset](https://github.com/Workiva/over_react/compare/1.7.0...1.8.0)
+
+* Fix strong mode warning #54
+* Fix issue with `AbstractTransitionComponent` causing components to hang when the `transitionend` event never fires. #55
+
 ## 1.7.0
 
 > [Complete `1.7.0` Changeset](https://github.com/Workiva/over_react/compare/1.6.0...1.7.0)

lib/src/component/abstract_transition.dart

@@ -123,6 +123,9 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps, S
   /// Whether the Element returned by [getTransitionDomNode] will have a transition event.
   bool get hasTransition => true;
 
+  /// The duration that can elapse before a transition timeout occurs.
+  Duration get transitionTimeout => const Duration(seconds: 1);
+
   // --------------------------------------------------------------------------
   // Private Utility Methods
   // --------------------------------------------------------------------------
@@ -184,7 +187,16 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps, S
       skipCount = 0;
     }
 
+    var timer = new Timer(transitionTimeout, () {
+      assert(ValidationUtil.warn(
+        'The number of transitions expected to complete have not completed. Something is most likely wrong.'
+      ));
+
+      complete();
+    });
+
     _endTransitionSubscription = getTransitionDomNode()?.onTransitionEnd?.skip(skipCount)?.take(1)?.listen((_) {
+      timer.cancel();
       complete();
     });
   }

pubspec.yaml

@@ -1,5 +1,5 @@
 name: over_react
-version: 1.7.0
+version: 1.8.0
 description: A library for building statically-typed React UI components using Dart.
 homepage: https://github.com/Workiva/over_react/
 authors:

test/over_react/component/abstract_transition_test.dart

@@ -413,6 +413,33 @@ main() {
         });
       }, testOn: '!js');
     });
+
+    test('times out after the duration specified in timeoutDuration has elapsed', () async {
+      startRecordingValidationWarnings();
+
+      var renderedInstance = render(Transitioner()
+        ..transitionCount = 1
+        ..transitionTimeout = const Duration(seconds: 0)
+      );
+
+      TransitionerComponent transitioner = getDartComponent(renderedInstance);
+
+      expect(transitioner.state.transitionPhase, TransitionPhase.SHOWN);
+
+      transitioner.hide();
+
+      expect(transitioner.state.transitionPhase, TransitionPhase.HIDING);
+
+      await new Future.delayed(Duration.ZERO);
+
+      expect(transitioner.state.transitionPhase, TransitionPhase.HIDDEN);
+
+      verifyValidationWarning(
+        'The number of transitions expected to complete have not completed. Something is most likely wrong.'
+      );
+
+      stopRecordingValidationWarnings();
+    });
   });
 }
 
@@ -432,6 +459,8 @@ class TransitionerProps extends AbstractTransitionProps {
 
   bool hasTransition;
   bool initiallyShown;
+
+  Duration transitionTimeout;
 }
 
 @State()
@@ -444,6 +473,7 @@ class TransitionerComponent extends AbstractTransitionComponent<TransitionerProp
     ..addProps(super.getDefaultProps())
     ..hasTransition = true
     ..initiallyShown = true
+    ..transitionTimeout = const Duration(seconds: 1)
   );
 
 
@@ -456,6 +486,9 @@ class TransitionerComponent extends AbstractTransitionComponent<TransitionerProp
   @override
   bool get hasTransition => props.hasTransition;
 
+  @override
+  Duration get transitionTimeout => props.transitionTimeout;
+
   @override
   render() {
     return Dom.div()();