9f02c23e2f
* ui: update component api to accept callback fns to be fired on cancel/prompt * refact: cancel callback should fire with outside click handler not on idle * refact: rename action to be more specific
70 lines
1.6 KiB
JavaScript
70 lines
1.6 KiB
JavaScript
import Component from '@ember/component';
|
|
import { action } from '@ember/object';
|
|
import { next } from '@ember/runloop';
|
|
import { equal } from '@ember/object/computed';
|
|
import { task, waitForEvent } from 'ember-concurrency';
|
|
import RSVP from 'rsvp';
|
|
import { classNames, classNameBindings } from '@ember-decorators/component';
|
|
import classic from 'ember-classic-decorator';
|
|
|
|
@classic
|
|
@classNames('two-step-button')
|
|
@classNameBindings(
|
|
'inlineText:has-inline-text',
|
|
'fadingBackground:has-fading-background'
|
|
)
|
|
export default class TwoStepButton extends Component {
|
|
idleText = '';
|
|
cancelText = '';
|
|
confirmText = '';
|
|
confirmationMessage = '';
|
|
awaitingConfirmation = false;
|
|
disabled = false;
|
|
alignRight = false;
|
|
inlineText = false;
|
|
onConfirm() {}
|
|
onCancel() {}
|
|
onPrompt() {}
|
|
|
|
state = 'idle';
|
|
@equal('state', 'idle') isIdle;
|
|
@equal('state', 'prompt') isPendingConfirmation;
|
|
|
|
@task(function* () {
|
|
while (true) {
|
|
let ev = yield waitForEvent(document.body, 'click');
|
|
if (!this.element.contains(ev.target) && !this.awaitingConfirmation) {
|
|
if (this.onCancel) {
|
|
this.onCancel();
|
|
}
|
|
this.send('setToIdle');
|
|
}
|
|
}
|
|
})
|
|
cancelOnClickOutside;
|
|
|
|
@action
|
|
setToIdle() {
|
|
this.set('state', 'idle');
|
|
this.cancelOnClickOutside.cancelAll();
|
|
}
|
|
|
|
@action
|
|
promptForConfirmation() {
|
|
if (this.onPrompt) {
|
|
this.onPrompt();
|
|
}
|
|
this.set('state', 'prompt');
|
|
next(() => {
|
|
this.cancelOnClickOutside.perform();
|
|
});
|
|
}
|
|
|
|
@action
|
|
confirm() {
|
|
RSVP.resolve(this.onConfirm()).then(() => {
|
|
this.send('setToIdle');
|
|
});
|
|
}
|
|
}
|