igniteui-react-grids
Version:
Ignite UI React grid components.
504 lines (497 loc) • 18.7 kB
JavaScript
import * as React from 'react';
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { IgrPivotConfiguration } from "./igr-pivot-configuration";
import { IgrDimensionsChangeEventArgs } from "./igr-dimensions-change-event-args";
import { IgrPivotConfigurationChangedEventArgs } from "./igr-pivot-configuration-changed-event-args";
import { IgrPivotDimensionEventArgs } from "./igr-pivot-dimension-event-args";
import { IgrPivotValueEventArgs } from "./igr-pivot-value-event-args";
import { IgrSortingExpressionEventArgs } from "./igr-sorting-expression-event-args";
import { IgrValuesChangeEventArgs } from "./igr-values-change-event-args";
import { IgrPivotDimension } from "./igr-pivot-dimension";
import { IgrGridBaseDirective } from "./igr-grid-base-directive";
import { PivotGrid } from "./PivotGrid";
import { isValidProp, ensureBool, interfaceToInternal } from "igniteui-react-core";
import { IgrPivotGridValueTemplateContext } from "./igr-pivot-grid-value-template-context";
import { ReactTemplateAdapter } from "igniteui-react-core";
import { html } from "lit-html";
import { IgrColumnTemplateContext } from "./igr-column-template-context";
import { PivotUISettings } from "./PivotUISettings";
export class IgrPivotGrid extends IgrGridBaseDirective {
createImplementation() {
var _a, _b;
let impl = new PivotGrid();
let nat;
if (typeof document !== 'undefined') {
nat = document.createElement("igc-pivot-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._dimensionsChange = null;
this._dimensionsChange_wrapped = null;
this._pivotConfigurationChange = null;
this._pivotConfigurationChange_wrapped = null;
this._dimensionInit = null;
this._dimensionInit_wrapped = null;
this._valueInit = null;
this._valueInit_wrapped = null;
this._dimensionsSortingExpressionsChange = null;
this._dimensionsSortingExpressionsChange_wrapped = null;
this._valuesChange = null;
this._valuesChange_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;
}
/**
* Gets the sorting expressions generated for the dimensions.
* @example
* ```typescript
* const expressions = this.grid.dimensionsSortingExpressions;
* ```
*/
get dimensionsSortingExpressions() {
if (!this.i.g1) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g1.length; i++) {
let impl = this.i.g1[i];
ret.push(impl.nativeElement);
}
return ret;
}
get valueChipTemplate() {
return this._valueChipTemplate;
}
set valueChipTemplate(v) {
this._valueChipTemplate = v;
if (!this._valueChipTemplateAdapter) {
this._valueChipTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hj", { html: html }, () => new IgrPivotGridValueTemplateContext());
}
this._valueChipTemplateAdapter.setValue(this.i, this._valueChipTemplate);
}
get rowDimensionHeaderTemplate() {
return this._rowDimensionHeaderTemplate;
}
set rowDimensionHeaderTemplate(v) {
this._rowDimensionHeaderTemplate = v;
if (!this._rowDimensionHeaderTemplateAdapter) {
this._rowDimensionHeaderTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hi", { html: html }, () => new IgrColumnTemplateContext());
}
this._rowDimensionHeaderTemplateAdapter.setValue(this.i, this._rowDimensionHeaderTemplate);
}
get pivotConfiguration() {
const r = this.i.g3;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgrPivotConfiguration();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
set pivotConfiguration(v) {
v == null ? this.i.g3 = null : this.i.g3 = v.i;
}
get autoGenerateConfig() {
return this.i.ha;
}
set autoGenerateConfig(v) {
this.i.ha = ensureBool(v);
}
get pivotUI() {
return this.i.g6.nativeElement;
}
set pivotUI(v) {
this.i.g6 = interfaceToInternal(v, () => new PivotUISettings());
}
get superCompactMode() {
return this.i.hc;
}
set superCompactMode(v) {
this.i.hc = ensureBool(v);
}
/**
* Gets/Sets the default expand state for all rows.
*/
get defaultExpandState() {
return this.i.hb;
}
set defaultExpandState(v) {
this.i.hb = ensureBool(v);
}
/**
* Gets the full list of dimensions.
* @example
* ```typescript
* const dimensions = this.grid.allDimensions;
* ```
*/
get allDimensions() {
if (!this.i.g0) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.g0.length; i++) {
let impl = this.i.g0[i];
if (!impl.externalObject) {
if (impl instanceof IgrPivotDimension) {
ret.push(impl);
continue;
}
let e = new IgrPivotDimension();
e._implementation = impl;
impl.externalObject = e;
}
ret.push(impl.externalObject);
}
return ret;
}
get data() {
return this.i.hd;
}
set data(v) {
this.i.hd = v;
}
get emptyPivotGridTemplate() {
return this._emptyPivotGridTemplate;
}
set emptyPivotGridTemplate(v) {
this._emptyPivotGridTemplate = v;
if (!this._emptyPivotGridTemplateAdapter) {
this._emptyPivotGridTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "hh", { html: html });
}
this._emptyPivotGridTemplateAdapter.setValue(this.i, this._emptyPivotGridTemplate);
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.pivotConfiguration && this.pivotConfiguration.name && this.pivotConfiguration.name == name) {
return this.pivotConfiguration;
}
if (this.pivotUI && this.pivotUI.name && this.pivotUI.name == name) {
return this.pivotUI;
}
return null;
}
/**
* Notifies for dimension change.
*/
notifyDimensionChange(regenerateColumns) {
this.i.hu(regenerateColumns);
}
toggleColumn(col) {
this.i.hz((col == null ? null : col.i));
}
getColumnGroupExpandState(col) {
this.i.hp((col == null ? null : col.i));
}
toggleRowGroup(col, newState) {
this.i.h1((col == null ? null : col.i), newState);
}
/**
* Auto-sizes row dimension cells.
* @remarks
* Only sizes based on the dimension cells in view.
* @example
* ```typescript
* this.grid.autoSizeRowDimension(dimension);
* ```
* dimension The row dimension to size.
* @param dimension * The row dimension to size.
*/
autoSizeRowDimension(dimension) {
this.i.hk((dimension == null ? null : dimension.i));
}
insertDimensionAt(dimension, targetCollectionType, index) {
this.i.hq((dimension == null ? null : dimension.i), (targetCollectionType == null ? null : targetCollectionType), index);
}
moveDimension(dimension, targetCollectionType, index) {
this.i.hs((dimension == null ? null : dimension.i), (targetCollectionType == null ? null : targetCollectionType), index);
}
/**
* Removes dimension from its currently collection.
* @remarks
* This is different than toggleDimension that enabled/disables the dimension.
* This completely removes the specified dimension from the collection.
* @example
* ```typescript
* this.grid.removeDimension(dimension);
* ```
* dimension The dimension to be removed.
* @param dimension * The dimension to be removed.
*/
removeDimension(dimension) {
this.i.hw((dimension == null ? null : dimension.i));
}
/**
* Toggles the dimension's enabled state on or off.
* @remarks
* The dimension remains in its current collection. This just changes its enabled state.
* @example
* ```typescript
* this.grid.toggleDimension(dimension);
* ```
* dimension The dimension to be toggled.
* @param dimension * The dimension to be toggled.
*/
toggleDimension(dimension) {
this.i.h0((dimension == null ? null : dimension.i));
}
insertValueAt(value, index) {
this.i.hr((value == null ? null : value.i), index);
}
moveValue(value, index) {
this.i.ht((value == null ? null : value.i), index);
}
/**
* Removes value from collection.
* @remarks
* This is different than toggleValue that enabled/disables the value.
* This completely removes the specified value from the collection.
* @example
* ```typescript
* this.grid.removeValue(dimension);
* ```
* value The value to be removed.
* @param value * The value to be removed.
*/
removeValue(value) {
this.i.hx((value == null ? null : value.i));
}
/**
* Toggles the value's enabled state on or off.
* @remarks
* The value remains in its current collection. This just changes its enabled state.
* @example
* ```typescript
* this.grid.toggleValue(value);
* ```
* value The value to be toggled.
* @param value * The value to be toggled.
*/
toggleValue(value) {
this.i.h2((value == null ? null : value.i));
}
sortDimension(dimension, sortDirection) {
this.i.hy((dimension == null ? null : dimension.i), (sortDirection == null ? null : sortDirection));
}
filterDimension(dimension, value, conditionOrExpressionTree) {
this.i.ho((dimension == null ? null : dimension.i), value, (conditionOrExpressionTree == null ? null : conditionOrExpressionTree.i));
}
get dimensionsChange() {
return this._dimensionsChange;
}
set dimensionsChange(ev) {
if (this._dimensionsChange_wrapped !== null) {
this.i.dimensionsChange = delegateRemove(this.i.dimensionsChange, this._dimensionsChange_wrapped);
this._dimensionsChange_wrapped = null;
this._dimensionsChange = null;
}
this._dimensionsChange = ev;
this._dimensionsChange_wrapped = (o, e) => {
let outerArgs = new IgrDimensionsChangeEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeDimensionsChange) {
this.beforeDimensionsChange(this, outerArgs);
}
if (this._dimensionsChange) {
this._dimensionsChange(this, outerArgs);
}
};
this.i.dimensionsChange = delegateCombine(this.i.dimensionsChange, this._dimensionsChange_wrapped);
if (this.i.dimensionsChangeChanged) {
this.i.dimensionsChangeChanged();
}
;
}
get pivotConfigurationChange() {
return this._pivotConfigurationChange;
}
set pivotConfigurationChange(ev) {
if (this._pivotConfigurationChange_wrapped !== null) {
this.i.pivotConfigurationChange = delegateRemove(this.i.pivotConfigurationChange, this._pivotConfigurationChange_wrapped);
this._pivotConfigurationChange_wrapped = null;
this._pivotConfigurationChange = null;
}
this._pivotConfigurationChange = ev;
this._pivotConfigurationChange_wrapped = (o, e) => {
let outerArgs = new IgrPivotConfigurationChangedEventArgs();
outerArgs._provideImplementation(e);
if (this.beforePivotConfigurationChange) {
this.beforePivotConfigurationChange(this, outerArgs);
}
if (this._pivotConfigurationChange) {
this._pivotConfigurationChange(this, outerArgs);
}
};
this.i.pivotConfigurationChange = delegateCombine(this.i.pivotConfigurationChange, this._pivotConfigurationChange_wrapped);
if (this.i.pivotConfigurationChangeChanged) {
this.i.pivotConfigurationChangeChanged();
}
;
}
get dimensionInit() {
return this._dimensionInit;
}
set dimensionInit(ev) {
if (this._dimensionInit_wrapped !== null) {
this.i.dimensionInit = delegateRemove(this.i.dimensionInit, this._dimensionInit_wrapped);
this._dimensionInit_wrapped = null;
this._dimensionInit = null;
}
this._dimensionInit = ev;
this._dimensionInit_wrapped = (o, e) => {
let outerArgs = new IgrPivotDimensionEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeDimensionInit) {
this.beforeDimensionInit(this, outerArgs);
}
if (this._dimensionInit) {
this._dimensionInit(this, outerArgs);
}
};
this.i.dimensionInit = delegateCombine(this.i.dimensionInit, this._dimensionInit_wrapped);
if (this.i.dimensionInitChanged) {
this.i.dimensionInitChanged();
}
;
}
get valueInit() {
return this._valueInit;
}
set valueInit(ev) {
if (this._valueInit_wrapped !== null) {
this.i.valueInit = delegateRemove(this.i.valueInit, this._valueInit_wrapped);
this._valueInit_wrapped = null;
this._valueInit = null;
}
this._valueInit = ev;
this._valueInit_wrapped = (o, e) => {
let outerArgs = new IgrPivotValueEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeValueInit) {
this.beforeValueInit(this, outerArgs);
}
if (this._valueInit) {
this._valueInit(this, outerArgs);
}
};
this.i.valueInit = delegateCombine(this.i.valueInit, this._valueInit_wrapped);
if (this.i.valueInitChanged) {
this.i.valueInitChanged();
}
;
}
get dimensionsSortingExpressionsChange() {
return this._dimensionsSortingExpressionsChange;
}
set dimensionsSortingExpressionsChange(ev) {
if (this._dimensionsSortingExpressionsChange_wrapped !== null) {
this.i.dimensionsSortingExpressionsChange = delegateRemove(this.i.dimensionsSortingExpressionsChange, this._dimensionsSortingExpressionsChange_wrapped);
this._dimensionsSortingExpressionsChange_wrapped = null;
this._dimensionsSortingExpressionsChange = null;
}
this._dimensionsSortingExpressionsChange = ev;
this._dimensionsSortingExpressionsChange_wrapped = (o, e) => {
let outerArgs = new IgrSortingExpressionEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeDimensionsSortingExpressionsChange) {
this.beforeDimensionsSortingExpressionsChange(this, outerArgs);
}
if (this._dimensionsSortingExpressionsChange) {
this._dimensionsSortingExpressionsChange(this, outerArgs);
}
};
this.i.dimensionsSortingExpressionsChange = delegateCombine(this.i.dimensionsSortingExpressionsChange, this._dimensionsSortingExpressionsChange_wrapped);
if (this.i.dimensionsSortingExpressionsChangeChanged) {
this.i.dimensionsSortingExpressionsChangeChanged();
}
;
}
get valuesChange() {
return this._valuesChange;
}
set valuesChange(ev) {
if (this._valuesChange_wrapped !== null) {
this.i.valuesChange = delegateRemove(this.i.valuesChange, this._valuesChange_wrapped);
this._valuesChange_wrapped = null;
this._valuesChange = null;
}
this._valuesChange = ev;
this._valuesChange_wrapped = (o, e) => {
let outerArgs = new IgrValuesChangeEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeValuesChange) {
this.beforeValuesChange(this, outerArgs);
}
if (this._valuesChange) {
this._valuesChange(this, outerArgs);
}
};
this.i.valuesChange = delegateCombine(this.i.valuesChange, this._valuesChange_wrapped);
if (this.i.valuesChangeChanged) {
this.i.valuesChangeChanged();
}
;
}
}