@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
132 lines • 5.8 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ValidationManager_1 = require("../Validation/ValidationManager");
var ErrorDisplay_1 = require("../Validation/ErrorDisplay");
require("../../../../Common/theming/base.css");
var Tooltip_1 = require("../../../Display/Tooltip");
var TypeNullControl_1 = require("../Validation/TypeNullControl");
var utils_1 = require("../../../../Common/utils");
var ONCHANGE_MUST_BE_SPECIFIED = "La méthode onChange doit être spécifié dans le cas où la valeur du composant est défini dans les props";
var BaseControlComponent = (function (_super) {
__extends(BaseControlComponent, _super);
function BaseControlComponent(props, context) {
var _this = _super.call(this, props, context) || this;
_this.setValue = function (receiveValue) {
return receiveValue;
};
_this.checkAndDispatch = function (value) {
var _value = (value !== undefined) ? value : _this.state.value;
var cleanData = _this.getValue(_value);
if (_this._validationManager !== undefined) {
var hasError = _this.checkData(cleanData);
_this.setState({ value: cleanData }, function () { _this.dispatchOnChange(_this.state.value, null, hasError); });
}
else {
_this.setState({ value: cleanData }, function () { _this.dispatchOnChange(_this.state.value, null, null); });
}
};
_this.equal = function (v1, v2) {
if (v1 === v2) {
return v1 !== 0 || 1 / v1 === 1 / v2;
}
else {
return v1 !== v1 && v2 !== v2;
}
};
_this.handleChangeEvent = function (event) {
_this.checkAndDispatch(event);
};
_this.checkData = function (value) {
var result = _this._validationManager.isValidValue(value || _this.state.value);
if (result.hasError) {
_this.setState({ error: result.errorMessage });
}
else {
_this.setState({ error: null });
}
return result.hasError;
};
_this.hasError = function () {
return _this.state.error != null;
};
_this.dispatchOnChange = function (data, event, error) {
if (_this.props.onChange !== undefined) {
_this.props.onChange(data, event, error);
}
};
_this.state = {
error: null,
value: _this.props.value !== undefined ? _this.props.value :
_this.props.defaultValue !== undefined ? _this.props.defaultValue
: null
};
_this.initWithProps();
_this.registerValidations();
return _this;
}
BaseControlComponent.prototype.initWithProps = function () {
if (this.props.value !== undefined)
this.state = { value: this.props.value };
};
BaseControlComponent.prototype.registerValidations = function () {
this._validationManager = new ValidationManager_1.default();
if (this.props.isRequired) {
this._validationManager.addControl(new TypeNullControl_1.default());
}
};
BaseControlComponent.prototype.validateProps = function (nextProps) {
if (nextProps.value !== undefined && nextProps.onChange === undefined) {
throw new Error(ONCHANGE_MUST_BE_SPECIFIED);
}
};
BaseControlComponent.prototype.componentWillReceiveProps = function (nextProps) {
var newValue = nextProps.value;
var oldValue = this.state.value;
if (newValue !== undefined && !this.equal(newValue, oldValue)) {
var value = this.setValue(nextProps.value);
this.setState({ value: value, error: null }, this.checkAndDispatch);
}
};
BaseControlComponent.prototype.render = function () {
var _tooltip = null;
if (this.props.tooltip) {
if (utils_1.isString(this.props.tooltip)) {
_tooltip = {
content: this.props.tooltip
};
}
else {
_tooltip = this.props.tooltip;
}
}
return (React.createElement(ErrorDisplay_1.default, { showError: this.props.showError, hasError: this.hasError(), error: this.state.error }, _tooltip === null ?
this.renderControl()
:
React.createElement(Tooltip_1.default, __assign({}, _tooltip), this.renderControl())));
};
BaseControlComponent.prototype.componentDidMount = function () {
this.checkAndDispatch();
};
return BaseControlComponent;
}(React.Component));
exports.BaseControlComponent = BaseControlComponent;
//# sourceMappingURL=BaseControl.js.map