igniteui-react-core
Version:
Ignite UI React Core.
283 lines (282 loc) • 12.5 kB
JavaScript
import { __makeTemplateObject, __read, __spreadArray, __values } from "tslib";
import { Guid } from './Guid';
import { TypeRegistrar } from "./type";
var ReactTemplateAdapter = /** @class */ /*@__PURE__*/ (function () {
function ReactTemplateAdapter(renderer, portalManager, propertyName, igTemplating, createExternal) {
this._value = null;
this._initializing = new Set();
this._templateContents = new Map();
this._waiting = new Map();
this._renderer = renderer;
this._portalManager = portalManager;
this._propertyName = propertyName;
this._igTemplating = igTemplating;
this._createExternal = createExternal;
}
ReactTemplateAdapter.prototype.createMutationObserver = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var origObserver = MutationObserver;
if (window.Zone && window.Zone.__symbol__) {
origObserver = window[window.Zone.__symbol__('MutationObserver')]
|| window[window.Zone.__symbol__('WebKitMutationObserver')];
}
return new (origObserver.bind.apply(origObserver, __spreadArray([void 0], __read(args), false)))();
};
ReactTemplateAdapter.prototype.setValue = function (target, value) {
var _this = this;
if (value === this._value) {
return;
}
this._value = value;
var html = this._igTemplating.html;
var currTemplate = null;
var templateId = Guid.newGuid().toString();
var self = this;
var litTemplate = function (context) {
if (!context) {
return html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<div></div>"], ["<div></div>"])));
}
var contentId = context.___contentId;
if (context.___immediate ||
(context.i && context.i.___immediate) ||
(context.i && context.i.nativeElement && context.i.nativeElement.___immediate) ||
(context.nativeElement && context.nativeElement.___immediate)) {
var innerContext = context;
if (!contentId && context.i && context.i.___contentId) {
contentId = context.i.___contentId;
innerContext = context.i;
}
if (!contentId && context.i && context.i.nativeElement && context.i.nativeElement.___contentId) {
contentId = context.i.nativeElement.___contentId;
innerContext = context.i.nativeElement;
}
if (!contentId && context.nativeElement && context.nativeElement.___contentId) {
contentId = context.nativeElement.___contentId;
innerContext = context.nativeElement;
}
var template = currTemplate;
self.adjustDynamicContent(null, template.___templateId, contentId, "Update", context);
if (innerContext.___root) {
var root = innerContext.___root;
if (!root.___host) {
var host = root.querySelector("#" + 'host-' + contentId);
if (host) {
root.___host = host;
template.___checkHost(template, root, root.___host);
}
}
else {
if (root.___host) {
template.___checkHost(template, root, root.___host);
}
}
}
}
return html(templateObject_2 || (templateObject_2 = __makeTemplateObject(["<div id=\"", "\" style=\"display: contents;\">\n\t\t\t</div>"], ["<div id=\"", "\" style=\"display: contents;\">\n\t\t\t</div>"])), 'host-' + contentId);
};
currTemplate = litTemplate;
litTemplate.___isBridged = true;
litTemplate.___templateId = templateId;
litTemplate.___onTemplateInit = function (template, templateContent) {
var mut = self._mutObs = self.createMutationObserver(function (list) {
var e_1, _a;
try {
for (var list_1 = __values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
var mutation = list_1_1.value;
if (mutation.type == 'childList') {
var host = templateContent.querySelector("#" + 'host-' + templateContent._id);
templateContent.___host = host;
if (template.___checkHost(template, templateContent, templateContent.___host)) {
mut.disconnect();
mut = null;
}
break;
}
}
}
catch (e_1_1) {
e_1 = { error: e_1_1 };
}
finally {
try {
if (list_1_1 && !list_1_1.done && (_a = list_1.return))
_a.call(list_1);
}
finally {
if (e_1)
throw e_1.error;
}
}
});
mut.observe(templateContent, {
childList: true
});
// var dynCont = template.___container.parentElement.querySelector(".ig-dynamic-content-holder");
// let mut2 = self.createMutationObserver((list) => {
// for (var mutation of list) {
// if (mutation.type == 'childList') {
// var host = templateContent.querySelector("#" + 'host-' + templateContent._id);
// templateContent.___host = host;
// if (template.___checkHost(template, templateContent, templateContent.___host)) {
// mut2.disconnect();
// mut2 = null;
// if (mut) {
// mut.disconnect();
// mut = null;
// }
// }
// break;
// }
// }
// });
// mut2.observe(dynCont, {
// childList: true
// });
};
litTemplate.___onTemplateTeardown = function (template, templateContent) {
if (self._mutObs) {
self._mutObs.disconnect();
self._mutObs = undefined;
}
self.adjustDynamicContent(null, template.___templateId, templateContent._id, "Remove", null);
};
litTemplate.___checkHost = function (template, templateContent, host) {
if (host) {
if (!_this._templateContents.has(templateContent._id)) {
self.adjustDynamicContent(_this._renderer.getWrapper(host), template.___templateId, templateContent._id, "Add", null);
}
}
// var content = document.getElementById(templateContent._id);
// if (content && host) {
// if (content.parentElement != host) {
// if (host.id.replace("host-", "") != content.id) {
// console.log("error!");
// }
// host.appendChild(content);
// return true;
// }
// }
return false;
};
litTemplate.___onTemplateContextChanged = function (template, templateContent, context) {
if (templateContent.___host) {
template.___checkHost(template, templateContent, templateContent.___host);
}
self.adjustDynamicContent(null, template.___templateId, templateContent._id, "Update", context);
};
target[this._propertyName] = litTemplate;
};
ReactTemplateAdapter.prototype.ensureExternalObject = function (target) {
if (target && target._implementation) {
// we are already an external type.
return target;
}
var owningType = null;
if (target.$type) {
owningType = target.$type.name;
}
if (!owningType) {
return target;
}
var typeName = "Igr" + owningType;
if (this._createExternal) {
var ext = this._createExternal();
ext._implementation = target;
target.externalObject = ext;
return ext;
}
else {
if (TypeRegistrar.isRegistered(typeName)) {
var ext = TypeRegistrar.create(typeName);
ext._implementation = target;
target.externalObject = ext;
return ext;
}
}
return target;
};
ReactTemplateAdapter.prototype.adjustDynamicContent = function (hostElement, templateId, contentId, operation, context) {
var _this = this;
if (context && !context._implementation) {
if (context.externalObject) {
context = context.externalObject;
}
else {
context = this.ensureExternalObject(context);
}
}
if (operation == "Add") {
if (!this._initializing.has(contentId)) {
this._initializing.add(contentId);
//console.log("Add: " + contentId);
this._portalManager.getPortal(hostElement, "TemplateContainer", function (p) {
_this._initializing.delete(contentId);
_this._templateContents.set(contentId, p.componentRef);
if (_this._waiting.has(contentId)) {
if (_this._waiting.get(contentId)) {
_this._waiting.get(contentId)(p.componentRef);
_this._waiting.delete(contentId);
}
}
}, false);
}
}
else if (operation == "Update") {
//console.log("Update: " + contentId);
if (this._templateContents.has(contentId)) {
var t = this._templateContents.get(contentId);
t.template = this._value;
if (context) {
t.dataContext = context;
}
}
else {
this._waiting.set(contentId, function (c) {
var t = _this._templateContents.get(contentId);
t.template = _this._value;
if (context) {
t.dataContext = context;
}
});
}
}
else if (operation == "Remove") {
if (this._templateContents.has(contentId)) {
var templateContainer = this._templateContents.get(contentId);
var containerProps = templateContainer.props;
var containerId_1 = containerProps.id;
if (containerId_1) {
var portals = this._portalManager.getPortals();
var portal = portals.find(function (p) { return p._portalId == containerId_1; });
if (portal) {
this._portalManager._destroy(portal);
}
}
this._templateContents.delete(contentId);
}
if (this._waiting.has(contentId)) {
this._waiting.delete(contentId);
if (this._templateContents.has(contentId)) {
var templateContainer = this._templateContents.get(contentId);
var containerProps = templateContainer.props;
var containerId_2 = containerProps.id;
if (containerId_2) {
var portals = this._portalManager.getPortals();
var portal = portals.find(function (p) { return p._portalId == containerId_2; });
if (portal) {
this._portalManager._destroy(portal);
}
}
this._templateContents.delete(contentId);
}
}
;
}
};
return ReactTemplateAdapter;
}());
export { ReactTemplateAdapter };
var templateObject_1, templateObject_2;