choerodon-ui/pro/es/auto-complete/AutoComplete.js

An enterprise-class UI design language and React-based implementation

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import Menu, { Item } from '../../../es/rc-components/menu';
import { action } from 'mobx';
import autobind from '../_util/autobind';
import { getItemKey, MORE_KEY, Select } from '../select/Select';
import DataSet from '../data-set';
import { FieldType } from '../data-set/enum';
import Icon from '../icon';
import { preventDefault } from '../_util/EventManager';

var defaultMatcher = function defaultMatcher(value, inputText) {
  return value.indexOf(inputText) !== -1;
};

var AutoComplete = /*#__PURE__*/function (_Select) {
  _inherits(AutoComplete, _Select);

  var _super = _createSuper(AutoComplete);

  function AutoComplete() {
    var _this;

    _classCallCheck(this, AutoComplete);

    _this = _super.apply(this, arguments);
    _this.isChoose = false;
    _this.inputText = '';
    return _this;
  }

  _createClass(AutoComplete, [{
    key: "getTriggerIconFont",
    value: function getTriggerIconFont() {
      return '';
    }
  }, {
    key: "getNotFoundContent",
    value: function getNotFoundContent() {
      return null;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(AutoComplete.prototype), "getOmitPropsKeys", this).call(this).concat(['searchable', 'matcher']);
    }
  }, {
    key: "renderLengthInfo",
    value: function renderLengthInfo(maxLength, inputLength) {
      var prefixCls = this.prefixCls;
      return maxLength && maxLength > 0 ? /*#__PURE__*/React.createElement("div", {
        key: "length-info",
        className: "".concat(prefixCls, "-length-info")
      }, "".concat(inputLength, "/").concat(maxLength)) : null;
    }
  }, {
    key: "handleChange",
    value: function handleChange(e) {
      this.isChoose = false;

      _get(_getPrototypeOf(AutoComplete.prototype), "handleChange", this).call(this, e);
    }
  }, {
    key: "choose",
    value: function choose(record) {
      this.isChoose = true;

      _get(_getPrototypeOf(AutoComplete.prototype), "choose", this).call(this, record);
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(e) {
      var target = e.target;
      this.inputText = target ? target.value : '';

      _get(_getPrototypeOf(AutoComplete.prototype), "handleFocus", this).call(this, e);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (!e.isDefaultPrevented()) {
        if (!this.isChoose) {
          var _ref;

          var inputText = this.text || this.inputText;
          this.inputText = inputText;
          var temDs = new DataSet({
            fields: [{
              name: this.textField,
              type: FieldType.string
            }, {
              name: this.valueField,
              type: FieldType.string
            }],
            data: [(_ref = {}, _defineProperty(_ref, this.textField, inputText), _defineProperty(_ref, this.valueField, inputText), _ref)]
          });
          this.choose(temDs.current);
        }

        _get(_getPrototypeOf(AutoComplete.prototype), "handleBlur", this).call(this, e);
      }
    }
  }, {
    key: "getMenu",
    value: function getMenu() {
      var _this2 = this;

      var menuProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var options = this.options;

      if (!options) {
        return null;
      }

      var menuDisabled = this.disabled,
          textField = this.textField,
          valueField = this.valueField,
          _this$props = this.props,
          dropdownMenuStyle = _this$props.dropdownMenuStyle,
          optionRenderer = _this$props.optionRenderer,
          onOption = _this$props.onOption,
          _this$props$matcher = _this$props.matcher,
          matcher = _this$props$matcher === void 0 ? defaultMatcher : _this$props$matcher;
      var optGroups = [];
      var selectedKeys = [];
      var inputText = this.text || this.inputText;
      options.forEach(function (record) {
        var value = record.get(valueField); // 判断是否符合自动补全的条件

        if (inputText && !matcher(value, inputText)) {
          return;
        }

        var text = record.get(textField);
        var optionProps = onOption({
          dataSet: options,
          record: record
        });
        var optionDisabled = menuDisabled || optionProps && optionProps.disabled;
        var key = getItemKey(record, text, value);
        var itemContent = optionRenderer ? optionRenderer({
          dataSet: _this2.options,
          record: record,
          text: text,
          value: value
        }) : text;
        var option = /*#__PURE__*/React.createElement(Item, _extends({}, optionProps, {
          key: key,
          value: record,
          disabled: optionDisabled
        }), itemContent);
        optGroups.push(option);
      });

      if (!optGroups.length) {
        return null;
      }

      var menuPrefix = this.getMenuPrefixCls();
      return /*#__PURE__*/React.createElement(Menu, _extends({
        ref: this.saveMenu,
        disabled: menuDisabled,
        defaultActiveFirst: true,
        multiple: this.menuMultiple,
        selectedKeys: selectedKeys,
        prefixCls: menuPrefix,
        onClick: this.handleMenuClick,
        onMouseDown: preventDefault,
        style: dropdownMenuStyle,
        focusable: false
      }, menuProps), optGroups, options.paging && options.currentPage < options.totalPage && /*#__PURE__*/React.createElement(Item, {
        key: MORE_KEY,
        checkable: false,
        className: "".concat(menuPrefix, "-item-more")
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "more_horiz"
      })));
    }
  }]);

  return AutoComplete;
}(Select);

AutoComplete.displayName = 'AutoComplete';
AutoComplete.defaultProps = _objectSpread(_objectSpread({}, Select.defaultProps), {}, {
  searchable: true,
  suffixCls: 'auto-complete',
  matcher: defaultMatcher
});

__decorate([autobind, action], AutoComplete.prototype, "handleChange", null);

__decorate([autobind], AutoComplete.prototype, "handleFocus", null);

__decorate([autobind], AutoComplete.prototype, "handleBlur", null);

__decorate([autobind], AutoComplete.prototype, "getMenu", null);

AutoComplete = __decorate([observer], AutoComplete);
export default AutoComplete;
//# sourceMappingURL=AutoComplete.js.map