open-consul/ui/packages/consul-ui/app/components/form-component/index.js

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;
}
},
},
});