@kdcloudjs/kdesign 1.7.24 → 1.7.26

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/cascader/cascader.js

@@ -75,15 +75,15 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     customAllowClear = allProps.allowClear,
     popupPlacement = allProps.popupPlacement,
     maxTagCount = allProps.maxTagCount,
+    autoFocus = allProps.autoFocus,
     otherProps = __rest(allProps
     // className前缀
-    , ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls", "allowClear", "popupPlacement", "maxTagCount"]);
+    , ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls", "allowClear", "popupPlacement", "maxTagCount", "autoFocus"]);
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
-  var pickerRef = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)();
+  var mergeRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)();
   var wrapperRef = (0, _react.useRef)();
-  var mergeRef = ref || pickerRef;
   var _useState = (0, _react.useState)(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     visible = _useState2[0],
@@ -170,21 +170,53 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setCurrentOptions(newMultipleOptions);
     }
   }, [options, value, fieldNames, isMultiple]);
-  _react.default.useEffect(function () {
+  var handleFocus = function handleFocus() {
+    var _a, _b;
+    if (!disabled) {
+      if (isMultiple) {
+        (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      } else {
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    }
+  };
+  var handleBlur = function handleBlur() {
+    var _a, _b;
+    if (!disabled) {
+      if (isMultiple) {
+        (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      } else {
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      focus: handleFocus,
+      blur: handleBlur,
+      dom: mergeRef.current
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (autoFocus) {
+      handleFocus();
+    }
+  }, [autoFocus, inputRef]);
+  var handleMouseUp = function handleMouseUp(e) {
     var _a;
-    if (allProps.autoFocus) {
-      (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    var cln = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className;
+    var isCloseBtn = cln.indexOf('kd-tag-close-icon') > -1 || cln.indexOf('kdicon') > -1;
+    if (isCloseBtn) {
+      e.stopPropagation();
     }
-  }, [allProps.autoFocus, mergeRef]);
+  };
   _react.default.useEffect(function () {
     var _a;
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', function (e) {
+    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleMouseUp);
+    return function () {
       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();
-      }
-    });
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleMouseUp);
+    };
   }, []);
   var labels = (0, _react.useMemo)(function () {
     return !isMultiple ? (0, _map.default)(currentOptions).call(currentOptions, function (_ref) {
@@ -208,8 +240,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       });
     });
   }, [currentOptions, isMultiple]);
-  var allowClear = customAllowClear && value.length > 0;
+  var allowClear = customAllowClear && value.length > 0 && !disabled;
   var handleClear = function handleClear() {
+    handleBlur();
+    setVisible(false);
     onChange([]);
   };
   var renderSuffix = function renderSuffix() {
@@ -249,9 +283,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   var renderMultiple = function renderMultiple() {
     var _classNames3, _classNames4;
-    var multipleCls = (0, _classnames.default)((_classNames3 = {
-      disabled: disabled
-    }, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-multiple"), true), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
+    var multipleCls = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-expand"), visible), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-multiple"), true), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
     var itemCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-tag-describe"), true), _classNames4));
     var TagStyle = {
       margin: '2px 8px 2px 0',
@@ -259,9 +291,11 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     };
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       className: multipleCls,
-      ref: triggerRef,
+      ref: mergeRef,
       style: style
-    }, otherProps), /*#__PURE__*/_react.default.createElement("div", {
+    }, otherProps, {
+      tabIndex: -1
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-multiple-wrapper"),
       ref: wrapperRef
     }, Array.isArray(currentOptions) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(currentOptions).call(currentOptions, function (option, index) {
@@ -270,6 +304,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         className: (0, _classnames.default)("".concat(prefixCls, "-selection-tag"))
       }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement(_tag.default, {
         type: "edit",
+        disabled: disabled,
         style: TagStyle,
         closable: true,
         onClose: function onClose(e) {
@@ -287,8 +322,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, renderSuffix())));
   };
   var renderSingle = function renderSingle() {
+    var _classNames5;
     var inputProps = {
       value: value,
+      ref: inputRef,
       placeholder: placeholder,
       readOnly: true,
       borderType: bordered ? 'bordered' : 'underline',
@@ -306,18 +343,13 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var singleProps = {
       style: style,
       tabIndex: 0,
-      className: (0, _classnames.default)("".concat(prefixCls, "-picker"), className, (0, _defineProperty2.default)({
-        expand: visible,
-        allowClear: allowClear,
-        disabled: disabled
-      }, "".concat(prefixCls, "-bordered"), bordered))
+      className: (0, _classnames.default)("".concat(prefixCls, "-picker"), className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-expand"), visible), (0, _defineProperty2.default)(_classNames5, "allowClear", allowClear), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-bordered"), bordered), _classNames5))
     };
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, singleProps, {
       ref: mergeRef
-    }, otherProps), _react.default.Children.count(children) === 1 && children.type ? /*#__PURE__*/_react.default.cloneElement(children, {
-      ref: triggerRef
-    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      ref: triggerRef
+    }, otherProps), _react.default.Children.count(children) === 1 && children.type ? /*#__PURE__*/_react.default.cloneElement(children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-single-wrapper"),
+      ref: wrapperRef
     }, /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, inputProps)), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-picker-label")
     }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : ''), allowClear && /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -435,13 +467,13 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     gap: 4,
     visible: visible,
     onVisibleChange: onVisibleChange,
-    trigger: 'click',
+    trigger: expandTrigger,
     getPopupContainer: getPopupContainer,
     prefixCls: "".concat(prefixCls, "-menus"),
     placement: allProps.popperPlacement || popupPlacement,
     popperClassName: allProps.popperClassName || allProps.popupClassName,
     getTriggerElement: function getTriggerElement() {
-      return triggerRef.current;
+      return mergeRef.current;
     }
   });
   return (0, _usePopper.default)(cascaderLocator, cascaderPopper, popperProps);

package/lib/cascader/style/index.css

@@ -112,17 +112,6 @@
   cursor: pointer;
   background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
-.kd-cascader-picker:focus > .kd-cascader-picker-input {
-  border-color: var(--kd-c-cascader-color-active, #999);
-}
-.kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*='kdicon'] {
-  color: var(--kd-c-cascader-color-active, #999);
-}
-.kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*='kdicon'] {
-  color: var(--kd-c-cascader-color-active, #999);
-}
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
   cursor: not-allowed;
   border-color: var(--kd-g-color-border-strong, #d9d9d9);
@@ -148,7 +137,7 @@
   text-overflow: ellipsis;
 }
 .kd-cascader-picker-input {
-  background-color: transparent !important;
+  background-color: transparent;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
@@ -156,11 +145,7 @@
   color: transparent !important;
   cursor: pointer;
 }
-.kd-cascader-picker-input.expand {
-  border-color: var(--kd-c-cascader-color-active, #999);
-}
 .kd-cascader-picker-input.expand i[class*='kdicon'] {
-  color: var(--kd-c-cascader-color-active, #999);
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
@@ -190,7 +175,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -199,7 +184,7 @@
           transform: scale(0.9) translateY(-50%);
 }
 .kd-cascader-picker-close:hover {
-  color: var(--kd-c-cascader-color-active, #999);
+  color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
 }
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;
@@ -312,6 +297,10 @@
   border-bottom: 1px solid #d9d9d9;
   background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
+.kd-cascader-multiple:not(.kd-cascader-disabled):focus {
+  border-color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
+  outline: none;
+}
 .kd-cascader-multiple-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -325,7 +314,8 @@
 }
 .kd-cascader-placeholder {
   position: absolute;
-  color: #999;
+  font-size: 14px;
+  color: var(--kd-c-cascader-placeholder-color, var(--kd-g-color-text-placeholder, #ccc));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -380,9 +370,6 @@
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-cascader-icon-arrow-focus {
-  color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
-}
 .kd-cascader-icon-clear {
   opacity: 0;
   z-index: 1;
@@ -390,7 +377,7 @@
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
-  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
 }
 .kd-cascader-icon-clear:hover {
   color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
@@ -412,7 +399,6 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  vertical-align: middle;
   padding: 0 7px;
   overflow: hidden;
   white-space: nowrap;
@@ -420,3 +406,33 @@
   border: 1px solid #ccc;
   color: #212121;
 }
+.kd-cascader-disabled {
+  cursor: not-allowed;
+}
+.kd-cascader-disabled .kd-cascader-picker-label {
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-cascader-disabled .kd-cascader-picker-input {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled .kd-cascader-picker-input > input {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled.kd-cascader-multiple {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled .kd-cascader-suffix {
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-cascader-disabled .kd-cascader-tag-describe-content {
+  color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
+  border-color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
+}
+.kd-cascader-picker:not(.kd-cascader-disabled):hover .kd-input-wrapper,
+.kd-cascader-expand .kd-input-wrapper {
+  border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}
+.kd-cascader-multiple:not(.kd-cascader-disabled):hover,
+.kd-cascader-expand {
+  border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}

package/lib/cascader/style/index.less

@@ -12,22 +12,6 @@
   cursor: pointer;
   background: @cascader-bg-color;
 
-  &:focus > &-input {
-    border-color: @cascader-active-color;
-
-    .@{kd-prefix}-input-suffix,
-    i[class*='kdicon'] {
-      color: @cascader-active-color;
-    }
-  }
-
-  &:hover > &-input {
-    .@{kd-prefix}-input-suffix,
-    i[class*='kdicon'] {
-      color: @cascader-active-color;
-    }
-  }
-
   &.disabled {
     .@{cascader-picker-prefix-cls}-input {
       cursor: not-allowed;
@@ -54,7 +38,7 @@
   }
 
   &-input {
-    background-color: transparent !important;
+    background-color: transparent;
     transition: all 0.2s;
 
     > input {
@@ -63,10 +47,7 @@
     }
 
     &.expand {
-      border-color: @cascader-active-color;
-
       i[class*='kdicon'] {
-        color: @cascader-active-color;
         transform: rotate(180deg);
       }
     }
@@ -105,7 +86,7 @@
     transform: scale(0.9) translateY(-50%);
 
     &:hover {
-      color: @cascader-active-color;
+      color: @cascader-clear-color-hover;
     }
   }
 }
@@ -217,6 +198,11 @@
     position: relative;
     border-bottom: 1px solid #d9d9d9;
     background: @cascader-bg-color;
+
+    &:not(.@{kd-prefix}-cascader-disabled):focus {
+      border-color: @cascader-selected-color;
+      outline: none;
+    }
   }
 
   &-multiple-wrapper {
@@ -228,7 +214,8 @@
 
   &-placeholder {
     position: absolute;
-    color: @select-placeholder-color;
+    font-size: @middle-font-size;
+    color: @cascader-placeholder-color;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -267,10 +254,6 @@
         transform: rotate(0deg);
         transition: transform calc(@transition-duration - 0.1s) @ease;
       }
-
-      &-focus {
-        color: @cascader-g-color-border-foucs;
-      }
     }
 
     &-clear {
@@ -285,6 +268,7 @@
       }
     }
   }
+
   &-tag {
     &-describe {
       font-size: 12px;
@@ -296,7 +280,6 @@
       &-content {
         display: inline-flex;
         align-items: center;
-        vertical-align: middle;
         padding: 0 7px;
         overflow: hidden;
         white-space: nowrap;
@@ -306,4 +289,43 @@
       }
     }
   }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    .@{kd-prefix}-cascader-picker-label {
+      color: @cascader-disabled-color;
+    }
+
+    .@{kd-prefix}-cascader-picker-input {
+      background-color: @cascader-disabled-color-background;
+
+      > input {
+        background-color: @cascader-disabled-color-background;
+      }
+    }
+
+    &.@{kd-prefix}-cascader-multiple {
+      background-color: @cascader-disabled-color-background;
+    }
+
+    .@{kd-prefix}-cascader-suffix {
+      color: @cascader-disabled-color;
+    }
+
+    .@{kd-prefix}-cascader-tag-describe-content {
+      color: @cascader-tag-disabled-color;
+      border-color: @cascader-tag-disabled-color;
+    }
+  }
+
+  &-picker:not(&-disabled):hover, &-expand {
+    .kd-input-wrapper {
+      border-color: @cascader-g-color-border-focus;
+    }
+  }
+
+  &-multiple:not(&-disabled):hover, &-expand {
+    border-color: @cascader-g-color-border-focus;
+  }
 }

package/lib/cascader/style/token.less

@@ -12,17 +12,18 @@
 @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
 
 // colors
-@cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
 @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
 @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
 @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-disabled-color-background: var(~'@{cascader-prefix}-color-background-disabled', @color-background-contain-disabled);
 @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
-@cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
-@cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
 @cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
+@cascader-g-color-border-focus: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
+@cascader-tag-disabled-color: var(~'@{cascader-prefix}-tag-disabled-color', #d9d9d9);
+@cascader-placeholder-color: var(~'@{cascader-prefix}-placeholder-color', @color-text-placeholder);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

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
@@ -124,20 +128,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     var city = (0, _find.default)(cityList).call(cityList, function (city) {
       return city.id === value;
     });
-    if (city) {
-      setSeletedCity(city);
-    }
+    setSeletedCity(city);
   }, [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();
-    }
-  }, [optionShow]);
   var handleFocus = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     setFocusd(true);
@@ -234,6 +231,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 +242,10 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         value: initValue,
         city: item,
-        renderCityInfo: renderCityInfo,
+        className: searchValue ? "".concat(selectPrefixCls, "-list-item-match") : undefined,
+        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 +273,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) || (data === null || data === void 0 ? void 0 : data.country)) ? 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 +315,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 +387,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);
 };