igniteui-react-grids
Version:
Ignite UI React grid components.
670 lines (659 loc) • 23 kB
JavaScript
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { IgrForOfStateEventArgs } from "./igr-for-of-state-event-args";
import { IgrGroupingDoneEventArgs } from "./igr-grouping-done-event-args";
import { IgrGroupByRecord } from "./igr-group-by-record";
import { IgrRowType } from "./igr-row-type";
import { IgrCellType } from "./igr-cell-type";
import { IgrGridBaseDirective } from "./igr-grid-base-directive";
import { Grid } from "./Grid";
import { isValidProp, ensureBool, interfaceToInternal } from "igniteui-react-core";
import { ReactTemplateAdapter } from "igniteui-react-core";
import { html } from "lit-html";
import { IgrGridMasterDetailContext } from "./igr-grid-master-detail-context";
import { GridGroupingStrategy } from "./GridGroupingStrategy";
import { IgrGroupByRowSelectorTemplateContext } from "./igr-group-by-row-selector-template-context";
import { IgrGroupByRowTemplateContext } from "./igr-group-by-row-template-context";
import { GroupingExpression } from "./GroupingExpression";
var IgrGrid = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgrGrid, _super);
function IgrGrid(props) {
var _this = _super.call(this, props) || this;
_this._dataPreLoad = null;
_this._dataPreLoad_wrapped = null;
_this._groupingDone = null;
_this._groupingDone_wrapped = null;
_this._getMainRef = _this._getMainRef.bind(_this);
return _this;
}
IgrGrid.prototype.createImplementation = function () {
var _a, _b;
var impl = new Grid();
var nat;
if (typeof document !== 'undefined') {
nat = document.createElement("igc-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;
};
Object.defineProperty(IgrGrid.prototype, "i", {
/**
* @hidden
*/
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
IgrGrid.prototype.componentDidMount = function () {
this.mounted = true;
_super.prototype.componentDidMount.call(this);
this._elRef.appendChild(this.i.nativeElement);
};
IgrGrid.prototype.render = function () {
var _this = this;
var nativePropsName = Object.keys(this.props).filter(function (prop) { return !isValidProp(_this, prop) && prop !== "originalRef" && prop !== "className"; });
var nativeProps = {};
nativePropsName.forEach(function (propName) {
nativeProps[propName] = _this.props[propName];
});
var visibleChildren = [];
React.Children.forEach(this.props.children, function (ch) {
if (ch) {
visibleChildren.push(ch);
}
});
var children = this._contentChildrenManager.getChildren(visibleChildren);
this._portalManager.onRender(children);
var style = {};
style.display = 'contents';
if (this.props.style) {
style = this.props.style;
}
var div = React.createElement("div", __assign(__assign({}, nativeProps), { ref: this._getMainRef, style: style, children: children }));
return div;
};
IgrGrid.prototype._getMainRef = function (ref) {
this._elRef = ref;
};
Object.defineProperty(IgrGrid.prototype, "groupsExpanded", {
get: function () {
return this.i.hd;
},
set: function (v) {
this.i.hd = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "dropAreaTemplate", {
get: function () {
return this._dropAreaTemplate;
},
set: function (v) {
this._dropAreaTemplate = v;
if (!this._dropAreaTemplateAdapter) {
this._dropAreaTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hq", { html: html });
}
this._dropAreaTemplateAdapter.setValue(this.i, this._dropAreaTemplate);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "detailTemplate", {
/**
* Returns a reference to the master-detail template.
* ```typescript
* let detailTemplate = this.grid.detailTemplate;
* ```
* @memberof IgxColumnComponent
*/
get: function () {
return this._detailTemplate;
},
set: function (v) {
this._detailTemplate = v;
if (!this._detailTemplateAdapter) {
this._detailTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hp", { html: html }, function () { return new IgrGridMasterDetailContext(); });
}
this._detailTemplateAdapter.setValue(this.i, this._detailTemplate);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "id", {
get: function () {
return this.i.hu;
},
set: function (v) {
this.i.hu = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupsRecords", {
/**
* Gets the hierarchical representation of the group by records.
* @example
* ```typescript
* let groupRecords = this.grid.groupsRecords;
* ```
*/
get: function () {
if (!this.i.g4) {
return undefined;
}
var ret = [];
for (var i = 0; i < this.i.g4.length; i++) {
var impl = this.i.g4[i];
if (!impl.externalObject) {
if (impl instanceof IgrGroupByRecord) {
ret.push(impl);
continue;
}
var e = new IgrGroupByRecord();
e._implementation = impl;
impl.externalObject = e;
}
ret.push(impl.externalObject);
}
return ret;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "data", {
get: function () {
return this.i.g0;
},
set: function (v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
var re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.g0 = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "totalItemCount", {
/**
* 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: function () {
return this.i.hj;
},
set: function (v) {
this.i.hj = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupingExpressions", {
get: function () {
if (!this.i.g3) {
return undefined;
}
var ret = [];
for (var i = 0; i < this.i.g3.length; i++) {
var impl = this.i.g3[i];
ret.push(impl.nativeElement);
}
return ret;
},
set: function (v) {
var arr = [];
for (var i = 0; i < v.length; i++) {
arr.push(v[i]);
}
this.i.g3 = arr;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupingExpansionState", {
get: function () {
if (!this.i.g2) {
return undefined;
}
var ret = [];
for (var i = 0; i < this.i.g2.length; i++) {
var impl = this.i.g2[i];
ret.push(impl.nativeElement);
}
return ret;
},
set: function (v) {
var arr = [];
for (var i = 0; i < v.length; i++) {
arr.push(v[i]);
}
this.i.g2 = arr;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "hideGroupedColumns", {
get: function () {
return this.i.he;
},
set: function (v) {
this.i.he = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupStrategy", {
get: function () {
return this.i.g9.nativeElement;
},
set: function (v) {
this.i.g9 = interfaceToInternal(v, function () { return new GridGroupingStrategy(); });
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "dropAreaMessage", {
get: function () {
return this.i.ht;
},
set: function (v) {
this.i.ht = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupByRowSelectorTemplate", {
/**
* Gets the group by row selector template.
*/
get: function () {
return this._groupByRowSelectorTemplate;
},
set: function (v) {
this._groupByRowSelectorTemplate = v;
if (!this._groupByRowSelectorTemplateAdapter) {
this._groupByRowSelectorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hr", { html: html }, function () { return new IgrGroupByRowSelectorTemplateContext(); });
}
this._groupByRowSelectorTemplateAdapter.setValue(this.i, this._groupByRowSelectorTemplate);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupRowTemplate", {
/**
* Gets/Sets the template reference for the group row.
* @example
* ```
* const groupRowTemplate = this.grid.groupRowTemplate;
* this.grid.groupRowTemplate = myRowTemplate;
* ```
*/
get: function () {
return this._groupRowTemplate;
},
set: function (v) {
this._groupRowTemplate = v;
if (!this._groupRowTemplateAdapter) {
this._groupRowTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hs", { html: html }, function () { return new IgrGroupByRowTemplateContext(); });
}
this._groupRowTemplateAdapter.setValue(this.i, this._groupRowTemplate);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "showGroupArea", {
get: function () {
return this.i.hh;
},
set: function (v) {
this.i.hh = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "selectedCells", {
/**
* Returns an array of the selected `IgxGridCell`s.
* @example
* ```typescript
* const selectedCells = this.grid.selectedCells;
* ```
*/
get: function () {
if (!this.i.g5) {
return undefined;
}
var ret = [];
for (var i = 0; i < this.i.g5.length; i++) {
var impl = this.i.g5[i];
if (!impl.externalObject) {
if (impl instanceof IgrCellType) {
ret.push(impl);
continue;
}
var e = new IgrCellType();
e._implementation = impl;
impl.externalObject = e;
}
ret.push(impl.externalObject);
}
return ret;
},
enumerable: false,
configurable: true
});
IgrGrid.prototype.findByName = function (name) {
var baseResult = _super.prototype.findByName.call(this, name);
if (baseResult) {
return baseResult;
}
if (this.groupStrategy && this.groupStrategy.name && this.groupStrategy.name == name) {
return this.groupStrategy;
}
return null;
};
IgrGrid.prototype.groupBy = function (expression) {
var arr_expression = [];
for (var i = 0; i < expression.length; i++) {
arr_expression.push(interfaceToInternal(expression[i], function () { return new GroupingExpression(); }));
}
this.i.h2(arr_expression);
};
/**
* Clears grouping for particular column, array of columns or all columns.
* @remarks
* Clears all grouping in the grid, if no parameter is passed.
* If a parameter is provided, clears grouping for a particular column or an array of columns.
* @example
* ```typescript
* this.grid.clearGrouping(); //clears all grouping
* this.grid.clearGrouping("ID"); //ungroups a single column
* this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns
* ```
* name Name of column or array of column names to be ungrouped.
* @param name * Name of column or array of column names to be ungrouped.
*/
IgrGrid.prototype.clearGrouping = function (name) {
this.i.hy(name);
};
/**
* Returns if a group is expanded or not.
* group The group record.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
* ```
* @param group * The group record.
*/
IgrGrid.prototype.isExpandedGroup = function (group) {
var iv = this.i.hf((group == null ? null : group.i));
return (iv);
};
/**
* Toggles the expansion state of a group.
* groupRow The group record to toggle.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
* ```
* @param groupRow * The group record to toggle.
*/
IgrGrid.prototype.toggleGroup = function (groupRow) {
this.i.h6((groupRow == null ? null : groupRow.i));
};
IgrGrid.prototype.selectRowsInGroup = function (groupRow, clearPrevSelection) {
this.i.h4((groupRow == null ? null : groupRow.i), clearPrevSelection);
};
/**
* Deselect all rows within a group.
* groupRow The group record which rows would be deselected.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* this.grid.deselectRowsInGroup(this.groupRow);
* ```
* @param groupRow * The group record which rows would be deselected.
*/
IgrGrid.prototype.deselectRowsInGroup = function (groupRow) {
this.i.h0((groupRow == null ? null : groupRow.i));
};
/**
* Expands the specified group and all of its parent groups.
* groupRow The group record to fully expand.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* this.grid.fullyExpandGroup(this.groupRow);
* ```
* @param groupRow * The group record to fully expand.
*/
IgrGrid.prototype.fullyExpandGroup = function (groupRow) {
this.i.h1((groupRow == null ? null : groupRow.i));
};
/**
* Toggles the expansion state of all group rows recursively.
* @example
* ```typescript
* this.grid.toggleAllGroupRows;
* ```
*/
IgrGrid.prototype.toggleAllGroupRows = function () {
this.i.h5();
};
IgrGrid.prototype.getSelectedData = function (formatters, headers) {
var iv = this.i.g1(formatters, headers);
return (iv);
};
/**
* Returns the `IgxGridRow` by index.
* @example
* ```typescript
* const myRow = grid.getRowByIndex(1);
* ```
* index
* @param * index
*/
IgrGrid.prototype.getRowByIndex = function (index) {
var iv = this.i.hb(index);
var ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
var e = new IgrRowType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
};
/**
* Returns `IgxGridRow` object by the specified primary key.
* @remarks
* Requires that the `primaryKey` property is set.
* @example
* ```typescript
* const myRow = this.grid1.getRowByKey("cell5");
* ```
* keyValue
* @param * keyValue
*/
IgrGrid.prototype.getRowByKey = function (key) {
var iv = this.i.hc(key);
var ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
var e = new IgrRowType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
};
IgrGrid.prototype.getCellByColumn = function (rowIndex, columnField) {
var iv = this.i.g6(rowIndex, columnField);
var ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
var e = new IgrCellType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
};
IgrGrid.prototype.getCellByKey = function (rowSelector, columnField) {
var iv = this.i.g7(rowSelector, columnField);
var ret = null;
if (iv && iv.externalObject) {
ret = iv.externalObject;
}
else {
if (iv) {
var e = new IgrCellType();
e._implementation = iv;
iv.externalObject = e;
ret = e;
}
}
return ret;
};
IgrGrid.prototype.pinRow = function (rowID, index) {
var iv = this.i.hg(rowID, index);
return (iv);
};
IgrGrid.prototype.unpinRow = function (rowID) {
var iv = this.i.hi(rowID);
return (iv);
};
IgrGrid.prototype.beforeColumnInit = function (owner, outerArgs) {
this.i.beforeColumnInit(owner, (outerArgs == null ? null : outerArgs.i));
};
IgrGrid.prototype.findEphemera = function (name) {
var iv = this.i.hk(name);
return (iv);
};
/**
* Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source.
* @example
* ```typescript
* this.grid1.addRow(record);
* ```
* data
* @param * data
*/
IgrGrid.prototype.addRow = function (data) {
this.i.hv(data);
};
/**
* Enters add mode by spawning the UI at the specified index.
* @remarks
* Accepted values for index are integers from 0 to this.grid.dataView.length
* @example
* ```typescript
* this.grid.beginAddRowByIndex(0);
* ```
* index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
* @param index * - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
*/
IgrGrid.prototype.beginAddRowByIndex = function (index) {
this.i.hx(index);
};
Object.defineProperty(IgrGrid.prototype, "dataPreLoad", {
get: function () {
return this._dataPreLoad;
},
set: function (ev) {
var _this = this;
if (this._dataPreLoad_wrapped !== null) {
this.i.dataPreLoad = delegateRemove(this.i.dataPreLoad, this._dataPreLoad_wrapped);
this._dataPreLoad_wrapped = null;
this._dataPreLoad = null;
}
this._dataPreLoad = ev;
this._dataPreLoad_wrapped = function (o, e) {
var outerArgs = new IgrForOfStateEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeDataPreLoad) {
_this.beforeDataPreLoad(_this, outerArgs);
}
if (_this._dataPreLoad) {
_this._dataPreLoad(_this, outerArgs);
}
};
this.i.dataPreLoad = delegateCombine(this.i.dataPreLoad, this._dataPreLoad_wrapped);
if (this.i.dataPreLoadChanged) {
this.i.dataPreLoadChanged();
}
;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrGrid.prototype, "groupingDone", {
get: function () {
return this._groupingDone;
},
set: function (ev) {
var _this = this;
if (this._groupingDone_wrapped !== null) {
this.i.groupingDone = delegateRemove(this.i.groupingDone, this._groupingDone_wrapped);
this._groupingDone_wrapped = null;
this._groupingDone = null;
}
this._groupingDone = ev;
this._groupingDone_wrapped = function (o, e) {
var outerArgs = new IgrGroupingDoneEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeGroupingDone) {
_this.beforeGroupingDone(_this, outerArgs);
}
if (_this._groupingDone) {
_this._groupingDone(_this, outerArgs);
}
};
this.i.groupingDone = delegateCombine(this.i.groupingDone, this._groupingDone_wrapped);
if (this.i.groupingDoneChanged) {
this.i.groupingDoneChanged();
}
;
},
enumerable: false,
configurable: true
});
return IgrGrid;
}(IgrGridBaseDirective));
export { IgrGrid };