62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import { scheduleOnce } from "@ember/runloop";
|
|
import { setOwner, getOwner } from "@ember/application";
|
|
|
|
export default class ComponentConnector {
|
|
constructor(widget, componentName, opts, trackedProperties) {
|
|
this.widget = widget;
|
|
this.opts = opts;
|
|
this.componentName = componentName;
|
|
this.trackedProperties = trackedProperties || [];
|
|
}
|
|
|
|
init() {
|
|
const elem = document.createElement("div");
|
|
elem.style.display = "inline-flex";
|
|
elem.className = "widget-component-connector";
|
|
this.elem = elem;
|
|
scheduleOnce("afterRender", this, this.connectComponent);
|
|
|
|
return this.elem;
|
|
}
|
|
|
|
update(prev) {
|
|
// mutated external properties might not correctly update the underlying component
|
|
// in this case we can define trackedProperties, if different from previous
|
|
// state we will re-init the whole component, be careful when using this
|
|
// to not track a property which would be updated too often (on scroll for example)
|
|
let shouldInit = false;
|
|
this.trackedProperties.forEach(prop => {
|
|
if (prev.opts[prop] !== this.opts[prop]) {
|
|
shouldInit = true;
|
|
}
|
|
});
|
|
|
|
if (shouldInit) return this.init();
|
|
|
|
return null;
|
|
}
|
|
|
|
connectComponent() {
|
|
const { elem, opts, widget, componentName } = this;
|
|
|
|
const mounted = widget._findView();
|
|
const view = widget.register
|
|
.lookupFactory(`component:${componentName}`)
|
|
.create(opts);
|
|
|
|
if (setOwner) {
|
|
setOwner(view, getOwner(mounted));
|
|
}
|
|
|
|
// component connector is not triggering didReceiveAttrs
|
|
// we force it for selectKit components
|
|
if (view.selectKit) {
|
|
view.didReceiveAttrs();
|
|
}
|
|
mounted._connected.push(view);
|
|
view.renderer.appendTo(view, elem);
|
|
}
|
|
}
|
|
|
|
ComponentConnector.prototype.type = "Widget";
|