@up-group-ui/react-controls
Version:
Up shared react controls
208 lines • 9.36 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseControlComponent = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var ValidationManager_1 = (0, tslib_1.__importDefault)(require("../Validation/ValidationManager"));
var ErrorDisplay_1 = (0, tslib_1.__importDefault)(require("../Validation/ErrorDisplay"));
var Tooltip_1 = (0, tslib_1.__importDefault)(require("../../../Display/Tooltip"));
var TypeNullControl_1 = (0, tslib_1.__importDefault)(require("../Validation/TypeNullControl"));
var utils_1 = require("../../../../Common/utils");
var theming_1 = (0, tslib_1.__importDefault)(require("../../../../Common/theming"));
var eventListener_1 = require("../../../../Common/utils/eventListener");
var react_addons_update_1 = (0, tslib_1.__importDefault)(require("react-addons-update"));
var HelpMessageDisplay_1 = (0, tslib_1.__importDefault)(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) {
(0, 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 = (0, eventListener_1.eventFactory)(event.target.name, cleanData);
}
var result = null;
if (_this._validationManager !== undefined) {
result = _this.checkData(cleanData);
}
if (_this.isControlled) {
_this.setState({ error: result != null && result.hasError ? result.errorMessage : null });
_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, (0, 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((0, react_addons_update_1.default)(_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((0, react_addons_update_1.default)(_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.setState({ 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: false,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "currentValue", {
get: function () {
return this.isControlled ? this.props.value : this.state.value;
},
enumerable: false,
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: false,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "error", {
get: function () {
return this.props.error !== undefined ? this.props.error : this.state.error;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "isFocused", {
get: function () {
return this.state.extra ? this.state.extra.focused === true : false;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseControlComponent.prototype, "isTouched", {
get: function () {
return this.state.extra ? this.state.extra.touched === true : false;
},
enumerable: false,
configurable: true
});
BaseControlComponent.prototype.render = function () {
var _tooltip = null;
if (this.props.tooltip) {
if ((0, 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 = ((0, jsx_runtime_1.jsx)(ErrorDisplay_1.default, (0, tslib_1.__assign)({ theme: this.props.theme, displayMode: this.props.errorDisplayMode, showError: this.showError(), hasError: this.hasError, error: this.error }, { children: _tooltip === null ? RenderControl : (0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({}, _tooltip, { children: RenderControl }), void 0) }), void 0));
}
else if (this.props.helpMessage != null && typeof this.props.helpMessage === 'string') {
content = ((0, jsx_runtime_1.jsx)(HelpMessageDisplay_1.default, (0, tslib_1.__assign)({ theme: this.props.theme, helpMessageText: this.props.helpMessage }, { children: RenderControl }), void 0));
}
else if (this.props.helpMessage != null && (0, 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: 'inline',
};
return BaseControlComponent;
}(React.Component));
exports.BaseControlComponent = BaseControlComponent;
//# sourceMappingURL=BaseControl.js.map