Merge pull request #440 from baoagency/refactor-button-disabling

Refactor button disabling with Stimulus value attribute

Author: kirillplatonov

Diff for: app/assets/javascripts/polaris_view_components.js

@@ -298,26 +298,29 @@ class Autocomplete extends Controller {
 }
 
 class Button extends Controller {
+  static values={
+    disabled: Boolean
+  };
   disable(event) {
-    if (this.button.disabled) {
+    if (this.disabledValue) {
       if (event) event.preventDefault();
     } else {
-      this.button.disabled = true;
+      this.disabledValue = true;
       this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading");
       this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML);
     }
   }
   disableWithoutLoader(event) {
-    if (this.button.disabled) {
+    if (this.disabledValue) {
       if (event) event.preventDefault();
     } else {
-      this.button.disabled = true;
+      this.disabledValue = true;
       this.button.classList.add("Polaris-Button--disabled");
     }
   }
   enable() {
-    if (this.button.disabled) {
-      this.button.disabled = false;
+    if (this.disabledValue) {
+      this.disabledValue = false;
       this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading");
       if (this.spinner) this.spinner.remove();
     }

Diff for: app/assets/javascripts/polaris_view_components/button_controller.js

@@ -1,28 +1,30 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static values = { disabled: Boolean }
+
   disable(event) {
-    if (this.button.disabled) {
+    if (this.disabledValue) {
       if (event) event.preventDefault()
     } else {
-      this.button.disabled = true
+      this.disabledValue = true
       this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
       this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
     }
   }
 
   disableWithoutLoader(event) {
-    if (this.button.disabled) {
+    if (this.disabledValue) {
       if (event) event.preventDefault()
     } else {
-      this.button.disabled = true
+      this.disabledValue = true
       this.button.classList.add("Polaris-Button--disabled")
     }
   }
 
   enable() {
-    if (this.button.disabled) {
-      this.button.disabled = false
+    if (this.disabledValue) {
+      this.disabledValue = false
       this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
       if (this.spinner) this.spinner.remove()
     }