Alert docs (#137)

* Update README.md * Use `v3`'s default values * Update README.md * remove getters. rely on Values API. Co-authored-by: Chris Oliver <[email protected]>
excid3 · Feb 2, 2022 · 0f6fed2 · 0f6fed2
1 parent 5e138ab
commit 0f6fed2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,12 @@ Alerts are set up to slide into view from the top-right side of the
 screen. Clicking on the "X" button will cause the alert to slide back
 out of view and be removed from the DOM.
 
+- `data-alert-dismiss-after-value` can be provided to make the alert dimiss after x miliseconds. Default is `undefined`.
+- `data-alert-show-delay-value` can be set to tell the alert to show itself after x miliseconds. Defaults to `200` miliseconds.
+- `data-alert-remove-delay-value` can be set to tell the alert to hide itself after x milisconds. Defaults to `1100` miliseconds.
+- `data-alert-show-class` is a set of all classes to apply on the alert when it's shown.
+- `data-alert-hide-class` is a set of all classes to apply on the alert when it's hidden.
+
 ### Dropdowns
 
 ![Dropdowns](https://d3vv6lp55qjaqc.cloudfront.net/items/3X1m1v1w2g1M3P0F2p2C/Screen%20Shot%202018-12-07%20at%201.23.52%20PM.png?X-CloudApp-Visitor-Id=bcd17e7039e393c836f30de901088b96&v=4c0ae15f)

diff --git a/src/alert.js b/src/alert.js
@@ -31,9 +31,8 @@ import { Controller } from '@hotwired/stimulus'
 export default class extends Controller {
   static values = {
     dismissAfter: Number,
-    showDelay: Number,
-    removeDelay: Number
-
+    showDelay: { type: Number, default: 200 },
+    removeDelay: { type: Number, default: 1100 }
   }
   static classes = ["show", "hide"]
 
@@ -44,7 +43,7 @@ export default class extends Controller {
   connect() {
     setTimeout(() => {
       this.show()
-    }, this.showAfter)
+    }, this.showDelayValue)
 
     // Auto dimiss if defined
     if (this.hasDismissAfterValue) {
@@ -59,7 +58,7 @@ export default class extends Controller {
 
     setTimeout(() => {
       this.element.remove()
-    }, this.removeAfter)
+    }, this.removeDelayValue)
   }
 
   show() {
@@ -71,20 +70,4 @@ export default class extends Controller {
     this.element.classList.add(...this.hideClasses)
     this.element.classList.remove(...this.showClasses)
   }
-
-  get removeAfter() {
-    if (this.hasRemoveDelayValue) {
-      return this.removeDelayValue
-    } else {
-      return 1100
-    }
-  }
-
-  get showAfter() {
-    if (this.hasShowDelayValue) {
-      return this.showDelayValue
-    } else {
-      return 200
-    }
-  }
 }