igniteui-react-grids
Version:
Ignite UI React grid components.
394 lines (391 loc) • 13.5 kB
JavaScript
import * as React from 'react';
import { IgrRowIslandCollection } from "./igr-row-island-collection";
import { IgrRowType } from "./igr-row-type";
import { IgrCellType } from "./igr-cell-type";
import { IgrHierarchicalGridBaseDirective } from "./igr-hierarchical-grid-base-directive";
import { HierarchicalGrid } from "./HierarchicalGrid";
import { ContentChildrenManager } from "igniteui-react-core";
import { CollectionAdapter, isValidProp, ensureBool } from "igniteui-react-core";
import { RowIsland } from "./RowIsland";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
/**
* Hierarchical grid
* @igxModule IgxHierarchicalGridModule
*/
export class IgrHierarchicalGrid extends IgrHierarchicalGridBaseDirective {
createImplementation() {
var _a, _b;
let impl = new HierarchicalGrid();
let nat;
if (typeof document !== 'undefined') {
nat = document.createElement("igc-hierarchical-grid");
}
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 "RowIsland": return ch.props.childDataKey;
case "Column": return ch.props.field;
case "ColumnGroup": return resolveNested(ch.props, "children", "field");
case "ColumnLayout": return resolveNested(ch.props, "children", "field");
case "ActionStrip": return "IgrActionStrip";
case "GridToolbar": return "IgrGridToolbar";
case "Paginator": return "IgrPaginator";
case "GridState": return "IgrGridState";
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 "RowIsland": return ch.props.childDataKey;
case "Column": return ch.props.field;
case "ColumnGroup": return resolveNested(ch.props, "children", "field");
case "ColumnLayout": return resolveNested(ch.props, "children", "field");
case "ActionStrip": return "IgrActionStrip";
case "GridToolbar": return "IgrGridToolbar";
case "Paginator": return "IgrPaginator";
case "GridState": return "IgrGridState";
default: return undefined;
}
}
return key;
}, () => {
if (this._updateContentChildren) {
this._updateContentChildren();
}
else if (this._updateAdapters) {
this._updateAdapters();
}
});
}
this._childLayoutListAdapter = new CollectionAdapter(this.contentChildLayoutList, this.i.g9, this.actualChildLayoutList, (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.contentChildLayoutList.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((RowIsland.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentChildLayoutList.push(contentChildrenActual[i]);
}
}
if (this._childLayoutListAdapter != null) {
this._childLayoutListAdapter.notifyContentChanged();
}
}
constructor(props) {
super(props);
this._childLayoutList = null;
this._getMainRef = this._getMainRef.bind(this);
}
componentDidMount() {
this.mounted = true;
super.componentDidMount();
this._elRef.appendChild(this.i.nativeElement);
}
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 actualChildLayoutList() {
if (!this._actualChildLayoutList) {
this._actualChildLayoutList = [];
}
return this._actualChildLayoutList;
}
get contentChildLayoutList() {
if (!this._contentChildLayoutList) {
this._contentChildLayoutList = [];
}
return this._contentChildLayoutList;
}
/**
* @hidden
*/
get childLayoutList() {
if (this._childLayoutList === null) {
let coll = new IgrRowIslandCollection();
let inner = coll._innerColl;
this._childLayoutList = coll;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._childLayoutListAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._childLayoutListAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._childLayoutListAdapter.removeManualItemAt(e.oldStartingIndex);
this._childLayoutListAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._childLayoutListAdapter.clearManualItems();
break;
}
});
;
}
return this._childLayoutList;
}
get id() {
return this.i.hh;
}
set id(v) {
this.i.hh = v;
}
get data() {
return this.i.g5;
}
set data(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.g5 = v;
}
/**
* Gets/Sets the total number of records in the data source.
* @remarks
* This property is required for remote grid virtualization to function when it is bound to remote data.
* @example
* ```typescript
* const itemCount = this.grid1.totalItemCount;
* this.grid1.totalItemCount = 55;
* ```
*/
get totalItemCount() {
return this.i.hf;
}
set totalItemCount(v) {
this.i.hf = +v;
}
get expandChildren() {
return this.i.hc;
}
set expandChildren(v) {
this.i.hc = ensureBool(v);
}
/**
* Gets the unique identifier of the parent row. It may be a `string` or `number` if `primaryKey` of the
* parent grid is set or an object reference of the parent record otherwise.
* ```typescript
* const foreignKey = this.grid.foreignKey;
* ```
* @memberof IgxHierarchicalGridComponent
*/
get foreignKey() {
return this.i.hg;
}
/**
* Returns an array of the selected `IgxGridCell`s.
* @example
* ```typescript
* const selectedCells = this.grid.selectedCells;
* ```
*/
get selectedCells() {
if (!this.i.g6) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g6.length; i++) {
let impl = this.i.g6[i];
if (!impl.externalObject) {
if (impl instanceof IgrCellType) {
ret.push(impl);
continue;
}
let e = new IgrCellType();
e._implementation = impl;
impl.externalObject = e;
}
ret.push(impl.externalObject);
}
return ret;
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.childLayoutList != null && this.childLayoutList.findByName && this.childLayoutList.findByName(name)) {
return this.childLayoutList.findByName(name);
}
return null;
}
/**
* Returns the `RowType` by index.
* @example
* ```typescript
* const myRow = this.grid1.getRowByIndex(1);
* ```
* index
* @param * index
*/
getRowByIndex(index) {
let iv = this.i.ha(index);
let ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
let e = new IgrRowType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
}
/**
* Returns the `RowType` by key.
* @example
* ```typescript
* const myRow = this.grid1.getRowByKey(1);
* ```
* key
* @param * key
*/
getRowByKey(key) {
let iv = this.i.hb(key);
let ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
let e = new IgrRowType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
}
getCellByColumn(rowIndex, columnField) {
let iv = this.i.g7(rowIndex, columnField);
let ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
let e = new IgrCellType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
}
getCellByKey(rowSelector, columnField) {
let iv = this.i.g8(rowSelector, columnField);
let ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
let e = new IgrCellType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
}
pinRow(rowID, index) {
let iv = this.i.hd(rowID, index);
return (iv);
}
unpinRow(rowID) {
let iv = this.i.he(rowID);
return (iv);
}
getDefaultExpandState(record) {
this.i.hi(record);
}
}