@kdcloudjs/kdesign 1.7.18 → 1.7.20

package/es/city-picker/city-picker.js

@@ -1,152 +1,379 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
-import React, { useContext, useState, useRef, useEffect } from 'react';
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import { useMergedState } from '../_utils/hooks';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
-import CityPanelItem from './city-panel-item';
-import CityPanel from './city-panel';
-import SearchPanel from './city-search-panel';
+import { getCompProps } from '../_utils';
+import { Icon, Tabs, Spin } from '../index';
 import usePopper from '../_utils/usePopper';
-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;
+import Option from './option';
+import escapeRegExp from 'lodash/escapeRegExp';
+var tabsData = [{
+  id: 'domestic',
+  name: '国内'
+}, {
+  id: 'foreign',
+  name: '国际/中国港澳台'
+}];
+var InternalSelect = function InternalSelect(props, ref) {
+  var _context, _classNames3, _classNames5;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls;
-  var _useState = useState(''),
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var selectProps = 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 = useMergedState(undefined, {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    initValue = _useMergedState2[0],
+    setInitValue = _useMergedState2[1];
+  var innerRef = useRef();
+  var selectRef = ref || innerRef;
+  var searchRef = useRef(null); // 搜索框ref
+  var selectionRef = useRef(null);
+  var clearRef = useRef(null);
+  var _useState = useState(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = _slicedToArray(_useState, 2),
-    inputVal = _useState2[0],
-    setInputVal = _useState2[1];
+    optionShow = _useState2[0],
+    setOptionShow = _useState2[1];
   var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    additionalVal = _useState4[0],
-    setAdditionalVal = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    popperVisible = _useState6[0],
-    setPopperVisible = _useState6[1];
-  var inputRef = useRef(null);
-  var allCity = useRef([]);
+    focusd = _useState6[0],
+    setFocusd = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    seletedCity = _useState8[0],
+    setSeletedCity = _useState8[1];
+  var _useState9 = useState('domestic'),
+    _useState10 = _slicedToArray(_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 = classNames(selectPrefixCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-selector"), true));
+  // 公共样式
+  var commCls = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames3, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   useEffect(function () {
-    var _context;
-    if (!cityList) {
-      return;
+    var _context2;
+    if (typeof value === 'undefined') return;
+    var cityList = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(commonList), _toConsumableArray(domesticList), _toConsumableArray(foreignList));
+    var city = _findInstanceProperty(cityList).call(cityList, function (city) {
+      return city.id === value;
+    });
+    if (city) {
+      setSeletedCity(city);
     }
-    var domestic = cityList.domestic,
-      foreign = cityList.foreign;
-    allCity.current = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_Object$values(domestic)), _toConsumableArray(_Object$values(foreign))).reduce(function (arr, current) {
-      return _concatInstanceProperty(arr).call(arr, current);
-    }, []);
-  }, [cityList]);
-  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
-  var containerCls = classNames("".concat(cityPickerPrefixCls, "-container"), className);
-  var contentCls = classNames("".concat(cityPickerPrefixCls, "-content"));
-  var titleCls = classNames("".concat(cityPickerPrefixCls, "-title"));
-  var additionalInfoCls = classNames("".concat(cityPickerPrefixCls, "-info"));
-  var inputCls = classNames("".concat(cityPickerPrefixCls, "-input"), inputClassName);
-  var arrowCls = classNames('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]);
+  useEffect(function () {
+    if (typeof props.visible !== 'undefined') {
+      setOptionShow(props.visible);
+    }
+  }, [props.visible]);
+  useEffect(function () {
+    if (optionShow === false) {
+      handleClear();
     }
-    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [optionShow]);
+  var handleFocus = useCallback(function (e) {
+    e.stopPropagation();
+    setFocusd(true);
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = useCallback(function (e) {
+    e.stopPropagation();
+    setFocusd(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  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 = useCallback(function (event) {
+    var val = event.currentTarget.value;
+    setOptionShow(true);
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]);
+  // 清除搜索内容
+  var handleClear = 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 = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames4));
+    var iconShow = allowClear && !disabled && ((initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
+      onClick: handleReset,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      className: "".concat(selectPrefixCls, "-icon-clear"),
+      ref: clearRef
+    }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "close-solid"
+    })), showArrow && /*#__PURE__*/React.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    })));
   };
-  var handleCitySelect = function handleCitySelect(city) {
-    var _context2, _context3;
-    setInputVal(city.name || '');
-    var otherInfoStr = city.country === '中国' ? "".concat(city.province) : _concatInstanceProperty(_context2 = _concatInstanceProperty(_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.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) ? _mapInstanceProperty(inputValue).call(inputValue, function (item) {
+      return "(".concat(escapeRegExp(item), ")");
+    }).join('|') : "(".concat(escapeRegExp(inputValue), ")"), 'i');
+    var strArr = text === null || text === void 0 ? void 0 : text.split(regex);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, strArr === null || strArr === void 0 ? void 0 : _mapInstanceProperty(strArr).call(strArr, function (item, index) {
+      return (regex === null || regex === void 0 ? void 0 : regex.test(item)) ? /*#__PURE__*/React.createElement("span", {
+        key: index,
+        className: "".concat(selectPrefixCls, "-highlight")
+      }, item) : /*#__PURE__*/React.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.createElement("div", {
+      className: "".concat(selectPrefixCls, "-list")
+    }, _mapInstanceProperty(data).call(data, function (item) {
+      return /*#__PURE__*/React.createElement(Option, {
+        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.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-loading")
+    }, /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, searchValue ? /*#__PURE__*/React.createElement(React.Fragment, null, isDomestic(type) && /*#__PURE__*/React.createElement(Tabs, {
+      noContainer: true,
+      onChange: toggleTabPane,
+      activeKey: tabsValue
+    }, _mapInstanceProperty(tabsData).call(tabsData, function (item) {
+      return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+        key: item.id,
+        tab: item.name
+      }, item);
+    })), tabsValue === 'domestic' ? renderNodeList(domesticList, '暂无数据') : renderNodeList(foreignList, '暂无数据')) : /*#__PURE__*/React.createElement(React.Fragment, null, !!commonList.length && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-common")
+    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+  };
+  var renderCityInfo = 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 _concatInstanceProperty(_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 _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-content")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-search")
+    }, /*#__PURE__*/React.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-content-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !!disabled
+    }), !searchValue && /*#__PURE__*/React.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.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-info")
+    }, renderCityInfo(seletedCity))), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder"),
+      style: hiddenStyle
+    }, placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
   };
-  var inputSelector = /*#__PURE__*/React.createElement("div", {
-    className: containerCls,
-    style: style,
-    onClick: handleContainerClick
-  }, showTitle && /*#__PURE__*/React.createElement("div", {
-    className: titleCls
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: contentCls
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    type: "text",
-    readOnly: disabled,
-    onChange: handleChange,
-    placeholder: placeholder,
-    style: inputStyle,
-    className: inputCls,
-    title: inputVal,
-    value: inputVal,
-    onFocus: handleFocus
-  }), /*#__PURE__*/React.createElement("span", {
-    className: additionalInfoCls
-  }, additionalVal), /*#__PURE__*/React.createElement("i", {
-    className: arrowCls
-  })));
-  var cityPanel = /*#__PURE__*/React.createElement(CityPanel, {
-    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 = classNames(commCls, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  useEffect(function () {
+    if (optionShow && !disabled) {
+      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
+      onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
-    return _filterInstanceProperty(_context4 = allCity.current).call(_context4, function (city) {
+  }, [optionShow]);
+  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 : _startsWithInstanceProperty(_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.createElement("div", {
+      className: cityPickerCls,
+      ref: selectRef,
+      style: style
+    }, showDescription && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-description")
+    }, description), /*#__PURE__*/React.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.createElement(SearchPanel, {
-    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 _extends(_extends(_extends({
+        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 usePopper(inputSelector, panel, popperProps);
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange && onVisibleChange(visible);
+    }
+  };
+  var popperProps = _extends(_extends({}, selectProps), {
+    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !searchValue
+  });
+  return usePopper(renderCityPicker(), renderContent(), popperProps);
 };
-CityPicker.displayName = 'CityPicker';
-CityPicker.PanelItem = CityPanelItem;
-CityPicker.Panel = CityPanel;
-CityPicker.SearchPanel = SearchPanel;
-export default CityPicker;
+var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+Select.displayName = 'CityPicker';
+export default Select;

package/es/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/es/city-picker/interface.js

@@ -0,0 +1,3 @@
+import { tuple } from '../_utils/type';
+export var BorderTypes = tuple('none', 'underline', 'bordered');
+export var Sizes = tuple('large', 'middle', 'small'); // 选择框大小

package/es/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/es/city-picker/option.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import React, { useContext, useRef } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+var InternalOption = function InternalOption(props, ref) {
+  var _classNames;
+  var optionRef = 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 = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
+  var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
+  var isSelected = id !== undefined ? id === value : false;
+  var optionCls = classNames(selectOptionPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: optionRef,
+    className: optionCls,
+    title: name,
+    onClick: handleClick
+  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(selectOptionPrefixCls, "-content")
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(selectOptionPrefixCls, "-info")
+  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
+};
+var Option = /*#__PURE__*/React.forwardRef(InternalOption);
+Option.displayName = 'CityPickerOption';
+export default Option;