igniteui-react-grids
Version:
Ignite UI React grid components.
552 lines (551 loc) • 20.1 kB
JavaScript
import * as React from 'react';
import { ensureEnum, brushToString, stringToBrush, ensureBool, NamePatcher, isValidProp, getModifiedProps } from "igniteui-react-core";
import { FontInfo } from "igniteui-react-core";
import { ReactRenderer } from "igniteui-react-core";
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { GridColumnOptions } from './GridColumnOptions';
import { IgrGridColumnOptionsBase } from "./igr-grid-column-options-base";
import { IgrGridColumnSortOptions } from "./igr-grid-column-sort-options";
import { IgrGridColumnMoveOptions } from "./igr-grid-column-move-options";
import { IgrGridColumnPinOptions } from "./igr-grid-column-pin-options";
import { IgrGridColumnHideOptions } from "./igr-grid-column-hide-options";
import { IgrGridColumnGroupOptions } from "./igr-grid-column-group-options";
import { IgrGridColumnFilterOptions } from "./igr-grid-column-filter-options";
import { IgrGridColumnSummaryOptions } from "./igr-grid-column-summary-options";
import { IgrGridColumnButtonOptions } from "./igr-grid-column-button-options";
import { IgrApplyButtonClickEventArgs } from './igr-apply-button-click-event-args';
import { IgrCancelButtonClickEventArgs } from './igr-cancel-button-click-event-args';
import { ControlDisplayDensity_$type } from "igniteui-react-core";
export class IgrGridColumnOptions extends IgrGridColumnOptionsBase {
set height(value) {
this._height = value;
if (this._elRef) {
this._elRef.style.height = value;
this.i.notifySizeChanged();
}
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
if (this._elRef) {
this._elRef.style.height = value;
this.i.notifySizeChanged();
}
}
get width() {
return this._width;
}
_getMainRef(ref) {
this._elRef = ref;
this.verifyReferences();
}
// These are the main sections at the root level.
_getHeaderSectionRef(ref) {
this._headerSectionRef = ref;
this.verifyReferences();
}
_getSortSectionRef(ref) {
this._sortSectionRef = ref;
this.verifyReferences();
}
_getMoveSectionRef(ref) {
this._moveSectionRef = ref;
this.verifyReferences();
}
_getPinSectionRef(ref) {
this._pinSectionRef = ref;
this.verifyReferences();
}
_getFilterSectionRef(ref) {
this._filterSectionRef = ref;
this.verifyReferences();
}
_getSummarySectionRef(ref) {
this._summarySectionRef = ref;
this.verifyReferences();
}
_getButtonSectionRef(ref) {
this._buttonSectionRef = ref;
this.verifyReferences();
}
// Sub-sections
_getHeaderColumnNameSectionRef(ref) {
this._headerColumnNameSectionRef = ref;
this.verifyReferences();
}
_getHeaderButtonsSectionRef(ref) {
this._headerButtonsSectionRef = ref;
this.verifyReferences();
}
_getHideSectionRef(ref) {
this._hideSectionRef = ref;
this.verifyReferences();
}
_getGroupSectionRef(ref) {
this._groupSectionRef = ref;
this.verifyReferences();
}
// The actual components
_getSortOptionsRef(ref) {
this._sortOptionsRef = ref;
this.verifyReferences();
}
_getMoveOptionsRef(ref) {
this._moveOptionsRef = ref;
this.verifyReferences();
}
_getPinOptionsRef(ref) {
this._pinOptionsRef = ref;
this.verifyReferences();
}
_getHideOptionsRef(ref) {
this._hideOptionsRef = ref;
this.verifyReferences();
}
_getGroupOptionsRef(ref) {
this._groupOptionsRef = ref;
this.verifyReferences();
}
_getFilterOptionsRef(ref) {
this._filterOptionsRef = ref;
this.verifyReferences();
}
_getSummaryOptionsRef(ref) {
this._summaryOptionsRef = ref;
this.verifyReferences();
}
_getButtonOptionsRef(ref) {
this._buttonOptionsRef = ref;
this.verifyReferences();
}
render() {
return (React.createElement("div", { className: "ig-grid-column-options igr-grid-column-options", ref: this._getMainRef }, React.createElement("div", { ref: this._getHeaderSectionRef, key: "headerSection" }, React.createElement("div", { ref: this._getHeaderColumnNameSectionRef, key: "headerColumnNameSection" }), React.createElement("div", { ref: this._getHeaderButtonsSectionRef, key: "headerButtonsSection" }, React.createElement("div", { ref: this._getGroupSectionRef, key: "groupSection" }, React.createElement(IgrGridColumnGroupOptions, { ref: this._getGroupOptionsRef, key: "groupOptions" })), React.createElement("div", { ref: this._getHideSectionRef, key: "hideSection" }, React.createElement(IgrGridColumnHideOptions, { ref: this._getHideOptionsRef, key: "hideOptions" })))), React.createElement("div", { ref: this._getSortSectionRef, key: "sortSection" }, React.createElement(IgrGridColumnSortOptions, { ref: this._getSortOptionsRef, key: "sortOptions" })), React.createElement("div", { ref: this._getMoveSectionRef, key: "moveSection" }, React.createElement(IgrGridColumnMoveOptions, { ref: this._getMoveOptionsRef, key: "moveOptions" })), React.createElement("div", { ref: this._getPinSectionRef, key: "pinSection" }, React.createElement(IgrGridColumnPinOptions, { ref: this._getPinOptionsRef, key: "pinOptions" })), React.createElement("div", { ref: this._getSummarySectionRef, key: "summarySection" }, React.createElement(IgrGridColumnSummaryOptions, { ref: this._getSummaryOptionsRef, key: "summaryOptions" })), React.createElement("div", { ref: this._getFilterSectionRef, key: "filterSection" }, React.createElement(IgrGridColumnFilterOptions, { ref: this._getFilterOptionsRef, key: "filterOptions" })), React.createElement("div", { ref: this._getButtonSectionRef, key: "buttonSection" }, React.createElement(IgrGridColumnButtonOptions, { ref: this._getButtonOptionsRef, key: "buttonOptions" }))));
}
verifyReferences() {
if (this._elRef &&
this._headerSectionRef &&
this._sortSectionRef &&
this._moveSectionRef &&
this._pinSectionRef &&
this._filterSectionRef &&
this._summarySectionRef &&
this._buttonSectionRef &&
this._headerColumnNameSectionRef &&
this._headerButtonsSectionRef &&
this._hideSectionRef &&
this._groupSectionRef &&
this._sortOptionsRef &&
this._moveOptionsRef &&
this._pinOptionsRef &&
this._hideOptionsRef &&
this._groupOptionsRef &&
this._filterOptionsRef &&
this._summaryOptionsRef &&
this._buttonOptionsRef) {
this._reactRenderer = new ReactRenderer(this._elRef, document, false, null);
if (document) {
this._elRef.style.display = "block";
this._elRef.style.width = "100%";
this._elRef.style.height = "100%";
}
this.i.provideRenderer(this._reactRenderer);
var headerSectionWrapper = this._reactRenderer.getWrapper(this._headerSectionRef);
var sortSectionWrapper = this._reactRenderer.getWrapper(this._sortSectionRef);
var moveSectionWrapper = this._reactRenderer.getWrapper(this._moveSectionRef);
var pinSectionWrapper = this._reactRenderer.getWrapper(this._pinSectionRef);
var filterSectionWrapper = this._reactRenderer.getWrapper(this._filterSectionRef);
var summarySectionWrapper = this._reactRenderer.getWrapper(this._summarySectionRef);
var buttonSectionWrapper = this._reactRenderer.getWrapper(this._buttonSectionRef);
var headerColumnNameSectionWrapper = this._reactRenderer.getWrapper(this._headerColumnNameSectionRef);
var headerButtonsSectionWrapper = this._reactRenderer.getWrapper(this._headerButtonsSectionRef);
var hideSectionWrapper = this._reactRenderer.getWrapper(this._hideSectionRef);
var groupSectionWrapper = this._reactRenderer.getWrapper(this._groupSectionRef);
this.i.provideContent(headerSectionWrapper, sortSectionWrapper, moveSectionWrapper, pinSectionWrapper, filterSectionWrapper, summarySectionWrapper, buttonSectionWrapper, headerColumnNameSectionWrapper, headerButtonsSectionWrapper, hideSectionWrapper, groupSectionWrapper, this._sortOptionsRef.i, this._moveOptionsRef.i, this._pinOptionsRef.i, this._hideOptionsRef.i, this._groupOptionsRef.i, this._filterOptionsRef.i, this._summaryOptionsRef.i, this._buttonOptionsRef.i);
this._reactRenderer.addSizeWatcher(() => {
this.i.notifySizeChanged();
});
}
}
constructor(props) {
super(props);
this._reactRenderer = null;
this._applyButtonClick = null;
this._applyButtonClick_wrapped = null;
this._cancelButtonClick = null;
this._cancelButtonClick_wrapped = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._getMainRef = this._getMainRef.bind(this);
this._getSortSectionRef = this._getSortSectionRef.bind(this);
this._getMoveSectionRef = this._getMoveSectionRef.bind(this);
this._getPinSectionRef = this._getPinSectionRef.bind(this);
this._getFilterSectionRef = this._getFilterSectionRef.bind(this);
this._getSummarySectionRef = this._getSummarySectionRef.bind(this);
this._getButtonSectionRef = this._getButtonSectionRef.bind(this);
this._getHeaderColumnNameSectionRef = this._getHeaderColumnNameSectionRef.bind(this);
this._getHeaderButtonsSectionRef = this._getHeaderButtonsSectionRef.bind(this);
this._getHideSectionRef = this._getHideSectionRef.bind(this);
this._getGroupSectionRef = this._getGroupSectionRef.bind(this);
this._getHeaderSectionRef = this._getHeaderSectionRef.bind(this);
this._getSortOptionsRef = this._getSortOptionsRef.bind(this);
this._getMoveOptionsRef = this._getMoveOptionsRef.bind(this);
this._getPinOptionsRef = this._getPinOptionsRef.bind(this);
this._getHideOptionsRef = this._getHideOptionsRef.bind(this);
this._getGroupOptionsRef = this._getGroupOptionsRef.bind(this);
this._getFilterOptionsRef = this._getFilterOptionsRef.bind(this);
this._getSummaryOptionsRef = this._getSummaryOptionsRef.bind(this);
this._getButtonOptionsRef = this._getButtonOptionsRef.bind(this);
var columnOptions = this.i;
columnOptions.notifySizeChanged();
if (props) {
this.initializeProperties();
}
}
shouldComponentUpdate(nextProps, nextState) {
const mod = getModifiedProps(this.props, nextProps);
for (const p of Object.keys(mod)) {
if (isValidProp(this, p)) {
this[p] = mod[p];
}
}
return true;
}
initializeProperties() {
for (const p of Object.keys(this.props)) {
if (isValidProp(this, p)) {
this[p] = this.props[p];
}
}
}
// supports angular themes or custom properties set in CSS
updateStyle() {
this._styling(this._elRef, this);
}
destroy() {
this.i.destroy();
if (this._reactRenderer)
this._reactRenderer.destroy();
}
componentWillUnmount() {
}
componentDidMount() {
this._elRef.style.width = this._width ? this._width : "";
this._elRef.style.height = this._height ? this._height : "";
this.i.notifySizeChanged();
this.initializeContent();
}
initializeContent() {
this._styling(this._elRef, this);
this.updateStyle();
this.i.notifySizeChanged();
}
createImplementation() {
return new GridColumnOptions();
}
get i() {
return this._implementation;
}
get headerOptionsVisibleResolved() {
return this.i.cp;
}
get sortOptionsVisibleResolved() {
return this.i.c3;
}
get moveOptionsVisibleResolved() {
return this.i.cx;
}
get pinOptionsVisibleResolved() {
return this.i.c0;
}
get hideOptionsVisibleResolved() {
return this.i.cu;
}
get groupOptionsVisibleResolved() {
return this.i.co;
}
get filterOptionsVisibleResolved() {
return this.i.cl;
}
get summaryOptionsVisibleResolved() {
return this.i.c6;
}
/**
* Gets or sets the font to use for columnNames.
*/
get columnNameTextStyle() {
if (this.i.cg == null) {
return null;
}
return this.i.cg.fontString;
}
set columnNameTextStyle(v) {
let fi = new FontInfo();
fi.fontString = v;
this.i.cg = fi;
}
/**
* Gets or sets the amount of left padding to use for the left edge of the component.
*/
get paddingLeft() {
return this.i.dh;
}
set paddingLeft(v) {
this.i.dh = +v;
}
/**
* Gets or sets the amount of left padding to use for the top edge of the component.
*/
get paddingTop() {
return this.i.dj;
}
set paddingTop(v) {
this.i.dj = +v;
}
/**
* Gets or sets the amount of left padding to use for the right edge of the component.
*/
get paddingRight() {
return this.i.di;
}
set paddingRight(v) {
this.i.di = +v;
}
/**
* Gets or sets the amount of left padding to use for the bottom edge of the component.
*/
get paddingBottom() {
return this.i.dg;
}
set paddingBottom(v) {
this.i.dg = +v;
}
get headerVisible() {
return this.i.cr;
}
set headerVisible(v) {
this.i.cr = ensureBool(v);
}
get sortOptionsVisible() {
return this.i.c2;
}
set sortOptionsVisible(v) {
this.i.c2 = ensureBool(v);
}
get moveOptionsVisible() {
return this.i.cw;
}
set moveOptionsVisible(v) {
this.i.cw = ensureBool(v);
}
get pinOptionsVisible() {
return this.i.cz;
}
set pinOptionsVisible(v) {
this.i.cz = ensureBool(v);
}
get hideOptionsVisible() {
return this.i.ct;
}
set hideOptionsVisible(v) {
this.i.ct = ensureBool(v);
}
get groupOptionsVisible() {
return this.i.cn;
}
set groupOptionsVisible(v) {
this.i.cn = ensureBool(v);
}
get filterOptionsVisible() {
return this.i.ck;
}
set filterOptionsVisible(v) {
this.i.ck = ensureBool(v);
}
get summaryOptionsVisible() {
return this.i.c5;
}
set summaryOptionsVisible(v) {
this.i.c5 = ensureBool(v);
}
get sortHeaderCaption() {
return this.i.e4;
}
set sortHeaderCaption(v) {
this.i.e4 = v;
}
get sortAscendingCaption() {
return this.i.ey;
}
set sortAscendingCaption(v) {
this.i.ey = v;
}
get sortDescendingCaption() {
return this.i.e1;
}
set sortDescendingCaption(v) {
this.i.e1 = v;
}
get moveHeaderCaption() {
return this.i.ea;
}
set moveHeaderCaption(v) {
this.i.ea = v;
}
get moveLeftCaption() {
return this.i.ed;
}
set moveLeftCaption(v) {
this.i.ed = v;
}
get moveRightCaption() {
return this.i.eh;
}
set moveRightCaption(v) {
this.i.eh = v;
}
get pinHeaderCaption() {
return this.i.eo;
}
set pinHeaderCaption(v) {
this.i.eo = v;
}
get pinLeftCaption() {
return this.i.er;
}
set pinLeftCaption(v) {
this.i.er = v;
}
get pinRightCaption() {
return this.i.ev;
}
set pinRightCaption(v) {
this.i.ev = v;
}
get applyFiltersButtonCaption() {
return this.i.dp;
}
set applyFiltersButtonCaption(v) {
this.i.dp = v;
}
get cancelFiltersButtonCaption() {
return this.i.ds;
}
set cancelFiltersButtonCaption(v) {
this.i.ds = v;
}
get clearColumnFiltersCaption() {
return this.i.dv;
}
set clearColumnFiltersCaption(v) {
this.i.dv = v;
}
/**
* Gets or sets the display density to use for the summary list menu.
*/
get summaryListDensity() {
return this.i.summaryListDensity;
}
set summaryListDensity(v) {
this.i.summaryListDensity = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets the actual display density used for the summary list menu.
*/
get actualSummaryListDensity() {
return this.i.b8;
}
set actualSummaryListDensity(v) {
this.i.b8 = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets or sets the display Density to use for the buttons in the component.
*/
get filterListDensity() {
return this.i.filterListDensity;
}
set filterListDensity(v) {
this.i.filterListDensity = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets the actual display filterListDensity to use for the component.
*/
get actualFilterListDensity() {
return this.i.b7;
}
set actualFilterListDensity(v) {
this.i.b7 = ensureEnum(ControlDisplayDensity_$type, v);
}
get filterListPlaceholderText() {
return this.i.d1;
}
set filterListPlaceholderText(v) {
this.i.d1 = v;
}
/**
* Gets or sets the text color for the summary options menu.
*/
get summaryListTextColor() {
return brushToString(this.i.fm);
}
set summaryListTextColor(v) {
this.i.fm = stringToBrush(v);
}
/**
* Gets or sets the background color for the summary options menu.
*/
get summaryListBackground() {
return brushToString(this.i.fl);
}
set summaryListBackground(v) {
this.i.fl = stringToBrush(v);
}
get applyButtonClick() {
return this._applyButtonClick;
}
set applyButtonClick(ev) {
if (this._applyButtonClick_wrapped !== null) {
this.i.applyButtonClick = delegateRemove(this.i.applyButtonClick, this._applyButtonClick_wrapped);
this._applyButtonClick_wrapped = null;
this._applyButtonClick = null;
}
this._applyButtonClick = ev;
this._applyButtonClick_wrapped = (o, e) => {
let outerArgs = new IgrApplyButtonClickEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeApplyButtonClick) {
this.beforeApplyButtonClick(this, outerArgs);
}
if (this._applyButtonClick) {
this._applyButtonClick(this, outerArgs);
}
};
this.i.applyButtonClick = delegateCombine(this.i.applyButtonClick, this._applyButtonClick_wrapped);
;
}
get cancelButtonClick() {
return this._cancelButtonClick;
}
set cancelButtonClick(ev) {
if (this._cancelButtonClick_wrapped !== null) {
this.i.cancelButtonClick = delegateRemove(this.i.cancelButtonClick, this._cancelButtonClick_wrapped);
this._cancelButtonClick_wrapped = null;
this._cancelButtonClick = null;
}
this._cancelButtonClick = ev;
this._cancelButtonClick_wrapped = (o, e) => {
let outerArgs = new IgrCancelButtonClickEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeCancelButtonClick) {
this.beforeCancelButtonClick(this, outerArgs);
}
if (this._cancelButtonClick) {
this._cancelButtonClick(this, outerArgs);
}
};
this.i.cancelButtonClick = delegateCombine(this.i.cancelButtonClick, this._cancelButtonClick_wrapped);
;
}
}