f462d7d1c2
This closes #8744 and #9826. It necessitated some customisation options for TwoStepButton. One is inlineText, which puts the confirmation text in the same line as the buttons. Also, there was a single-use configuration option named isInfoAction that I removed in favour of passing a set of class configuration options like this: @classes={{hash idleButton="is-warning" confirmationMessage="inherit-color" cancelButton="is-danger is-important" confirmButton="is-warning"}}
60 lines
1.4 KiB
JavaScript
60 lines
1.4 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')
|
|
export default class TwoStepButton extends Component {
|
|
idleText = '';
|
|
cancelText = '';
|
|
confirmText = '';
|
|
confirmationMessage = '';
|
|
awaitingConfirmation = false;
|
|
disabled = false;
|
|
alignRight = false;
|
|
inlineText = false;
|
|
onConfirm() {}
|
|
onCancel() {}
|
|
|
|
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) {
|
|
this.send('setToIdle');
|
|
}
|
|
}
|
|
})
|
|
cancelOnClickOutside;
|
|
|
|
@action
|
|
setToIdle() {
|
|
this.set('state', 'idle');
|
|
this.cancelOnClickOutside.cancelAll();
|
|
}
|
|
|
|
@action
|
|
promptForConfirmation() {
|
|
this.set('state', 'prompt');
|
|
next(() => {
|
|
this.cancelOnClickOutside.perform();
|
|
});
|
|
}
|
|
|
|
@action
|
|
confirm() {
|
|
RSVP.resolve(this.onConfirm()).then(() => {
|
|
this.send('setToIdle');
|
|
});
|
|
}
|
|
}
|