choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
252 lines (210 loc) • 8.63 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _mobxReact = require("mobx-react");
var _menu = _interopRequireWildcard(require("../../../lib/rc-components/menu"));
var _mobx = require("mobx");
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _Select2 = require("../select/Select");
var _dataSet = _interopRequireDefault(require("../data-set"));
var _enum = require("../data-set/enum");
var _icon = _interopRequireDefault(require("../icon"));
var _EventManager = require("../_util/EventManager");
var defaultMatcher = function defaultMatcher(value, inputText) {
return value.indexOf(inputText) !== -1;
};
var AutoComplete = /*#__PURE__*/function (_Select) {
(0, _inherits2["default"])(AutoComplete, _Select);
var _super = (0, _createSuper2["default"])(AutoComplete);
function AutoComplete() {
var _this;
(0, _classCallCheck2["default"])(this, AutoComplete);
_this = _super.apply(this, arguments);
_this.isChoose = false;
_this.inputText = '';
return _this;
}
(0, _createClass2["default"])(AutoComplete, [{
key: "multiple",
get: function get() {
return false;
}
}, {
key: "range",
get: function get() {
return false;
}
}, {
key: "getTriggerIconFont",
value: function getTriggerIconFont() {
return '';
}
}, {
key: "getNotFoundContent",
value: function getNotFoundContent() {
return null;
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return (0, _get2["default"])((0, _getPrototypeOf2["default"])(AutoComplete.prototype), "getOmitPropsKeys", this).call(this).concat(['searchable', 'matcher']);
}
}, {
key: "isSearchFieldInPopup",
value: function isSearchFieldInPopup() {
return false;
}
}, {
key: "renderLengthInfo",
value: function renderLengthInfo(maxLength, inputLength) {
var prefixCls = this.prefixCls;
return maxLength && maxLength > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
key: "length-info",
className: "".concat(prefixCls, "-length-info")
}, "".concat(inputLength, "/").concat(maxLength)) : null;
}
}, {
key: "handleChange",
value: function handleChange(e) {
this.isChoose = false;
(0, _get2["default"])((0, _getPrototypeOf2["default"])(AutoComplete.prototype), "handleChange", this).call(this, e);
}
}, {
key: "choose",
value: function choose(record) {
this.isChoose = true;
(0, _get2["default"])((0, _getPrototypeOf2["default"])(AutoComplete.prototype), "choose", this).call(this, record);
}
}, {
key: "handleFocus",
value: function handleFocus(e) {
var target = e.target;
this.inputText = target ? target.value : '';
(0, _get2["default"])((0, _getPrototypeOf2["default"])(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["default"]({
fields: [{
name: this.textField,
type: _enum.FieldType.string
}, {
name: this.valueField,
type: _enum.FieldType.string
}],
data: [(_ref = {}, (0, _defineProperty2["default"])(_ref, this.textField, inputText), (0, _defineProperty2["default"])(_ref, this.valueField, inputText), _ref)]
}, {
getConfig: this.getContextConfig
});
this.choose(temDs.current);
}
(0, _get2["default"])((0, _getPrototypeOf2["default"])(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 = (0, _Select2.getItemKey)(record, text, value);
var itemContent = optionRenderer ? optionRenderer({
dataSet: _this2.options,
record: record,
text: text,
value: value
}) : text;
var option = /*#__PURE__*/_react["default"].createElement(_menu.Item, (0, _extends2["default"])({}, optionProps, {
key: key,
value: record,
disabled: optionDisabled
}), itemContent);
optGroups.push(option);
});
if (!optGroups.length) {
return null;
}
var menuPrefix = this.getMenuPrefixCls();
return /*#__PURE__*/_react["default"].createElement(_menu["default"], (0, _extends2["default"])({
ref: this.saveMenu,
disabled: menuDisabled,
defaultActiveFirst: true,
multiple: this.menuMultiple,
selectedKeys: selectedKeys,
prefixCls: menuPrefix,
onClick: this.handleMenuClick,
onMouseDown: _EventManager.preventDefault,
style: dropdownMenuStyle,
focusable: false
}, menuProps), optGroups, options.paging && options.currentPage < options.totalPage && /*#__PURE__*/_react["default"].createElement(_menu.Item, {
key: _Select2.MORE_KEY,
checkable: false,
className: "".concat(menuPrefix, "-item-more")
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "more_horiz"
})));
}
}]);
return AutoComplete;
}(_Select2.Select);
AutoComplete.displayName = 'AutoComplete';
AutoComplete.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _Select2.Select.defaultProps), {}, {
searchable: true,
suffixCls: 'auto-complete',
matcher: defaultMatcher
});
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], AutoComplete.prototype, "handleChange", null);
(0, _tslib.__decorate)([_autobind["default"]], AutoComplete.prototype, "handleFocus", null);
(0, _tslib.__decorate)([_autobind["default"]], AutoComplete.prototype, "handleBlur", null);
(0, _tslib.__decorate)([_autobind["default"]], AutoComplete.prototype, "getMenu", null);
AutoComplete = (0, _tslib.__decorate)([_mobxReact.observer], AutoComplete);
var _default = AutoComplete;
exports["default"] = _default;
//# sourceMappingURL=AutoComplete.js.map