@kdcloudjs/kdesign 1.7.26 → 1.7.27

package/dist/kdesign.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.7.25
+ *   @kdcloudjs/kdesign v1.7.26
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -7516,6 +7516,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./option */ "./components/city-picker/option.tsx");
 /* harmony import */ var lodash_escapeRegExp__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! lodash/escapeRegExp */ "./node_modules/lodash/escapeRegExp.js");
 /* harmony import */ var lodash_escapeRegExp__WEBPACK_IMPORTED_MODULE_28___default = /*#__PURE__*/__webpack_require__.n(lodash_escapeRegExp__WEBPACK_IMPORTED_MODULE_28__);
+/* harmony import */ var _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../_utils/KeyCode */ "./components/_utils/KeyCode.ts");
 
 
 
@@ -7545,6 +7546,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 
+
 
 
 var InternalSelect = function InternalSelect(props, ref) {
@@ -7614,6 +7616,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var searchRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null); // 搜索框ref
   var selectionRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null);
   var clearRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null);
+  var optionsListRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null);
   var _useState = Object(react__WEBPACK_IMPORTED_MODULE_20__["useState"])(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState, 2),
     optionShow = _useState2[0],
@@ -7762,8 +7765,9 @@ var InternalSelect = function InternalSelect(props, ref) {
       return renderNotContent(notContent);
     }
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement("div", {
-      className: "".concat(selectPrefixCls, "-list")
-    }, data.map(function (item) {
+      className: "".concat(selectPrefixCls, "-list"),
+      ref: optionsListRef
+    }, data.map(function (item, index) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement(_option__WEBPACK_IMPORTED_MODULE_27__["default"], {
         key: item.id,
         value: initValue,
@@ -7773,7 +7777,12 @@ var InternalSelect = function InternalSelect(props, ref) {
           return _renderCityInfo(data, isCommon, flag);
         },
         onChangeSelect: handleOption,
-        itemRender: itemRender
+        itemRender: itemRender,
+        activeIndex: activeIndex,
+        index: index,
+        onChangeActiveIndex: function onChangeActiveIndex(i) {
+          setActiveIndex(i);
+        }
       }, 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);
     }));
   };
@@ -7810,7 +7819,11 @@ var InternalSelect = function InternalSelect(props, ref) {
     var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
-      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      if (isCommon) {
+        var _curVal = data !== null && data !== void 0 && data.province ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+        return "".concat(flag && _curVal ? symbol : '').concat(_curVal);
+      }
+      var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
       return "".concat(flag && curVal ? symbol : '').concat(curVal);
     } else {
       return "".concat(flag && (data !== null && data !== void 0 && data.province || data !== null && data !== void 0 && data.country) ? symbol : '').concat(data === null || data === void 0 ? void 0 : data.province).concat(data !== null && data !== void 0 && data.country && data !== null && data !== void 0 && data.province ? symbol : '').concat(data === null || data === void 0 ? void 0 : data.country);
@@ -7865,6 +7878,83 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_clearRef$current2 = clearRef.current) === null || _clearRef$current2 === void 0 ? void 0 : _clearRef$current2.removeEventListener('mouseup', fn);
     };
   }, [initValue]);
+
+  // keyboard
+  var curkeyboardList = Object(react__WEBPACK_IMPORTED_MODULE_20__["useMemo"])(function () {
+    if (!searchValue) {
+      return commonList;
+    } else if (tabsValue === 'domestic') {
+      return domesticList;
+    } else {
+      return foreignList;
+    }
+  }, [commonList, domesticList, foreignList, searchValue, tabsValue]);
+  var getActiveIndex = function getActiveIndex(index) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var len = curkeyboardList.length;
+    for (var i = 0; i < len; i += 1) {
+      var current = (index + i * offset + len) % len;
+      return current;
+    }
+    return -1;
+  };
+  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_20__["useState"])(getActiveIndex(0)),
+    _useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState11, 2),
+    activeIndex = _useState12[0],
+    setActiveIndex = _useState12[1];
+  var initActiveIndex = function initActiveIndex() {
+    setActiveIndex(getActiveIndex(0));
+  };
+  Object(react__WEBPACK_IMPORTED_MODULE_20__["useEffect"])(function () {
+    initActiveIndex();
+  }, [searchValue, tabsValue]);
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    var which = e.which;
+    // open
+    if (which === _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].ENTER || which === _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].UP || which === _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].DOWN) {
+      e.preventDefault();
+      setOptionShow(true);
+    }
+    // up、down、enter、esc
+    if (optionShow) {
+      var offset = 0;
+      switch (which) {
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].UP:
+          offset = -1;
+          break;
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].DOWN:
+          offset = 1;
+          break;
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].ENTER:
+          {
+            var item = curkeyboardList[activeIndex];
+            if (!item) return;
+            handleOption(item);
+            setOptionShow(false);
+            break;
+          }
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].ESC:
+          setOptionShow(false);
+          break;
+        default:
+          break;
+      }
+      if (offset !== 0) {
+        var _optionsListRef$curre, _optionsListRef$curre2;
+        var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
+        var curDom = (_optionsListRef$curre = optionsListRef.current) === null || _optionsListRef$curre === void 0 ? void 0 : (_optionsListRef$curre2 = _optionsListRef$curre.children) === null || _optionsListRef$curre2 === void 0 ? void 0 : _optionsListRef$curre2[nextActiveIndex];
+        if (curDom) {
+          var _optionsListRef$curre3;
+          (_optionsListRef$curre3 = optionsListRef.current) === null || _optionsListRef$curre3 === void 0 ? void 0 : _optionsListRef$curre3.children[nextActiveIndex].scrollIntoView({
+            behavior: 'auto',
+            block: 'nearest'
+          });
+        }
+        setActiveIndex(nextActiveIndex);
+        e.preventDefault();
+      }
+    }
+  };
   var renderCityPicker = function renderCityPicker() {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement("div", {
       className: cityPickerCls,
@@ -7882,7 +7972,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: function onBlur() {
         var _searchRef$current2;
         return (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.blur();
-      }
+      },
+      onKeyDown: onInternalKeyDown
     }, renderSingle()));
   };
   var catchStyle = function catchStyle() {
@@ -7900,6 +7991,9 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
+    if (!visible) {
+      initActiveIndex();
+    }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);
       onVisibleChange && onVisibleChange(visible);
@@ -7973,11 +8067,14 @@ var InternalOption = function InternalOption(props, ref) {
     value = props.value,
     disabled = props.disabled,
     className = props.className,
+    activeIndex = props.activeIndex,
+    index = props.index,
     onChangeSelect = props.onChangeSelect,
     _props$city = props.city,
     city = _props$city === void 0 ? {} : _props$city,
     renderCityInfo = props.renderCityInfo,
-    itemRender = props.itemRender;
+    itemRender = props.itemRender,
+    onChangeActiveIndex = props.onChangeActiveIndex;
   var _ref = city,
     id = _ref.id,
     name = _ref.name;
@@ -7986,17 +8083,25 @@ var InternalOption = function InternalOption(props, ref) {
     prefixCls = _useContext.prefixCls;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
-  var optionCls = classnames__WEBPACK_IMPORTED_MODULE_3___default()(selectOptionPrefixCls, className, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
+  var optionCls = classnames__WEBPACK_IMPORTED_MODULE_3___default()(selectOptionPrefixCls, className, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
   var handleClick = function handleClick(e) {
     e.preventDefault();
     if (disabled || id === undefined) return;
     onChangeSelect === null || onChangeSelect === void 0 ? void 0 : onChangeSelect(city);
   };
+  var handleOnMouseEnter = function handleOnMouseEnter() {
+    onChangeActiveIndex && onChangeActiveIndex(index);
+  };
+  var handleOnMouseLeave = function handleOnMouseLeave() {
+    onChangeActiveIndex && onChangeActiveIndex(-1);
+  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", {
     ref: optionRef,
     className: optionCls,
     title: name,
-    onClick: handleClick
+    onClick: handleClick,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave
   }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("span", {