igniteui-webcomponents-grids
Version:
Ignite UI Web Components grid components.
274 lines (273 loc) • 11.1 kB
JavaScript
import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
import { IgcTemplateCellUpdatingEventArgs } from "./igc-template-cell-updating-event-args";
import { IgcDataGridColumnComponent } from "./igc-data-grid-column-component";
import { TemplateColumn } from "./TemplateColumn";
import { getAllPropertyNames, toSpinal } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
/**
* A column with customizable content.
*/
export let IgcTemplateColumnComponent = /*@__PURE__*/ (() => {
class IgcTemplateColumnComponent extends IgcDataGridColumnComponent {
createImplementation() {
return new TemplateColumn();
}
get i() {
return this._implementation;
}
constructor() {
super();
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);
}
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;
}
}
}
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.context = 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() {
let templates = [];
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)) {
templates.push(this._activeCellContentElements.get(t));
}
else {
let templ = document.createElement("igc-template-content");
templ.owner = this._templateCells[i];
this._activeCellContentElements.set(t, templ);
this._activeCellContent.set(t, templ);
templates.push(templ);
t.appendChild(templ);
if (this._templateCellInitialTemplate.has(templ.owner)) {
templ.template = this._templateCellInitialTemplate.get(templ.owner);
this._templateCellInitialTemplate.delete(templ.owner);
}
if (this._templateCellInitialData.has(templ.owner)) {
templ.context = this._templateCellInitialData.get(templ.owner);
this._templateCellInitialTemplate.delete(templ.owner);
}
}
}
}
}
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;
}
}
}
connectedCallback() {
if (super["connectedCallback"]) {
super["connectedCallback"]();
}
if (this.i.connectedCallback) {
this.i.connectedCallback();
}
if (this.updateContentChildren) {
this.updateContentChildren();
}
else if (this._updateAdapters) {
this._updateAdapters();
}
if (!this._attached) {
this._attached = true;
this._flushQueuedAttributes();
}
}
disconnectedCallback() {
if (super["disconnectedCallback"]) {
super["disconnectedCallback"]();
}
if (this.i.disconnectedCallback) {
this.i.disconnectedCallback();
}
if (this._attached) {
this._attached = false;
}
}
static get observedAttributes() {
if (IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent == null) {
let names = getAllPropertyNames(IgcTemplateColumnComponent);
for (let i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent = names;
}
return IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent;
}
static register() {
if (!IgcTemplateColumnComponent._isElementRegistered) {
IgcTemplateColumnComponent._isElementRegistered = true;
RegisterElementHelper.registerElement(IgcTemplateColumnComponent.htmlTagName, IgcTemplateColumnComponent);
}
}
/**
* 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 IgcTemplateCellUpdatingEventArgs();
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);
;
}
}
IgcTemplateColumnComponent._observedAttributesIgcTemplateColumnComponent = null;
IgcTemplateColumnComponent.htmlTagName = "igc-template-column";
IgcTemplateColumnComponent._isElementRegistered = false;
return IgcTemplateColumnComponent;
})();