open-consul/ui-v2/app/components/form-component/index.js
John Cowen 6126f24acd
ui: Remove with-listeners mixin (#8142)
This mixin was a very thin mixin over the top of our listeners utility,
and we have been gradually preferring using the utility straight rather
than using the mixin. This commit removes the last places where we still
used the mixin, and also potentially the last few places where we
continued to use the old API for our listeners utility.
2020-06-18 14:54:31 +01:00

50 lines
1.6 KiB
JavaScript

import Component from '@ember/component';
import Slotted from 'block-slots';
import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';
// match anything that isn't a [ or ] into multiple groups
const propRe = /([^[\]])+/g;
export default Component.extend(Slotted, {
tagName: '',
onreset: function() {},
onchange: function() {},
onerror: function() {},
onsuccess: function() {},
data: alias('form.data'),
item: alias('form.data'),
// TODO: Could probably alias item
// or just use data/value instead
dom: service('dom'),
container: service('form'),
actions: {
change: function(e, value, item) {
let event = this.dom.normalizeEvent(e, value);
// currently form-components don't deal with deeply nested forms, only top level
// we therefore grab the end of the nest off here,
// so role[policy][Rules] will end up as policy[Rules]
// but also policy[Rules] will end up as Rules
// for now we look for a [ so we know whether this component is deeply
// nested or not and we pass the name through as an optional argument to handleEvent
// once this component handles deeply nested forms this can go
const matches = [...event.target.name.matchAll(propRe)];
const prop = matches[matches.length - 1][0];
let name;
if (prop.indexOf('[') === -1) {
name = `${this.type}[${prop}]`;
} else {
name = prop;
}
const form = this.form;
try {
form.handleEvent(event, name);
this.onchange({ target: this });
} catch (err) {
throw err;
}
},
},
});