meraproject/content/modulebz/js/module/ui/SelectSearch.js

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));
  }

};