cd382b4180
Previously we were creating a fake event and amending the name of the fake event, this meant that other `event.target` properties weren't being passed through (in this instance `checked`) this changes the approach to not use fake events, and allows you to overwrite the name that the form uses for `handleEvent`
51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
import Component from '@ember/component';
|
|
import SlotsMixin from 'block-slots';
|
|
import { inject as service } from '@ember/service';
|
|
import { get } from '@ember/object';
|
|
import { alias } from '@ember/object/computed';
|
|
import WithListeners from 'consul-ui/mixins/with-listeners';
|
|
// match anything that isn't a [ or ] into multiple groups
|
|
const propRe = /([^[\]])+/g;
|
|
export default Component.extend(WithListeners, SlotsMixin, {
|
|
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 = get(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 = `${get(this, 'type')}[${prop}]`;
|
|
} else {
|
|
name = prop;
|
|
}
|
|
const form = get(this, 'form');
|
|
try {
|
|
form.handleEvent(event, name);
|
|
this.onchange({ target: this });
|
|
} catch (err) {
|
|
throw err;
|
|
}
|
|
},
|
|
},
|
|
});
|