Skip to content

Commit

Permalink
Replace deprecated template-action (#988)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmytro-krekota
dmytro-krekota authored Nov 8, 2024
1 parent 19b8845 commit 29e0a8b
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 35 deletions.
2 changes: 1 addition & 1 deletion addon/templates/components/attach-popover.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
...attributes
>
<div class={{this._class}} style={{this._style}}>
{{yield (hash hide=(action 'hide'))}}
{{yield (hash hide=this.hide)}}
{{#if this.arrow}}
<div x-arrow {{did-insert this.didInsertArrow}}></div>
{{/if}}
Expand Down
24 changes: 12 additions & 12 deletions tests/dummy/app/templates/components/attachment-example.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@hideOn={{this.tooltipData.hideOn}}
@interactive={{this.tooltipData.interactive}}
@isShown={{this.tooltipData.isShown}}
@onChange={{action (mut this.tooltipData.isShown)}}
@onChange={{fn (mut this.tooltipData.isShown)}}
@placement={{this.tooltipData.placement}}
@renderInPlace={{this.tooltipData.renderInPlace}}
@showDelay={{this.tooltipData.showDelay}}
Expand All @@ -44,7 +44,7 @@
@interactive={{this.popoverData.interactive}}
@isShown={{this.popoverData.isShown}}
@lazyRender={{this.popoverData.lazyRender}}
@onChange={{action (mut this.popoverData.isShown)}}
@onChange={{fn (mut this.popoverData.isShown)}}
@placement={{this.popoverData.placement}}
@renderInPlace={{this.popoverData.renderInPlace}}
@showDelay={{this.popoverData.showDelay}}
Expand All @@ -54,7 +54,7 @@
>
<p>Popovers and tooltips, oh my!</p>

<button {{action emberAttacher.hide}}>Close</button>
<button {{on 'click' emberAttacher.hide}}>Close</button>
</AttachPopover>
</button>
</div>
Expand All @@ -74,10 +74,10 @@
<div data-element-centered class="edit-section">
<div data-element-vbox class="fit-lm">
<div data-element-hbox class="nav-bar">
<div data-element-centered class="col-xs-12 nav{{if this.isConfiguringTooltip ' active'}}" {{action 'setIsConfiguringTooltip' true}}>
<div data-element-centered class="col-xs-12 nav{{if this.isConfiguringTooltip ' active'}}" {{on 'click' (fn this.setIsConfiguringTooltip true)}}>
<code>&lt;AttachTooltip&gt;</code>
</div>
<div data-element-centered class="col-xs-12 nav{{unless this.isConfiguringTooltip ' active'}}" {{action 'setIsConfiguringTooltip' false}}>
<div data-element-centered class="col-xs-12 nav{{unless this.isConfiguringTooltip ' active'}}" {{on 'click' (fn this.setIsConfiguringTooltip false)}}>
<code>&lt;AttachPopover&gt;</code>
</div>
</div>
Expand Down Expand Up @@ -131,7 +131,7 @@
<div data-element-hbox>
&nbsp;&nbsp;&nbsp;&nbsp;<div data-element-box class="flexi-fit horizontal-lm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div data-element-centered class="flexi-fit">
@arrow=<button class="button medium" {{action "toggleArrow"}}>{{this.service.arrow}}</button>
@arrow=<button class="button medium" {{on 'click' this.toggleArrow}}>{{this.service.arrow}}</button>
</div>
</div>
<div data-element-hbox>
Expand Down Expand Up @@ -198,7 +198,7 @@
{{/attach-tooltip}}
</span>
=
<button class="button medium" {{action "toggleInteractive"}}>
<button class="button medium" {{on 'click' this.toggleInteractive}}>
{{this.service.interactive}}
</button>
</div>
Expand All @@ -214,7 +214,7 @@
{{/attach-tooltip}}
</span>
=
<button class="button medium" {{action "toggleIsShown"}}>{{this.service.isShown}}</button>
<button class="button medium" {{on 'click' this.toggleIsShown}}>{{this.service.isShown}}</button>
</div>
</div>
<div data-element-hbox>
Expand All @@ -229,7 +229,7 @@
{{/attach-tooltip}}
</span>
=
<button class="button medium" {{action "toggleLazyRender"}}>{{this.service.lazyRender}}</button>
<button class="button medium" {{on 'click' this.toggleLazyRender}}>{{this.service.lazyRender}}</button>
</div>
</div>
<div data-element-hbox>
Expand Down Expand Up @@ -270,7 +270,7 @@
{{/attach-tooltip}}
</span>
=
<button class="button medium" {{action "toggleAutoUpdate"}}>
<button class="button medium" {{on 'click' this.toggleAutoUpdate}}>
{{this.service.autoUpdate}}
</button>
</div>
Expand All @@ -292,7 +292,7 @@
{{/attach-tooltip}}
</span>
=
<button class="button medium" {{action "toggleRenderInPlace"}}>
<button class="button medium" {{on 'click' this.toggleRenderInPlace}}>
{{this.service.renderInPlace}}
</button>
</div>
Expand Down Expand Up @@ -386,7 +386,7 @@
<div data-element-hbox>
&nbsp;&nbsp;&nbsp;&nbsp;
<div data-element-centered class="flexi-fit">
&lt;button \{{action attacher.hide}}>
&lt;button \{{on 'click' attacher.hide}}>
</div>
</div>
<div data-element-hbox>
Expand Down
4 changes: 2 additions & 2 deletions tests/integration/components/ember-attacher/hide-on-mouseleave-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ module('Integration | Component | hideOn "mouseleave"', function(hooks) {
hideOn='mouseleave'
interactive=true
isShown=this.isShown
onChange=(action (mut this.isShown)) as |attacher|}}
onChange=(fn (mut this.isShown)) as |attacher|}}
hideOn mouseleave
<button id="manual-hide" {{action attacher.hide}}>hide</button>
<button id="manual-hide" {{on 'click' attacher.hide}}>hide</button>
{{/attach-popover}}
</div>
Expand Down
33 changes: 14 additions & 19 deletions tests/integration/components/ember-attacher/is-shown-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@ import { render, click, find, settled, waitFor } from '@ember/test-helpers';
module('Integration | Component | isShown', function(hooks) {
setupRenderingTest(hooks);

hooks.beforeEach(function() {
this.actions = {};
this.send = (actionName, ...args) => this.actions[actionName].apply(this, args);
});

test('isShown works with showOn/hideOn set to "click"', async function(assert) {
assert.expect(3);

Expand Down Expand Up @@ -44,11 +39,11 @@ module('Integration | Component | isShown', function(hooks) {
test('isShown works with showOn/hideOn set to `null`', async function(assert) {
assert.expect(3);

this.actions.closePopover = () => {
this.closePopover = () => {
this.set('isShown', false);
};

this.actions.openPopover = () => {
this.openPopover = () => {
this.set('isShown', true);
};

Expand All @@ -58,7 +53,7 @@ module('Integration | Component | isShown', function(hooks) {
this.set('showOn', null);

await render(hbs`
<button id="open" {{action 'openPopover'}}>
<button id="open" {{on 'click' this.openPopover}}>
Click me, captain!
{{#attach-popover id='attachment'
Expand All @@ -67,7 +62,7 @@ module('Integration | Component | isShown', function(hooks) {
showOn=this.showOn}}
isShown w/ hideOn/ShowOn of 'none'
<button id="close" {{action 'closePopover'}}>
<button id="close" {{on 'click' this.closePopover}}>
Close
</button>
Expand All @@ -91,11 +86,11 @@ module('Integration | Component | isShown', function(hooks) {
test('isShown works with showOn/hideOn set to `null` with lazyRender', async function(assert) {
assert.expect(3);

this.actions.closePopover = () => {
this.closePopover = () => {
this.set('isShown', false);
};

this.actions.openPopover = () => {
this.openPopover = () => {
this.set('isShown', true);
};

Expand All @@ -105,7 +100,7 @@ module('Integration | Component | isShown', function(hooks) {
this.set('showOn', null);

await render(hbs`
<button id="open" {{action 'openPopover'}}>
<button id="open" {{on 'click' this.openPopover}}>
Click me, captain!
{{#attach-popover id='attachment'
Expand All @@ -115,7 +110,7 @@ module('Integration | Component | isShown', function(hooks) {
showOn=this.showOn}}
isShown w/ hideOn/ShowOn of 'none'
<button id="close" {{action 'closePopover'}}>
<button id="close" {{on 'click' this.closePopover}}>
Close
</button>
Expand All @@ -141,15 +136,15 @@ module('Integration | Component | isShown', function(hooks) {
test('nested attachers open and close as expected', async function(assert) {
assert.expect(7);

this.actions.openParentPopover = () => {
this.openParentPopover = () => {
this.set('parentIsShown', true);
};

this.actions.closeChildPopover = () => {
this.closeChildPopover = () => {
this.set('childIsShown', false);
};

this.actions.openChildPopover = () => {
this.openChildPopover = () => {
this.set('childIsShown', true);
};

Expand All @@ -162,23 +157,23 @@ module('Integration | Component | isShown', function(hooks) {
});

await render(hbs`
<button id="openParent" {{action 'openParentPopover'}}>
<button id="openParent" {{on 'click' this.openParentPopover}}>
Open parent
{{#attach-popover hideOn=this.hideOn
id='parent'
isShown=this.parentIsShown
showOn=this.showOn
interactive=true}}
<button id="openChild" {{action 'openChildPopover'}}>
<button id="openChild" {{on 'click' this.openChildPopover}}>
Open child
{{#attach-popover hideDuration=0
hideOn='none'
id='child'
isShown=this.childIsShown
showOn='none'}}
<button id="closeChild" {{action 'closeChildPopover'}}>
<button id="closeChild" {{on 'click' this.closeChildPopover}}>
Close child
</button>
{{/attach-popover}}
Expand Down
2 changes: 1 addition & 1 deletion tests/integration/components/ember-attacher/use-capture-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module('Integration | Component | useCapture "true"', function(hooks) {
assert.expect(2);

await render(hbs`
<div id="click-out-target" {{action (mut this.unusedVar) bubbles=false}}>
<div id="click-out-target" {{on 'click' (fn (mut this.unusedVar) bubbles=false)}}>
</div>
<button>
Expand Down

0 comments on commit 29e0a8b

Please sign in to comment.