igniteui-react-inputs
Version:
Ignite UI React input components.
871 lines (868 loc) • 28.1 kB
JavaScript
import * as React from 'react';
import { XButtonGroup } from "./XButtonGroup";
import { XButton } from "./XButton";
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, isValidProp, toSpinal, getModifiedProps } from "igniteui-react-core";
import { ReactRenderer, PortalManager } from "igniteui-react-core";
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { IgrXButtonGroupButtonCollection } from './igr-x-button-group-button-collection';
import { CollectionAdapter } from "igniteui-react-core";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { IgrButtonGroupSelectionChangedEventArgs } from './igr-button-group-selection-changed-event-args';
import { ContentChildrenManager } from "igniteui-react-core";
import { ButtonGroupOrientation_$type } from './ButtonGroupOrientation';
import { ControlDisplayDensity_$type } from "igniteui-react-core";
import { BaseControlTheme_$type } from "igniteui-react-core";
import { ButtonGroupDisplayStyle_$type } from './ButtonGroupDisplayStyle';
export class IgrXButtonGroup extends React.Component {
_getMainRef(ref) {
this._elRef = ref;
}
_updateContentChildren() {
this.contentButtons.length = 0;
let contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
for (let i = 0; i < contentChildrenActual.length; i++) {
if ((XButton.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentButtons.push(contentChildrenActual[i]);
}
}
if (this._buttonsAdapter !== null) {
this._buttonsAdapter.notifyContentChanged();
}
}
/**
* A collection of manually added style mappings for the treemap.
*/
get buttons() {
if (this._buttons === null) {
let coll = new IgrXButtonGroupButtonCollection();
let inner = coll._innerColl;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._buttonsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._buttonsAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._buttonsAdapter.removeManualItemAt(e.oldStartingIndex);
this._buttonsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._buttonsAdapter.clearManualItems();
break;
}
});
this._buttons = coll;
}
return this._buttons;
}
render() {
let children = this._contentChildrenManager.getChildren(this.props.children);
this._portalManager.onRender(children);
let div = React.createElement("div", {
className: "ig-x-button-group igr-x-button-group",
ref: this._getMainRef,
children: children
});
return div;
}
requestRender() {
if (this._initialized) {
this.setState({});
}
}
constructor(props) {
super(props);
this._wrapper = null;
this.contentButtons = [];
/**
* The style mappings actually present in the treemap. Do not directly modify this array.
* This array's contents can be modified by causing React to reproject the child content.
* Or adding and removing ranges from the manual ranges collection on the ranges property.
*/
this.actualButtons = [];
this._buttons = null;
this._buttonsAdapter = null;
this._implementation = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._selectionChanged = null;
this._selectionChanged_wrapped = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._contentChildrenManager = new ContentChildrenManager((ch) => ch.props.name || ch.key || ch.props.id, (ch) => ch.name || ch.key || ch.id, () => this._updateContentChildren());
this._implementation = this.createImplementation();
this._implementation.externalObject = this;
this._getMainRef = this._getMainRef.bind(this);
var container;
if (document) {
container = document.createElement("div");
}
var root;
root = container;
if (container != null) {
root = container;
}
this.requestRender = this.requestRender.bind(this);
this._portalManager = new PortalManager("buttonContent", this.requestRender);
var ren = new ReactRenderer(root, document, true, {}, this._portalManager);
this._wrapper = ren;
this._container = this._wrapper.rootWrapper;
this._container.setStyleProperty("display", "inline-block");
var buttonGroup = this.i;
this._buttonGroup = buttonGroup;
this._buttonsAdapter = new CollectionAdapter(this.contentButtons, this.i.buttons, this.actualButtons, (c) => c.i, (i) => {
if (this._container && this._container.getNativeElement().parentElement) {
i._styling(this._container.getNativeElement(), this, this);
}
}, (i) => { });
buttonGroup.provideContainer(ren);
if (props) {
this.initializeProperties();
}
}
//private _getLabelPortal(element: DomWrapper, portalCallback: (portal: DomPortal) => void): void {
// this._portalManager.getPortal(element, "TemplateContent", portalCallback);
//}
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._buttonGroup.destroy();
this._wrapper.destroy();
}
componentWillUnmount() {
}
componentDidMount() {
this._elRef.appendChild(this._container.getNativeElement());
this.initializeContent();
}
initializeContent() {
this._styling(this._container.getNativeElement(), this);
this.updateStyle();
}
createImplementation() {
return new XButtonGroup();
}
get i() {
return this._implementation;
}
/**
* Gets or sets the display style to use for the button.
*/
get displayType() {
return this.i.i;
}
set displayType(v) {
this.i.i = ensureEnum(ButtonGroupDisplayStyle_$type, v);
}
/**
* Gets or sets the base built in theme to use for the button group.
*/
get baseTheme() {
return this.i.p;
}
set baseTheme(v) {
this.i.p = ensureEnum(BaseControlTheme_$type, v);
}
/**
* Gets or sets the display density to use for the button group.
*/
get density() {
return this.i.t;
}
set density(v) {
this.i.t = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets the actual display density to use for the button group.
*/
get actualDensity() {
return this.i.s;
}
set actualDensity(v) {
this.i.s = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets the currently selected button indices.
*/
get selectedIndices() {
return this.i.d;
}
set selectedIndices(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.d = v;
}
/**
* Gets the actual item corner radius for the appropriate corners.
*/
get actualItemCornerRadius() {
return this.i.al;
}
set actualItemCornerRadius(v) {
this.i.al = +v;
}
/**
* Gets the actual item background color.
*/
get actualItemBackgroundColor() {
return brushToString(this.i.ez);
}
set actualItemBackgroundColor(v) {
this.i.ez = stringToBrush(v);
}
/**
* Gets the actual item background color.
*/
get actualItemDisabledBackgroundColor() {
return brushToString(this.i.e1);
}
set actualItemDisabledBackgroundColor(v) {
this.i.e1 = stringToBrush(v);
}
/**
* Gets the actual item text color.
*/
get actualItemTextColor() {
return brushToString(this.i.e6);
}
set actualItemTextColor(v) {
this.i.e6 = stringToBrush(v);
}
/**
* Gets the actual item text color.
*/
get actualItemDisabledTextColor() {
return brushToString(this.i.e3);
}
set actualItemDisabledTextColor(v) {
this.i.e3 = stringToBrush(v);
}
/**
* Gets the actual item border color.
*/
get actualItemBorderColor() {
return brushToString(this.i.e0);
}
set actualItemBorderColor(v) {
this.i.e0 = stringToBrush(v);
}
/**
* Gets the actual item border color.
*/
get actualItemDisabledBorderColor() {
return brushToString(this.i.e2);
}
set actualItemDisabledBorderColor(v) {
this.i.e2 = stringToBrush(v);
}
/**
* Gets the actual item border width.
*/
get actualItemBorderWidth() {
return this.i.ak;
}
set actualItemBorderWidth(v) {
this.i.ak = +v;
}
/**
* Gets the actual selected item background color.
*/
get actualSelectedItemBackgroundColor() {
return brushToString(this.i.e7);
}
set actualSelectedItemBackgroundColor(v) {
this.i.e7 = stringToBrush(v);
}
/**
* Gets the stroke actual selected item text color.
*/
get actualSelectedItemTextColor() {
return brushToString(this.i.fa);
}
set actualSelectedItemTextColor(v) {
this.i.fa = stringToBrush(v);
}
/**
* Gets the actual item hovered background color.
*/
get actualItemHoverBackgroundColor() {
return brushToString(this.i.e4);
}
set actualItemHoverBackgroundColor(v) {
this.i.e4 = stringToBrush(v);
}
/**
* Gets the actual item text color.
*/
get actualItemHoverTextColor() {
return brushToString(this.i.e5);
}
set actualItemHoverTextColor(v) {
this.i.e5 = stringToBrush(v);
}
/**
* Gets the actual selected item hovered background color.
*/
get actualSelectedItemHoverBackgroundColor() {
return brushToString(this.i.e8);
}
set actualSelectedItemHoverBackgroundColor(v) {
this.i.e8 = stringToBrush(v);
}
/**
* Gets the actual selected item hovered text color.
*/
get actualSelectedItemHoverTextColor() {
return brushToString(this.i.e9);
}
set actualSelectedItemHoverTextColor(v) {
this.i.e9 = stringToBrush(v);
}
/**
* Gets or sets the corner radius to use for the appropriate corners for the item buttons.
*/
get itemCornerRadius() {
return this.i.a1;
}
set itemCornerRadius(v) {
this.i.a1 = +v;
}
/**
* Gets or sets the color to use the background of the buttons in the group.
*/
get itemBackgroundColor() {
return brushToString(this.i.hn);
}
set itemBackgroundColor(v) {
this.i.hn = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the background of the buttons in the group.
*/
get itemDisabledBackgroundColor() {
return brushToString(this.i.hp);
}
set itemDisabledBackgroundColor(v) {
this.i.hp = stringToBrush(v);
}
/**
* Gets or sets the color to use the text of the buttons in the group.
*/
get itemTextColor() {
return brushToString(this.i.hu);
}
set itemTextColor(v) {
this.i.hu = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the text of the buttons in the group.
*/
get itemDisabledTextColor() {
return brushToString(this.i.hr);
}
set itemDisabledTextColor(v) {
this.i.hr = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered background of the buttons in the group.
*/
get itemHoverBackgroundColor() {
return brushToString(this.i.hs);
}
set itemHoverBackgroundColor(v) {
this.i.hs = stringToBrush(v);
}
/**
* Gets or sets the color to use the border of the buttons in the group.
*/
get itemBorderColor() {
return brushToString(this.i.ho);
}
set itemBorderColor(v) {
this.i.ho = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the border of the buttons in the group.
*/
get itemDisabledBorderColor() {
return brushToString(this.i.hq);
}
set itemDisabledBorderColor(v) {
this.i.hq = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the buttons in the group.
*/
get itemBorderWidth() {
return this.i.a0;
}
set itemBorderWidth(v) {
this.i.a0 = +v;
}
/**
* Gets or sets the color to use the hovered text of the buttons in the group.
*/
get itemHoverTextColor() {
return brushToString(this.i.ht);
}
set itemHoverTextColor(v) {
this.i.ht = stringToBrush(v);
}
/**
* Gets or sets the color to use the background of the buttons in the group that are selected.
*/
get selectedItemBackgroundColor() {
return brushToString(this.i.h7);
}
set selectedItemBackgroundColor(v) {
this.i.h7 = stringToBrush(v);
}
/**
* Gets or sets the color to use the text of the buttons in the group that are selected.
*/
get selectedItemTextColor() {
return brushToString(this.i.ia);
}
set selectedItemTextColor(v) {
this.i.ia = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered background of the buttons in the group that are selected.
*/
get selectedItemHoverBackgroundColor() {
return brushToString(this.i.h8);
}
set selectedItemHoverBackgroundColor(v) {
this.i.h8 = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered text of the buttons in the group that are selected.
*/
get selectedItemHoverTextColor() {
return brushToString(this.i.h9);
}
set selectedItemHoverTextColor(v) {
this.i.h9 = stringToBrush(v);
}
/**
* Gets or sets the corner radius to use for the appropriate corners for the outlined type item buttons.
*/
get outlinedItemCornerRadius() {
return this.i.a3;
}
set outlinedItemCornerRadius(v) {
this.i.a3 = +v;
}
/**
* Gets or sets the color to use the background of the buttons in the group when type is outlined.
*/
get outlinedItemBackgroundColor() {
return brushToString(this.i.hv);
}
set outlinedItemBackgroundColor(v) {
this.i.hv = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the background of the buttons in the group when type is outlined.
*/
get outlinedItemDisabledBackgroundColor() {
return brushToString(this.i.hx);
}
set outlinedItemDisabledBackgroundColor(v) {
this.i.hx = stringToBrush(v);
}
/**
* Gets or sets the color to use the text of the buttons in the group when type is outlined.
*/
get outlinedItemTextColor() {
return brushToString(this.i.h2);
}
set outlinedItemTextColor(v) {
this.i.h2 = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the text of the buttons in the group when type is outlined.
*/
get outlinedItemDisabledTextColor() {
return brushToString(this.i.hz);
}
set outlinedItemDisabledTextColor(v) {
this.i.hz = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered background of the buttons in the group when type is outlined.
*/
get outlinedItemHoverBackgroundColor() {
return brushToString(this.i.h0);
}
set outlinedItemHoverBackgroundColor(v) {
this.i.h0 = stringToBrush(v);
}
/**
* Gets or sets the color to use the border of the buttons in the group when type is outlined.
*/
get outlinedItemBorderColor() {
return brushToString(this.i.hw);
}
set outlinedItemBorderColor(v) {
this.i.hw = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the border of the buttons in the group when type is outlined.
*/
get outlinedItemDisabledBorderColor() {
return brushToString(this.i.hy);
}
set outlinedItemDisabledBorderColor(v) {
this.i.hy = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the buttons in the group when type is outlined.
*/
get outlinedItemBorderWidth() {
return this.i.a2;
}
set outlinedItemBorderWidth(v) {
this.i.a2 = +v;
}
/**
* Gets or sets the color to use the hovered text of the buttons in the group when type is outlined.
*/
get outlinedItemHoverTextColor() {
return brushToString(this.i.h1);
}
set outlinedItemHoverTextColor(v) {
this.i.h1 = stringToBrush(v);
}
/**
* Gets or sets the color to use the background of the buttons in the group that are selected when type is outlined.
*/
get outlinedSelectedItemBackgroundColor() {
return brushToString(this.i.h3);
}
set outlinedSelectedItemBackgroundColor(v) {
this.i.h3 = stringToBrush(v);
}
/**
* Gets or sets the color to use the text of the buttons in the group that are selected when type is outlined.
*/
get outlinedSelectedItemTextColor() {
return brushToString(this.i.h6);
}
set outlinedSelectedItemTextColor(v) {
this.i.h6 = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered background of the buttons in the group that are selected when type is outlined.
*/
get outlinedSelectedItemHoverBackgroundColor() {
return brushToString(this.i.h4);
}
set outlinedSelectedItemHoverBackgroundColor(v) {
this.i.h4 = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered text of the buttons in the group that are selected when type is outlined.
*/
get outlinedSelectedItemHoverTextColor() {
return brushToString(this.i.h5);
}
set outlinedSelectedItemHoverTextColor(v) {
this.i.h5 = stringToBrush(v);
}
/**
* Gets or sets the corner radius to use for the appropriate corners for the flat type item buttons.
*/
get flatItemCornerRadius() {
return this.i.az;
}
set flatItemCornerRadius(v) {
this.i.az = +v;
}
/**
* Gets or sets the color to use the background of the buttons in the group when type is flat.
*/
get flatItemBackgroundColor() {
return brushToString(this.i.hb);
}
set flatItemBackgroundColor(v) {
this.i.hb = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the background of the buttons in the group when type is flat.
*/
get flatItemDisabledBackgroundColor() {
return brushToString(this.i.hd);
}
set flatItemDisabledBackgroundColor(v) {
this.i.hd = stringToBrush(v);
}
/**
* Gets or sets the color to use the text of the buttons in the group when type is flat.
*/
get flatItemTextColor() {
return brushToString(this.i.hi);
}
set flatItemTextColor(v) {
this.i.hi = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the text of the buttons in the group when type is flat.
*/
get flatItemDisabledTextColor() {
return brushToString(this.i.hf);
}
set flatItemDisabledTextColor(v) {
this.i.hf = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered background of the buttons in the group when type is flat.
*/
get flatItemHoverBackgroundColor() {
return brushToString(this.i.hg);
}
set flatItemHoverBackgroundColor(v) {
this.i.hg = stringToBrush(v);
}
/**
* Gets or sets the color to use the border of the buttons in the group when type is flat.
*/
get flatItemBorderColor() {
return brushToString(this.i.hc);
}
set flatItemBorderColor(v) {
this.i.hc = stringToBrush(v);
}
/**
* Gets or sets the disabled color to use the border of the buttons in the group when type is flat.
*/
get flatItemDisabledBorderColor() {
return brushToString(this.i.he);
}
set flatItemDisabledBorderColor(v) {
this.i.he = stringToBrush(v);
}
/**
* Gets or sets the border width to use for the buttons in the group when type is flat.
*/
get flatItemBorderWidth() {
return this.i.ay;
}
set flatItemBorderWidth(v) {
this.i.ay = +v;
}
/**
* Gets or sets the color to use the hovered text of the buttons in the group when type is flat.
*/
get flatItemHoverTextColor() {
return brushToString(this.i.hh);
}
set flatItemHoverTextColor(v) {
this.i.hh = stringToBrush(v);
}
/**
* Gets or sets the color to use the background of the buttons in the group that are selected when type is flat.
*/
get flatSelectedItemBackgroundColor() {
return brushToString(this.i.hj);
}
set flatSelectedItemBackgroundColor(v) {
this.i.hj = stringToBrush(v);
}
/**
* Gets or sets the color to use the text of the buttons in the group that are selected when type is flat.
*/
get flatSelectedItemTextColor() {
return brushToString(this.i.hm);
}
set flatSelectedItemTextColor(v) {
this.i.hm = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered background of the buttons in the group that are selected when type is flat.
*/
get flatSelectedItemHoverBackgroundColor() {
return brushToString(this.i.hk);
}
set flatSelectedItemHoverBackgroundColor(v) {
this.i.hk = stringToBrush(v);
}
/**
* Gets or sets the color to use the hovered text of the buttons in the group that are selected when type is flat.
*/
get flatSelectedItemHoverTextColor() {
return brushToString(this.i.hl);
}
set flatSelectedItemHoverTextColor(v) {
this.i.hl = stringToBrush(v);
}
/**
* Gets or sets the oreientation to use the button group when type is outlined.
*/
get orientation() {
return this.i.k;
}
set orientation(v) {
this.i.k = ensureEnum(ButtonGroupOrientation_$type, v);
}
/**
* Gets or sets the id to use for the button group.
*/
get id() {
return this.i.b5;
}
set id(v) {
this.i.b5 = v;
}
/**
* Gets or sets whether the checkbox is disabled.
*/
get disabled() {
return this.i.disabled;
}
set disabled(v) {
this.i.disabled = ensureBool(v);
}
/**
* Gets or sets whether the group supports multi-select.
*/
get isMultiSelect() {
return this.i.z;
}
set isMultiSelect(v) {
this.i.z = ensureBool(v);
}
findByName(name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
if (this.buttons != null && this.buttons.findByName && this.buttons.findByName(name)) {
return this.buttons.findByName(name);
}
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("XButtonGroup");
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._otherStyling) {
this._otherStyling(container, component, parent);
}
this._inStyling = false;
}
onDetachedFromUI() {
this.i.onDetachedFromUI();
}
onAttachedToUI() {
this.i.onAttachedToUI();
}
/**
* Exports visual information about the current state of the grid.
*/
exportVisualModel() {
let iv = this.i.a5();
return (iv);
}
/**
* Returns a serialized copy of the exported visual model
*/
exportSerializedVisualModel() {
let iv = this.i.bq();
return (iv);
}
get selectionChanged() {
return this._selectionChanged;
}
set selectionChanged(ev) {
if (this._selectionChanged_wrapped !== null) {
this.i.selectionChanged = delegateRemove(this.i.selectionChanged, this._selectionChanged_wrapped);
this._selectionChanged_wrapped = null;
this._selectionChanged = null;
}
this._selectionChanged = ev;
this._selectionChanged_wrapped = (o, e) => {
let outerArgs = new IgrButtonGroupSelectionChangedEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeSelectionChanged) {
this.beforeSelectionChanged(this, outerArgs);
}
if (this._selectionChanged) {
this._selectionChanged(this, outerArgs);
}
};
this.i.selectionChanged = delegateCombine(this.i.selectionChanged, this._selectionChanged_wrapped);
;
}
}