UNPKG

igniteui-react-grids

Version:

Ignite UI React grid components.

227 lines (226 loc) 7.49 kB
import * as React from 'react'; import { IgrPivotGrid } from "./igr-pivot-grid"; import { PivotDataSelector } from "./PivotDataSelector"; import { TypeRegistrar } from "igniteui-react-core"; import { ReactRenderer, PortalManager } from "igniteui-react-core"; import { NamePatcher, getModifiedProps, isValidProp, ensureBool, toSpinal, initializePropertiesFromCss } from "igniteui-react-core"; export class IgrPivotDataSelector extends React.Component { createImplementation() { return new PivotDataSelector(); } get nativeElement() { return this._implementation.nativeElement; } /** * @hidden */ get i() { return this._implementation; } /** * @hidden */ static _createFromInternal(internal) { if (!internal) { return null; } if (!internal.$type) { return null; } let name = internal.$type.name; let externalName = "Igr" + name; if (!TypeRegistrar.isRegistered(externalName)) { return null; } return TypeRegistrar.create(externalName); } onImplementationCreated() { } constructor(props) { super(props); this.mounted = false; this.__p = null; this._hasUserValues = new Set(); this._stylingContainer = null; this._stylingParent = null; this._inStyling = false; if (this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this)); } this._getMainRef = this._getMainRef.bind(this); this._implementation = this.createImplementation(); this._portalManager = new PortalManager("templates", () => { if (this.mounted) { this.setState({}); } }); if (typeof window !== 'undefined' && typeof document !== 'undefined') { this._renderer = new ReactRenderer(this._implementation.nativeElement, document, false, null, this._portalManager); } this._implementation.externalObject = this; this.onImplementationCreated(); if (this._initializeAdapters) { this._initializeAdapters(); } } componentDidMount() { this.i.nativeElement = this._elRef; this.mounted = true; for (const p of Object.keys(this.props)) { if (isValidProp(this, p)) { this[p] = this.props[p]; } } } 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; } 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]; }); let propChildren = this.props.children; let children = []; React.Children.forEach(propChildren, (ch) => { children.push(React.cloneElement(ch)); }); this._portalManager.onRender(children); let style = {}; if (this.props.style) { style = this.props.style; } let div = React.createElement("igc-pivot-data-selector", Object.assign(Object.assign({}, nativeProps), { ref: this._getMainRef, id: this.props.id, class: this.props.className, style: style, children: children })); return div; } _getMainRef(ref) { this._elRef = ref; } get columnsExpanded() { return this.i.d; } set columnsExpanded(v) { this.i.d = ensureBool(v); } get rowsExpanded() { return this.i.f; } set rowsExpanded(v) { this.i.f = ensureBool(v); } get filtersExpanded() { return this.i.e; } set filtersExpanded(v) { this.i.e = ensureBool(v); } get valuesExpanded() { return this.i.g; } set valuesExpanded(v) { this.i.g = ensureBool(v); } /** * Sets the grid. */ get grid() { const r = this.i.a; if (r == null) { return null; } if (!r.externalObject) { let e = new IgrPivotGrid({}); if (r.$type) { e._implementation = r; } else { if (e.i.setNativeElement) { e.i.setNativeElement(r); } } r.externalObject = e; } return r.externalObject; } set grid(v) { if (v != null && this._stylingContainer && v._styling) v._styling(this._stylingContainer, this, this); v == null ? this.i.a = null : this.i.a = v.i; } findByName(name) { if (this.findEphemera) { if (name && name.indexOf("@@e:") == 0) { return this.findEphemera(name); } } if (this.grid && this.grid.name && this.grid.name == name) { return this.grid; } return null; } get hasUserValues() { return this._hasUserValues; } __m(propertyName) { if (!this._inStyling) { this._hasUserValues.add(propertyName); } } _styling(container, component, parent) { if (this._inStyling) { return; } this._inStyling = true; this._stylingContainer = container; this._stylingParent = component; let genericPrefix = ""; let typeName = this.i.$type.name; if (typeName.indexOf("Xam") === 0) { typeName = typeName.substring(3); } genericPrefix = toSpinal("PivotDataSelector"); let additionalPrefixes = []; let prefix = toSpinal(typeName); additionalPrefixes.push(prefix + "-"); let b = this.i.$type.baseType; while (b && b.name != "Object" && b.name != "Base" && b.name != "Control" && b.Name != "DependencyObject" && b.Name != "FrameworkElement") { typeName = b.name; if (typeName.indexOf("Xam") === 0) { typeName = typeName.substring(3); } let basePrefix = toSpinal(typeName); additionalPrefixes.push(basePrefix + "-"); b = b.baseType; } if (parent) { let parentTypeName = parent.i.$type.name; if (parentTypeName.indexOf("Xam") === 0) { parentTypeName = parentTypeName.substring(3); } let parentPrefix = toSpinal(parentTypeName); additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-"); additionalPrefixes.push(parentPrefix + "-" + prefix + "-"); } initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes); if (this.grid && this.grid._styling) { this.grid._styling(container, component, this); } if (this._otherStyling) { this._otherStyling(container, component, parent); } this._inStyling = false; } setNativeElement(element) { this.i.setNativeElement(element); } }