igniteui-react-inputs
Version:
Ignite UI React input components.
403 lines (400 loc) • 12.7 kB
JavaScript
import { __extends, __values } from "tslib";
import * as React from 'react';
import { XRipple } from "./XRipple";
import { brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, isValidProp, toSpinal, getModifiedProps } from "igniteui-react-core";
import { ReactRenderer } from "igniteui-react-core";
var IgrXRipple = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgrXRipple, _super);
function IgrXRipple(props) {
var _this = _super.call(this, props) || this;
_this._wrapper = null;
_this._implementation = null;
_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._implementation = _this.createImplementation();
_this._implementation.externalObject = _this;
_this._getMainRef = _this._getMainRef.bind(_this);
if (document) {
_this._container = document.createElement("div");
_this._container.style.display = "block";
}
var root;
root = _this._container;
if (_this._container != null) {
root = _this._container;
}
var ren = new ReactRenderer(root, document, true, {});
_this._wrapper = ren;
var ripple = _this.i;
_this._ripple = ripple;
ripple.provideContainer(ren);
if (props) {
_this.initializeProperties();
}
return _this;
}
Object.defineProperty(IgrXRipple.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = value;
if (this._elRef) {
this._elRef.style.height = value;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "width", {
get: function () {
return this._width;
},
set: function (value) {
this._width = value;
if (this._elRef) {
this._elRef.style.width = value;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "top", {
get: function () {
return this._top;
},
set: function (value) {
this._top = value;
if (this._elRef) {
this._elRef.style.top = value;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "left", {
get: function () {
return this._left;
},
set: function (value) {
this._left = value;
if (this._elRef) {
this._elRef.style.left = value;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "position", {
get: function () {
return this._position;
},
set: function (value) {
this._position = value;
if (this._elRef) {
this._elRef.style.position = value;
}
},
enumerable: false,
configurable: true
});
IgrXRipple.prototype._getMainRef = function (ref) {
this._elRef = ref;
};
IgrXRipple.prototype.render = function () {
var div = React.createElement("div", {
className: "ig-x-ripple igr-x-ripple",
ref: this._getMainRef
});
//}
return div;
};
IgrXRipple.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var e_1, _a;
var mod = getModifiedProps(this.props, nextProps);
try {
for (var _b = __values(Object.keys(mod)), _c = _b.next(); !_c.done; _c = _b.next()) {
var p = _c.value;
if (isValidProp(this, p)) {
this[p] = mod[p];
}
}
}
catch (e_1_1) {
e_1 = { error: e_1_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_1)
throw e_1.error;
}
}
return true;
};
IgrXRipple.prototype.initializeProperties = function () {
var e_2, _a;
try {
for (var _b = __values(Object.keys(this.props)), _c = _b.next(); !_c.done; _c = _b.next()) {
var p = _c.value;
if (isValidProp(this, p)) {
this[p] = this.props[p];
}
}
}
catch (e_2_1) {
e_2 = { error: e_2_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_2)
throw e_2.error;
}
}
};
// supports angular themes or custom properties set in CSS
IgrXRipple.prototype.updateStyle = function () {
this._styling(this._elRef, this);
};
IgrXRipple.prototype.destroy = function () {
this._ripple.destroy();
this._wrapper.destroy();
};
IgrXRipple.prototype.componentWillUnmount = function () {
};
IgrXRipple.prototype.componentDidMount = function () {
this._elRef.appendChild(this._container);
this.initializeContent();
};
IgrXRipple.prototype.initializeContent = function () {
this._styling(this._container, this);
this.updateStyle();
};
IgrXRipple.prototype.createImplementation = function () {
return new XRipple();
};
Object.defineProperty(IgrXRipple.prototype, "i", {
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "eventSource", {
/**
* Gets or sets the target element to inject ripples into.
*/
get: function () {
return this.i.q;
},
set: function (v) {
this.i.q = v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "rippleColor", {
/**
* Gets or sets the color to use for the background when the checkbox is unchecked.
*/
get: function () {
return brushToString(this.i.ax);
},
set: function (v) {
this.i.ax = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "hoverColor", {
/**
* Gets or sets the color to use for the background when the ripple is hovered.
*/
get: function () {
return brushToString(this.i.aw);
},
set: function (v) {
this.i.aw = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "actualHoverColor", {
/**
* Gets or sets the actual color to use for the background when the ripple is hovered.
*/
get: function () {
return brushToString(this.i.as);
},
set: function (v) {
this.i.as = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "actualRippleColor", {
/**
* Gets or sets the color to use for the actual background when the checkbox is unchecked.
*/
get: function () {
return brushToString(this.i.at);
},
set: function (v) {
this.i.at = stringToBrush(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "rippleDuration", {
/**
* Gets or sets the duration to use for the ripple animation.
*/
get: function () {
return this.i.o;
},
set: function (v) {
this.i.o = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "isDisabled", {
/**
* Gets or sets if the ripple is disabled.
*/
get: function () {
return this.i.i;
},
set: function (v) {
this.i.i = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "isCentered", {
/**
* Gets or sets if the ripple is centered.
*/
get: function () {
return this.i.h;
},
set: function (v) {
this.i.h = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrXRipple.prototype, "isHoverEnabled", {
/**
* Gets or sets if the ripple is centered.
*/
get: function () {
return this.i.k;
},
set: function (v) {
this.i.k = ensureBool(v);
},
enumerable: false,
configurable: true
});
IgrXRipple.prototype.findByName = function (name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
return null;
};
Object.defineProperty(IgrXRipple.prototype, "hasUserValues", {
get: function () {
return this._hasUserValues;
},
enumerable: false,
configurable: true
});
IgrXRipple.prototype.__m = function (propertyName) {
if (!this._inStyling) {
this._hasUserValues.add(propertyName);
}
};
IgrXRipple.prototype._styling = function (container, component, parent) {
if (this._inStyling) {
return;
}
this._inStyling = true;
this._stylingContainer = container;
this._stylingParent = component;
var genericPrefix = "";
var typeName = this.i.$type.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
genericPrefix = toSpinal("XRipple");
var additionalPrefixes = [];
var prefix = toSpinal(typeName);
additionalPrefixes.push(prefix + "-");
var 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);
}
var basePrefix = toSpinal(typeName);
additionalPrefixes.push(basePrefix + "-");
b = b.baseType;
}
if (parent) {
var parentTypeName = parent.i.$type.name;
if (parentTypeName.indexOf("Xam") === 0) {
parentTypeName = parentTypeName.substring(3);
}
var 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;
};
IgrXRipple.prototype.onDetachedFromUI = function () {
this.i.onDetachedFromUI();
};
IgrXRipple.prototype.onAttachedToUI = function () {
this.i.onAttachedToUI();
};
/**
* Exports visual information about the current state of the grid.
*/
IgrXRipple.prototype.exportVisualModel = function () {
var iv = this.i.r();
return (iv);
};
/**
* Returns a serialized copy of the exported visual model
*/
IgrXRipple.prototype.exportSerializedVisualModel = function () {
var iv = this.i.v();
return (iv);
};
return IgrXRipple;
}(React.Component));
export { IgrXRipple };