@arche-mc2/arche-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
220 lines • 9.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var ValidationManager_1 = require("../Validation/ValidationManager");
var ErrorDisplay_1 = require("../Validation/ErrorDisplay");
var UpTooltip_1 = require("../../../Display/Tooltip/UpTooltip");
var TypeNullControl_1 = require("../Validation/TypeNullControl");
var utils_1 = require("../../../../Common/utils");
var theming_1 = require("../../../../Common/theming");
var eventListener_1 = require("../../../../Common/utils/eventListener");
var update = require("react-addons-update");
var HelpMessageDisplay_1 = require("../Validation/HelpMessageDisplay");
var util_1 = require("util");
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) {
tslib_1.__extends(BaseControlComponent, _super);
function BaseControlComponent(props, context) {
var _this = _super.call(this, props, context) || this;
_this.setValue = function (receiveValue) {
return receiveValue;
};
_this.checkAndDispatch = function (event, value) {
var _value = value !== undefined
? value
: event !== undefined
? event
: _this.state.value;
var cleanData = _this.getValue(_value);
var cloneEvent = event;
if (event) {
cloneEvent = eventListener_1.eventFactory(event.target.name, cleanData);
}
var result = null;
if (_this._validationManager !== undefined) {
result = _this.checkData(cleanData);
}
if (_this.isControlled) {
_this.dispatchOnChange(cleanData, cloneEvent, result ? result.errorMessage : null);
}
else {
_this.setState({
value: cleanData,
error: result != null && result.hasError
? result.errorMessage
: null,
}, function () {
_this.dispatchOnChange(cleanData, cloneEvent, result != null && result.errorMessage);
});
}
};
_this.handleChangeEvent = function (event, value) {
_this.checkAndDispatch(event, value);
};
_this.handleClearEvent = function (value) {
if (_this.isControlled) {
_this.dispatchOnChange(value, eventListener_1.eventFactory(_this.props.name, ''), null);
_this.props.onClear && _this.props.onClear();
}
else {
_this.setState({ value: value });
}
};
_this.checkData = function (value) {
return _this._validationManager.isValidValue(value);
};
_this.onFocus = function (event) {
event.persist();
var handleOnFocus = function (event) {
if (_this.props['onFocus'])
_this.props['onFocus'](event);
};
if (_this.state.extra === undefined) {
_this.setState({ extra: { focused: true } }, handleOnFocus.bind(null, event));
}
else {
_this.setState(update(_this.state, { extra: { focused: { $set: true } } }), handleOnFocus.bind(null, event));
}
};
_this.onBlur = function (event) {
event.persist();
var handleOnBlur = function (event) {
if (_this.props['onBlur'])
_this.props['onBlur'](event);
};
setTimeout(function () {
if (_this.state.extra === undefined) {
_this.setState({ extra: { focused: false, touched: true } }, handleOnBlur.bind(null, event));
}
else {
_this.setState(update(_this.state, {
extra: {
focused: { $set: false },
touched: { $set: true },
},
}), handleOnBlur.bind(null, event));
}
}, 300);
};
_this.dispatchOnChange = function (data, event, error) {
if (_this.props.onChange !== undefined && event != null) {
_this.props.onChange(event, data, 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());
}
};
Object.defineProperty(BaseControlComponent.prototype, "isControlled", {
get: function () {
return this.props.value !== undefined;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "currentValue", {
get: function () {
return this.isControlled ? this.props.value : this.state.value;
},
enumerable: true,
configurable: true
});
BaseControlComponent.prototype.validateProps = function (nextProps) {
if (nextProps.value !== undefined &&
nextProps.onChange === undefined) {
throw new Error(ONCHANGE_MUST_BE_SPECIFIED);
}
};
Object.defineProperty(BaseControlComponent.prototype, "hasError", {
get: function () {
return this.props.hasError !== undefined
? this.props.hasError === true
: this.error != null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "error", {
get: function () {
return this.props.error !== undefined
? this.props.error
: this.state.error;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "isFocused", {
get: function () {
return this.state.extra
? this.state.extra.focused === true
: false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "isTouched", {
get: function () {
return this.state.extra
? this.state.extra.touched === true
: false;
},
enumerable: true,
configurable: true
});
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;
}
}
var RenderControl = this.renderControl();
var content = null;
if (this.props.helpMessage == null) {
content = (React.createElement(ErrorDisplay_1.default, { theme: this.props.theme, displayMode: this.props.errorDisplayMode, showError: this.showError(), hasError: this.hasError, error: this.error }, _tooltip === null ? (RenderControl) : (React.createElement(UpTooltip_1.UpTooltip, tslib_1.__assign({}, _tooltip, { theme: this.props.theme }), RenderControl))));
}
else if (this.props.helpMessage != null &&
typeof this.props.helpMessage === 'string') {
content = (React.createElement(HelpMessageDisplay_1.default, { theme: this.props.theme, helpMessageText: this.props.helpMessage }, RenderControl));
}
else if (this.props.helpMessage != null &&
util_1.isFunction(this.props.helpMessage)) {
var temp = this.props.helpMessage(RenderControl);
if (React.isValidElement(temp)) {
content = temp;
}
}
return content;
};
BaseControlComponent.defaultProps = {
theme: theming_1.default,
errorDisplayMode: 'tooltip',
};
return BaseControlComponent;
}(React.Component));
exports.BaseControlComponent = BaseControlComponent;
//# sourceMappingURL=BaseControl.js.map