fix(ui5-toast): infinite loop prevented (#1320)

Author: vladitasev

packages/main/src/Toast.js

@@ -8,9 +8,9 @@ import ToastPlacement from "./types/ToastPlacement.js";
 // Styles
 import ToastCss from "./generated/themes/Toast.css.js";
 
-// Static Constants
-const MAXIMUM_ALLOWED_TRANSITION_DURATION_IN_MILLISECONDS = 1000;
-const MINIMUM_ALLOWED_DURATION_IN_MILLISECONDS = 500;
+// Constants
+const MIN_DURATION = 500;
+const MAX_DURATION = 1000;
 
 /**
  * @public
@@ -147,22 +147,6 @@ class Toast extends UI5Element {
 		return ToastTemplate;
 	}
 
-	static get maximumAllowedTransition() {
-		return MAXIMUM_ALLOWED_TRANSITION_DURATION_IN_MILLISECONDS;
-	}
-
-	static get minimumAllowedDuration() {
-		return MINIMUM_ALLOWED_DURATION_IN_MILLISECONDS;
-	}
-
-	onBeforeRendering() {
-		// If the minimum duration is lower than 500ms, we force
-		// it to be 500ms, as described in the documentation.
-		if (this.duration < Toast.minimumAllowedDuration) {
-			this.duration = Toast.minimumAllowedDuration;
-		}
-	}
-
 	onAfterRendering() {
 		if (this._reopen) {
 			this._reopen = false;
@@ -187,22 +171,32 @@ class Toast extends UI5Element {
 		}
 	}
 
+	/**
+	 * If the minimum duration is lower than 500ms, we force
+	 * it to be 500ms, as described in the documentation.
+	 * @private
+	 * @returns {*}
+	 */
+	get effectiveDuration() {
+		return this.duration < MIN_DURATION ? MIN_DURATION : this.duration;
+	}
+
 	get rtl() {
 		return getRTL() ? "rtl" : undefined;
 	}
 
 	get styles() {
 		// Transition duration (animation) should be a third of the duration
 		// property, but not bigger than the maximum allowed (1000ms).
-		const transitionDuration = Math.min(this.duration / 3, Toast.maximumAllowedTransition);
+		const transitionDuration = Math.min(this.effectiveDuration / 3, MAX_DURATION);
 
 		return {
 			root: {
 				"transition-duration": this.open ? `${transitionDuration}ms` : "",
 
 				// Transition delay is the duration property minus the
 				// transition duration (animation).
-				"transition-delay": this.open ? `${this.duration - transitionDuration}ms` : "",
+				"transition-delay": this.open ? `${this.effectiveDuration - transitionDuration}ms` : "",
 
 				// We alter the opacity property, in order to trigger transition
 				"opacity": this.open && !this.hover ? "0" : "",

packages/main/test/specs/Toast.spec.js

@@ -114,7 +114,7 @@ describe("Toast general interaction", () => {
 	it("tests minimum allowed duration", () => {
 		const toast = browser.$("#wcToastTE");
 
-		assert.strictEqual(toast.getProperty("duration"), 500,
+		assert.strictEqual(toast.getProperty("effectiveDuration"), 500,
 				"Duration property is forced to be 500, when -1 is passed for duration attribute.");
 	});
 });