Merge pull request #916 from matuzalemsteles/issue-910

Adds a new `delayTime` option and changes the ClayToast time to 8/s | Fixes #910
liferay · May 24, 2018 · 06bd445 · 06bd445
2 parents 7d2e0b8 + 2df744f
commit 06bd445
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 53 deletions.
diff --git a/packages/clay-alert/src/ClayAlertBase.js b/packages/clay-alert/src/ClayAlertBase.js
@@ -23,34 +23,22 @@ class ClayAlertBase extends Component {
 	/**
 	 * @inheritDoc
 	 */
-	rendered() {
-		if (isServerSide()) {
-			return;
-		}
-
-		if (
-			this.autoClose &&
-			(this.type === 'stripe' || this.type === 'toast')
-		) {
-			if (this._delayTime === undefined || this._delayTime > 0) {
-				this._delayTime =
-					(this.element.querySelector('a') ? 10 : 5) * 1000;
-			}
-
-			this._resumeTimeout();
+	disposed() {
+		if (this._timer) {
+			clearTimeout(this._timer);
+			this._timer = undefined;
 		}
+		this._timeToDisappear = undefined;
+		this._startedTime = undefined;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	disposed() {
-		if (this._timer) {
-			clearTimeout(this._timer);
-			this._timer = undefined;
+	rendered(firstRender) {
+		if (firstRender && !isServerSide()) {
+			this._startTimer();
 		}
-		this._delayTime = undefined;
-		this._startDelayTime = undefined;
 	}
 
 	/**
@@ -104,7 +92,7 @@ class ClayAlertBase extends Component {
 		if (this._timer) {
 			clearTimeout(this._timer);
 			this._timer = undefined;
-			this._delayTime -= new Date() - this._startDelayTime;
+			this._timeToDisappear -= new Date() - this._startedTime;
 		}
 	}
 
@@ -113,11 +101,23 @@ class ClayAlertBase extends Component {
 	 * @private
 	 */
 	_resumeTimeout() {
-		if (this._delayTime > 0) {
-			this._startDelayTime = new Date();
+		if (this._timeToDisappear > 0) {
+			this._startedTime = new Date();
 			this._timer = setTimeout(() => {
 				this.close();
-			}, this._delayTime);
+			}, this._timeToDisappear);
+		}
+	}
+
+	/**
+	 * Sets the delayTime if passed, if it does not set the default, and starts.
+	 * @private
+	 */
+	_startTimer() {
+		if (this.autoClose) {
+			this._timeToDisappear = this.autoClose * 1000;
+
+			this._resumeTimeout();
 		}
 	}
 
@@ -148,13 +148,13 @@ ClayAlertBase.STATE = {
 		.value(true),
 
 	/**
-	 * Flag to indicate if alert should be automatically closed.
-	 * @default false
+	 * Set the duration time to auto close the alert.
+	 * @default undfined
 	 * @instance
 	 * @memberof ClayAlertBase
-	 * @type {?bool}
+	 * @type {?number}
 	 */
-	autoClose: Config.bool().value(false),
+	autoClose: Config.number(),
 
 	/**
 	 * Flag to indicate if the alert is closeable.
@@ -179,7 +179,7 @@ ClayAlertBase.STATE = {
 	 * @default undefined
 	 * @instance
 	 * @memberof ClayAlert
-	 * @type {(?string|undefined)}
+	 * @type {?(string|undefined)}
 	 */
 	elementClasses: Config.string(),
 
@@ -188,7 +188,7 @@ ClayAlertBase.STATE = {
 	 * @default undefined
 	 * @instance
 	 * @memberof ClayAlert
-	 * @type {(?string|undefined)}
+	 * @type {?(string|undefined)}
 	 */
 	id: Config.string(),
 

diff --git a/packages/clay-alert/src/ClayAlertBase.soy b/packages/clay-alert/src/ClayAlertBase.soy
@@ -9,7 +9,7 @@
 	{@param title: string}
 	{@param? _handleCloseClick: any}
 	{@param? _visible: bool}
-	{@param? autoClose: bool}
+	{@param? autoClose: any}
 	{@param? closeable: bool}
 	{@param? elementClasses: string}
 	{@param? id: string}

diff --git a/packages/clay-alert/src/ClayStripe.js b/packages/clay-alert/src/ClayStripe.js
@@ -44,13 +44,14 @@ class ClayStripe extends Component {
  */
 ClayStripe.STATE = {
 	/**
-	 * Flag to indicate if alert should be automatically closed.
+	 * Flag to `true` to indicate whether the alert should be closed
+	 * automatically with the default time.
 	 * @default false
 	 * @instance
 	 * @memberof ClayStripe
-	 * @type {?bool}
+	 * @type {?(bool|number)}
 	 */
-	autoClose: Config.bool().value(false),
+	autoClose: Config.oneOfType([Config.bool(), Config.number()]).value(false),
 
 	/**
 	 * Flag to indicate if the alert should be destroyen when close.

diff --git a/packages/clay-alert/src/ClayStripe.soy b/packages/clay-alert/src/ClayStripe.soy
@@ -8,13 +8,15 @@
 	{@param spritemap: string}
 	{@param title: string}
 	{@param? _handleHide: any}
-	{@param? autoClose: bool}
+	{@param? autoClose: bool|int}
 	{@param? elementClasses: string}
 	{@param? id: string}
 	{@param? style: string}
 
+	{let $timeToDisappear: $autoClose == true ? 5 : $autoClose == false ? null : $autoClose /}
+
 	{call ClayAlertBase.render}
-		{param autoClose: $autoClose /}
+		{param autoClose: $timeToDisappear /}
 		{param closeable: true /}
 		{param elementClasses: $elementClasses /}
 		{param events: ['hide': $_handleHide ] /}
@@ -26,4 +28,4 @@
 		{param title: $title /}
 		{param type: 'stripe' /}
 	{/call}
-{/template}
+{/template}
diff --git a/packages/clay-alert/src/ClayToast.js b/packages/clay-alert/src/ClayToast.js
@@ -44,13 +44,14 @@ class ClayToast extends Component {
  */
 ClayToast.STATE = {
 	/**
-	 * Flag to indicate if alert should be automatically closed.
+	 * Flag to `true` to indicate whether the alert should be closed
+	 * automatically with the default time.
 	 * @default false
 	 * @instance
 	 * @memberof ClayToast
-	 * @type {?bool}
+	 * @type {?(bool|number)}
 	 */
-	autoClose: Config.bool().value(false),
+	autoClose: Config.oneOfType([Config.bool(), Config.number()]).value(false),
 
 	/**
 	 * Flag to indicate if the alert should be destroyen when close.

diff --git a/packages/clay-alert/src/ClayToast.soy b/packages/clay-alert/src/ClayToast.soy
@@ -8,13 +8,15 @@
 	{@param spritemap: string}
 	{@param title: string}
 	{@param? _handleHide: any}
-	{@param? autoClose: bool}
+	{@param? autoClose: bool|int}
 	{@param? elementClasses: string}
 	{@param? id: string}
 	{@param? style: string}
 
+	{let $timeToDisappear: $autoClose == true ? 8 : $autoClose == false ? null : $autoClose /}
+
 	{call ClayAlertBase.render}
-		{param autoClose: $autoClose /}
+		{param autoClose: $timeToDisappear /}
 		{param closeable: true /}
 		{param elementClasses: $elementClasses /}
 		{param events: ['hide': $_handleHide ] /}
@@ -26,4 +28,4 @@
 		{param title: $title /}
 		{param type: 'toast' /}
 	{/call}
-{/template}
+{/template}
diff --git a/packages/clay-alert/src/__tests__/ClayStripe.js b/packages/clay-alert/src/__tests__/ClayStripe.js
@@ -113,7 +113,7 @@ describe('ClayStripe', function() {
 	});
 
 	// eslint-disable-next-line
-	it('should close automatically an stripe after 5 seconds when message has no links', function() {
+	it('should close automatically an stripe after 5 seconds', function() {
 		jest.useFakeTimers();
 
 		stripe = new ClayStripe({
@@ -131,11 +131,11 @@ describe('ClayStripe', function() {
 	});
 
 	// eslint-disable-next-line
-	it('should close automatically an stripe after 5 seconds when message has links', function() {
+	it('should close automatically an stripe after 10 seconds', function() {
 		jest.useFakeTimers();
 
 		stripe = new ClayStripe({
-			autoClose: true,
+			autoClose: 10,
 			message: 'message<a href="#">Link</a>',
 			spritemap: spritemap,
 			title: 'Success!',

diff --git a/packages/clay-alert/src/__tests__/ClayToast.js b/packages/clay-alert/src/__tests__/ClayToast.js
@@ -113,7 +113,7 @@ describe('ClayToast', function() {
 	});
 
 	// eslint-disable-next-line
-	it('should close automatically a toast after 5 seconds when message has no links', function() {
+	it('should close automatically a toast after 8 seconds', function() {
 		jest.useFakeTimers();
 
 		toast = new ClayToast({
@@ -124,25 +124,25 @@ describe('ClayToast', function() {
 		});
 
 		expect(setTimeout.mock.calls.length).toBe(1);
-		expect(setTimeout.mock.calls[0][1]).toBe(5000);
+		expect(setTimeout.mock.calls[0][1]).toBe(8000);
 
 		jest.runAllTimers();
 		expect(toast._visible).toBeFalsy();
 	});
 
 	// eslint-disable-next-line
-	it('should close automatically a toast after 5 seconds when message has links', function() {
+	it('should close automatically a toast after 12 seconds', function() {
 		jest.useFakeTimers();
 
 		toast = new ClayToast({
-			autoClose: true,
+			autoClose: 12,
 			message: 'message<a href="#">Link</a>',
 			spritemap: spritemap,
 			title: 'Success!',
 		});
 
 		expect(setTimeout.mock.calls.length).toBe(1);
-		expect(setTimeout.mock.calls[0][1]).toBe(10000);
+		expect(setTimeout.mock.calls[0][1]).toBe(12000);
 
 		jest.runAllTimers();
 		expect(toast._visible).toBeFalsy();

diff --git a/packages/clay-isomorphic/fixtures/input/ClayAlertBase.render b/packages/clay-isomorphic/fixtures/input/ClayAlertBase.render
@@ -9,5 +9,5 @@
     "message": "Clay Alert Base Message",
     "title": "Clay Alert Base Title",
     "type": "embedded",
-    "autoClose": true
+    "autoClose": 5
 }