fix: remove usage of action helper in most places

knownasilya · Sep 12, 2020 · 2d8cefb · 2d8cefb
1 parent f9afc1d
commit 2d8cefb
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Here's the official [demo] using this component.
 ```hbs
 <XToggle
   @value={{this.myValue}}
-  @onToggle={{action (mut this.myValue)}}
+  @onToggle={{fn (mut this.myValue)}}
 />
 ```
 
@@ -49,7 +49,7 @@ Check the [demo] for interactive examples.
 <XToggle
   @theme='ios'
   @value={{this.toggled}}
-  @onToggle={{action (mut this.toggled)}}
+  @onToggle={{fn (mut this.toggled)}}
 />
 ```
 
@@ -76,7 +76,7 @@ You can customize labels (The text the user sees for the two states) and their a
   @offLabel='Disabled'
   @showLabels={{true}}
   @value={{this.myValue}}
-  @onToggle={{action (mut this.myValue)}}
+  @onToggle={{fn (mut this.myValue)}}
 />
 ```
 
@@ -141,7 +141,7 @@ The `x-toggle` component also provides a composable component API.
 <XToggle
   @showLabels={{true}}
   @value={{this.value}}
-  @onToggle={{action (mut this.value)}}
+  @onToggle={{fn (mut this.value)}}
 as |toggle|>
   <toggle.offLabel/>
   <toggle.switch/>
@@ -160,7 +160,7 @@ This format allows greater flexibility with labels, like the single label use-ca
 <XToggle
   @showLabels={{true}}
   @value={{this.value}}
-  @onToggle={{action (mut this.value)}}
+  @onToggle={{fn (mut this.value)}}
   as |toggle|
 >
   <toggle.label @value={{not this.value}}>

diff --git a/addon/components/x-toggle-label/template.hbs b/addon/components/x-toggle-label/template.hbs
@@ -2,7 +2,7 @@
   <label
     for={{this.for}}
     class='toggle-text toggle-prefix {{this.labelType}}'
-    onclick={{action 'clickLabel'}}
+    {{on 'click' (action 'clickLabel')}}
     ...attributes
   > 
     {{#if hasBlock}}

diff --git a/addon/components/x-toggle-switch/template.hbs b/addon/components/x-toggle-switch/template.hbs
@@ -5,7 +5,7 @@
   disabled={{this.disabled}}
   id={{this.forId}}
   name={{this.name}}
-  onchange={{action this.sendToggle value='target.checked'}}
+  {{on 'change' (action this.sendToggle value='target.checked')}}
 >
 
 <label for={{this.effectiveForId}}>

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -6,27 +6,27 @@
   <tbody>
 
     <tr>
-      <td><XToggle @name={{1}} @theme="default" @value={{v1}} @onToggle={{action (mut v1)}} /></td>
+      <td><XToggle @name={{1}} @theme="default" @value={{v1}} @onToggle={{fn (mut v1)}} /></td>
       <td>default</td>
-      <td><XToggle @name={{2}} @theme="light" @value={{v2}} @onToggle={{action (mut v2)}} /></td>
+      <td><XToggle @name={{2}} @theme="light" @value={{v2}} @onToggle={{fn (mut v2)}} /></td>
       <td>light</td>
     </tr>
     <tr>
       <td>
-        <XToggle @name={{3}} @theme="ios" @value={{v3}} @onToggle={{action (mut v3)}} />
+        <XToggle @name={{3}} @theme="ios" @value={{v3}} @onToggle={{fn (mut v3)}} />
       </td>
       <td>ios</td>
-      <td><XToggle @name={{4}} @theme="flat" @value={{v4}} @onToggle={{action (mut v4)}} /></td>
+      <td><XToggle @name={{4}} @theme="flat" @value={{v4}} @onToggle={{fn (mut v4)}} /></td>
       <td>flat</td>
     </tr>
     <tr>
-      <td><XToggle @name={{5}} @theme="flip" @offLabel="Nope" @onLabel="Yep" @value={{v5}} @onToggle={{action (mut v5)}} /></td>
+      <td><XToggle @name={{5}} @theme="flip" @offLabel="Nope" @onLabel="Yep" @value={{v5}} @onToggle={{fn (mut v5)}} /></td>
       <td>flip</td>
-      <td><XToggle @name={{6}} @theme="skewed" @value={{v6}} @onToggle={{action (mut v6)}} /></td>
+      <td><XToggle @name={{6}} @theme="skewed" @value={{v6}} @onToggle={{fn (mut v6)}} /></td>
       <td>skewed</td>
     </tr>
     <tr>
-      <td><XToggle @name={{7}} @theme="material" @value={{v8}} @onToggle={{action (mut v8)}} /></td>
+      <td><XToggle @name={{7}} @theme="material" @value={{v8}} @onToggle={{fn (mut v8)}} /></td>
       <td>material</td>
     </tr>
   </tbody>
@@ -47,79 +47,79 @@
 
     <tr>
       <td>
-        <XToggle @size="small" @value={{v7}} @onToggle={{action (mut v7)}} />
+        <XToggle @size="small" @value={{v7}} @onToggle={{fn (mut v7)}} />
       </td>
       <td>
-        <XToggle @size="medium" @value={{v7}} @onToggle={{action (mut v7)}} />
+        <XToggle @size="medium" @value={{v7}} @onToggle={{fn (mut v7)}} />
       </td>
       <td>
-        <XToggle @size="large" @value={{v7}} @onToggle={{action (mut v7)}} />
+        <XToggle @size="large" @value={{v7}} @onToggle={{fn (mut v7)}} />
       </td>
     </tr>
     <tr>
       <td>
-        <XToggle @size="small" @theme="light" @value={{v10}} @onToggle={{action (mut v10)}} />
+        <XToggle @size="small" @theme="light" @value={{v10}} @onToggle={{fn (mut v10)}} />
       </td>
       <td>
-        <XToggle @size="medium" @theme="light" @value={{v10}} @onToggle={{action (mut v10)}} />
+        <XToggle @size="medium" @theme="light" @value={{v10}} @onToggle={{fn (mut v10)}} />
       </td>
       <td>
-        <XToggle @size="large" @theme="light" @value={{v10}} @onToggle={{action (mut v10)}} />
+        <XToggle @size="large" @theme="light" @value={{v10}} @onToggle={{fn (mut v10)}} />
       </td>
     </tr>
     <tr>
       <td>
-        <XToggle @size="small" @theme="ios" @value={{v13}} @onToggle={{action (mut v13)}} />
+        <XToggle @size="small" @theme="ios" @value={{v13}} @onToggle={{fn (mut v13)}} />
       </td>
       <td>
-        <XToggle @size="medium" @theme="ios" @value={{v13}} @onToggle={{action (mut v13)}} />
+        <XToggle @size="medium" @theme="ios" @value={{v13}} @onToggle={{fn (mut v13)}} />
       </td>
       <td>
-        <XToggle @size="large" @theme="ios" @value={{v13}} @onToggle={{action (mut v13)}} />
+        <XToggle @size="large" @theme="ios" @value={{v13}} @onToggle={{fn (mut v13)}} />
       </td>
     </tr>
     <tr>
       <td>
-        <XToggle @size="small" @theme="flat" @value={{v16}} @onToggle={{action (mut v16)}} />
+        <XToggle @size="small" @theme="flat" @value={{v16}} @onToggle={{fn (mut v16)}} />
       </td>
       <td>
-        <XToggle @size="medium" @theme="flat" @value={{v16}} @onToggle={{action (mut v16)}} />
+        <XToggle @size="medium" @theme="flat" @value={{v16}} @onToggle={{fn (mut v16)}} />
       </td>
       <td>
-        <XToggle @size="large" @theme="flat" @value={{v16}} @onToggle={{action (mut v16)}} />
+        <XToggle @size="large" @theme="flat" @value={{v16}} @onToggle={{fn (mut v16)}} />
       </td>
     </tr>
     <tr>
       <td>
-        <XToggle @size="small" @theme="flip" @value={{v19}} @onToggle={{action (mut v19)}} />
+        <XToggle @size="small" @theme="flip" @value={{v19}} @onToggle={{fn (mut v19)}} />
       </td>
       <td>
-        <XToggle @size="medium" @theme="flip" @value={{v19}} @onToggle={{action (mut v19)}} />
+        <XToggle @size="medium" @theme="flip" @value={{v19}} @onToggle={{fn (mut v19)}} />
       </td>
       <td>
-        <XToggle @size="large" @theme="flip" @value={{v19}} @onToggle={{action (mut v19)}} />
+        <XToggle @size="large" @theme="flip" @value={{v19}} @onToggle={{fn (mut v19)}} />
       </td>
     </tr>
     <tr>
       <td>
-        <XToggle @size="small" @theme="skewed" @value={{v20}} @onToggle={{action (mut v20)}} />
+        <XToggle @size="small" @theme="skewed" @value={{v20}} @onToggle={{fn (mut v20)}} />
       </td>
       <td>
-        <XToggle @size="medium" @theme="skewed" @value={{v20}} @onToggle={{action (mut v20)}} />
+        <XToggle @size="medium" @theme="skewed" @value={{v20}} @onToggle={{fn (mut v20)}} />
       </td>
       <td>
-        <XToggle @size="large" @theme="skewed" @value={{v20}} @onToggle={{action (mut v20)}} />
+        <XToggle @size="large" @theme="skewed" @value={{v20}} @onToggle={{fn (mut v20)}} />
       </td>
     </tr>
     <tr>
       <td>
-        <XToggle @size="small" @theme="material" @value={{v21}} @onToggle={{action (mut v21)}} />
+        <XToggle @size="small" @theme="material" @value={{v21}} @onToggle={{fn (mut v21)}} />
       </td>
       <td>
-        <XToggle @size="medium" @theme="material" @value={{v21}} @onToggle={{action (mut v21)}} />
+        <XToggle @size="medium" @theme="material" @value={{v21}} @onToggle={{fn (mut v21)}} />
       </td>
       <td>
-        <XToggle @size="large" @theme="material" @value={{v21}} @onToggle={{action (mut v21)}} />
+        <XToggle @size="large" @theme="material" @value={{v21}} @onToggle={{fn (mut v21)}} />
       </td>
     </tr>
   </tbody>
@@ -132,7 +132,7 @@
   <tbody>
     <tr>
       <td>
-        <XToggle @showLabels={{true}} @offLabel="hey" @onLabel="ho" @value={{lv1}} @onToggle={{action (mut lv1)}} />
+        <XToggle @showLabels={{true}} @offLabel="hey" @onLabel="ho" @value={{lv1}} @onToggle={{fn (mut lv1)}} />
       </td>
       <td><pre><code>\{{x-toggle
     showLabels=true
@@ -153,7 +153,7 @@
       <tr>
         <td>
           <div class='default-theme'>
-            <XToggle @offLabel="Hey" @onLabel="Ho" @showLabels={{true}} @value={{actionBound}} @onToggle={{action (mut actionBound)}} />
+            <XToggle @offLabel="Hey" @onLabel="Ho" @showLabels={{true}} @value={{actionBound}} @onToggle={{fn (mut actionBound)}} />
           </div>
         </td>
 
@@ -189,7 +189,7 @@
 \{{/x-toggle}}
 </pre>
 <span class='flexy'>
-  <XToggle @value={{value}} @showLabels={{true}} @onToggle={{action (mut value)}} as |toggle|>
+  <XToggle @value={{value}} @showLabels={{true}} @onToggle={{fn (mut value)}} as |toggle|>
     <toggle.offLabel as |label|>
       <b>{{label}}</b>
     </toggle.offLabel>
@@ -213,7 +213,7 @@
 \{{/x-toggle}}
 </pre>
 <span class='flexy'>
-  <XToggle @value={{value}} @showLabels={{true}} @onToggle={{action (mut value)}} as |toggle|>
+  <XToggle @value={{value}} @showLabels={{true}} @onToggle={{fn (mut value)}} as |toggle|>
     <toggle.label @value={{not value}}>
       <b>turn {{if value 'off' 'on'}}</b>
     </toggle.label>

diff --git a/tests/integration/components/x-toggle/component-test.js b/tests/integration/components/x-toggle/component-test.js
@@ -41,15 +41,15 @@ module('Integration | Component | x toggle', function (hooks) {
   test('clicking component triggers onToggle action', async function (assert) {
     this.setProperties({
       myValue: false,
-      onToggle(val) {
+      onToggle: (val) => {
         this.set('myValue', val);
       },
     });
 
     await render(hbs`
       <XToggle
         @value={{this.myValue}}
-        @onToggle={{action this.onToggle}}
+        @onToggle={{this.onToggle}}
       />
     `);
 
@@ -62,7 +62,7 @@ module('Integration | Component | x toggle', function (hooks) {
 
     this.setProperties({
       value: false,
-      onToggle(val) {
+      onToggle: (val) => {
         assert.equal(val, onTrue, 'new value set');
         onTrue = false;
         this.set('value', val);
@@ -73,7 +73,7 @@ module('Integration | Component | x toggle', function (hooks) {
       <XToggle
         @value={{this.value}}
         @showLabels={{true}}
-        @onToggle={{action this.onToggle}}
+        @onToggle={{this.onToggle}}
       />
     `);
 
@@ -99,7 +99,7 @@ module('Integration | Component | x toggle', function (hooks) {
     this.setProperties({
       value: false,
       disabled: true,
-      onToggle(val) {
+      onToggle: (val) => {
         this.set('value', val);
       },
     });
@@ -109,7 +109,7 @@ module('Integration | Component | x toggle', function (hooks) {
         @showLabels={{true}}
         @disabled={{this.disabled}}
         @value={{this.value}}
-        @onToggle={{action this.onToggle}}
+        @onToggle={{this.onToggle}}
       />
     `);
 
@@ -138,7 +138,7 @@ module('Integration | Component | x toggle', function (hooks) {
           @onLabel='Bar'
           @showLabels={{true}}
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         />
       `);
 
@@ -158,7 +158,7 @@ module('Integration | Component | x toggle', function (hooks) {
           @onLabel={{true}}
           @offLabel={{false}}
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         />
       `);
 
@@ -176,7 +176,7 @@ module('Integration | Component | x toggle', function (hooks) {
           @onLabel='Yes'
           @offLabel='No'
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         />
       `);
 
@@ -195,7 +195,7 @@ module('Integration | Component | x toggle', function (hooks) {
       await render(hbs`
         <XToggle
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         />
       `);
 
@@ -218,7 +218,7 @@ module('Integration | Component | x toggle', function (hooks) {
         <XToggle
           @showLabels={{true}}
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         as |toggle|>
           <toggle.offLabel/>
           <toggle.onLabel/>
@@ -240,7 +240,7 @@ module('Integration | Component | x toggle', function (hooks) {
         timesCalled: 0,
         value: false,
         show: false,
-        onToggle(value) {
+        onToggle: (value) => {
           const timesCalled = this.timesCalled + 1;
           this.set('timesCalled', timesCalled);
           this.set('value', value);
@@ -251,7 +251,7 @@ module('Integration | Component | x toggle', function (hooks) {
         <XToggle
           @showLabels={{true}}
           @value={{this.value}}
-          @onToggle={{action this.onToggle}}
+          @onToggle={{this.onToggle}}
         as |toggle|>
           <toggle.offLabel/>
           <toggle.onLabel/>
@@ -278,7 +278,7 @@ module('Integration | Component | x toggle', function (hooks) {
       await render(hbs`
         <XToggle
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         />
       `);
 
@@ -298,7 +298,7 @@ module('Integration | Component | x toggle', function (hooks) {
         <XToggle
           @disabled={{true}}
           @value={{this.value}}
-          @onToggle={{action (mut this.value)}}
+          @onToggle={{fn (mut this.value)}}
         />
       `);
 
@@ -317,7 +317,7 @@ module('Integration | Component | x toggle', function (hooks) {
       await render(hbs`
         <XToggle
           @value={{this.value}}
-          @onToggle={{action this.toggleAction}}
+          @onToggle={{this.toggleAction}}
         />
       `);
       await click('div.x-toggle-btn');
@@ -335,7 +335,7 @@ module('Integration | Component | x toggle', function (hooks) {
       await render(hbs`
         <XToggle
           @value={{this.value}}
-          @onToggle={{action this.toggleAction}}
+          @onToggle={{this.toggleAction}}
         />
       `);