igniteui-react-grids
Version:
Ignite UI React grid components.
235 lines (234 loc) • 9.13 kB
JavaScript
import * as React from 'react';
import { IgrColumnCollection } from "./igr-column-collection";
import { IgrColumn } from "./igr-column";
import { ColumnGroup } from "./ColumnGroup";
import { ContentChildrenManager } from "igniteui-react-core";
import { CollectionAdapter, isValidProp, ensureBool } from "igniteui-react-core";
import { Column } from "./Column";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { IgrColumnTemplateContext } from "./igr-column-template-context";
import { ReactTemplateAdapter } from "igniteui-react-core";
import { html } from "lit-html";
/**
* **Ignite UI for Angular Column Group**
* @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent
*/
export class IgrColumnGroup extends IgrColumn {
createImplementation() {
var _a, _b;
let impl = new ColumnGroup();
let nat;
if (typeof document !== 'undefined') {
nat = document.createElement("igc-column-group");
}
else {
nat = {
style: {}
};
}
if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.className) {
nat.className = this.props.className;
}
if ((_b = this.props) === null || _b === void 0 ? void 0 : _b.id) {
nat.id = this.props.id;
}
impl.setNativeElement(nat);
return impl;
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
_initializeAdapters() {
if (!this._contentChildrenManager) {
const resolveNested = ((props, propName, nestedPropName) => {
var _a;
const prop = props[propName];
if (Array.isArray(prop)) {
return prop.map(x => {
var _a;
return (_a = x[nestedPropName]) !== null && _a !== void 0 ? _a : resolveNested(x.props, propName, nestedPropName);
}).join("_");
}
else if (prop) {
return (_a = prop.props[nestedPropName]) !== null && _a !== void 0 ? _a : resolveNested(prop.props, propName, nestedPropName);
}
else {
return props[nestedPropName];
}
});
this._contentChildrenManager = new ContentChildrenManager((ch) => {
const key = ch.key || ch.props.name;
if (!key) {
const type = (ch.type);
const instance = new type;
const name = instance.i.$type.name;
switch (name) {
case "Column": return ch.props.field;
case "ColumnGroup": return resolveNested(ch.props, "children", "field");
case "ColumnLayout": return resolveNested(ch.props, "children", "field");
default: return undefined;
}
}
return key;
}, (ch) => {
const key = ch.key || ch.props.name;
if (!key) {
const type = (ch.type);
const instance = new type;
const name = instance.i.$type.name;
switch (name) {
case "Column": return ch.props.field;
case "ColumnGroup": return resolveNested(ch.props, "children", "field");
case "ColumnLayout": return resolveNested(ch.props, "children", "field");
default: return undefined;
}
}
return key;
}, () => {
if (this._updateContentChildren) {
this._updateContentChildren();
}
else if (this._updateAdapters) {
this._updateAdapters();
}
});
}
this._childrenAdapter = new CollectionAdapter(this.contentChildren, this.i.bo, this.actualChildren, (c) => c.i, (i) => {
if (this._initializeElement) {
this._initializeElement(i);
}
}, (i) => {
if (this._destroyElement) {
this._destroyElement(i);
}
});
if (super["_initializeAdapters"]) {
super["_initializeAdapters"]();
}
}
_updateAdapters() {
if (super["_updateAdapters"]) {
super["_updateAdapters"]();
}
let contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
this.contentChildren.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((Column.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentChildren.push(contentChildrenActual[i]);
}
}
if (this._childrenAdapter != null) {
this._childrenAdapter.notifyContentChanged();
}
}
constructor(props) {
super(props);
this._children = null;
this._getMainRef = this._getMainRef.bind(this);
}
render() {
const nativePropsName = Object.keys(this.props).filter(prop => !isValidProp(this, prop) && prop !== "originalRef" && prop !== "className");
const nativeProps = {};
nativePropsName.forEach(propName => {
nativeProps[propName] = this.props[propName];
});
const visibleChildren = [];
React.Children.forEach(this.props.children, (ch) => {
if (ch) {
visibleChildren.push(ch);
}
});
let children = this._contentChildrenManager.getChildren(visibleChildren);
this._portalManager.onRender(children);
let style = {};
style.display = 'contents';
if (this.props.style) {
style = this.props.style;
}
let div = React.createElement("div", Object.assign(Object.assign({}, nativeProps), { ref: this._getMainRef, style: style, children: children }));
return div;
}
_getMainRef(ref) {
this._elRef = ref;
}
get actualChildren() {
if (!this._actualChildren) {
this._actualChildren = [];
}
return this._actualChildren;
}
get contentChildren() {
if (!this._contentChildren) {
this._contentChildren = [];
}
return this._contentChildren;
}
/**
* @deprecated Use the `childColumns` property instead.
*/
get children() {
if (this._children === null) {
let coll = new IgrColumnCollection();
let inner = coll._innerColl;
this._children = coll;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._childrenAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._childrenAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._childrenAdapter.removeManualItemAt(e.oldStartingIndex);
this._childrenAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._childrenAdapter.clearManualItems();
break;
}
});
;
}
return this._children;
}
get collapsible() {
return this.i.bp;
}
set collapsible(v) {
this.i.bp = ensureBool(v);
}
get expanded() {
return this.i.bq;
}
set expanded(v) {
this.i.bq = ensureBool(v);
}
/**
* Allows you to define a custom template for expand/collapse indicator
* @memberof IgxColumnGroupComponent
*/
get collapsibleIndicatorTemplate() {
return this._collapsibleIndicatorTemplate;
}
set collapsibleIndicatorTemplate(v) {
this._collapsibleIndicatorTemplate = v;
if (!this._collapsibleIndicatorTemplateAdapter) {
this._collapsibleIndicatorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "bs", { html: html }, () => new IgrColumnTemplateContext());
}
this._collapsibleIndicatorTemplateAdapter.setValue(this.i, this._collapsibleIndicatorTemplate);
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.children != null && this.children.findByName && this.children.findByName(name)) {
return this.children.findByName(name);
}
return null;
}
}