Merge pull request #300 from dhis2/fix-alertbar-infinite-loop

fix(alertbar): skip init on component update
dhis2 · Sep 29, 2020 · 2a505f9 · 2a505f9
2 parents 59fea22 + a6171a4
commit 2a505f9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/packages/core/src/AlertBar/AlertBar.js b/packages/core/src/AlertBar/AlertBar.js
@@ -24,36 +24,21 @@ class AlertBar extends Component {
     // visible is used to control the show/hide animation
     // hidden is used to stop rendering entirely after hide animation
     state = {
-        visible: false,
+        visible: true,
         hidden: false,
     }
 
     componentDidMount() {
-        this.init()
-    }
-
-    componentDidUpdate(_prevProps, prevState) {
-        // Only re-init when props change, ignore state changes
-        if (
-            prevState.visible === this.state.visible &&
-            prevState.hidden === this.state.hidden
-        ) {
-            this.init()
-        }
+        this.startTime = Date.now()
+        this.timeRemaining = this.props.duration
+        this.startDisplayTimeout()
     }
 
     componentWillUnmount() {
         clearTimeout(this.displayTimeout)
         clearTimeout(this.onHiddenTimeout)
     }
 
-    init() {
-        this.startTime = Date.now()
-        this.timeRemaining = this.props.duration
-        this.startDisplayTimeout()
-        this.show()
-    }
-
     startDisplayTimeout = () => {
         if (this.shouldAutoHide()) {
             this.displayTimeout = setTimeout(() => {
@@ -82,12 +67,6 @@ class AlertBar extends Component {
         }, ANIMATION_TIME)
     }
 
-    show() {
-        requestAnimationFrame(() => {
-            this.setState({ visible: true })
-        })
-    }
-
     shouldAutoHide() {
         const { permanent, warning, critical } = this.props
         return !(permanent || warning || critical)

diff --git a/packages/core/src/AlertBar/AlertBar.styles.js b/packages/core/src/AlertBar/AlertBar.styles.js
@@ -8,28 +8,20 @@ export default css`
         display: flex;
         justify-content: space-between;
         align-items: center;
-
         border-radius: 4px;
         box-shadow: ${elevations.e300};
-
         padding-top: ${spacers.dp12};
         padding-right: ${spacers.dp16};
         padding-bottom: ${spacers.dp12};
         padding-left: ${spacers.dp24};
-
         margin-bottom: ${spacers.dp16};
-
         max-width: 600px;
-
         font-size: 14px;
-
-        transform: translateY(1000px);
-        transition: transform ${ANIMATION_TIME}ms cubic-bezier(0.4, 0, 0.6, 1);
-
         pointer-events: all;
     }
 
     /* States */
+
     div.info {
         background-color: ${colors.grey900};
         color: ${colors.white};
@@ -60,7 +52,41 @@ export default css`
     }
 
     /* Animation */
+
+    @keyframes slidein {
+        from {
+            transform: translateY(1000px);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideout {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(1000px);
+        }
+    }
+
+    /**
+     * The AlertBar starts out visible. This triggers the slidein animation.
+     * Removing the .visible class triggers the slideout animation.
+     */
+
     div.visible {
-        transform: translateY(0px);
+        animation-duration: ${ANIMATION_TIME}ms;
+        animation-name: slidein;
+        animation-fill-mode: forwards;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    }
+
+    div {
+        animation-duration: ${ANIMATION_TIME}ms;
+        animation-name: slideout;
+        animation-fill-mode: forwards;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
     }
 `