igniteui-react-grids
Version:
Ignite UI React grid components.
586 lines (575 loc) • 18.4 kB
JavaScript
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";
export class IgrGrid extends IgrGridBaseDirective {
createImplementation() {
var _a, _b;
let impl = new Grid();
let 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;
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor(props) {
super(props);
this._dataPreLoad = null;
this._dataPreLoad_wrapped = null;
this._groupingDone = null;
this._groupingDone_wrapped = 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 groupsExpanded() {
return this.i.hd;
}
set groupsExpanded(v) {
this.i.hd = ensureBool(v);
}
get dropAreaTemplate() {
return this._dropAreaTemplate;
}
set dropAreaTemplate(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);
}
/**
* Returns a reference to the master-detail template.
* ```typescript
* let detailTemplate = this.grid.detailTemplate;
* ```
* @memberof IgxColumnComponent
*/
get detailTemplate() {
return this._detailTemplate;
}
set detailTemplate(v) {
this._detailTemplate = v;
if (!this._detailTemplateAdapter) {
this._detailTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hp", { html: html }, () => new IgrGridMasterDetailContext());
}
this._detailTemplateAdapter.setValue(this.i, this._detailTemplate);
}
get id() {
return this.i.hu;
}
set id(v) {
this.i.hu = v;
}
/**
* Gets the hierarchical representation of the group by records.
* @example
* ```typescript
* let groupRecords = this.grid.groupsRecords;
* ```
*/
get groupsRecords() {
if (!this.i.g4) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g4.length; i++) {
let impl = this.i.g4[i];
if (!impl.externalObject) {
if (impl instanceof IgrGroupByRecord) {
ret.push(impl);
continue;
}
let e = new IgrGroupByRecord();
e._implementation = impl;
impl.externalObject = e;
}
ret.push(impl.externalObject);
}
return ret;
}
get data() {
return this.i.g0;
}
set data(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.g0 = 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.hj;
}
set totalItemCount(v) {
this.i.hj = +v;
}
get groupingExpressions() {
if (!this.i.g3) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g3.length; i++) {
let impl = this.i.g3[i];
ret.push(impl.nativeElement);
}
return ret;
}
set groupingExpressions(v) {
let arr = [];
for (let i = 0; i < v.length; i++) {
arr.push(v[i]);
}
this.i.g3 = arr;
}
get groupingExpansionState() {
if (!this.i.g2) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g2.length; i++) {
let impl = this.i.g2[i];
ret.push(impl.nativeElement);
}
return ret;
}
set groupingExpansionState(v) {
let arr = [];
for (let i = 0; i < v.length; i++) {
arr.push(v[i]);
}
this.i.g2 = arr;
}
get hideGroupedColumns() {
return this.i.he;
}
set hideGroupedColumns(v) {
this.i.he = ensureBool(v);
}
get groupStrategy() {
return this.i.g9.nativeElement;
}
set groupStrategy(v) {
this.i.g9 = interfaceToInternal(v, () => new GridGroupingStrategy());
}
get dropAreaMessage() {
return this.i.ht;
}
set dropAreaMessage(v) {
this.i.ht = v;
}
/**
* Gets the group by row selector template.
*/
get groupByRowSelectorTemplate() {
return this._groupByRowSelectorTemplate;
}
set groupByRowSelectorTemplate(v) {
this._groupByRowSelectorTemplate = v;
if (!this._groupByRowSelectorTemplateAdapter) {
this._groupByRowSelectorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hr", { html: html }, () => new IgrGroupByRowSelectorTemplateContext());
}
this._groupByRowSelectorTemplateAdapter.setValue(this.i, this._groupByRowSelectorTemplate);
}
/**
* Gets/Sets the template reference for the group row.
* @example
* ```
* const groupRowTemplate = this.grid.groupRowTemplate;
* this.grid.groupRowTemplate = myRowTemplate;
* ```
*/
get groupRowTemplate() {
return this._groupRowTemplate;
}
set groupRowTemplate(v) {
this._groupRowTemplate = v;
if (!this._groupRowTemplateAdapter) {
this._groupRowTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hs", { html: html }, () => new IgrGroupByRowTemplateContext());
}
this._groupRowTemplateAdapter.setValue(this.i, this._groupRowTemplate);
}
get showGroupArea() {
return this.i.hh;
}
set showGroupArea(v) {
this.i.hh = ensureBool(v);
}
/**
* Returns an array of the selected `IgxGridCell`s.
* @example
* ```typescript
* const selectedCells = this.grid.selectedCells;
* ```
*/
get selectedCells() {
if (!this.i.g5) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g5.length; i++) {
let impl = this.i.g5[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.groupStrategy && this.groupStrategy.name && this.groupStrategy.name == name) {
return this.groupStrategy;
}
return null;
}
groupBy(expression) {
let arr_expression = [];
for (let i = 0; i < expression.length; i++) {
arr_expression.push(interfaceToInternal(expression[i], () => 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.
*/
clearGrouping(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.
*/
isExpandedGroup(group) {
let 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.
*/
toggleGroup(groupRow) {
this.i.h6((groupRow == null ? null : groupRow.i));
}
selectRowsInGroup(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.
*/
deselectRowsInGroup(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.
*/
fullyExpandGroup(groupRow) {
this.i.h1((groupRow == null ? null : groupRow.i));
}
/**
* Toggles the expansion state of all group rows recursively.
* @example
* ```typescript
* this.grid.toggleAllGroupRows;
* ```
*/
toggleAllGroupRows() {
this.i.h5();
}
getSelectedData(formatters, headers) {
let iv = this.i.g1(formatters, headers);
return (iv);
}
/**
* Returns the `IgxGridRow` by index.
* @example
* ```typescript
* const myRow = grid.getRowByIndex(1);
* ```
* index
* @param * index
*/
getRowByIndex(index) {
let iv = this.i.hb(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 `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
*/
getRowByKey(key) {
let iv = this.i.hc(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.g6(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.g7(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.hg(rowID, index);
return (iv);
}
unpinRow(rowID) {
let iv = this.i.hi(rowID);
return (iv);
}
beforeColumnInit(owner, outerArgs) {
this.i.beforeColumnInit(owner, (outerArgs == null ? null : outerArgs.i));
}
findEphemera(name) {
let 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
*/
addRow(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
*/
beginAddRowByIndex(index) {
this.i.hx(index);
}
get dataPreLoad() {
return this._dataPreLoad;
}
set dataPreLoad(ev) {
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 = (o, e) => {
let 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();
}
;
}
get groupingDone() {
return this._groupingDone;
}
set groupingDone(ev) {
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 = (o, e) => {
let 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();
}
;
}
}