@kdcloudjs/kdesign 1.7.13 → 1.7.14

package/lib/select/select.js

@@ -13,6 +13,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -28,6 +29,7 @@ var _index = require("../index");
 var _option = _interopRequireDefault(require("./option"));
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
 var _virtualList = _interopRequireDefault(require("../virtual-list"));
+var _KeyCode = _interopRequireDefault(require("../_utils/KeyCode"));
 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 INPUT_MIN_WIDTH = 4; // 输入框最小宽度
@@ -212,13 +214,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     onBlur && onBlur(e);
   }, [onBlur]);
   // 点击组件
-  var handleClick = function handleClick() {
-    if (disabled) return;
-    if (optionShow) {
-      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
-      onDropdownVisibleChange && onDropdownVisibleChange(true);
-    }
-  };
+  // const handleClick = () => {
+  //   if (disabled) return
+  //   if (optionShow) {
+  //     const { onDropdownVisibleChange } = selectProps
+  //     onDropdownVisibleChange && onDropdownVisibleChange(true)
+  //   }
+  // }
   (0, _react.useEffect)(function () {
     selectionRef.current.addEventListener('mouseup', function (e) {
       var _a;
@@ -472,8 +474,12 @@ var InternalSelect = function InternalSelect(props, ref) {
       }, child.props, {
         key: index,
         index: index,
+        activeIndex: activeIndex,
         onChangeSelect: handleOption,
-        values: multipleRef.current.selectedVal
+        values: multipleRef.current.selectedVal,
+        onChangeActiveIndex: function onChangeActiveIndex(i) {
+          setActiveIndex(i);
+        }
       }));
     } else {
       return /*#__PURE__*/_react.default.createElement(_option.default, (0, _extends2.default)({
@@ -481,8 +487,12 @@ var InternalSelect = function InternalSelect(props, ref) {
         value: child === null || child === void 0 ? void 0 : child.value,
         key: index,
         index: index,
+        activeIndex: activeIndex,
         onChangeSelect: handleOption,
-        values: multipleRef.current.selectedVal
+        values: multipleRef.current.selectedVal,
+        onChangeActiveIndex: function onChangeActiveIndex(i) {
+          setActiveIndex(i);
+        }
       }, child), (child === null || child === void 0 ? void 0 : child.label) || (child === null || child === void 0 ? void 0 : child.value));
     }
   };
@@ -511,6 +521,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, [isShowSearch, autoFocus, disabled]);
+  var optionsListRef = _react.default.useRef(null);
   // 渲染下拉列表框
   var renderContent = function renderContent() {
     var dropdownRender = selectProps.dropdownRender,
@@ -536,7 +547,8 @@ var InternalSelect = function InternalSelect(props, ref) {
         },
         isStaticItemHeight: true,
         height: listHeight || 300,
-        measureLongestItem: false
+        measureLongestItem: false,
+        ref: optionsListRef
       }, virtualListProps), function (child) {
         return child;
       });
@@ -695,6 +707,101 @@ var InternalSelect = function InternalSelect(props, ref) {
     }, renderSuffix()));
   };
   var singleCls = (0, _classnames.default)(commCls, (_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames12));
+  // keyboard
+  var getActiveIndex = function getActiveIndex(index) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var len = filledOptions.length;
+    for (var i = 0; i < len; i += 1) {
+      var current = (index + i * offset + len) % len;
+      var _props = filledOptions[current].props;
+      if (!(_props === null || _props === void 0 ? void 0 : _props.disabled)) {
+        return current;
+      }
+    }
+    return -1;
+  };
+  // reset activeIndex
+  (0, _react.useEffect)(function () {
+    if (searchValue) {
+      setActiveIndex(getActiveIndex(0));
+    }
+  }, [searchValue]);
+  (0, _react.useEffect)(function () {
+    if (optionShow && !disabled) {
+      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
+      onDropdownVisibleChange && onDropdownVisibleChange(true);
+    }
+  }, [optionShow]);
+  var _useState13 = (0, _react.useState)(getActiveIndex(0)),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    activeIndex = _useState14[0],
+    setActiveIndex = _useState14[1];
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    var _a, _b;
+    var which = e.which;
+    // open
+    if (which === _KeyCode.default.ENTER || which === _KeyCode.default.UP || which === _KeyCode.default.DOWN) {
+      e.preventDefault();
+      setOptionShow(true);
+    }
+    // backspace
+    var _multipleRef$current5 = multipleRef.current,
+      selectedVal = _multipleRef$current5.selectedVal,
+      selectMulOpts = _multipleRef$current5.selectMulOpts;
+    // isMultiple
+    if (which === _KeyCode.default.BACKSPACE && !searchValue && isMultiple && selectedVal.length && selectMulOpts.length) {
+      (0, _splice.default)(selectedVal).call(selectedVal, -1, 1);
+      (0, _splice.default)(selectMulOpts).call(selectMulOpts, -1, 1);
+      setMulOptions((0, _toConsumableArray2.default)(selectMulOpts));
+      onChange && onChange(labelInValue ? selectMulOpts : selectedVal, selectMulOpts);
+      // !isMultiple
+    } else if (which === _KeyCode.default.BACKSPACE && allowClear && !isMultiple) {
+      setInitValue('');
+      onClear && onClear('');
+      setSearchValue('');
+      onChange && onChange(undefined);
+    }
+    // optionsList: up、down、enter
+    if (optionShow) {
+      var offset = 0;
+      if (which === _KeyCode.default.UP) {
+        offset = -1;
+      } else if (which === _KeyCode.default.DOWN) {
+        offset = 1;
+      } else if (which === _KeyCode.default.ENTER) {
+        var item = filledOptions[activeIndex];
+        var key = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value) || item.value;
+        var label = ((_b = item.props) === null || _b === void 0 ? void 0 : _b.children) || item.label;
+        handleOption(key, label, true);
+        // search
+        if (searchValue) {
+          setActiveIndex((0, _findIndex.default)(realChildren).call(realChildren, function (child) {
+            var _a;
+            if (child && child.props) {
+              return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.value) === key;
+            } else {
+              return (child === null || child === void 0 ? void 0 : child.value) === key;
+            }
+          }));
+        }
+        if (!isMultiple) {
+          setOptionShow(false);
+        }
+      } else if (which === _KeyCode.default.ESC) {
+        setOptionShow(false);
+      }
+      if (offset !== 0) {
+        var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
+        if (optionsListRef.current) {
+          optionsListRef.current.scrollTo({
+            index: nextActiveIndex
+          });
+        }
+        setActiveIndex(nextActiveIndex);
+        e.preventDefault();
+      }
+    }
+  };
   var renderSelect = function renderSelect() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: selectCls,
@@ -702,7 +809,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       style: style
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: selectionCls,
-      onClick: handleClick,
       tabIndex: disabled ? -1 : 0,
       onFocus: function onFocus() {
         var _a;
@@ -711,7 +817,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: function onBlur() {
         var _a;
         return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
+      },
+      onKeyDown: onInternalKeyDown
     }, !isMultiple ? renderSingle() : renderMultiple()));
   };
   var catchStyle = function catchStyle() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.13",
+  "version": "1.7.14",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [