igniteui-react-grids
Version:
Ignite UI React grid components.
282 lines (281 loc) • 10.6 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { IgrTemplateCellUpdatingEventArgs } from "./igr-template-cell-updating-event-args";
import { IgrDataGridColumn } from "./igr-data-grid-column";
import { TemplateColumn } from "./TemplateColumn";
import { IgrTemplateContainer } from "igniteui-react-core";
/**
* A column with customizable content.
*/
var IgrTemplateColumn = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgrTemplateColumn, _super);
function IgrTemplateColumn(props) {
var _this = _super.call(this, props) || this;
_this._templateCells = [];
_this._activeCellContent = new Map();
_this._activeCellContentElements = new Map();
_this._templateCellInitialData = new Map();
_this._templateCellInitialTemplate = new Map();
_this._currCellInfo = null;
_this._template = null;
_this._templateSelector = null;
_this._hasSelector = false;
_this._selectorStyles = new Map();
_this._selectorTemplates = new Map();
_this._keyCount = 0;
_this._cellUpdating = null;
_this._cellUpdating_wrapped = null;
_this.cellInfoChanged = _this.cellInfoChanged.bind(_this);
_this._templateRef = _this._templateRef.bind(_this);
return _this;
}
IgrTemplateColumn.prototype.createImplementation = function () {
return new TemplateColumn();
};
Object.defineProperty(IgrTemplateColumn.prototype, "i", {
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
IgrTemplateColumn.prototype.beforeStyleKeyRequested = function (s, e) {
if (this.template == null && this.templateSelector == null) {
return;
}
if (!this._hasSelector) {
return;
}
var selector = this._templateSelector;
if (selector == null) {
return;
}
var actualTemplate = this._templateSelector(this, e.resolvedValue);
if (actualTemplate == null) {
return;
}
var key;
if (this._selectorStyles.has(actualTemplate)) {
key = this._selectorStyles.get(actualTemplate);
e.styleKey = key;
}
else {
if (this._selectorStyles.size < 1000) {
key = "template_" + this.field + "_" + this._keyCount;
this._selectorStyles.set(actualTemplate, key);
this._selectorTemplates[key] = actualTemplate;
this._keyCount++;
e.styleKey = key;
}
}
};
IgrTemplateColumn.prototype.render = function () {
// if (!this._childrenDiffer(this.props.children)) {
// let div = React.createElement("div", {
// ref: (ref) => {
// this._elRef = ref;
// },
// children: this.props.children
// });
// return div;
// } else {
var children = [];
if (this._templateCells && this._templateCells.length > 0) {
for (var i = 0; i < this._templateCells.length; i++) {
var t = this._templateCells[i];
if (this._activeCellContentElements.has(t)) {
children.push(this._activeCellContentElements.get(t));
}
else {
var tEle = React.createElement(IgrTemplateContainer, {
ref: this._templateRef,
key: this._templateCells[i].key,
owner: this._templateCells[i],
omitContainer: true
});
var portal = ReactDOM.createPortal(tEle, t, this._templateCells[i].key);
this._activeCellContentElements.set(t, portal);
children.push(portal);
}
}
}
else {
return null;
}
var div = React.createElement("div", {
children: children
});
return div;
//}
};
IgrTemplateColumn.prototype._templateRef = function (t) {
if (t === null) {
return;
}
if (t.currentOwner) {
if (this._templateCellInitialTemplate.has(t.currentOwner)) {
t.template = this._templateCellInitialTemplate.get(t.currentOwner);
this._templateCellInitialTemplate.delete(t.currentOwner);
}
if (this._templateCellInitialData.has(t.currentOwner)) {
t.dataContext = this._templateCellInitialData.get(t.currentOwner);
this._templateCellInitialTemplate.delete(t.currentOwner);
}
}
this._activeCellContent.set(t.currentOwner, t);
};
IgrTemplateColumn.prototype.beforeCellUpdating = function (s, e) {
if (this.template == null && this.templateSelector == null) {
return;
}
var info = e.cellInfo;
var existingView;
if (!info.isContentDirty &&
!info.isDataDirty &&
!info.isSizeDirty) {
return;
}
var actualTemplate = this._template;
if (this._hasSelector) {
if (this._selectorTemplates.has(info.styleKey)) {
actualTemplate = this._selectorTemplates.get(info.styleKey);
}
}
var internalContent = e.content;
if (internalContent == null) {
return;
}
if (this._activeCellContent.has(internalContent)) {
var templateView = this._activeCellContent.get(internalContent);
templateView.dataContext = info;
this.updateCellInfo(info);
if (templateView.template != actualTemplate) {
templateView.template = actualTemplate;
}
else {
existingView = templateView;
}
}
else {
this._templateCells.push(internalContent);
this._templateCellInitialData.set(internalContent, info);
this.updateCellInfo(info);
this._templateCellInitialTemplate.set(internalContent, actualTemplate);
this.updateTemplates();
}
};
IgrTemplateColumn.prototype.updateCellInfo = function (info) {
var oldInfo = this._currCellInfo;
if (oldInfo != null) {
oldInfo.removeOnChangedListener(this.cellInfoChanged);
}
this._currCellInfo = info;
if (this._currCellInfo != null) {
this._currCellInfo.addOnChangedListener(this.cellInfoChanged);
}
};
IgrTemplateColumn.prototype.cellInfoChanged = function () {
this.updateTemplates();
};
IgrTemplateColumn.prototype.dummyStyleKeyRequested = function (s, e) {
};
IgrTemplateColumn.prototype.dummyCellUpdating = function (s, e) {
};
Object.defineProperty(IgrTemplateColumn.prototype, "hasTemplate", {
get: function () {
return this._template != null || this._templateSelector != null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrTemplateColumn.prototype, "template", {
get: function () {
return this._template;
},
set: function (value) {
var oldValue = this.hasTemplate;
this._template = value;
this.ensureTemplateEvents(oldValue);
this.onTemplateChanged();
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrTemplateColumn.prototype, "templateSelector", {
get: function () {
return this._templateSelector;
},
set: function (value) {
var oldValue = this.hasTemplate;
this._templateSelector = value;
this._hasSelector = this._templateSelector != null;
this.ensureTemplateEvents(oldValue);
this.onTemplateChanged();
},
enumerable: false,
configurable: true
});
IgrTemplateColumn.prototype.onTemplateChanged = function () {
this._selectorStyles.clear();
this._selectorTemplates.clear();
this._keyCount = 0;
};
IgrTemplateColumn.prototype.updateTemplates = function () {
this.setState({});
};
IgrTemplateColumn.prototype.ensureTemplateEvents = function (oldValue) {
if (this.hasTemplate && !oldValue) {
if (!this.cellStyleKeyRequested) {
this.cellStyleKeyRequested = this.dummyStyleKeyRequested;
this._styleKeyRequested = null;
}
if (!this.cellUpdating) {
this.cellUpdating = this.dummyCellUpdating;
this._cellUpdating = null;
}
}
if (!this.hasTemplate && oldValue) {
if (!this.cellStyleKeyRequested) {
this.cellStyleKeyRequested = null;
}
if (!this.cellUpdating) {
this.cellUpdating = null;
}
}
};
Object.defineProperty(IgrTemplateColumn.prototype, "cellUpdating", {
/**
* Called when the cell content is being created or updated.
*/
get: function () {
return this._cellUpdating;
},
set: function (ev) {
var _this = this;
if (this._cellUpdating_wrapped !== null) {
this.i.cellUpdating = delegateRemove(this.i.cellUpdating, this._cellUpdating_wrapped);
this._cellUpdating_wrapped = null;
this._cellUpdating = null;
}
this._cellUpdating = ev;
this._cellUpdating_wrapped = function (o, e) {
var outerArgs = new IgrTemplateCellUpdatingEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeCellUpdating) {
_this.beforeCellUpdating(_this, outerArgs);
}
if (_this._cellUpdating) {
_this._cellUpdating(_this, outerArgs);
}
};
this.i.cellUpdating = delegateCombine(this.i.cellUpdating, this._cellUpdating_wrapped);
;
},
enumerable: false,
configurable: true
});
return IgrTemplateColumn;
}(IgrDataGridColumn));
export { IgrTemplateColumn };