@kdcloudjs/kdesign 1.7.20 → 1.7.21

package/lib/tree/tree.js

@@ -23,6 +23,7 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 var _utils = require("../_utils");
 var _treeNode = _interopRequireDefault(require("./treeNode"));
+var _virtualList = _interopRequireDefault(require("../virtual-list"));
 var _treeUtils = require("./utils/treeUtils");
 var _treeHooks = require("./treeHooks");
 var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
@@ -92,7 +93,6 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     notFoundContent = TreeProps.notFoundContent,
     others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent"]);
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
-  var treeNodePrefixCls = getPrefixCls(prefixCls, 'tree-node', customPrefixcls); // 树节点样式前缀
   var treeNodeClassName = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(treePrefixCls), true));
   var treeRootClassName = "".concat(treePrefixCls, "-root");
   var estimatedItemSize = innerEstimatedItemSize; // 节点高度
@@ -106,45 +106,41 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     scrollKey = _React$useState2[0],
     setScrollKey = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(0),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    start = _React$useState4[0],
-    setStart = _React$useState4[1];
   var _useSelect = (0, _treeHooks.useSelect)(selectedKeysProps, defaultSelectedKeys),
     _useSelect2 = (0, _slicedToArray2.default)(_useSelect, 2),
     selectedKeys = _useSelect2[0],
     setSelectedKeys = _useSelect2[1];
   var listRef = _react.default.useRef(null);
-  var plantomRef = _react.default.useRef(null);
   var rootRef = _react.default.useRef(null);
   var scrollRef = ref || rootRef;
   var treeNodeRef = _react.default.useRef(null);
   var dragNodeRef = _react.default.useRef(null);
   var delayedDragEnterRef = _react.default.useRef(null);
-  var _React$useState5 = _react.default.useState(true),
+  var virtualListRef = _react.default.useRef(null);
+  var _React$useState3 = _react.default.useState(true),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isInit = _React$useState4[0],
+    setIsInit = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(null),
     _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    isInit = _React$useState6[0],
-    setIsInit = _React$useState6[1];
+    dropPosition = _React$useState6[0],
+    setDropPosition = _React$useState6[1];
   var _React$useState7 = _react.default.useState(null),
     _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-    dropPosition = _React$useState8[0],
-    setDropPosition = _React$useState8[1];
-  var _React$useState9 = _react.default.useState(null),
+    dragOverNodeKey = _React$useState8[0],
+    setDragOverNodeKey = _React$useState8[1];
+  var _React$useState9 = _react.default.useState(new _set.default()),
     _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-    dragOverNodeKey = _React$useState10[0],
-    setDragOverNodeKey = _React$useState10[1];
+    loadedKeys = _React$useState10[0],
+    setLoadedKeys = _React$useState10[1];
   var _React$useState11 = _react.default.useState(new _set.default()),
     _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-    loadedKeys = _React$useState12[0],
-    setLoadedKeys = _React$useState12[1];
-  var _React$useState13 = _react.default.useState(new _set.default()),
+    loadingKeys = _React$useState12[0],
+    setLoadingKeys = _React$useState12[1];
+  var _React$useState13 = _react.default.useState([]),
     _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
-    loadingKeys = _React$useState14[0],
-    setLoadingKeys = _React$useState14[1];
-  var _React$useState15 = _react.default.useState([]),
-    _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
-    searchExpandedKeys = _React$useState16[0],
-    setSearchExpandedKeys = _React$useState16[1];
+    searchExpandedKeys = _React$useState14[0],
+    setSearchExpandedKeys = _React$useState14[1];
   var isSearching = _react.default.useMemo(function () {
     return typeof filterTreeNode === 'function' && !!filterValue;
   }, [filterValue]);
@@ -169,13 +165,11 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var filterData = _react.default.useMemo(function () {
     return (0, _treeUtils.getFilterData)(spreadAttrData, filterTreeNode, isSearching, posData, keysData);
   }, [spreadAttrData, isSearching, posData, keysData]);
-  var _useViewportHeight = (0, _treeHooks.useViewportHeight)(height, listRef),
-    _useViewportHeight2 = (0, _slicedToArray2.default)(_useViewportHeight, 1),
-    viewportHeight = _useViewportHeight2[0];
-  var _useVisibleDataMemo = (0, _treeHooks.useVisibleDataMemo)(virtual, filterData, viewportHeight, estimatedItemSize, start),
-    _useVisibleDataMemo2 = (0, _slicedToArray2.default)(_useVisibleDataMemo, 1),
-    visibleData = _useVisibleDataMemo2[0];
-  var index = _react.default.useMemo(function () {
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    if (typeof scrollKey === 'undefined') {
+      return;
+    }
     var scrollIndex = 0;
     for (var i = 0; i < filterData.length; i++) {
       if (filterData[i].key === scrollKey) {
@@ -183,19 +177,21 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         break;
       }
     }
-    return scrollIndex;
-  }, [filterData, scrollKey]);
-  (0, _treeHooks.useScrollToKey)(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls);
-  (0, _treeHooks.usePlantomHeightEffect)(plantomRef, filterData, estimatedItemSize);
-  var handleScroll = (0, _react.useCallback)(function () {
-    if (!virtual) return;
-    var scrollTop = scrollRef.current.scrollTop;
-    setStart(Math.floor(scrollTop / estimatedItemSize));
-    var tempStartOffset = scrollTop - scrollTop % estimatedItemSize;
-    if (listRef.current && virtual) {
-      listRef.current.style.transform = "translate3d(0,".concat(tempStartOffset, "px,0)");
+    if (virtual) {
+      (_a = virtualListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        index: scrollIndex
+      });
+    } else {
+      var wrapperDom = scrollRef.current;
+      var node = wrapperDom ? (_b = wrapperDom === null || wrapperDom === void 0 ? void 0 : wrapperDom.children[0]) === null || _b === void 0 ? void 0 : _b.children[scrollIndex] : null;
+      if (node && wrapperDom) {
+        var containerHeight = wrapperDom.clientHeight;
+        var targetHeight = node.clientHeight;
+        var scrollPosition = node.offsetTop + targetHeight - containerHeight;
+        wrapperDom.scrollTop = scrollPosition;
+      }
     }
-  }, [listRef, scrollRef, virtual, estimatedItemSize]);
+  }, [filterData, scrollKey, virtual]);
   var handleNodeLoad = (0, _react.useCallback)(function (loadedKeys, loadingKeys, data) {
     var key = data.key;
     if (!loadData || loadedKeys.has(key) || loadingKeys.has(key)) {
@@ -240,7 +236,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       var newSearchExpandedKeys = expanded ? (0, _treeUtils.addKeys)(searchExpandedKeys, [key]) : (0, _treeUtils.delKey)(searchExpandedKeys, [key]);
       setSearchExpandedKeys(newSearchExpandedKeys);
     }
-    setScrollKey('');
+    setScrollKey(undefined);
     setIsInit(false);
     if (expanded && loadData) {
       handleNodeLoad(loadedKeys, loadingKeys, node);
@@ -386,18 +382,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   (0, _react.useEffect)(function () {
     setCheckedKeys(checkedKeys);
   }, [checkedKeys, setCheckedKeys]);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: treeNodeClassName,
-    style: style,
-    ref: scrollRef,
-    onScroll: handleScroll
-  }, others), /*#__PURE__*/_react.default.createElement("div", {
-    ref: plantomRef,
-    className: "".concat(treePrefixCls, "-plantom")
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: treeRootClassName,
-    ref: listRef
-  }, !(visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) && notFoundContent, visibleData && (0, _map.default)(visibleData).call(visibleData, function (item) {
+  var renderTreeNode = function renderTreeNode(item) {
     var checked = (0, _treeUtils.getChecked)(checkedKeys, item.key);
     var indeterminate = (0, _treeUtils.getHalfChecked)(halfCheckedKeys, item.key);
     item.nodeKey = item.key;
@@ -435,7 +420,26 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       key: item.key,
       ref: treeNodeRef
     }));
-  })));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: treeNodeClassName,
+    style: style,
+    ref: scrollRef
+  }, others), /*#__PURE__*/_react.default.createElement("div", {
+    className: treeRootClassName,
+    ref: listRef
+  }, !(filterData === null || filterData === void 0 ? void 0 : filterData.length) && notFoundContent, virtual ? /*#__PURE__*/_react.default.createElement(_virtualList.default, {
+    className: className,
+    style: style,
+    ref: virtualListRef,
+    data: filterData,
+    isStaticItemHeight: true,
+    itemKey: function itemKey(item) {
+      return item === null || item === void 0 ? void 0 : item.key;
+    },
+    height: height,
+    itemHeight: estimatedItemSize
+  }, renderTreeNode) : (0, _map.default)(filterData).call(filterData, renderTreeNode)));
 });
 var Tree = InternalTree;
 Tree.displayName = 'Tree';

package/lib/tree/treeNode.js

@@ -30,7 +30,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props) {
   var _context;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
@@ -242,11 +242,6 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleSelect = _react.default.useCallback(function (e) {
     selectable && !disabled && onSelect && onSelect(e, nodeData, nodeKey);
   }, [onSelect, selectable, disabled, nodeData, nodeKey]);
-  _react.default.useImperativeHandle(ref, function () {
-    return {
-      selectNode: handleSelect
-    };
-  });
   var handleExpandIconClick = (0, _react.useCallback)(function (e) {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
     setExpandState(!expandState);

package/lib/tree-select/interface.d.ts

@@ -48,6 +48,7 @@ export declare type ITreeProps = {
     treeExpandOnClickNode?: boolean;
     showTreeIcon?: boolean;
     treeLoadData?: () => void;
+    listHeight?: number;
 };
 export declare type TreeSelectValue = string | string[] | number | number[] | undefined;
 export interface ITreeSelectProps<T extends TreeSelectValue> extends AbstractSelectProps, ITreeProps {

package/lib/tree-select/style/index.css

@@ -228,7 +228,7 @@
   z-index: var(--kd-c-tree-select-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  padding: 4px 0;
+  padding: var(--kd-c-tree-select-dropdown-spacing-padding-vertical, 8px) 0;
   margin: 0;
   overflow: auto;
   font-size: var(--kd-c-tree-select-dropdown-font-size, 12px);
@@ -240,6 +240,9 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   max-height: 200px;
 }
+.kd-tree-select-dropdown .kd-tree {
+  padding: 0;
+}
 .kd-tree-select-dropdown .kd-tree-node-item {
   padding: 0 var(--kd-c-tree-select-dropdown-node-spacing-padding-horizontal, 16px);
 }

package/lib/tree-select/style/index.less

@@ -126,7 +126,7 @@
     left: 0;
     z-index: @tree-select-z-index;
     box-sizing: border-box;
-    padding: 4px 0;
+    padding: @tree-select-padding-vertical 0;
     margin: 0;
     overflow: auto;
     font-size: @tree-select-list-font-size;
@@ -137,6 +137,10 @@
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
     max-height: 200px;
 
+    .@{tree-prefix-cls} {
+      padding: 0;
+    }
+
     .@{tree-prefix-cls}-node-item {
       padding: 0 @tree-select-dropdown-node-horizontal;
     }

package/lib/tree-select/style/token.less

@@ -45,6 +45,7 @@
 @tree-select-bordered: var(~'@{tree-select-custom-prefix}-bordered-spacing-padding-left', 8px);
 @tree-select-wrapper-padding: var(~'@{tree-select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
 @tree-select-dropdown-node-horizontal: var(~'@{tree-select-custom-prefix}-dropdown-node-spacing-padding-horizontal', 16px);
+@tree-select-padding-vertical: var(~'@{tree-select-custom-prefix}-dropdown-spacing-padding-vertical', 8px);
 
 // radius
 @tree-select-g-radius-border: var(~'@{tree-select-custom-prefix}-radius-border', @radius-border);

package/lib/tree-select/tree-select.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
@@ -25,7 +26,7 @@ var _utils = require("../_utils");
 var _index = require("../index");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
 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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; // 输入框最小宽度
 function flattenTreeData(treeData) {
   var map = new _map.default();
@@ -108,7 +109,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
     onSelect = treeSelectProps.onSelect,
     onCheck = treeSelectProps.onCheck,
     dropdownRender = treeSelectProps.dropdownRender,
-    onlyExpandOnClickIcon = treeSelectProps.onlyExpandOnClickIcon;
+    onlyExpandOnClickIcon = treeSelectProps.onlyExpandOnClickIcon,
+    listHeight = treeSelectProps.listHeight;
   var isMultiple = mode === 'multiple'; // 是否多选
   var _useMergedState = (0, _hooks.useMergedState)(isMultiple ? [] : undefined, {
       value: value,
@@ -167,16 +169,26 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
   var commCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-size-")).call(_context3, size), size), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-wrapper"), true), _classNames4));
   (0, _react.useEffect)(function () {
     var arr = [];
-    if (isMultiple && (initValue === null || initValue === void 0 ? void 0 : initValue.length)) {
+    if (isMultiple) {
       for (var index = 0; index < initValue.length; index++) {
         var key = initValue[index];
         if (TreeMap.has(key)) {
           arr.push(TreeMap.get(key));
+        } else {
+          arr.push({
+            key: key,
+            title: key
+          });
         }
       }
     } else {
       if (TreeMap.has(initValue)) {
         arr.push(TreeMap.get(initValue));
+      } else {
+        (0, _typeof2.default)(initValue) !== undefined && arr.push({
+          key: initValue,
+          title: initValue
+        });
       }
     }
     setSelectTreeNodes(arr);
@@ -327,7 +339,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
       notFoundContent: renderNotContent(),
       filterTreeNode: defFilterTreeNode,
       onSelect: handleSelect,
-      onExpand: handleExpand
+      onExpand: handleExpand,
+      height: listHeight
     };
     if (isMultiple) {
       treeProps.checkable = true;
@@ -355,7 +368,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
   // 渲染下拉列表框
   var renderContent = function renderContent() {
     var dropDownStyle = (0, _extends2.default)({
-      width: style === null || style === void 0 ? void 0 : style.width
+      width: style === null || style === void 0 ? void 0 : style.width,
+      maxHeight: virtual ? 'unset' : ''
     }, dropdownStyle);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: dropDownCls,

package/package.json

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