var SelectSearch; export default window.SelectSearch = SelectSearch = class SelectSearch extends React.Component { constructor(props) { var canCreateNew, i, j, len, placeholder, ref, selected; super(props); ({ placeholder, canCreateNew } = props); selected = null; this.data = props.data; if (props.id != null) { ref = this.data; for (j = 0, len = ref.length; j < len; j++) { i = ref[j]; if (i.id === props.id) { selected = i; break; } } } canCreateNew = props.canCreateNew != null ? props.canCreateNew : props.canCreateNew = false; this.state = { selected, placeholder, canCreateNew, search: false, selectedIndex: 0, itemCount: 0 }; this.cancel = this.cancel.bind(this); this.search = this.search.bind(this); this.onKey = this.onKey.bind(this); this.renderItem = this.renderItem.bind(this); this.input = null; } cancel() { this.setState({ search: false, selected: null }); if (this.input) { return this.input.value = ''; } } getSelected() { return this.state.selected; } search(e) { var val; if (e != null) { switch (e.key) { case "ArrowUp": case "ArrowDown": return false; } } val = this.input.value; if (val === '') { val = false; } return this.setState({ search: val, selectedIndex: 0 }); } setValue(selected) { if (selected.id === '-') { selected = null; return this.cancel(); } else { return this.setState({ search: false, selected }); } } getNewItem() { return { id: 'new', showTitle: 'Создать «' + this.state.search + '»', title: this.state.search }; } onKey(e) { switch (e.key) { case "Escape": return this.cancel(); case "Enter": //this.setValue( this.getNewItem() ) return this.setValue(this.items[this.state.selectedIndex]); case "ArrowUp": e.preventDefault(); this.setState({ selectedIndex: Math.max(0, this.state.selectedIndex - 1) }); return false; case "ArrowDown": e.preventDefault(); this.setState({ selectedIndex: Math.min(this.itemCount - 1, this.state.selectedIndex + 1) }); return false; } } renderItem(x, index = 0) { var classes, res; index = parseInt(index); res = null; if (x.title.toLowerCase().indexOf(this.state.search.toLowerCase()) > -1) { classes = ["search_select_li", index === this.state.selectedIndex ? "selected" : ""].join(" "); res = /*#__PURE__*/React.createElement("div", { className: classes, onClick: this.setValue.bind(this, x) }, x.showTitle ? x.showTitle : x.title); } return res; } render() { var _this = this; var c, canCreateNew, data, i, item, items, selected, x; ({ selected, canCreateNew } = this.state); items = []; this.items = []; if (this.state.search) { data = this.data; if (typeof data === 'function') { data = data(); } if (Array.isArray(data)) { for (i in data) { x = data[i]; item = this.renderItem(x, this.items.length); if (item) { this.items.push(x); items.push(item); } } } if (canCreateNew) { c = this.getNewItem(); this.items.push(c); items.push(this.renderItem(c, items.length)); } this.itemCount = items.length; } //if items.length == 0 // items.push this.renderItem({id:'-',title:'«'+this.state.search+'» Не найдено'} ) return /*#__PURE__*/React.createElement("div", { className: ["select_search", this.state.search ? "focus" : ""].join(" "), onKeyDown: this.onKey }, /*#__PURE__*/React.createElement(BackgroundFocus, { visible: this.state.search !== false, onClick: this.cancel }), /*#__PURE__*/React.createElement("div", { className: "select_search_content" }, selected != null ? /*#__PURE__*/React.createElement("div", null, selected.title, /*#__PURE__*/React.createElement("button", { type: "button", onClick: this.cancel }, "x")) : /*#__PURE__*/React.createElement("input", { onKeyUp: this.search, ref: function (i) { return _this.input = i; }, placeholder: this.state.placeholder }), this.state.search ? /*#__PURE__*/React.createElement("div", { className: ["select_search_elements"].join(" ") }, items, items.length === 0 || canCreateNew && items.length === 1 ? /*#__PURE__*/React.createElement("div", { class: "not_found" }, 'Не найдено «' + this.state.search + '»') : null) : null)); } };