@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
362 lines • 16.8 kB
JavaScript
"use strict";
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 update = require("react-addons-update");
var Select = require("react-select");
var axios_1 = require("axios");
var BaseControl_1 = require("../_Common/BaseControl/BaseControl");
var styles_1 = require("./styles");
var queryString = require("query-string");
var CancelToken = axios_1.default.CancelToken;
var UpSelect = (function (_super) {
__extends(UpSelect, _super);
function UpSelect(p, c) {
var _this = _super.call(this, p, c) || this;
_this.setSelect = function (input) {
if (_this.selectElement == undefined) {
_this.selectElement = input;
}
};
_this.setValue = function (receiveValue) {
if (_this.props.multiple === true) {
var isPairArray = _this.isPairArray(receiveValue);
if (isPairArray === true) {
var extra = _this.state.extra === undefined || _this.state.extra === null ? {} : _this.state.extra;
extra.fullObject = receiveValue;
_this.setState({ extra: extra });
}
else if (isPairArray == false && Array.isArray(receiveValue) === true && _this.props.data != null) {
var extra = _this.state.extra === undefined || _this.state.extra === null ? {} : _this.state.extra;
var data = _this.makePairFromIds(receiveValue);
extra.fullObject = data;
_this.setState({ extra: extra });
return _this.parseValue(data);
}
else if (receiveValue == null) {
_this.setState(update(_this.state, { extra: { fullObject: { $set: null } } }));
}
}
else {
var isPair = _this.isPair(receiveValue);
if (isPair === true) {
var extra = _this.state.extra === undefined || _this.state.extra === null ? {} : _this.state.extra;
extra.fullObject = receiveValue;
_this.setState({ extra: extra });
}
else if (isPair === false && _this.props.data != null) {
var data = _this.makePairFromId(receiveValue);
var extra = _this.state.extra === undefined || _this.state.extra === null ? {} : _this.state.extra;
extra.fullObject = data;
_this.setState({ extra: extra });
return _this.parseValue(data);
}
else if (receiveValue == null) {
_this.setState(update(_this.state, { extra: { fullObject: { $set: null } } }));
}
}
return _this.parseValue(receiveValue);
};
_this.makePairFromIds = function (ids) {
return ids.map(_this.makePairFromId).filter(function (v) { return v !== null; });
};
_this.makePairFromId = function (id) {
for (var i = 0; i < _this.props.data.length; i++) {
if (_this.props.data[i][_this.keyId] === id) {
return _a = {},
_a[_this.keyId] = _this.props.data[i][_this.keyId],
_a[_this.keyText] = _this.props.data[i][_this.keyText],
_a;
}
}
return null;
var _a;
};
_this.isPairArray = function (obj) {
if (obj == null || Array.isArray(obj) == false) {
return false;
}
return obj.every(_this.isPair);
};
_this.isPair = function (obj) {
if (obj == null) {
return false;
}
if ((obj.hasOwnProperty(_this.keyId) && obj.hasOwnProperty(_this.keyText)) || (obj.hasOwnProperty("id") && obj.hasOwnProperty("text"))) {
return true;
}
var regexp = /{-?[\w]+}/gi;
var arr = _this.keyText.match(regexp);
if (arr === null) {
return obj.hasOwnProperty(_this.keyId) && obj.hasOwnProperty(_this.keyText);
}
else {
for (var i = 0; i < arr.length; i++) {
var sourceText = arr[i].replace("{", "").replace("}", "");
if (obj.hasOwnProperty(sourceText) == false) {
return false;
}
}
return obj.hasOwnProperty(_this.keyId);
}
};
_this.parseValue = function (receiveValue) {
if (_this.props.returnType === "id" && typeof (receiveValue) === "object" && receiveValue != null) {
if (_this.props.multiple === true) {
return receiveValue.map((function (v) { return v != null ? (v[_this.keyId] || v["id"]) : null; }));
}
else {
return receiveValue[_this.keyId] || receiveValue["id"];
}
}
return receiveValue;
};
_this.getOptionRenderer = function (option) {
if (_this.props.optionRenderer) {
var OptionRenderer = _this.props.optionRenderer;
return (React.createElement(OptionRenderer, __assign({}, option)));
}
else {
if (option[_this.keyId])
return (React.createElement("span", { key: "option_{option[this.keyId]}" }, _this.format(option, _this.keyText)));
else
return (React.createElement("span", { key: "option_{option[\"id\"]}" }, _this.format(option, option["text"])));
}
};
_this.getValueRenderer = function (value) {
if (_this.props.valueRenderer) {
var ValueRenderer = _this.props.valueRenderer;
return (React.createElement(ValueRenderer, __assign({}, value)));
}
else {
if (value[_this.keyId])
return (React.createElement("span", { key: "option_{value[this.keyId]}" }, _this.format(value, _this.keyText)));
else
return (React.createElement("span", { key: "option_{option[\"id\"]}" }, _this.format(value, value["text"])));
}
};
_this.filterOptions = function (options, filter, currentValues) {
var _options = [];
var _self = _this;
options.map(function (value) {
var isInValues = false;
for (var i in currentValues) {
var curentValue = currentValues[i];
if (value[_self.keyId] === curentValue[_self.keyId]) {
isInValues = true;
break;
}
}
;
if (isInValues === false)
_options.push(value);
});
return _options;
};
_this.findInObject = function (object, path) {
var local = path.shift();
if (path.length === 0) {
return object[local];
}
else {
return _this.findInObject(object[local], path);
}
};
_this.onChange = function (event) {
var data = _this.setValue(event);
_this.handleChangeEvent(data);
};
_this.state = {
value: (p.value) ? _this.parseValue(p.value) : p.default,
extra: {
loadingPlaceholder: p.loadingPlaceholder,
fullObject: (p.value) ? p.value : p.default,
}
};
return _this;
}
Object.defineProperty(UpSelect.prototype, "keyId", {
get: function () {
if (this.props.dataSource) {
return this.props.dataSource.id || "id";
}
return this.props.valueKey || "id";
},
enumerable: true,
configurable: true
});
Object.defineProperty(UpSelect.prototype, "keyText", {
get: function () {
if (this.props.dataSource) {
return this.props.dataSource.text || "text";
}
return this.props.labelKey || "text";
},
enumerable: true,
configurable: true
});
UpSelect.prototype.isEmpty = function (value) {
return value === null || value === undefined || value === "";
};
UpSelect.prototype.getValue = function (data) {
var _this = this;
if (data == null) {
return null;
}
if (this.props.returnType === "id") {
var fullobject = this.state.extra.fullObject;
if (this.props.multiple && fullobject != null) {
return fullobject
.map(function (v) {
if (v != null && (v.hasOwnProperty(_this.keyId)))
return v[_this.keyId] != null ? v[_this.keyId] : null;
else if (v != null && (v.hasOwnProperty("id")))
return v["id"] != null ? v["id"] : null;
else
return null;
})
.filter(function (v) { return v !== null; });
}
else {
if (fullobject != null && fullobject.hasOwnProperty(this.keyId))
return fullobject[this.keyId];
else if (fullobject != null && fullobject.hasOwnProperty("id"))
return fullobject["id"];
}
}
else {
return data;
}
};
UpSelect.prototype.format = function (object, strFormat) {
var regexp = /{-?[\w]+}/gi;
var arr = strFormat.match(regexp);
if (arr === null) {
return object[strFormat] || object["text"];
}
for (var i = 0; i < arr.length; i++) {
var sourceText = arr[i].replace("{", "").replace("}", "");
strFormat = strFormat.replace(arr[i], this.findInObject(object, sourceText.split(".")));
}
return strFormat;
};
UpSelect.prototype.renderControl = function () {
var _this = this;
var dataSource = this.props.dataSource;
var loadOptions = false;
var SelectComponent = dataSource != null
? ((this.props.allowCreate === true) ? Select.AsyncCreatable : Select.Async)
: ((this.props.allowCreate === true) ? Select.Creatable : Select);
if (typeof dataSource !== "undefined") {
var queryParam = dataSource.queryParameterName || 'search';
var minimumInputLength = this.props.minimumInputLength;
loadOptions = function (input, callback) {
if (minimumInputLength && input.length < minimumInputLength) {
if (input.length !== 0) {
var newState = update(_this.state, { extra: { loadingPlaceholder: { $set: "Veuillez renseigner au minimum " + minimumInputLength + " caract\u00E8res" } } });
_this.setState(newState);
}
else {
var newState = update(_this.state, { extra: { loadingPlaceholder: { $set: _this.props.placeholder } } });
_this.setState(newState);
}
return false;
}
else {
var newState = update(_this.state, { extra: { loadingPlaceholder: { $set: _this.props.placeholder } } });
_this.setState(newState);
}
if (_this.timeOutLoadOptions) {
clearTimeout(_this.timeOutLoadOptions);
}
var _loadOptionsAfterDealy = function () {
if (_this.axiosSource) {
_this.axiosSource.cancel('Next request in progress');
}
var qs = queryParam + "=" + input;
if (dataSource.getExtraParams) {
var params = dataSource.getExtraParams();
if (params) {
qs += "&" + queryString.stringify(params);
}
}
var query = dataSource.query + "?" + qs;
if (dataSource.endPoint) {
query = dataSource.endPoint + "/" + query;
}
_this.axiosSource = CancelToken.source();
axios_1.default.get(query, {
cancelToken: _this.axiosSource.token
}).then(function (response) {
var data = response.data;
if (dataSource.handleResponse) {
data = dataSource.handleResponse(data);
}
callback(null, {
options: data,
complete: false
});
_this.axiosSource = null;
}).catch(function (thrown) {
if (axios_1.default.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
}
else {
}
this.axiosSource = null;
});
};
_this.timeOutLoadOptions = setTimeout(_loadOptionsAfterDealy, dataSource.delay | 1000);
};
loadOptions = loadOptions.bind(this);
}
var data = this.props.data;
var specProps = {
options: data
};
if (loadOptions !== false) {
specProps = {
"loadOptions": loadOptions,
"autoload": this.props.autoload
};
}
return (React.createElement(styles_1.default, { width: this.props.width },
React.createElement(SelectComponent, __assign({}, specProps, { placeholder: this.props.placeholder, filterOptions: this.props.filterOptions || this.filterOptions, allowCreate: this.props.allowCreate, promptTextCreator: this.props.promptTextCreator, value: this.state.extra.fullObject, autoBlur: false, isLoading: this.props.isLoading, valueKey: this.props.valueKey || "id", labelKey: this.props.labelKey || "text", loadingPlaceholder: this.state.extra.loadingPlaceholder, multi: this.props.multiple, clearable: this.props.allowClear, disabled: this.props.disabled, noResultsText: this.props.noResultsText, clearAllText: this.props.clearAllText, clearValueText: this.props.clearValueText, addLabelText: this.props.addLabelText, searchPromptText: this.props.searchPromptText, optionRenderer: this.getOptionRenderer, valueRenderer: this.getValueRenderer, onChange: this.onChange }))));
};
UpSelect.defaultProps = {
noResultsText: "Aucun résultat trouvé",
clearAllText: "Effacer",
clearValueText: "Déselectionner",
addLabelText: 'Ajouter "{label}" ?',
searchPromptText: "-- Rechercher",
placeholder: "-- Sélectionner",
loadingPlaceholder: "Chargement en cours",
default: null,
autoload: false,
showError: true,
isLoading: false,
allowCreate: false,
width: 'full',
returnType: "full"
};
return UpSelect;
}(BaseControl_1.BaseControlComponent));
exports.default = UpSelect;
//# sourceMappingURL=UpSelect.js.map