@kdcloudjs/kdesign 1.7.18 → 1.7.20

package/lib/city-picker/city-picker.js

@@ -9,157 +9,384 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../_utils/hooks");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
-var _cityPanelItem = _interopRequireDefault(require("./city-panel-item"));
-var _cityPanel = _interopRequireDefault(require("./city-panel"));
-var _citySearchPanel = _interopRequireDefault(require("./city-search-panel"));
+var _utils = require("../_utils");
+var _index = require("../index");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _option = _interopRequireDefault(require("./option"));
+var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var CityPicker = function CityPicker(_ref) {
-  var cityList = _ref.cityList,
-    className = _ref.className,
-    commons = _ref.commons,
-    disabled = _ref.disabled,
-    groups = _ref.groups,
-    inputClassName = _ref.inputClassName,
-    inputStyle = _ref.inputStyle,
-    placeholder = _ref.placeholder,
-    showTitle = _ref.showTitle,
-    style = _ref.style,
-    title = _ref.title;
+var tabsData = [{
+  id: 'domestic',
+  name: '国内'
+}, {
+  id: 'foreign',
+  name: '国际/中国港澳台'
+}];
+var InternalSelect = function InternalSelect(props, ref) {
+  var _context, _classNames3, _classNames5;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls;
-  var _useState = (0, _react.useState)(''),
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var selectProps = (0, _utils.getCompProps)('CityPicker', userDefaultProps, props);
+  var type = selectProps.type,
+    size = selectProps.size,
+    value = selectProps.value,
+    className = selectProps.className,
+    defaultOpen = selectProps.defaultOpen,
+    disabled = selectProps.disabled,
+    borderType = selectProps.borderType,
+    _selectProps$showArro = selectProps.showArrow,
+    showArrow = _selectProps$showArro === void 0 ? true : _selectProps$showArro,
+    allowClear = selectProps.allowClear,
+    customPrefixcls = selectProps.prefixCls,
+    onFocus = selectProps.onFocus,
+    onBlur = selectProps.onBlur,
+    onClear = selectProps.onClear,
+    onVisibleChange = selectProps.onVisibleChange,
+    onChange = selectProps.onChange,
+    onSearch = selectProps.onSearch,
+    defaultValue = selectProps.defaultValue,
+    placeholder = selectProps.placeholder,
+    _selectProps$dropdown = selectProps.dropdownStyle,
+    dropdownStyle = _selectProps$dropdown === void 0 ? {} : _selectProps$dropdown,
+    style = selectProps.style,
+    clearIcon = selectProps.clearIcon,
+    loading = selectProps.loading,
+    showDescription = selectProps.showDescription,
+    description = selectProps.description,
+    optionHighlightProps = selectProps.optionHighlightProps,
+    _selectProps$popperSt = selectProps.popperStyle,
+    popperStyle = _selectProps$popperSt === void 0 ? {} : _selectProps$popperSt,
+    _selectProps$commonLi = selectProps.commonList,
+    commonList = _selectProps$commonLi === void 0 ? [] : _selectProps$commonLi,
+    _selectProps$domestic = selectProps.domesticList,
+    domesticList = _selectProps$domestic === void 0 ? [] : _selectProps$domestic,
+    _selectProps$foreignL = selectProps.foreignList,
+    foreignList = _selectProps$foreignL === void 0 ? [] : _selectProps$foreignL,
+    itemRender = selectProps.itemRender;
+  var _useMergedState = (0, _hooks.useMergedState)(undefined, {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    initValue = _useMergedState2[0],
+    setInitValue = _useMergedState2[1];
+  var innerRef = (0, _react.useRef)();
+  var selectRef = ref || innerRef;
+  var searchRef = (0, _react.useRef)(null); // 搜索框ref
+  var selectionRef = (0, _react.useRef)(null);
+  var clearRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    inputVal = _useState2[0],
-    setInputVal = _useState2[1];
+    optionShow = _useState2[0],
+    setOptionShow = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    additionalVal = _useState4[0],
-    setAdditionalVal = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    popperVisible = _useState6[0],
-    setPopperVisible = _useState6[1];
-  var inputRef = (0, _react.useRef)(null);
-  var allCity = (0, _react.useRef)([]);
+    focusd = _useState6[0],
+    setFocusd = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    seletedCity = _useState8[0],
+    setSeletedCity = _useState8[1];
+  var _useState9 = (0, _react.useState)('domestic'),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    tabsValue = _useState10[0],
+    setTabsValue = _useState10[1];
+  var isDomestic = function isDomestic(type) {
+    return type === 'domestic';
+  };
+  var selectPrefixCls = getPrefixCls(prefixCls, 'city-picker', customPrefixcls);
+  var cityPickerCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true));
+  // 公共样式
+  var commCls = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames3, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   (0, _react.useEffect)(function () {
-    var _context;
-    if (!cityList) {
-      return;
+    var _context2;
+    if (typeof value === 'undefined') return;
+    var cityList = (0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(commonList), (0, _toConsumableArray2.default)(domesticList), (0, _toConsumableArray2.default)(foreignList));
+    var city = (0, _find.default)(cityList).call(cityList, function (city) {
+      return city.id === value;
+    });
+    if (city) {
+      setSeletedCity(city);
     }
-    var domestic = cityList.domestic,
-      foreign = cityList.foreign;
-    allCity.current = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _values.default)(domestic)), (0, _toConsumableArray2.default)((0, _values.default)(foreign))).reduce(function (arr, current) {
-      return (0, _concat.default)(arr).call(arr, current);
-    }, []);
-  }, [cityList]);
-  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
-  var containerCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-container"), className);
-  var contentCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-content"));
-  var titleCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-title"));
-  var additionalInfoCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-info"));
-  var inputCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-input"), inputClassName);
-  var arrowCls = (0, _classnames.default)('kdicon kdicon-arrow-down', "".concat(cityPickerPrefixCls, "-arrow"), {
-    'arrow-up': popperVisible
-  });
-  var handleContainerClick = function handleContainerClick() {
-    var _a;
-    if (document.activeElement === inputRef.current) {
-      return;
+  }, [commonList, domesticList, foreignList, value]);
+  (0, _react.useEffect)(function () {
+    if (typeof props.visible !== 'undefined') {
+      setOptionShow(props.visible);
+    }
+  }, [props.visible]);
+  (0, _react.useEffect)(function () {
+    if (optionShow === false) {
+      handleClear();
     }
-    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [optionShow]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setFocusd(true);
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setFocusd(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  (0, _react.useEffect)(function () {
+    selectionRef.current.addEventListener('mouseup', function (e) {
+      var _a;
+      var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
+      if (isCloseBtn) {
+        e.stopPropagation();
+      }
+    });
+  }, []);
+  // 输入框变化搜索内容
+  var handleSearchChange = (0, _react.useCallback)(function (event) {
+    var val = event.currentTarget.value;
+    setOptionShow(true);
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]);
+  // 清除搜索内容
+  var handleClear = (0, _react.useCallback)(function () {
+    if (searchRef.current) {
+      searchRef.current.value = '';
+      setSearchValue('');
+    }
+  }, [searchRef]);
+  // 清空选择器内容
+  var handleReset = function handleReset(e) {
+    e.stopPropagation();
+    onClear && onClear('');
+    setInitValue('');
+    setSeletedCity(null);
+    setSearchValue('');
+    onChange && onChange(undefined, '');
+  };
+  // 渲染后缀图标
+  var renderSuffix = function renderSuffix() {
+    var _classNames4;
+    if (disabled) return null;
+    var suffixIcon = selectProps.suffixIcon;
+    var arrowIconCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames4));
+    var iconShow = allowClear && !disabled && ((initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
+      onClick: handleReset,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      className: "".concat(selectPrefixCls, "-icon-clear"),
+      ref: clearRef
+    }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "close-solid"
+    })), showArrow && /*#__PURE__*/_react.default.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-down"
+    })));
   };
-  var handleCitySelect = function handleCitySelect(city) {
-    var _context2, _context3;
-    setInputVal(city.name || '');
-    var otherInfoStr = city.country === '中国' ? "".concat(city.province) : (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = "".concat(city.province)).call(_context3, city.province ? ',' : '')).call(_context2, city.country);
-    setAdditionalVal(otherInfoStr);
-    setPopperVisible(false);
+  // 下拉列表为空时显示的内容
+  var renderNotContent = function renderNotContent(msg) {
+    var notFoundContent = selectProps.notFoundContent;
+    var emptyContent = notFoundContent || msg;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-empty")
+    }, emptyContent);
+  };
+  var getHighlightText = function getHighlightText(text, inputValue) {
+    if (!inputValue || !text) return text;
+    var regex = new RegExp(Array.isArray(inputValue) ? (0, _map.default)(inputValue).call(inputValue, function (item) {
+      return "(".concat((0, _escapeRegExp.default)(item), ")");
+    }).join('|') : "(".concat((0, _escapeRegExp.default)(inputValue), ")"), 'i');
+    var strArr = text === null || text === void 0 ? void 0 : text.split(regex);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, strArr === null || strArr === void 0 ? void 0 : (0, _map.default)(strArr).call(strArr, function (item, index) {
+      return (regex === null || regex === void 0 ? void 0 : regex.test(item)) ? /*#__PURE__*/_react.default.createElement("span", {
+        key: index,
+        className: "".concat(selectPrefixCls, "-highlight")
+      }, item) : /*#__PURE__*/_react.default.createElement("span", {
+        key: index
+      }, item);
+    }));
+  };
+  var handleOption = function handleOption(city) {
+    handleVisibleChange(false);
+    (city === null || city === void 0 ? void 0 : city.id) !== initValue && (onChange === null || onChange === void 0 ? void 0 : onChange(city === null || city === void 0 ? void 0 : city.id, city));
+    if (typeof value === 'undefined') {
+      setSeletedCity(city);
+      setInitValue(city === null || city === void 0 ? void 0 : city.id);
+    }
   };
-  var handleFocus = function handleFocus() {
-    if (popperVisible) {
-      return;
+  var renderNodeList = function renderNodeList(data, notContent) {
+    if (!data.length) {
+      return renderNotContent(notContent);
     }
-    setPopperVisible(true);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-list")
+    }, (0, _map.default)(data).call(data, function (item) {
+      return /*#__PURE__*/_react.default.createElement(_option.default, {
+        key: item.id,
+        value: initValue,
+        city: item,
+        renderCityInfo: renderCityInfo,
+        onChangeSelect: handleOption,
+        itemRender: itemRender
+      }, searchValue ? getHighlightText(item === null || item === void 0 ? void 0 : item.name, (item === null || item === void 0 ? void 0 : item[optionHighlightProps]) || searchValue) : item === null || item === void 0 ? void 0 : item.name);
+    }));
   };
-  var handleChange = function handleChange(evt) {
-    var value = evt.target.value;
-    setAdditionalVal('');
-    setInputVal(value);
+  var renderLoading = function renderLoading() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-loading")
+    }, /*#__PURE__*/_react.default.createElement(_index.Spin, {
+      type: "container"
+    }));
   };
-  var handlePopperVisibleChange = function handlePopperVisibleChange(visible) {
-    if (!visible) {
-      setPopperVisible(false);
+  var toggleTabPane = function toggleTabPane(type) {
+    setTabsValue(type);
+  };
+  // 渲染下拉列表框
+  var renderContent = function renderContent() {
+    return loading ? renderLoading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, searchValue ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDomestic(type) && /*#__PURE__*/_react.default.createElement(_index.Tabs, {
+      noContainer: true,
+      onChange: toggleTabPane,
+      activeKey: tabsValue
+    }, (0, _map.default)(tabsData).call(tabsData, function (item) {
+      return /*#__PURE__*/_react.default.createElement(_index.Tabs.TabPane, {
+        key: item.id,
+        tab: item.name
+      }, item);
+    })), tabsValue === 'domestic' ? renderNodeList(domesticList, '暂无数据') : renderNodeList(foreignList, '暂无数据')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!commonList.length && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-common")
+    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+  };
+  var renderCityInfo = (0, _react.useCallback)(function (data) {
+    var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var symbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ', ';
+    if (!data) return null;
+    if (isDomestic(type)) {
+      var _context3;
+      return (0, _concat.default)(_context3 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context3, data === null || data === void 0 ? void 0 : data.province);
+    } else {
+      var _context4, _context5, _context6;
+      return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
+  }, [type]);
+  var renderSingle = function renderSingle() {
+    var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
+      visibility: 'hidden'
+    } : undefined;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-content")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-search")
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-content-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !!disabled
+    }), !searchValue && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-item"),
+      title: seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name
+    }, seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name)), !searchValue && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-info")
+    }, renderCityInfo(seletedCity))), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder"),
+      style: hiddenStyle
+    }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
   };
-  var inputSelector = /*#__PURE__*/_react.default.createElement("div", {
-    className: containerCls,
-    style: style,
-    onClick: handleContainerClick
-  }, showTitle && /*#__PURE__*/_react.default.createElement("div", {
-    className: titleCls
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: contentCls
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    ref: inputRef,
-    type: "text",
-    readOnly: disabled,
-    onChange: handleChange,
-    placeholder: placeholder,
-    style: inputStyle,
-    className: inputCls,
-    title: inputVal,
-    value: inputVal,
-    onFocus: handleFocus
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: additionalInfoCls
-  }, additionalVal), /*#__PURE__*/_react.default.createElement("i", {
-    className: arrowCls
-  })));
-  var cityPanel = /*#__PURE__*/_react.default.createElement(_cityPanel.default, {
-    commons: commons,
-    groups: groups,
-    cityList: cityList,
-    onSelect: handleCitySelect
-  });
-  var getSearchResults = function getSearchResults() {
-    var _context4;
-    if (!allCity.current || allCity.current.length === 0 || !inputVal) {
-      return [];
+  var singleCls = (0, _classnames.default)(commCls, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  (0, _react.useEffect)(function () {
+    if (optionShow && !disabled) {
+      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
+      onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
-    return (0, _filter.default)(_context4 = allCity.current).call(_context4, function (city) {
+  }, [optionShow]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    var fn = function fn(e) {
+      e.stopPropagation();
+    };
+    (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', fn);
+    return function () {
       var _a;
-      return (_a = city.name) === null || _a === void 0 ? void 0 : (0, _startsWith.default)(_a).call(_a, inputVal);
-    });
+      (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
+    };
+  }, [initValue]);
+  var renderCityPicker = function renderCityPicker() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: cityPickerCls,
+      ref: selectRef,
+      style: style
+    }, showDescription && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-description")
+    }, description), /*#__PURE__*/_react.default.createElement("span", {
+      className: selectionCls,
+      tabIndex: disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      onBlur: function onBlur() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, renderSingle()));
   };
-  var searchPanel = /*#__PURE__*/_react.default.createElement(_citySearchPanel.default, {
-    keyword: inputVal,
-    data: getSearchResults(),
-    onSelect: handleCitySelect
-  });
-  var popperProps = {
-    visible: popperVisible,
-    placement: 'bottomLeft',
-    trigger: 'focus',
-    prefixCls: "".concat(cityPickerPrefixCls, "-panel"),
-    onVisibleChange: handlePopperVisibleChange
+  var catchStyle = function catchStyle() {
+    var _a;
+    if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
+      var _ref = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+        width = _ref.width;
+      return (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+        minWidth: width,
+        maxWidth: 600
+      }, dropdownStyle), {
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || 'auto',
+        zIndex: 1050
+      }), popperStyle);
+    }
   };
-  var panel = inputVal.length > 0 ? searchPanel : cityPanel;
-  return (0, _usePopper.default)(inputSelector, panel, popperProps);
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange && onVisibleChange(visible);
+    }
+  };
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
+    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !searchValue
+  });
+  return (0, _usePopper.default)(renderCityPicker(), renderContent(), popperProps);
 };
-CityPicker.displayName = 'CityPicker';
-CityPicker.PanelItem = _cityPanelItem.default;
-CityPicker.Panel = _cityPanel.default;
-CityPicker.SearchPanel = _citySearchPanel.default;
-var _default = CityPicker;
+var Select = /*#__PURE__*/_react.default.forwardRef(InternalSelect);
+Select.displayName = 'CityPicker';
+var _default = Select;
 exports.default = _default;

package/lib/city-picker/interface.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+export declare type City = {
+    id?: string | number;
+    country?: string;
+    province?: string;
+    name?: string;
+    [key: string]: any;
+};
+export declare const BorderTypes: ["none", "underline", "bordered"];
+export declare type BorderType = typeof BorderTypes[number];
+export declare const Sizes: ["large", "middle", "small"];
+export declare type Size = typeof Sizes[number];
+export declare type Type = 'domestic' | 'foreign';
+export declare type CityList = Array<City>;
+export interface CityPickerProps {
+    prefixCls?: string;
+    size?: Size;
+    borderType?: BorderType;
+    notFoundContent?: React.ReactNode;
+    showArrow?: boolean;
+    defaultOpen?: boolean;
+    allowClear?: boolean;
+    placeholder?: React.ReactNode;
+    type?: Type;
+    loading?: boolean;
+    domesticList?: CityList;
+    foreignList?: CityList;
+    commonList?: CityList;
+    className?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    title?: string;
+    clearIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    optionHighlightProps?: string;
+    value?: string | number;
+    defaultValue?: string | number;
+    description?: React.ReactNode;
+    showDescription?: boolean;
+    onChange?: (value: string | number, city: City) => void;
+    onBlur?: (e: React.ChangeEvent<HTMLSpanElement>) => void;
+    onFocus?: () => void;
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    itemRender?: (city: City) => React.ReactNode;
+}
+export interface ICityPickerOptionProps {
+    disabled?: boolean;
+    city?: City;
+    value?: string | number;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onChangeSelect?: (city: City | null) => void;
+    renderCityInfo?: (city: City, flag?: boolean, symbol?: string) => React.ReactNode;
+    itemRender?: (city: City) => React.ReactNode;
+}

package/lib/city-picker/interface.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sizes = exports.BorderTypes = void 0;
+var _type = require("../_utils/type");
+var BorderTypes = (0, _type.tuple)('none', 'underline', 'bordered');
+exports.BorderTypes = BorderTypes;
+var Sizes = (0, _type.tuple)('large', 'middle', 'small'); // 选择框大小
+exports.Sizes = Sizes;

package/lib/city-picker/option.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ICityPickerOptionProps } from './interface';
+declare const Option: React.ForwardRefExoticComponent<ICityPickerOptionProps & React.RefAttributes<unknown>>;
+export default Option;

package/lib/city-picker/option.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var InternalOption = function InternalOption(props, ref) {
+  var _classNames;
+  var optionRef = (0, _react.useRef)(null) || ref;
+  var children = props.children,
+    value = props.value,
+    disabled = props.disabled,
+    onChangeSelect = props.onChangeSelect,
+    _props$city = props.city,
+    city = _props$city === void 0 ? {} : _props$city,
+    renderCityInfo = props.renderCityInfo,
+    itemRender = props.itemRender;
+  var id = city.id,
+    name = city.name;
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
+  var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
+  var isSelected = id !== undefined ? id === value : false;
+  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    if (disabled || id === undefined) return;
+    onChangeSelect === null || onChangeSelect === void 0 ? void 0 : onChangeSelect(city);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: optionRef,
+    className: optionCls,
+    title: name,
+    onClick: handleClick
+  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(selectOptionPrefixCls, "-content")
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(selectOptionPrefixCls, "-info")
+  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
+};
+var Option = /*#__PURE__*/_react.default.forwardRef(InternalOption);
+Option.displayName = 'CityPickerOption';
+var _default = Option;
+exports.default = _default;