Enable and Disable Inputs Controllers - Allow clearing of targeted in…

…puts when they become disabled
Sub-Xaero · Jan 23, 2021 · 0fe3114 · 0fe3114
1 parent 8dfa8b3
commit 0fe3114
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 12 deletions.
diff --git a/dist/disable_inputs_controller.d.ts b/dist/disable_inputs_controller.d.ts
@@ -1,9 +1,14 @@
 import { BaseController } from "./base_controller";
 export declare class DisableInputsController extends BaseController {
     static targets: string[];
+    static values: {
+        clear: BooleanConstructor;
+    };
     readonly hasDisablerTarget: boolean;
     readonly disablerTarget: HTMLInputElement;
     readonly disableTargets: Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    readonly clearValue: boolean;
+    readonly hasClearValue: boolean;
     connect(): void;
     toggle(): void;
     disableInputs(): void;

diff --git a/dist/disable_inputs_controller.d.ts.map b/dist/disable_inputs_controller.d.ts.map
diff --git a/dist/enable_inputs_controller.d.ts b/dist/enable_inputs_controller.d.ts
@@ -1,9 +1,14 @@
 import { BaseController } from "./base_controller";
 export declare class EnableInputsController extends BaseController {
     static targets: string[];
+    static values: {
+        clear: BooleanConstructor;
+    };
     readonly hasEnablerTarget: boolean;
     readonly enablerTarget: HTMLInputElement;
     readonly enableTargets: Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    readonly clearValue: boolean;
+    readonly hasClearValue: boolean;
     connect(): void;
     toggle(): void;
     disableInputs(): void;

diff --git a/dist/enable_inputs_controller.d.ts.map b/dist/enable_inputs_controller.d.ts.map
diff --git a/dist/stimulus-library.js b/dist/stimulus-library.js
diff --git a/dist/stimulus-library.js.map b/dist/stimulus-library.js.map
diff --git a/dist/stimulus-library.modern.js b/dist/stimulus-library.modern.js
diff --git a/dist/stimulus-library.modern.js.map b/dist/stimulus-library.modern.js.map
diff --git a/dist/stimulus-library.module.js b/dist/stimulus-library.module.js
diff --git a/dist/stimulus-library.module.js.map b/dist/stimulus-library.module.js.map
diff --git a/dist/stimulus-library.umd.js b/dist/stimulus-library.umd.js
diff --git a/dist/stimulus-library.umd.js.map b/dist/stimulus-library.umd.js.map
diff --git a/docs/controllers/disable_inputs_controller.md b/docs/controllers/disable_inputs_controller.md
@@ -28,7 +28,9 @@ Disable other inputs if a checkbox is ticked.
 
 #### [Values](https://stimulus.hotwire.dev/reference/values)
 
-[no-values](../_partials/no-values.md ':include')
+| Value | Type | Purpose | Default |
+| --- | --- | --- | --- |
+| `clear` | Boolean | Whether the controller should clear the targeted inputs when they become disabled | false |
 
 ## ** Events **
 
@@ -47,9 +49,13 @@ None
 Example - when creating an event that can have the `end_time` turned off with a boolean:
 
 <!-- tabs:start -->
+
 ## ** HTML **
+
 [example](../examples/disable_inputs_controller.html ':include :type=code')
+
 ## ** HAML **
+
 [example](../examples/disable_inputs_controller.haml ':include :type=code')
 <!-- tabs:end -->
 

diff --git a/docs/controllers/enable_inputs_controller.md b/docs/controllers/enable_inputs_controller.md
@@ -28,7 +28,9 @@ Enable other inputs if a checkbox is ticked.
 
 #### [Values](https://stimulus.hotwire.dev/reference/values)
 
-[no-values](../_partials/no-values.md ':include')
+| Value | Type | Purpose | Default |
+| --- | --- | --- | --- |
+| `clear` | Boolean | Whether the controller should clear the targeted inputs when they become disabled | false |
 
 ## ** Events **
 
@@ -47,9 +49,13 @@ None
 Example - preventing inputs until T&Cs are checked
 
 <!-- tabs:start -->
+
 ## ** HTML **
+
 [example](../examples/enable_inputs_controller.html ':include :type=code')
+
 ## ** HAML **
+
 [example](../examples/enable_inputs_controller.haml ':include :type=code')
 <!-- tabs:end -->
 

diff --git a/src/disable_inputs_controller.ts b/src/disable_inputs_controller.ts
@@ -4,9 +4,15 @@ export class DisableInputsController extends BaseController {
 
   static targets = ["disabler", "disable"];
 
+  static values = {
+    clear: Boolean,
+  };
+
   declare readonly hasDisablerTarget: boolean;
   declare readonly disablerTarget: HTMLInputElement;
   declare readonly disableTargets: Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+  declare readonly clearValue: boolean;
+  declare readonly hasClearValue: boolean;
 
   connect() {
     this.toggle();
@@ -21,7 +27,11 @@ export class DisableInputsController extends BaseController {
   }
 
   disableInputs() {
+    let shouldClear = this.hasClearValue && this.clearValue;
     this.disableTargets.forEach((el, _) => {
+      if (shouldClear) {
+        el.value = "";
+      }
       el.disabled = true;
     });
   }

diff --git a/src/enable_inputs_controller.ts b/src/enable_inputs_controller.ts
@@ -4,9 +4,15 @@ export class EnableInputsController extends BaseController {
 
   static targets = ["enabler", "enable"];
 
+  static values = {
+    clear: Boolean,
+  };
+
   declare readonly hasEnablerTarget: boolean;
   declare readonly enablerTarget: HTMLInputElement;
   declare readonly enableTargets: Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+  declare readonly clearValue: boolean;
+  declare readonly hasClearValue: boolean;
 
   connect() {
     this.toggle();
@@ -21,7 +27,11 @@ export class EnableInputsController extends BaseController {
   }
 
   disableInputs() {
+    let shouldClear = this.hasClearValue && this.clearValue;
     this.enableTargets.forEach((el, _) => {
+      if (shouldClear) {
+        el.value = "";
+      }
       el.disabled = true;
     });
   }