@kdcloudjs/kdesign 1.7.24 → 1.7.25

package/es/_utils/usePopper.d.ts

@@ -25,6 +25,7 @@ export interface PopperProps {
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
     getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
+    onTransitionEnd?: (e: React.TransitionEvent) => void;
 }
 declare function usePopper(locatorElement: React.ReactElement, popperElement: React.ReactElement, props: PopperProps): JSX.Element;
 export default usePopper;

package/es/_utils/usePopper.js

@@ -153,7 +153,8 @@ function usePopper(locatorElement, popperElement, props) {
     _props$getPopupContai = props.getPopupContainer,
     getPopupContainer = _props$getPopupContai === void 0 ? function () {
       return document.body;
-    } : _props$getPopupContai;
+    } : _props$getPopupContai,
+    onTransitionEnd = props.onTransitionEnd;
   var arrowWidth = Math.sqrt(2 * Math.pow(arrowSize, 2));
   var componentName = (prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.split('-')[1]) || '';
   devWarning(Placements.indexOf(placement) === -1, componentName, _concatInstanceProperty(_context3 = "cannot found ".concat(componentName, " placement '")).call(_context3, placement, "'"));
@@ -439,7 +440,8 @@ function usePopper(locatorElement, popperElement, props) {
     className: classNames(prefixCls, popperClassName, nextPlacement, _defineProperty({
       arrow: arrow,
       hidden: !visible
-    }, "".concat(nextPlacement, "-active"), active))
+    }, "".concat(nextPlacement, "-active"), active)),
+    onTransitionEnd: typeof onTransitionEnd === 'function' ? onTransitionEnd : undefined
   };
   var popperNode = popperRef.current;
   var locatorNode = getRealDom(locatorRef, locatorElement);

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

@@ -14,20 +14,17 @@ import { Icon, Tabs, Spin } from '../index';
 import usePopper from '../_utils/usePopper';
 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,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    locale = _useContext.locale;
   var selectProps = getCompProps('CityPicker', userDefaultProps, props);
+  var cityPickerLangMsg = locale.getCompLangMsg({
+    componentName: 'CityPicker'
+  });
   var type = selectProps.type,
     size = selectProps.size,
     value = selectProps.value,
@@ -72,6 +69,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useMergedState2 = _slicedToArray(_useMergedState, 2),
     initValue = _useMergedState2[0],
     setInitValue = _useMergedState2[1];
+  var tabsData = [{
+    id: 'domestic',
+    name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsDomestic
+  }, {
+    id: 'foreign',
+    name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsInternation
+  }];
   var innerRef = useRef();
   var selectRef = ref || innerRef;
   var searchRef = useRef(null); // 搜索框ref
@@ -121,11 +125,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       setOptionShow(props.visible);
     }
   }, [props.visible]);
-  useEffect(function () {
-    if (optionShow === false) {
-      handleClear();
-    }
-  }, [optionShow]);
   var handleFocus = useCallback(function (e) {
     e.stopPropagation();
     setFocusd(true);
@@ -222,6 +221,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var renderNodeList = function renderNodeList(data, notContent) {
+    var isCommon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (!data.length) {
       return renderNotContent(notContent);
     }
@@ -232,7 +232,9 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         value: initValue,
         city: item,
-        renderCityInfo: renderCityInfo,
+        renderCityInfo: function renderCityInfo(data, flag) {
+          return _renderCityInfo(data, isCommon, flag);
+        },
         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);
@@ -260,21 +262,22 @@ var InternalSelect = function InternalSelect(props, ref) {
         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", {
+    })), tabsValue === 'domestic' ? renderNodeList(domesticList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText) : renderNodeList(foreignList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText)) : /*#__PURE__*/React.createElement(React.Fragment, null, !!commonList.length && /*#__PURE__*/React.createElement("div", {
       className: "".concat(selectPrefixCls, "-dropdown-common")
-    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+    }, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.common), renderNodeList(commonList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.commonEmptyText, true)));
   };
-  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] : ', ';
+  var _renderCityInfo = useCallback(function (data) {
+    var isCommon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var flag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
       var _context3;
-      var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
       return _concatInstanceProperty(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
     } 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);
+      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) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -301,7 +304,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       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", {
+    }, _renderCityInfo(seletedCity))), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
     }, placeholder), /*#__PURE__*/React.createElement("span", {
@@ -373,7 +376,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,
-    clickToClose: !searchValue
+    clickToClose: !searchValue,
+    onTransitionEnd: function onTransitionEnd() {
+      if (optionShow === false) {
+        handleClear();
+      }
+    }
   });
   return usePopper(renderCityPicker(), renderContent(), popperProps);
 };

package/es/city-picker/option.js

@@ -31,9 +31,9 @@ var InternalOption = function InternalOption(props, ref) {
     className: optionCls,
     title: name,
     onClick: handleClick
-  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")
   }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
 };

package/es/city-picker/style/index.css

@@ -264,6 +264,12 @@
   padding: 0 12px;
   font-size: 12px;
 }
+.kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line .kd-tab-pane-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+}
 .kd-city-picker-dropdown .kd-tabs-noContainer {
   height: unset;
 }
@@ -311,6 +317,9 @@
           box-sizing: content-box;
 }
 .kd-city-picker-list-item {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   position: relative;
   display: block;
   font-weight: normal;
@@ -319,16 +328,8 @@
   padding: 5px 12px;
   color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
   line-height: var(--kd-c-city-picker-dropdown-line-height, 22px);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   cursor: pointer;
 }
-.kd-city-picker-list-item-content {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
 .kd-city-picker-list-item-info {
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
   white-space: nowrap;
@@ -337,7 +338,8 @@
   background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
 }
 .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
-  background-color: var(--kd-c-city-picker-color-background-selected, #f2f6ff);
+  background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
+  color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-list-item-disabled {
   color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
@@ -345,7 +347,7 @@
   background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
 }
 .kd-city-picker-highlight {
-  color: #5582f3;
+  color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-size-small {
   min-height: var(--kd-c-city-picker-sizing-height-small, 24px);

package/es/city-picker/style/index.less

@@ -159,6 +159,11 @@
         &-type-line {
           padding: 0 12px;
           font-size: 12px;
+
+          .@{kd-prefix}-tab-pane-text {
+            .over();
+            width: 100%;
+          }
         }
       }
     }
@@ -204,14 +209,10 @@
 
     // 下拉列表选项
     &-item {
+      .over();
       .item();
-      display: flex;
       cursor: pointer;
 
-      &-content {
-        .over();
-      }
-
       &-info {
         color: @city-picker-placeholder-color;
         white-space: nowrap;
@@ -223,6 +224,7 @@
 
       &-selected:not(&-disabled) {
         background-color: @city-picker-item-selected-bg;
+        color: @city-picker-list-item-color-selected;
       }
 
       &-disabled {
@@ -234,7 +236,7 @@
   }
 
   &-highlight {
-    color: #5582f3;
+    color: @city-picker-highlight-color;
   }
 
   // 选择器框大小

package/es/city-picker/style/token.less

@@ -6,7 +6,7 @@
 @city-picker-dropdown-bg: var(~'@{city-picker-custom-prefix}-dropdown-color-background', @color-background);
 @city-picker-disabled-option-bg: var(~'@{city-picker-custom-prefix}-item-color-background-disabled', #fff);
 @city-picker-item-active-bg: var(~'@{city-picker-custom-prefix}-color-background', #f5f5f5);
-@city-picker-item-selected-bg: var(~'@{city-picker-custom-prefix}-color-background-selected', #f2f6ff);
+@city-picker-item-selected-bg: var(~'@{city-picker-custom-prefix}-color-background-selected', @color-theme-3);
 @city-picker-g-color-border: var(~'@{city-picker-custom-prefix}-color-border', @color-input);
 @city-picker-g-color-border-foucs: var(~'@{city-picker-custom-prefix}-color-border-foucs', @color-theme);
 @city-picker-g-color-border-hover: var(~'@{city-picker-custom-prefix}-color-border-hover', @color-theme);
@@ -16,12 +16,11 @@
 @city-picker-g-item-text-color-disabled: var(~'@{city-picker-custom-prefix}-item-color-text-disabled', @color-disabled);
 @city-picker-color-background-disabled: var(~'@{city-picker-custom-prefix}-color-background-disabled', #fff);
 @city-picker-color-text-disabled: var(~'@{city-picker-custom-prefix}-color-text-disabled', @color-disabled);
-@city-picker-arrow-icon-color-text-disabled: var(
-  ~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled',
-  #b2b2b2
-);
+@city-picker-arrow-icon-color-text-disabled: var(~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 @city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #d9d9d9);
 @city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', #999);
+@city-picker-list-item-color-selected: var(~'@{city-picker-custom-prefix}-list-item-color-text-selected', @color-theme);
+@city-picker-highlight-color: var(~'@{city-picker-custom-prefix}-highlight-color-text', @color-theme);
 
 // font
 @city-picker-list-font-size: var(~'@{city-picker-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/es/input-number/inputNumber.js

@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
+import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import Input from '../input';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -20,7 +20,9 @@ import { formatEditNumber, formatNumber } from '../_utils/formatUtil';
 import devWarning from '../_utils/devwarning';
 import Big from 'big.js';
 import classNames from 'classnames';
+import useSelectionRange from './useSelectionRange';
 var InternalInputNumber = function InternalInputNumber(props, ref) {
+  var _a;
   var _useContext = useContext(ConfigContext),
     userDefaultProps = _useContext.compDefaultProps,
     getPrefixCls = _useContext.getPrefixCls,
@@ -110,6 +112,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     if (legalNumber === false) {
       return false;
     }
+    updateSelectionRangePosition(event);
     value === undefined && setInputValue(legalNumber);
     onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
   };
@@ -225,10 +228,12 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     // 还原最小值
     if (typeof min === 'number' && bigValue.lt(min)) {
       _inputValue = min.toString();
+      onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
     }
     // 还原最大值
-    if (typeof min === 'number' && bigValue.gt(max)) {
+    if (typeof max === 'number' && bigValue.gt(max)) {
       _inputValue = max.toString();
+      onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
     }
     // 超过精度位数直接截断
     _inputValue = handleNumericalAccuracy(_inputValue);
@@ -300,9 +305,16 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       }
     };
   });
+  var displayedInputValue = useMemo(function () {
+    return formatter ? formatter(inputValue) : inputValue;
+  }, [inputValue, formatter]);
+  var updateSelectionRangePosition = useSelectionRange({
+    inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
+    inputValue: displayedInputValue
+  });
   return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
     ref: inputNumberRef,
-    value: inputValue ? (formatter === null || formatter === void 0 ? void 0 : formatter(inputValue)) || inputValue : inputValue,
+    value: displayedInputValue,
     prefix: prefix,
     suffix: suffix,
     onChange: handleChange,

package/es/input-number/useSelectionRange.d.ts

@@ -0,0 +1,4 @@
+export default function useSelectionRange({ inputElement, inputValue, }: {
+    inputElement: HTMLInputElement;
+    inputValue: string;
+}): (event: any) => void;

package/es/input-number/useSelectionRange.js

@@ -0,0 +1,22 @@
+import { useRef, useLayoutEffect } from 'react';
+import isNumber from 'lodash/isNumber';
+export default function useSelectionRange(_ref) {
+  var inputElement = _ref.inputElement,
+    inputValue = _ref.inputValue;
+  var refSelectionPosition = useRef();
+  useLayoutEffect(function () {
+    var position = refSelectionPosition.current;
+    if (inputElement && inputValue && isNumber(position)) {
+      var start = Math.max(0, inputValue.length - position);
+      inputElement.setSelectionRange(start, start);
+    }
+  }, [inputValue]);
+  return function (event) {
+    var _event$target = event.target,
+      end = _event$target.selectionEnd,
+      value = _event$target.value;
+    if (isNumber(end)) {
+      refSelectionPosition.current = value.length - end;
+    }
+  };
+}

package/es/locale/locale.d.ts

@@ -61,11 +61,11 @@ declare class LocaleCache {
         'QuickSearch.emptyTip': string;
         'QuickSearch.or': string;
         'CityPicker.domestic': string;
-        'CityPicker.internation': string;
         'CityPicker.common': string;
-        'CityPicker.noData': string; /**
-         * 获取所有语言包数据
-         */
+        'CityPicker.emptyText': string;
+        'CityPicker.commonEmptyText': string;
+        'CityPicker.tabsDomestic': string;
+        'CityPicker.tabsInternation': string;
         'ColorPicker.followFunctionalColor': string;
         'Search.placeholder': string;
         'Search.desc': string[];

package/es/locale/zh-CN.d.ts

@@ -35,9 +35,11 @@ declare const locale: {
     'QuickSearch.emptyTip': string;
     'QuickSearch.or': string;
     'CityPicker.domestic': string;
-    'CityPicker.internation': string;
     'CityPicker.common': string;
-    'CityPicker.noData': string;
+    'CityPicker.emptyText': string;
+    'CityPicker.commonEmptyText': string;
+    'CityPicker.tabsDomestic': string;
+    'CityPicker.tabsInternation': string;
     'ColorPicker.followFunctionalColor': string;
     'Search.placeholder': string;
     'Search.desc': string[];

package/es/locale/zh-CN.js

@@ -39,9 +39,11 @@ var locale = _extends(_extends({
   'QuickSearch.emptyTip': '暂无数据',
   'QuickSearch.or': '或',
   'CityPicker.domestic': '国内',
-  'CityPicker.internation': '国际',
   'CityPicker.common': '常用',
-  'CityPicker.noData': '暂无数据',
+  'CityPicker.emptyText': '暂无数据',
+  'CityPicker.commonEmptyText': '无常用城市',
+  'CityPicker.tabsDomestic': '国内',
+  'CityPicker.tabsInternation': '国际/中国港澳台',
   'ColorPicker.followFunctionalColor': '跟随功能色',
   'Search.placeholder': '请输入需要搜索的内容',
   'Search.desc': ['空格代表"或"，回车代表"且"'],

package/es/radio/style/index.css

@@ -169,6 +169,7 @@
 .kd-radio-input {
   position: absolute;
   opacity: 0;
+  left: 0;
 }
 .kd-radio > span {
   padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);

package/es/radio/style/index.less

@@ -60,6 +60,7 @@
   &-input {
     position: absolute;
     opacity: 0;
+    left: 0;
   }
 
   &>span {

package/es/select/select.js

@@ -766,7 +766,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     // open
     if (which === KeyCode.ENTER || which === KeyCode.UP || which === KeyCode.DOWN) {
       e.preventDefault();
-      setOptionShow(true);
+      handleVisibleChange(true);
     }
     // backspace
     var _multipleRef$current5 = multipleRef.current,
@@ -810,10 +810,10 @@ var InternalSelect = function InternalSelect(props, ref) {
           }));
         }
         if (!isMultiple) {
-          setOptionShow(false);
+          handleVisibleChange(false);
         }
       } else if (which === KeyCode.ESC) {
-        setOptionShow(false);
+        handleVisibleChange(false);
       }
       if (offset !== 0) {
         var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);

package/lib/_utils/usePopper.d.ts

@@ -25,6 +25,7 @@ export interface PopperProps {
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
     getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
+    onTransitionEnd?: (e: React.TransitionEvent) => void;
 }
 declare function usePopper(locatorElement: React.ReactElement, popperElement: React.ReactElement, props: PopperProps): JSX.Element;
 export default usePopper;

package/lib/_utils/usePopper.js

@@ -167,7 +167,8 @@ function usePopper(locatorElement, popperElement, props) {
     _props$getPopupContai = props.getPopupContainer,
     getPopupContainer = _props$getPopupContai === void 0 ? function () {
       return document.body;
-    } : _props$getPopupContai;
+    } : _props$getPopupContai,
+    onTransitionEnd = props.onTransitionEnd;
   var arrowWidth = Math.sqrt(2 * Math.pow(arrowSize, 2));
   var componentName = (prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.split('-')[1]) || '';
   (0, _devwarning.default)(Placements.indexOf(placement) === -1, componentName, (0, _concat.default)(_context3 = "cannot found ".concat(componentName, " placement '")).call(_context3, placement, "'"));
@@ -453,7 +454,8 @@ function usePopper(locatorElement, popperElement, props) {
     className: (0, _classnames.default)(prefixCls, popperClassName, nextPlacement, (0, _defineProperty2.default)({
       arrow: arrow,
       hidden: !visible
-    }, "".concat(nextPlacement, "-active"), active))
+    }, "".concat(nextPlacement, "-active"), active)),
+    onTransitionEnd: typeof onTransitionEnd === 'function' ? onTransitionEnd : undefined
   };
   var popperNode = popperRef.current;
   var locatorNode = getRealDom(locatorRef, locatorElement);

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

@@ -26,20 +26,17 @@ 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 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,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    locale = _useContext.locale;
   var selectProps = (0, _utils.getCompProps)('CityPicker', userDefaultProps, props);
+  var cityPickerLangMsg = locale.getCompLangMsg({
+    componentName: 'CityPicker'
+  });
   var type = selectProps.type,
     size = selectProps.size,
     value = selectProps.value,
@@ -84,6 +81,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
     initValue = _useMergedState2[0],
     setInitValue = _useMergedState2[1];
+  var tabsData = [{
+    id: 'domestic',
+    name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsDomestic
+  }, {
+    id: 'foreign',
+    name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsInternation
+  }];
   var innerRef = (0, _react.useRef)();
   var selectRef = ref || innerRef;
   var searchRef = (0, _react.useRef)(null); // 搜索框ref
@@ -133,11 +137,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       setOptionShow(props.visible);
     }
   }, [props.visible]);
-  (0, _react.useEffect)(function () {
-    if (optionShow === false) {
-      handleClear();
-    }
-  }, [optionShow]);
   var handleFocus = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     setFocusd(true);
@@ -234,6 +233,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var renderNodeList = function renderNodeList(data, notContent) {
+    var isCommon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (!data.length) {
       return renderNotContent(notContent);
     }
@@ -244,7 +244,9 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         value: initValue,
         city: item,
-        renderCityInfo: renderCityInfo,
+        renderCityInfo: function renderCityInfo(data, flag) {
+          return _renderCityInfo(data, isCommon, flag);
+        },
         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);
@@ -272,21 +274,22 @@ var InternalSelect = function InternalSelect(props, ref) {
         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", {
+    })), tabsValue === 'domestic' ? renderNodeList(domesticList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText) : renderNodeList(foreignList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!commonList.length && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(selectPrefixCls, "-dropdown-common")
-    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+    }, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.common), renderNodeList(commonList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.commonEmptyText, true)));
   };
-  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] : ', ';
+  var _renderCityInfo = (0, _react.useCallback)(function (data) {
+    var isCommon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var flag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
       var _context3;
-      var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
       return (0, _concat.default)(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
     } 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);
+      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) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -313,7 +316,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       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", {
+    }, _renderCityInfo(seletedCity))), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
     }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
@@ -385,7 +388,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,
-    clickToClose: !searchValue
+    clickToClose: !searchValue,
+    onTransitionEnd: function onTransitionEnd() {
+      if (optionShow === false) {
+        handleClear();
+      }
+    }
   });
   return (0, _usePopper.default)(renderCityPicker(), renderContent(), popperProps);
 };

package/lib/city-picker/option.js

@@ -43,9 +43,9 @@ var InternalOption = function InternalOption(props, ref) {
     className: optionCls,
     title: name,
     onClick: handleClick
-  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")
   }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
 };