consul/ui-v2/app/components/state-chart/index.js

75 lines
2.0 KiB
JavaScript

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { set } from '@ember/object';
export default Component.extend({
chart: service('state'),
tagName: '',
ontransition: function(e) {},
init: function() {
this._super(...arguments);
this._actions = {};
this._guards = {};
},
didReceiveAttrs: function() {
if (typeof this.machine !== 'undefined') {
this.machine.stop();
}
if (typeof this.initial !== 'undefined') {
this.src.initial = this.initial;
}
this.machine = this.chart.interpret(this.src, {
onTransition: state => {
const e = new CustomEvent('transition', { detail: state });
this.ontransition(e);
if (!e.defaultPrevented) {
state.actions.forEach(item => {
const action = this._actions[item.type];
if (typeof action === 'function') {
this._actions[item.type](item.type, state.context, state.event);
}
});
}
set(this, 'state', state);
},
onGuard: (name, ...rest) => {
return this._guards[name](...rest);
},
});
},
didInsertElement: function() {
this._super(...arguments);
// xstate has initialState xstate/fsm has state
set(this, 'state', this.machine.initialState || this.machine.state);
// set(this, 'state', this.machine.initialState);
this.machine.start();
},
willDestroy: function() {
this._super(...arguments);
this.machine.stop();
},
addAction: function(name, value) {
this._actions[name] = value;
},
removeAction: function(name) {
delete this._actions[name];
},
addGuard: function(name, value) {
this._guards[name] = value;
},
removeGuard: function(name) {
delete this._guards[name];
},
dispatch: function(eventName, payload) {
this.machine.send(eventName, payload);
},
actions: {
dispatch: function(eventName, e) {
if (e && e.preventDefault) {
e.preventDefault();
}
this.dispatch(eventName);
},
},
});