Add ability to disable button without loader (#326)

baoagency · Oct 10, 2023 · 45a8f9d · 45a8f9d
1 parent fa1949a
commit 45a8f9d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
@@ -307,6 +307,14 @@ class Button extends Controller {
       this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML);
     }
   }
+  disableWithoutLoader(event) {
+    if (this.button.disabled) {
+      event.preventDefault();
+    } else {
+      this.button.disabled = true;
+      this.button.classList.add("Polaris-Button--disabled");
+    }
+  }
   enable() {
     if (this.button.disabled) {
       this.button.disabled = false;
@@ -873,6 +881,9 @@ class Polaris extends Controller {
   disableButton() {
     this.findElement("button").disable();
   }
+  disableButtonWithoutLoader() {
+    this.findElement("button").disableWithoutLoader();
+  }
   enableButton() {
     this.findElement("button").enable();
   }

diff --git a/app/assets/javascripts/polaris_view_components/button_controller.js b/app/assets/javascripts/polaris_view_components/button_controller.js
@@ -11,6 +11,15 @@ export default class extends Controller {
     }
   }
 
+  disableWithoutLoader(event) {
+    if (this.button.disabled) {
+      event.preventDefault()
+    } else {
+      this.button.disabled = true
+      this.button.classList.add("Polaris-Button--disabled")
+    }
+  }
+
   enable() {
     if (this.button.disabled) {
       this.button.disabled = false

diff --git a/app/assets/javascripts/polaris_view_components/polaris_controller.js b/app/assets/javascripts/polaris_view_components/polaris_controller.js
@@ -9,6 +9,10 @@ export default class extends Controller {
     this.findElement("button").disable()
   }
 
+  disableButtonWithoutLoader() {
+    this.findElement("button").disableWithoutLoader()
+  }
+
   enableButton() {
     this.findElement("button").enable()
   }

diff --git a/demo/app/previews/button_component_preview/disable_with_actions.html.erb b/demo/app/previews/button_component_preview/disable_with_actions.html.erb
@@ -11,6 +11,14 @@
         action: "polaris#disableButton"
       }
     ) { "Disable" } %> |
+    <%= polaris_button(
+      plain: true,
+      data: {
+        controller: "polaris",
+        target: "#demo-button",
+        action: "polaris#disableButtonWithoutLoader"
+      }
+    ) { "Disable without loader" } %> |
     <%= polaris_button(
       plain: true,
       data: {