open-consul/ui-v2/app/components/feedback-dialog.js

50 lines
1.4 KiB
JavaScript

import Component from '@ember/component';
import { get, set } from '@ember/object';
import { inject as service } from '@ember/service';
import qsaFactory from 'consul-ui/utils/dom/qsa-factory';
const $$ = qsaFactory();
import SlotsMixin from 'block-slots';
const STATE_READY = 'ready';
const STATE_SUCCESS = 'success';
const STATE_ERROR = 'error';
export default Component.extend(SlotsMixin, {
wait: service('timeout'),
classNames: ['with-feedback'],
transition: '',
transitionClassName: 'feedback-dialog-out',
state: STATE_READY,
permanent: true,
init: function() {
this._super(...arguments);
this.success = this._success.bind(this);
this.error = this._error.bind(this);
},
applyTransition: function() {
const wait = get(this, 'wait').execute;
const className = get(this, 'transitionClassName');
wait(0)
.then(() => {
set(this, 'transition', className);
return wait(0);
})
.then(() => {
return new Promise(resolve => {
$$(`.${className}`, this.element)[0].addEventListener('transitionend', resolve);
});
})
.then(() => {
set(this, 'transition', '');
set(this, 'state', STATE_READY);
});
},
_success: function() {
set(this, 'state', STATE_SUCCESS);
this.applyTransition();
},
_error: function() {
set(this, 'state', STATE_ERROR);
this.applyTransition();
},
});