326 lines
8.4 KiB
JavaScript
326 lines
8.4 KiB
JavaScript
var Select;
|
|
export default window.Select = Select = class Select extends React.Component {
|
|
constructor(props) {
|
|
var data, i, j, len, ref, ref1, ref2, ref3, selected;
|
|
super(props);
|
|
selected = null;
|
|
data = this.prepareData(props.data);
|
|
|
|
if (data != null && props.id != null) {
|
|
for (j = 0, len = data.length; j < len; j++) {
|
|
i = data[j];
|
|
|
|
if (parseInt(i.id) === parseInt(props.id)) {
|
|
selected = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.state = {
|
|
open: props.open != null ? props.open : props.open = false,
|
|
data: data != null ? data : [],
|
|
selected: selected != null ? selected : (ref = data[0]) != null ? ref : null,
|
|
ajax: (ref1 = props.ajax) != null ? ref1 : false,
|
|
controller: (ref2 = props.controller) != null ? ref2 : '',
|
|
placeholder: (ref3 = props.placeholder) != null ? ref3 : '',
|
|
search: '',
|
|
statuses: props.statuses === true
|
|
};
|
|
this.input = null;
|
|
this.inputSearch = null;
|
|
this.roller = null;
|
|
this.toggle = this.toggle.bind(this);
|
|
this.prepareData = this.prepareData.bind(this);
|
|
this.preventClose = this.preventClose.bind(this);
|
|
}
|
|
|
|
preventClose(e) {
|
|
if (e != null) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
return e != null ? e.preventDefault() : void 0;
|
|
}
|
|
|
|
prepareData(data) {
|
|
var i, res, title, v;
|
|
res = [];
|
|
|
|
if (!Array.isArray(data)) {
|
|
for (i in data) {
|
|
v = data[i];
|
|
res.push({
|
|
id: parseInt(i),
|
|
title: v
|
|
});
|
|
}
|
|
} else {
|
|
if (typeof data[0] === 'string') {
|
|
for (i in data) {
|
|
v = data[i];
|
|
res.push({
|
|
id: parseInt(i),
|
|
title: v
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (res.length === 0) {
|
|
res = data;
|
|
}
|
|
|
|
if (this.props.statuses === true) {
|
|
for (i in res) {
|
|
v = res[i];
|
|
|
|
if (typeof v.title === 'string') {
|
|
switch (parseInt(v.type)) {
|
|
case OrderStatusType.NEW:
|
|
title = /*#__PURE__*/React.createElement("div", {
|
|
class: "status st-new"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
class: "st-round"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
class: "st-txt ch-black"
|
|
}, v.title));
|
|
break;
|
|
|
|
case OrderStatusType.WORK:
|
|
title = /*#__PURE__*/React.createElement("div", {
|
|
class: "status st-work"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
class: "st-round"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
class: "st-txt ch-black"
|
|
}, v.title));
|
|
break;
|
|
|
|
case OrderStatusType.WAIT:
|
|
title = /*#__PURE__*/React.createElement("div", {
|
|
class: "status st-need-pay"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
class: "st-round"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
class: "st-txt ch-black"
|
|
}, v.title));
|
|
break;
|
|
|
|
case OrderStatusType.PART:
|
|
title = /*#__PURE__*/React.createElement("div", {
|
|
class: "status st-half-pay"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
class: "st-round"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
class: "st-txt ch-black"
|
|
}, v.title));
|
|
break;
|
|
|
|
case OrderStatusType.FINISH:
|
|
title = /*#__PURE__*/React.createElement("div", {
|
|
class: "status st-end"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
class: "st-round"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
class: "st-txt ch-black"
|
|
}, v.title));
|
|
break;
|
|
|
|
case OrderStatusType.CANCEL:
|
|
title = /*#__PURE__*/React.createElement("div", {
|
|
class: "status st-new"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
class: "st-round"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
class: "st-txt ch-black"
|
|
}, v.title));
|
|
}
|
|
} else {
|
|
title = v.title;
|
|
}
|
|
|
|
res[i].title = title;
|
|
}
|
|
} //console.log i
|
|
//v = <div class="status st-end"><div class="st-round"></div><div class="st-txt ch-black">Завершен</div></div>
|
|
|
|
|
|
return res;
|
|
}
|
|
|
|
getValue() {
|
|
if (this.state.selected != null) {
|
|
return this.state.selected.id;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
close() {
|
|
return this.setState({
|
|
open: false
|
|
});
|
|
}
|
|
|
|
open() {
|
|
return this.setState({
|
|
open: true
|
|
}, this.afterOpen);
|
|
}
|
|
|
|
afterOpen() {
|
|
return $(this.roller).perfectScrollbar('update');
|
|
}
|
|
|
|
toggle() {
|
|
if (this.state.open) {
|
|
return this.close();
|
|
} else {
|
|
return this.open();
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
$(this.roller).perfectScrollbar();
|
|
return document.addEventListener('click', this.handleOuterClick.bind(this));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
return document.removeEventListener('click', this.handleOuterClick.bind(this));
|
|
}
|
|
|
|
handleOuterClick(e) {
|
|
if (this.$wrap.has(e.target).length === 0) {
|
|
return this.close();
|
|
}
|
|
}
|
|
|
|
aOnSelect() {
|
|
var base;
|
|
this.close();
|
|
return typeof (base = this.props).onSelect === "function" ? base.onSelect(this.state.selected) : void 0;
|
|
}
|
|
|
|
onSelect(event, item) {
|
|
var t;
|
|
|
|
if (event != null) {
|
|
event.stopPropagation();
|
|
}
|
|
|
|
if (event != null) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
t = this;
|
|
return this.setState({
|
|
selected: item
|
|
}, t.aOnSelect.bind(t));
|
|
}
|
|
|
|
refWrap(i) {
|
|
this.wrap = i;
|
|
return this.$wrap = $(this.wrap);
|
|
}
|
|
|
|
aAjaxSearch(data) {
|
|
var d;
|
|
d = this.prepareData(data);
|
|
return this.setState({
|
|
data: d
|
|
}, this.afterOpen);
|
|
}
|
|
|
|
ajaxSearch() {
|
|
return API(this.state.controller + '/getNameList', {
|
|
q: this.input.value,
|
|
dataType: "JSON"
|
|
}, this.aAjaxSearch.bind(this));
|
|
}
|
|
|
|
search() {
|
|
return this.setState({
|
|
search: this.inputSearch.value
|
|
});
|
|
}
|
|
|
|
renderItem(item, index) {
|
|
var _this = this;
|
|
|
|
var pos, vis;
|
|
vis = true;
|
|
|
|
if (this.state.search !== '' && typeof item.title === 'string') {
|
|
pos = item.title.toLowerCase().indexOf(this.state.search.toLowerCase());
|
|
vis = pos > -1;
|
|
}
|
|
|
|
if (vis) {
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
onClick: function (e) {
|
|
return _this.onSelect(e, item);
|
|
},
|
|
className: "option"
|
|
}, item.title);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var _this2 = this;
|
|
|
|
var ajax, isOpen, placeholder, ref, search, selected, t, title;
|
|
t = this;
|
|
isOpen = this.state.open === true;
|
|
({
|
|
selected,
|
|
search,
|
|
ajax,
|
|
placeholder
|
|
} = this.state);
|
|
title = null;
|
|
|
|
if (selected != null) {
|
|
title = selected.title;
|
|
}
|
|
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: ["select c-100", isOpen ? "open" : ""].join(" "),
|
|
ref: this.refWrap.bind(this)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "i_wrap",
|
|
onClick: this.toggle
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: (ref = this.props.titleClass) != null ? ref : "i"
|
|
}, title)), /*#__PURE__*/React.createElement("div", {
|
|
className: "options_bg",
|
|
onClick: this.close.bind(this)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "options _roller",
|
|
ref: function (i) {
|
|
return _this2.roller = i;
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", null, ajax ? /*#__PURE__*/React.createElement("input", {
|
|
onKeyUp: this.ajaxSearch.bind(this),
|
|
ref: function (i) {
|
|
return _this2.input = i;
|
|
},
|
|
onClick: this.preventClose,
|
|
className: "i",
|
|
placeholder: placeholder + " - поиск"
|
|
}) : null, this.props.search === true ? /*#__PURE__*/React.createElement("input", {
|
|
onKeyUp: this.search.bind(this),
|
|
ref: function (i) {
|
|
return _this2.inputSearch = i;
|
|
},
|
|
class: "i",
|
|
placeholder: placeholder + " - поиск",
|
|
onClick: this.preventClose
|
|
}) : null, Array.isArray(this.state.data) ? this.state.data.map(this.renderItem.bind(this)) : null))));
|
|
}
|
|
|
|
};
|
|
//# sourceMappingURL=select.js.map
|