Fix button icon
This commit is contained in:
parent
858145ae99
commit
e2f2cbc70f
2 changed files with 14 additions and 21 deletions
|
|
@ -19,8 +19,10 @@
|
|||
{{on "click" this.handleClick}}
|
||||
...attributes
|
||||
>
|
||||
{{#if this.icon}}
|
||||
<this.icon class="mx-1"/>
|
||||
{{#if this.isPending}}
|
||||
<MdIcon::Loading @spin={{true}} class="mx-1"/>
|
||||
{{else if @icon}}
|
||||
<@icon class="mx-1"/>
|
||||
{{/if}}
|
||||
{{#if this.text}}
|
||||
<span class="mx-1">{{this.text}}</span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { action } from '@ember/object';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import { ClockOutline, Check, AlertCircleOutline } from 'ember-mdi/icons';
|
||||
|
||||
export default class ButtonComponent extends Component {
|
||||
@tracked _state = 'default';
|
||||
|
|
@ -26,18 +25,6 @@ export default class ButtonComponent extends Component {
|
|||
return this.args.type ?? 'button';
|
||||
}
|
||||
|
||||
get icon() {
|
||||
if (this.isPending) {
|
||||
return this.args.pendingIcon ?? ClockOutline;
|
||||
} else if (this.isFulfilled) {
|
||||
return this.args.fulfilledIcon ?? Check;
|
||||
} else if (this.isRejected) {
|
||||
return this.args.rejectedIcon ?? AlertCircleOutline;
|
||||
}
|
||||
|
||||
return this.args.icon ?? null;
|
||||
}
|
||||
|
||||
get state() {
|
||||
return this.args.state ?? this._state;
|
||||
}
|
||||
|
|
@ -62,7 +49,7 @@ export default class ButtonComponent extends Component {
|
|||
}
|
||||
|
||||
get text() {
|
||||
return this.args[`${this.state}Text`] || this.args.text;
|
||||
return this.args[`${this.state}Text`] ?? this.args.text;
|
||||
}
|
||||
|
||||
@action
|
||||
|
|
@ -71,13 +58,17 @@ export default class ButtonComponent extends Component {
|
|||
return;
|
||||
}
|
||||
|
||||
this.state = 'pending';
|
||||
|
||||
try {
|
||||
await this.args.onClick(this.args.value);
|
||||
const maybePromise = this.args.onClick(this.args.value);
|
||||
|
||||
if (!this.isDestroyed) {
|
||||
this.state = 'fulfilled';
|
||||
if (typeof maybePromise?.then === 'function') {
|
||||
this.state = 'pending';
|
||||
|
||||
await maybePromise;
|
||||
|
||||
if (!this.isDestroyed) {
|
||||
this.state = 'fulfilled';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (!this.isDestroyed) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue