84 lines
1.7 KiB
JavaScript
84 lines
1.7 KiB
JavaScript
|
import Component from '@glimmer/component';
|
||
|
|
import { action } from '@ember/object';
|
||
|
|
import { tracked } from '@glimmer/tracking';
|
||
|
|
|
||
|
|
export default class ButtonComponent extends Component {
|
||
|
|
@tracked _state = 'default';
|
||
|
|
|
||
|
|
get disabled() {
|
||
|
|
if (this.args.disabled !== undefined) {
|
||
|
|
return this.args.disabled;
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.isPending;
|
||
|
|
}
|
||
|
|
|
||
|
|
get type() {
|
||
|
|
return this.args.type ?? 'button';
|
||
|
|
}
|
||
|
|
|
||
|
|
get icon() {
|
||
|
|
if (this.isPending && this.args.pendingIcon) {
|
||
|
|
return this.args.pendingIcon;
|
||
|
|
} else if (this.isFulfilled && this.args.fulfilledIcon) {
|
||
|
|
return this.args.fulfilledIcon;
|
||
|
|
} else if (this.isRejected && this.args.rejectedIcon) {
|
||
|
|
return this.args.rejectedIcon;
|
||
|
|
} else if (this.isSettled && this.args.settledIcon) {
|
||
|
|
return this.args.settledIcon;
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.args.icon ?? null;
|
||
|
|
}
|
||
|
|
|
||
|
|
get state() {
|
||
|
|
return this.args.state ?? this._state;
|
||
|
|
}
|
||
|
|
set state(state) {
|
||
|
|
this._state = state;
|
||
|
|
}
|
||
|
|
|
||
|
|
get isPending() {
|
||
|
|
return this.state === 'pending';
|
||
|
|
}
|
||
|
|
|
||
|
|
get isFulfilled() {
|
||
|
|
return this.state === 'fulfilled';
|
||
|
|
}
|
||
|
|
|
||
|
|
get isRejected() {
|
||
|
|
return this.state === 'rejected';
|
||
|
|
}
|
||
|
|
|
||
|
|
get isSettled() {
|
||
|
|
return this.isFulfilled || this.isRejected;
|
||
|
|
}
|
||
|
|
|
||
|
|
get text() {
|
||
|
|
return this.args[`${this.state}Text`] || this.args.text;
|
||
|
|
}
|
||
|
|
|
||
|
|
@action
|
||
|
|
async handleClick() {
|
||
|
|
if (typeof this.args.onClick !== 'function') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.state = 'pending';
|
||
|
|
|
||
|
|
try {
|
||
|
|
await this.args.onClick();
|
||
|
|
|
||
|
|
if (!this.isDestroyed) {
|
||
|
|
this.state = 'fulfilled';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
if (!this.isDestroyed) {
|
||
|
|
this.state = 'rejected';
|
||
|
|
}
|
||
|
|
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|