igniteui-react-grids
Version:
Ignite UI React grid components.
256 lines (255 loc) • 8.9 kB
JavaScript
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.
*/
export class IgrTemplateColumn extends IgrDataGridColumn {
createImplementation() {
return new TemplateColumn();
}
get i() {
return this._implementation;
}
constructor(props) {
super(props);
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);
}
beforeStyleKeyRequested(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;
}
let 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;
}
}
}
render() {
// if (!this._childrenDiffer(this.props.children)) {
// let div = React.createElement("div", {
// ref: (ref) => {
// this._elRef = ref;
// },
// children: this.props.children
// });
// return div;
// } else {
let children = [];
if (this._templateCells && this._templateCells.length > 0) {
for (let i = 0; i < this._templateCells.length; i++) {
let t = this._templateCells[i];
if (this._activeCellContentElements.has(t)) {
children.push(this._activeCellContentElements.get(t));
}
else {
let tEle = React.createElement(IgrTemplateContainer, {
ref: this._templateRef,
key: this._templateCells[i].key,
owner: this._templateCells[i],
omitContainer: true
});
let portal = ReactDOM.createPortal(tEle, t, this._templateCells[i].key);
this._activeCellContentElements.set(t, portal);
children.push(portal);
}
}
}
else {
return null;
}
let div = React.createElement("div", {
children: children
});
return div;
//}
}
_templateRef(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);
}
beforeCellUpdating(s, e) {
if (this.template == null && this.templateSelector == null) {
return;
}
let info = e.cellInfo;
let 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();
}
}
updateCellInfo(info) {
let oldInfo = this._currCellInfo;
if (oldInfo != null) {
oldInfo.removeOnChangedListener(this.cellInfoChanged);
}
this._currCellInfo = info;
if (this._currCellInfo != null) {
this._currCellInfo.addOnChangedListener(this.cellInfoChanged);
}
}
cellInfoChanged() {
this.updateTemplates();
}
dummyStyleKeyRequested(s, e) {
}
dummyCellUpdating(s, e) {
}
get hasTemplate() {
return this._template != null || this._templateSelector != null;
}
get template() {
return this._template;
}
set template(value) {
let oldValue = this.hasTemplate;
this._template = value;
this.ensureTemplateEvents(oldValue);
this.onTemplateChanged();
}
get templateSelector() {
return this._templateSelector;
}
set templateSelector(value) {
let oldValue = this.hasTemplate;
this._templateSelector = value;
this._hasSelector = this._templateSelector != null;
this.ensureTemplateEvents(oldValue);
this.onTemplateChanged();
}
onTemplateChanged() {
this._selectorStyles.clear();
this._selectorTemplates.clear();
this._keyCount = 0;
}
updateTemplates() {
this.setState({});
}
ensureTemplateEvents(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;
}
}
}
/**
* Called when the cell content is being created or updated.
*/
get cellUpdating() {
return this._cellUpdating;
}
set cellUpdating(ev) {
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 = (o, e) => {
let 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);
;
}
}