@alicloud/console-components-search 0.1.0

package/es/modeSingleMulti/index.js

@@ -0,0 +1,862 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState, useEffect } from "react";
+import classNames from 'classnames'; // import styled from "styled-components";
+
+import { Button, Icon, Tag, Select } from '@alicloud/console-components'; // import { AutoCompleteProps } from '@alifd/next/lib/select'
+
+import { getHistoryTag as getHistoryTagUtil, setHistoryTag as setHistoryTagUtil, removeHistoryTagItem as removeHistoryTagItemUtils, getTagByFileds, checkNoIndexListFormat, getSelectOptionAdatp } from "../utils"; // import '../index.less'
+
+import { SearchWarp, MultiBtnWarp, MenuContentWrap } from "../style";
+var TagGroup = Tag.Group,
+    ClosableTag = Tag.Closeable;
+var AutoComplete = Select.AutoComplete;
+
+var ModeSingleSingle = function ModeSingleSingle(props) {
+  var mode = props.mode,
+      options = props.options,
+      defaultDataIndex = props.defaultDataIndex,
+      defaultPlaceholder = props.defaultPlaceholder,
+      tags = props.tags,
+      onSuggest = props.onSuggest,
+      onSuggestNoDataIndex = props.onSuggestNoDataIndex,
+      onChange = props.onChange,
+      onSearch = props.onSearch,
+      onTagChange = props.onTagChange;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      allFileds = _useState2[0],
+      setAllFileds = _useState2[1];
+
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      curOptionItem = _useState4[0],
+      setCurOptionItem = _useState4[1];
+
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      defaultOptionItem = _useState6[0],
+      setDefaultOptionItem = _useState6[1];
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      defaultInputValue = _useState8[0],
+      setDefaultValue = _useState8[1];
+
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  var _useState11 = useState([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      inputDataSource = _useState12[0],
+      setInputDataSource = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      visible = _useState14[0],
+      setVisible = _useState14[1];
+
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      defaultVisible = _useState16[0],
+      setDefaultVisible = _useState16[1];
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      clearLevel1Show = _useState18[0],
+      setClearLevel1Show = _useState18[1];
+
+  var _useState19 = useState([]),
+      _useState20 = _slicedToArray(_useState19, 2),
+      multipleValues = _useState20[0],
+      setMultipleValues = _useState20[1];
+
+  var _useState21 = useState([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      tagList = _useState22[0],
+      setTagList = _useState22[1];
+
+  var _useState23 = useState([]),
+      _useState24 = _slicedToArray(_useState23, 2),
+      histroyList = _useState24[0],
+      setHistroyList = _useState24[1];
+
+  var _useState25 = useState(''),
+      _useState26 = _slicedToArray(_useState25, 2),
+      curType = _useState26[0],
+      setCurType = _useState26[1]; // defalut/nodefault/item
+
+
+  var _useState27 = useState(''),
+      _useState28 = _slicedToArray(_useState27, 2),
+      focusClass = _useState28[0],
+      setFocusClass = _useState28[1]; // focus/''
+
+
+  useEffect(function () {
+    var initHisTags = getHistoryTagUtil();
+
+    if (initHisTags) {
+      setHistroyList(initHisTags);
+    }
+
+    initCurType();
+  }, []);
+
+  function initCurType() {
+    var initCurType = '';
+
+    if (defaultDataIndex && defaultDataIndex !== '') {
+      initCurType = 'default';
+      var defaultItem = options.find(function (x) {
+        return x.dataIndex === defaultDataIndex;
+      });
+
+      if (defaultItem) {
+        // console.log(defaultItem)
+        setDefaultOptionItem(defaultItem);
+      } else {
+        initCurType = 'nodefault';
+      }
+    } else {
+      initCurType = 'nodefault';
+    } // console.log('initCurType', initCurType)
+
+
+    setCurType(initCurType);
+  } // if (initCurType === 'nodefault') {
+  //   let defaultItem2 = options.find((x:any) => x.template === 'input')
+  //     if (defaultItem2) {
+  //         console.log(defaultItem2)
+  //         setDefaultOptionItem(defaultItem2);
+  //     }
+  // }
+
+
+  var level1DataSourceTemp = [{
+    label: '选择筛选条件',
+    children: options.map(function (l1) {
+      return {
+        label: l1.label,
+        value: l1.dataIndex
+      };
+    })
+  }];
+
+  var _useState29 = useState(level1DataSourceTemp),
+      _useState30 = _slicedToArray(_useState29, 2),
+      level1DataSource = _useState30[0],
+      setLevel1DataSource = _useState30[1];
+
+  var menuPropsLevel1 = {
+    focusable: false,
+    header: /*#__PURE__*/React.createElement(MenuContentWrap, null, defaultDataIndex && defaultDataIndex !== '' && histroyList && histroyList.length > 0 && defaultInputValue === '' && /*#__PURE__*/React.createElement("li", {
+      role: "option",
+      title: "\u5386\u53F2\u641C\u7D22\u8BB0\u5F55",
+      className: "next-menu-group-label"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "next-menu-item-inner"
+    }, "\u5386\u53F2\u641C\u7D22\u8BB0\u5F55")), defaultDataIndex && defaultDataIndex !== '' && histroyList && histroyList.length > 0 && defaultInputValue === '' && /*#__PURE__*/React.createElement(TagGroup, {
+      style: {
+        paddingLeft: '20px'
+      }
+    }, histroyList.map(function (tag, index) {
+      return tag ? /*#__PURE__*/React.createElement(ClosableTag, {
+        size: "small",
+        key: tag.dataIndex + tag.value + index,
+        onClose: function onClose() {
+          onRemoveHisTag(tag);
+          return true;
+        },
+        onClick: function onClick() {
+          onSelectHisTag(tag);
+        }
+      }, tag.label, ":", tag.valueShow) : '';
+    }))),
+    footer: null
+  }; // 多选
+
+  var menuProps = {
+    focusable: false,
+    header: null,
+    footer: /*#__PURE__*/React.createElement(MultiBtnWarp, null, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      className: classNames("pri-btn"),
+      disabled: multipleValues.length === 0,
+      type: "primary",
+      onClick: function onClick() {
+        onPrimaryMultiple(curOptionItem.dataIndex);
+      }
+    }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      className: classNames("cancel-btn"),
+      type: "normal",
+      onClick: function onClick() {
+        setVisible(false);
+        setMultipleValues([]);
+      }
+    }, "\u53D6\u6D88"))
+  };
+
+  var itemRender = function itemRender(item, searchKey) {
+    var label = item.label;
+
+    if (searchKey && searchKey.length) {
+      var key = searchKey.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+      var reg = new RegExp("(".concat(key, ")"), 'ig');
+      label = label.replace(reg, function (x) {
+        return "<span class=\"next-select-highlight\" style=\"background-color: #EFF3F8;font-weight: 500;\">".concat(x, "</span>");
+      });
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: label
+      }
+    });
+  };
+
+  var itemRenderMulti = function itemRenderMulti(item) {
+    var isChecked = false;
+
+    if (multipleValues.find(function (v) {
+      return v === item.value;
+    })) {
+      isChecked = true;
+    } // console.log('item',item, 'isChecked', isChecked)
+
+
+    return /*#__PURE__*/React.createElement("label", {
+      className: classNames('next-checkbox-wrapper', 'multi-lable', isChecked ? 'checked' : ''),
+      style: {
+        paddingLeft: '8px'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "next-checkbox"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "next-checkbox-inner"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "next-icon next-icon-select next-xs next-checkbox-select-icon"
+    })), /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      className: "next-checkbox-input",
+      defaultChecked: isChecked
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "next-checkbox-label"
+    }, item.label));
+  };
+
+  function onRemoveHisTag(tagItem) {
+    var newHisTags = removeHistoryTagItemUtils(tagItem);
+    setHistroyList(newHisTags);
+  }
+
+  function onSelectHisTag(tagItem) {
+    var changeFileds = Object.create({});
+    var tempAllFileds = Object.create({});
+    changeFileds[tagItem.dataIndex] = tagItem.value;
+
+    if (mode === 'single-multi') {
+      tempAllFileds = changeFileds;
+    } else if (mode === 'multi-multi') {
+      tempAllFileds = _objectSpread(_objectSpread({}, allFileds), changeFileds);
+    }
+
+    onChangeItem(changeFileds, tempAllFileds);
+  }
+
+  function upDateHistory() {
+    // const allFiledsTagList = getTagByFileds(allFileds, options);
+    var allFiledsTagList = _toConsumableArray(tagList);
+
+    var rtHisTags = setHistoryTagUtil(allFiledsTagList);
+    setHistroyList(rtHisTags);
+  }
+
+  function checkAllFromTags(allFileds) {
+    var allFiledsAdapt = _objectSpread({}, allFileds);
+
+    if (tags && Array.isArray(tags) && tags.length >= 0) {
+      allFiledsAdapt = {};
+      tags.forEach(function (tag) {
+        if (allFileds[tag.dataIndex]) {
+          allFiledsAdapt[tag.dataIndex] = allFileds[tag.dataIndex];
+        }
+      });
+    }
+
+    return allFiledsAdapt;
+  } // 某一类别确定时，修改fileds， 和tags
+
+
+  function onChangeItem(changeFileds, allFileds) {
+    setDefaultVisible(false);
+    setAllFileds(allFileds); // todo
+
+    if (onChange) {
+      onChange(changeFileds, allFileds);
+    }
+
+    if (onTagChange) {
+      var newTags = getTagByFileds(allFileds, options);
+      setTagList(newTags);
+      onTagChange(newTags);
+    } // 仅仅清空值， 保留类别
+
+
+    setVisible(false);
+    setInputValue('');
+    setFocusClass('');
+    setClearLevel1Show(true);
+  }
+
+  function clearLevel1() {
+    // 清空类别
+    var initCurType = '';
+
+    if (defaultDataIndex && defaultDataIndex !== '' && defaultOptionItem) {
+      initCurType = 'default';
+      var defaultItem = options.find(function (x) {
+        return x.dataIndex === defaultDataIndex;
+      });
+
+      if (defaultItem) {
+        // console.log(defaultItem)
+        setDefaultOptionItem(defaultItem);
+      } else {
+        initCurType = 'nodefault';
+      }
+    } else {
+      initCurType = 'nodefault';
+    }
+
+    setCurType(initCurType);
+    setClearLevel1Show(false);
+  } // 多选的确定
+
+
+  function onPrimaryMultiple(dataIndex) {
+    // multipleValues
+    setVisible(false);
+
+    if (onChangeItem) {
+      var changeFileds = Object.create({});
+      changeFileds[dataIndex] = multipleValues;
+
+      if (mode === 'single-multi') {
+        setAllFileds(changeFileds);
+        onChangeItem(changeFileds, changeFileds);
+      } else if (mode === 'multi-multi') {
+        allFileds[dataIndex] = multipleValues;
+        setAllFileds(allFileds);
+        onChangeItem(changeFileds, allFileds);
+      }
+
+      setMultipleValues([]);
+    }
+  } // 多选的change，仅改变state
+
+
+  function onMultipleChange(values) {
+    // console.log('value', values);
+    if (values) {
+      setMultipleValues(values);
+    } else {
+      setMultipleValues([]);
+    }
+  } // 第一级选择某个具体的类别
+
+
+  function onLevel1Change(_x, _x2, _x3) {
+    return _onLevel1Change.apply(this, arguments);
+  }
+
+  function _onLevel1Change() {
+    _onLevel1Change = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, actionType, item) {
+      var curOptItem;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              // console.log('value', value,'level1 , actionType', actionType, 'item:', item)
+              setClearLevel1Show(true); // console.log('defaultInputValue', defaultInputValue)
+
+              if (!(actionType === 'itemClick')) {
+                _context.next = 5;
+                break;
+              }
+
+              // 判断是level选择还是直接输入的suggest---- 选了一个类别
+              if (!defaultInputValue) {
+                // level1 的选择
+                curOptItem = options.find(function (x) {
+                  return x.dataIndex === value;
+                });
+
+                if (curOptItem) {
+                  setCurOptionItem(curOptItem);
+                  setCurType('item');
+                } // 当第一次选择了筛选类别后，需自动进入激活状态，无需再次点击；（自动获取焦点）自动弹窗
+
+
+                setVisible(true);
+              } else if (curType === 'default' && defaultDataIndex && defaultDataIndex !== '') {
+                // 选了suggest
+                inputChange(value, 'itemClick', defaultDataIndex);
+                setDefaultValue('');
+                setLevel1DataSource(level1DataSourceTemp);
+              } else if (curType === 'nodefault') {
+                if (item && item.dataIndex) {
+                  inputChange(value, 'itemClick', item.dataIndex);
+                  setDefaultValue('');
+                  setLevel1DataSource(level1DataSourceTemp);
+                }
+              }
+
+              _context.next = 19;
+              break;
+
+            case 5:
+              if (!(actionType === 'change')) {
+                _context.next = 19;
+                break;
+              }
+
+              if (!(!value || value === '')) {
+                _context.next = 10;
+                break;
+              }
+
+              setLevel1DataSource(level1DataSourceTemp);
+              _context.next = 18;
+              break;
+
+            case 10:
+              if (!(defaultDataIndex && defaultDataIndex !== '' && onSuggest)) {
+                _context.next = 15;
+                break;
+              }
+
+              _context.next = 13;
+              return setDefSuggest(value);
+
+            case 13:
+              _context.next = 18;
+              break;
+
+            case 15:
+              if (!onSuggestNoDataIndex) {
+                _context.next = 18;
+                break;
+              }
+
+              _context.next = 18;
+              return setNoDefSuggest(value);
+
+            case 18:
+              setDefaultValue(value);
+
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _onLevel1Change.apply(this, arguments);
+  }
+
+  function onClearLevel1() {
+    clearLevel1();
+  }
+
+  function setDefSuggest(_x4) {
+    return _setDefSuggest.apply(this, arguments);
+  }
+
+  function _setDefSuggest() {
+    _setDefSuggest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
+      var list, newDataSource;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(onSuggest && defaultDataIndex && defaultDataIndex !== '')) {
+                _context2.next = 7;
+                break;
+              }
+
+              _context2.next = 3;
+              return onSuggest(value, defaultDataIndex);
+
+            case 3:
+              list = _context2.sent;
+              newDataSource = [{
+                label: defaultOptionItem.label,
+                children: list
+              }];
+              setLevel1DataSource(newDataSource);
+              setDefaultVisible(true);
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _setDefSuggest.apply(this, arguments);
+  }
+
+  function setNoDefSuggest(_x5) {
+    return _setNoDefSuggest.apply(this, arguments);
+  }
+
+  function _setNoDefSuggest() {
+    _setNoDefSuggest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(value) {
+      var list;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!onSuggestNoDataIndex) {
+                _context3.next = 7;
+                break;
+              }
+
+              _context3.next = 3;
+              return onSuggestNoDataIndex(value);
+
+            case 3:
+              list = _context3.sent;
+              // console.log(list)
+              checkNoIndexListFormat(list);
+              setLevel1DataSource(_toConsumableArray(list));
+              setDefaultVisible(true);
+
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+    return _setNoDefSuggest.apply(this, arguments);
+  }
+
+  function onDeFaultEnter(e) {
+    var dataIndex = defaultDataIndex;
+    var value = defaultInputValue;
+
+    if (curType === 'item' && curOptionItem.template === 'input') {
+      dataIndex = curOptionItem.dataIndex;
+      value = inputValue;
+    }
+
+    if (e.keyCode === 13 && value !== '') {
+      if (curOptionItem.template === 'multiple') {
+        return;
+      }
+
+      if (defaultDataIndex && defaultDataIndex !== '' && onSuggest) {
+        // fuzzyDisable
+        if (!curOptionItem.templateProps || !curOptionItem.templateProps.fuzzyDisable) {
+          inputChange(value, 'enter', defaultDataIndex);
+          setDefaultVisible(false);
+          setDefaultValue('');
+        }
+      }
+    }
+  }
+  /**
+   * 当某一类别是， 输入类型时触发
+   * 接收一个promise
+   */
+
+
+  function inputChange(_x6, _x7, _x8) {
+    return _inputChange.apply(this, arguments);
+  } // 单选或多选的change，
+
+
+  function _inputChange() {
+    _inputChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(value, actionType, dataIndex) {
+      var changeFileds, list, newDataSource;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!((actionType === 'itemClick' || actionType === 'enter') && onChangeItem)) {
+                _context4.next = 9;
+                break;
+              }
+
+              changeFileds = Object.create({});
+              changeFileds[dataIndex] = value;
+
+              if (mode === 'single-multi') {
+                setAllFileds(changeFileds);
+                onChangeItem(changeFileds, changeFileds);
+              } else if (mode === 'multi-multi') {
+                allFileds[dataIndex] = value;
+                setAllFileds(allFileds);
+                onChangeItem(changeFileds, allFileds);
+              }
+
+              setVisible(false);
+              setDefaultVisible(false);
+              setInputDataSource([]);
+              _context4.next = 19;
+              break;
+
+            case 9:
+              if (value === '') {
+                setInputDataSource([]);
+                setClearLevel1Show(true);
+              } else {
+                setClearLevel1Show(false);
+              }
+
+              setInputValue(value);
+
+              if (!(value !== '' && onSuggest)) {
+                _context4.next = 19;
+                break;
+              }
+
+              _context4.next = 14;
+              return onSuggest(value, dataIndex);
+
+            case 14:
+              list = _context4.sent;
+              // console.log('res suggest', list);
+              newDataSource = [{
+                label: curOptionItem.label,
+                children: list
+              }];
+              setInputDataSource(newDataSource);
+              setVisible(true);
+              setDefaultVisible(true);
+
+            case 19:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+    return _inputChange.apply(this, arguments);
+  }
+
+  function selectChange(value, dataIndex) {
+    // setSingleValues(value);
+    setVisible(false);
+    setFocusClass('');
+
+    if (onChangeItem) {
+      var changeFileds = Object.create({});
+      changeFileds[dataIndex] = value;
+
+      if (mode === 'single-multi') {
+        // 判断value 是否为undefined
+        setAllFileds(changeFileds);
+        onChangeItem(changeFileds, changeFileds);
+      } else if (mode === 'multi-multi') {
+        allFileds[dataIndex] = value;
+        setAllFileds(allFileds);
+        onChangeItem(changeFileds, allFileds);
+      }
+    }
+  } // 提交按钮
+
+
+  function onCommonSearch() {
+    if (onSearch) {
+      var checkAllFileds = checkAllFromTags(allFileds);
+      onSearch(checkAllFileds); // todo: 只有搜索了才会被记录到，根据页面的路由为key，history
+
+      upDateHistory();
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(SearchWarp, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('left-wrap', 'next-input', focusClass)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('condition')
+  }, curType === 'item' && /*#__PURE__*/React.createElement("div", {
+    className: classNames('condition-item')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames('condition-item-txt')
+  }, curOptionItem.label), /*#__PURE__*/React.createElement(Icon, {
+    type: "caret-down",
+    size: "xxs"
+  }), /*#__PURE__*/React.createElement(Select, {
+    className: classNames('condition-select'),
+    hasBorder: false,
+    dataSource: level1DataSource,
+    onChange: onLevel1Change,
+    autoWidth: false
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classNames('forms'),
+    onKeyUp: onDeFaultEnter
+  }, curType === 'default' && defaultOptionItem && /*#__PURE__*/React.createElement(AutoComplete, {
+    className: classNames('main-input', 'multi'),
+    placeholder: "\u9ED8\u8BA4\u6309".concat(defaultOptionItem.label, "\u641C\u7D22"),
+    hasClear: true,
+    hasBorder: false,
+    menuProps: menuPropsLevel1,
+    dataSource: level1DataSource // @ts-ignore
+    ,
+    itemRender: itemRender,
+    onChange: onLevel1Change,
+    popupStyle: histroyList && histroyList.length > 0 ? {} : {
+      width: 'auto'
+    },
+    visible: defaultVisible,
+    onFocus: function onFocus() {
+      setDefaultVisible(true);
+      setFocusClass('focus');
+    },
+    onBlur: function onBlur() {
+      setDefaultVisible(false);
+      setFocusClass('');
+    },
+    value: defaultInputValue
+  }), curType === 'nodefault' && /*#__PURE__*/React.createElement(AutoComplete, {
+    className: classNames('main-input', 'multi'),
+    placeholder: defaultPlaceholder || "\u8BF7\u641C\u7D22",
+    hasClear: true,
+    hasBorder: false,
+    menuProps: menuPropsLevel1,
+    popupStyle: histroyList && histroyList.length > 0 ? {} : {
+      width: 'auto'
+    } // @ts-ignore
+    ,
+    itemRender: itemRender,
+    dataSource: level1DataSource,
+    onChange: onLevel1Change,
+    visible: defaultVisible,
+    onFocus: function onFocus() {
+      setDefaultVisible(true);
+      setFocusClass('focus');
+    },
+    onBlur: function onBlur() {
+      setDefaultVisible(false);
+      setFocusClass('');
+    },
+    value: defaultInputValue
+  }), curType === 'item' && curOptionItem.template === 'input' && /*#__PURE__*/React.createElement(AutoComplete, {
+    className: classNames('main-input', 'multi'),
+    placeholder: curOptionItem.templateProps.placeholder || "\u9ED8\u8BA4\u6309".concat(curOptionItem.label, "\u641C\u7D22"),
+    hasClear: true,
+    hasBorder: false // @ts-ignore
+    ,
+    itemRender: itemRender,
+    visible: visible && inputDataSource.length > 0,
+    dataSource: inputDataSource,
+    autoFocus: true,
+    value: inputValue,
+    onFocus: function onFocus() {
+      setVisible(true);
+      setFocusClass('focus');
+    },
+    onBlur: function onBlur() {
+      setVisible(false);
+      setFocusClass('');
+    },
+    onChange: function onChange(value, actionType) {
+      inputChange(value, actionType, curOptionItem.dataIndex);
+    }
+  }), curType === 'item' && curOptionItem.template === 'select' && /*#__PURE__*/React.createElement(Select, {
+    className: classNames('main-input', 'select'),
+    placeholder: curOptionItem.templateProps.placeholder || "\u8BF7\u9009\u62E9".concat(curOptionItem.label),
+    hasClear: true,
+    hasBorder: false,
+    dataSource: getSelectOptionAdatp(curOptionItem.label, curOptionItem.templateProps.dataSource),
+    onChange: function onChange(value) {
+      selectChange(value, curOptionItem.dataIndex);
+    },
+    popupStyle: {
+      minWidth: 'auto'
+    },
+    autoFocus: true,
+    visible: visible,
+    value: undefined,
+    onClick: function onClick() {
+      setVisible(true);
+      setFocusClass('focus');
+    },
+    onFocus: function onFocus() {
+      setVisible(true);
+      setFocusClass('focus');
+    },
+    onBlur: function onBlur() {
+      setVisible(false);
+      setFocusClass('');
+    }
+  }), curType === 'item' && curOptionItem.template === 'multiple' && /*#__PURE__*/React.createElement(Select, {
+    className: classNames('main-input', 'multi'),
+    placeholder: curOptionItem.templateProps.placeholder || "\u8BF7\u9009\u62E9".concat(curOptionItem.label),
+    hasClear: true,
+    mode: "multiple",
+    maxTagCount: 0,
+    hasBorder: false,
+    autoFocus: true,
+    menuProps: menuProps,
+    value: multipleValues,
+    onFocus: function onFocus() {
+      setVisible(true);
+      setFocusClass('focus');
+    },
+    onClick: function onClick() {
+      setVisible(true);
+      setFocusClass('focus');
+    },
+    onBlur: function onBlur() {
+      setVisible(false);
+      setFocusClass('');
+    },
+    itemRender: itemRenderMulti,
+    popupClassName: "xconsole-rcsearch-multi-pop",
+    visible: visible,
+    dataSource: getSelectOptionAdatp(curOptionItem.label, curOptionItem.templateProps.dataSource),
+    onChange: function onChange(value) {
+      onMultipleChange(value);
+    },
+    popupStyle: {
+      minWidth: 'auto',
+      padding: '10px 8px 10px 8px'
+    }
+  }), clearLevel1Show && /*#__PURE__*/React.createElement("div", {
+    className: "clear-level1",
+    onClick: onClearLevel1
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "next-input-control"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "next-input-hint-wrap"
+  }, /*#__PURE__*/React.createElement("i", {
+    role: "button",
+    "aria-label": "\u6E05\u9664",
+    className: "next-icon next-icon-delete-filling next-medium next-input-hint next-input-clear-icon"
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: classNames('right-wrap')
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames('search-btn'),
+    onClick: onCommonSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "search"
+  }))));
+};
+
+export default ModeSingleSingle;