@kdcloudjs/kdesign 1.6.1 → 1.6.2

package/lib/date-picker/style/index.less

@@ -8,6 +8,9 @@
 // @datePicker-prefix-cls-input: ~'@{datePicker-prefix-cls}-input';
 @datePicker-prefix-cls-panel: ~'@{datePicker-prefix-cls}-panel';
 
+@datePicker-calendar-text: 24px;
+@datePicker-calendar-height: 242px;
+
 .@{datePicker-prefix-cls} {
   // &-small {
   //   height: @date-small-height;
@@ -89,6 +92,10 @@
       &[disabled] {
         background: transparent;
       }
+
+      &::placeholder {
+        color: @date-input-color-disabled;
+      }
     }
 
     &-placeholder {
@@ -436,7 +443,7 @@
 
         .@{datePicker-prefix-cls}-calendar-item-disabled {
           position: relative;
-          pointer-events: none;
+          cursor: not-allowed;
 
           .@{datePicker-prefix-cls}-calendar-text {
             color: #b2b2b2;
@@ -538,10 +545,10 @@
       .@{datePicker-prefix-cls}-calendar-week-text {
         position: relative;
         z-index: 2;
-        width: 32px;
-        height: 32px;
+        width: @datePicker-calendar-text;
+        height: @datePicker-calendar-text;
         text-align: center;
-        line-height: 32px;
+        line-height: @datePicker-calendar-text;
         display: inline-block;
         border-radius: @date-panel-border-radius;
         color: #b2b2b2;
@@ -553,7 +560,7 @@
 
       .@{datePicker-prefix-cls}-calendar-week-text {
         width: 100%;
-        height: 32px;
+        height: @datePicker-calendar-text;
         margin: 3px 0;
       }
 
@@ -589,12 +596,22 @@
     &::before {
       left: 50%;
     }
+
+    .@{datePicker-prefix-cls}-calendar-text-selected {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
   }
 
   .@{datePicker-prefix-cls}-range-end {
     &::before {
       right: 50%;
     }
+
+    .@{datePicker-prefix-cls}-calendar-text-selected {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
   }
 
   .@{datePicker-prefix-cls}-range-view,
@@ -619,14 +636,13 @@
       font-size: 14px;
       padding: 0;
       color: rgba(0, 0, 0, 0.25);
-      // line-height: 40px;
       background: 0 0;
       border: 0;
       cursor: pointer;
       transition: color 0.3s;
 
       &:hover {
-        color: rgba(0, 0, 0, 0.85);
+        color: @date-color-background-checked;
       }
     }
 
@@ -641,7 +657,7 @@
     line-height: @date-panel-header-height;
     background: #fafafa;
     color: #212121;
-    // line-height: 36px;
+    font-size: 14px;
     padding: 7px;
     border-bottom: 1px solid #d9d9d9;
     font-weight: bold;
@@ -656,7 +672,8 @@
 
     .@{datePicker-prefix-cls}-content {
       display: flex;
-      height: 224px;
+      height: @datePicker-calendar-height;
+      border-left: 1px solid #d9d9d9;
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
@@ -665,13 +682,14 @@
         flex: 1 0 auto;
         width: 56px;
         margin: 0;
-        padding: 0 0 196px 0;
-        overflow-y: hidden;
+        padding: 0 0 206px 0;
+        padding-top: 10px;
         text-align: left;
         transition: background 0.3s;
+        overflow: hidden;
 
         &:not(:first-child) {
-          border-left: 1px solid #f0f0f0;
+          border-left: 1px solid #d9d9d9;
         }
 
         &:hover {
@@ -687,7 +705,7 @@
             width: 100%;
             height: 28px;
             margin: 0;
-            padding: 0 0 0 14px;
+            text-align: center;
             color: rgba(0, 0, 0, 0.85);
             line-height: 28px;
             border-radius: 0;
@@ -729,10 +747,12 @@
   .@{datePicker-prefix-cls}-footer {
     width: min-content;
     min-width: 100%;
-    line-height: 34px;
-    border-top: 1px solid #f0f0f0;
+    line-height: 36px;
+    height: 40px;
+    border-top: 1px solid #d9d9d9;
     border-bottom: 1px solid transparent;
-    padding: 0 16px;
+    padding: 0 12px;
+    color: @date-color-background-checked;
     font-size: 12px;
     box-sizing: border-box;
     text-align: right;

package/lib/date-picker/style/mixin.less

@@ -14,6 +14,7 @@
     border-bottom: 1px solid @date-input-underline-color;
     border-radius: 0;
     padding-left: 0;
+    padding-right: 0;
   }
   &-disabled {
     background-color: @date-input-color-background-disabled !important;

package/lib/date-picker/style/token.less

@@ -5,7 +5,7 @@
 // color
 @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
 @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
-@date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-secondary);
+@date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-primary);
 @date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', @color-text-secondary);
 @date-input-underline-color: var(~'@{date-picker-custom-prefix}-input-underline-color', #999);
 @date-input-color-border: var(~'@{date-picker-custom-prefix}-input-color-border', @color-border-strong);

package/lib/locale/locale.d.ts

@@ -44,7 +44,7 @@ declare class LocaleCache {
         'Pagination.forward': string;
         'Pagination.backward': string;
         'Transfer.selectAll': string;
-        'Transfer.searchPlaceholder': string;
+        'Transfer.searchPlaceholder': string[];
         'Transfer.leftTitle': string;
         'Transfer.rightTitle': string;
         'Transfer.emptyTip': string;
@@ -62,6 +62,9 @@ declare class LocaleCache {
         'CityPicker.internation': string;
         'CityPicker.common': string;
         'CityPicker.noData': string;
+        /**
+         * 获取所有语言包数据
+         */
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;
@@ -94,6 +97,9 @@ declare class LocaleCache {
         'DatePicker.now': string;
         'DatePicker.confrim': string;
         'DatePicker.today': string;
+        'DatePicker.year': string;
+        'DatePicker.month': string;
+        'DatePicker.weekTitle': [string, string, string, string, string, string, string];
         'DatePicker.rangePlaceholder': [string, string];
         'DatePicker.rangeYearPlaceholder': [string, string];
         'DatePicker.rangeMonthPlaceholder': [string, string];

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

@@ -18,7 +18,7 @@ declare const locale: {
     'Pagination.forward': string;
     'Pagination.backward': string;
     'Transfer.selectAll': string;
-    'Transfer.searchPlaceholder': string;
+    'Transfer.searchPlaceholder': string[];
     'Transfer.leftTitle': string;
     'Transfer.rightTitle': string;
     'Transfer.emptyTip': string;
@@ -68,6 +68,9 @@ declare const locale: {
     'DatePicker.now': string;
     'DatePicker.confrim': string;
     'DatePicker.today': string;
+    'DatePicker.year': string;
+    'DatePicker.month': string;
+    'DatePicker.weekTitle': [string, string, string, string, string, string, string];
     'DatePicker.rangePlaceholder': [string, string];
     'DatePicker.rangeYearPlaceholder': [string, string];
     'DatePicker.rangeMonthPlaceholder': [string, string];

package/lib/locale/zh-CN.js

@@ -33,7 +33,7 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
   'Pagination.forward': '向前5页',
   'Pagination.backward': '向后5页',
   'Transfer.selectAll': '全选',
-  'Transfer.searchPlaceholder': '请输入需要搜索的内容',
+  'Transfer.searchPlaceholder': ['请输入需要搜索的内容', '请输入需要搜索的内容'],
   'Transfer.leftTitle': '可选列表',
   'Transfer.rightTitle': '已选列表',
   'Transfer.emptyTip': '暂无数据',

package/lib/pagination/pagination.js

@@ -35,6 +35,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
+
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 
 var _utils = require("../_utils");
@@ -120,7 +122,7 @@ var Pagination = function Pagination(props) {
       setInputPage = _React$useState6[1]; // 是否显示pageSize切换器
 
 
-  var showSizeSelector = total > 50 ? true : showSizeChanger;
+  var showSizeSelector = (0, _isBoolean.default)(showSizeChanger) ? showSizeChanger : total > 50;
   var defaultShowQuickJumper = pageType !== 'bill';
   var showJumper = showQuickJumper === undefined ? defaultShowQuickJumper : showQuickJumper; // pageSize切换器是否展开
 

package/lib/search/quick-search.js

@@ -152,7 +152,7 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
     setOptionShow(!!searchValue);
   }, [searchValue]);
   var quickSearchPrefixCls = getPrefixCls(prefixCls, 'quick-search', customPrefixcls);
-  var quickSearchCls = (0, _classnames.default)(quickSearchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-focused"), isFocused || tagsList.length), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-border"), borderType === 'border'), _classNames));
+  var quickSearchCls = (0, _classnames.default)(quickSearchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-focused"), isFocused || tagsList.length), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-border"), borderType === 'bordered'), _classNames));
   var quickSearchSelectorCls = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(quickSearchPrefixCls, "-selector"), true), (0, _defineProperty2.default)(_classNames2, "".concat(quickSearchPrefixCls, "-selector-disabled"), disabled), _classNames2));
   var inputCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-input"), true)); // 下拉列表样式
 

package/lib/search/search.js

@@ -97,7 +97,7 @@ var InternalSearch = function InternalSearch(props, ref) {
       setFocused = _useState2[1];
 
   var searchPrefixCls = getPrefixCls(prefixCls, 'search', customPrefixcls);
-  var searchCls = (0, _classnames.default)(searchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(searchPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-border"), borderType === 'border'), _classNames));
+  var searchCls = (0, _classnames.default)(searchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(searchPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(searchPrefixCls, "-border"), borderType === 'bordered'), _classNames));
   var handleSearchChange = (0, _react.useCallback)(function (event) {
     onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
   }, [onSearch]);
@@ -141,7 +141,8 @@ var InternalSearch = function InternalSearch(props, ref) {
       disabled: disabled,
       onSearch: onSearch,
       className: className,
-      style: style
+      style: style,
+      placeholder: placeholder
     }), children);
   }
 

package/lib/transfer/list-body.js

@@ -73,6 +73,10 @@ var ListBody = function ListBody(props) {
       current = _useState2[0],
       setCurrent = _useState2[1];
 
+  var mergedPagination = (0, _react.useMemo)(function () {
+    return parsePagination(pagination);
+  }, [pagination]);
+
   var onItemSelect = function onItemSelect(item) {
     var checked = selectedKeys.indexOf(item.key) >= 0;
     itemSelect(item.key, !checked);
@@ -87,7 +91,6 @@ var ListBody = function ListBody(props) {
   };
 
   var getItems = function getItems() {
-    var mergedPagination = parsePagination(pagination);
     var displayItems = filteredRenderItems;
 
     if (mergedPagination) {
@@ -97,8 +100,16 @@ var ListBody = function ListBody(props) {
     return displayItems;
   };
 
+  (0, _react.useEffect)(function () {
+    var total = filteredRenderItems.length;
+
+    if (mergedPagination && (current - 1) * mergedPagination.pageSize >= total) {
+      var pageSize = mergedPagination.pageSize;
+      var pageNo = total % pageSize === 0 ? total / pageSize : Math.floor(total / pageSize) + 1;
+      setCurrent(pageNo);
+    }
+  }, [mergedPagination, filteredRenderItems]);
   var paginationNode = null;
-  var mergedPagination = parsePagination(pagination);
 
   if (mergedPagination) {
     paginationNode = /*#__PURE__*/_react.default.createElement("div", {

package/lib/transfer/list.d.ts

@@ -10,6 +10,7 @@ declare type RenderListFunction = (props: TransferListBodyProps) => React.ReactN
 export interface TransferListProps {
     prefixCls: string;
     titleText: string;
+    placeholder: string;
     dataSource: TransferItem[];
     filterOption?: (filterText: string, item: TransferItem) => boolean;
     style?: React.CSSProperties;

package/lib/transfer/list.js

@@ -31,8 +31,6 @@ var _omit = require("../_utils/omit");
 
 var _search = _interopRequireDefault(require("./search"));
 
-var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
-
 var _listBody = _interopRequireWildcard(require("./list-body"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -54,9 +52,6 @@ function isRenderResultPlainObject(result) {
 var TransferList = function TransferList(props) {
   var _classNames;
 
-  var _useContext = (0, _react.useContext)(_ConfigContext.default),
-      locale = _useContext.locale;
-
   var prefixCls = props.prefixCls,
       dataSource = props.dataSource,
       filterOption = props.filterOption,
@@ -75,11 +70,8 @@ var TransferList = function TransferList(props) {
       showSelectAll = props.showSelectAll,
       pagination = props.pagination,
       footer = props.footer,
-      showRemove = props.showRemove;
-  var transferLang = locale.getCompLangMsg({
-    componentName: 'Transfer'
-  });
-  var searchPlaceholder = transferLang.searchPlaceholder;
+      showRemove = props.showRemove,
+      placeholder = props.placeholder;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -152,7 +144,7 @@ var TransferList = function TransferList(props) {
     };
   };
 
-  var getListBody = function getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
+  var getListBody = function getListBody(prefixCls, placeholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
     var _context;
 
     var search = showSearch ? /*#__PURE__*/_react.default.createElement("div", {
@@ -161,7 +153,7 @@ var TransferList = function TransferList(props) {
       prefixCls: "".concat(prefixCls, "-search"),
       onChange: onFilterChange,
       handleClear: onClear,
-      placeholder: searchPlaceholder,
+      placeholder: placeholder,
       value: filterValue,
       disabled: disabled
     })) : null;
@@ -249,8 +241,8 @@ var TransferList = function TransferList(props) {
       filteredItems = _getFilteredItems.filteredItems,
       filteredRenderItems = _getFilteredItems.filteredRenderItems;
 
-  var checkAllCheckbox = !showRemove && !pagination && getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled);
-  var listBody = getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
+  var checkAllCheckbox = !showRemove && getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled);
+  var listBody = getListBody(prefixCls, placeholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
   var listCls = (0, _classnames.default)(prefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-with-pagination"), pagination), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-with-footer"), footerDom), _classNames));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: listCls,

package/lib/transfer/transfer.d.ts

@@ -18,6 +18,7 @@ export interface TransferProps {
     noDataContent?: ((param: TransferRenderParam) => React.ReactNode) | React.ReactNode;
     titles?: string[];
     operations?: string[];
+    searchPlaceholder?: string[];
     showSearch?: boolean;
     filterOption?: (inputValue: string, item: TransferItem) => boolean;
     rowKey?: (record: TransferItem) => string;

package/lib/transfer/transfer.js

@@ -76,6 +76,8 @@ var Transfer = function Transfer(props) {
       titles = _transferProps$titles === void 0 ? [] : _transferProps$titles,
       _transferProps$operat = transferProps.operations,
       operations = _transferProps$operat === void 0 ? [] : _transferProps$operat,
+      _transferProps$search = transferProps.searchPlaceholder,
+      searchPlaceholder = _transferProps$search === void 0 ? [] : _transferProps$search,
       showSearch = transferProps.showSearch,
       filterOption = transferProps.filterOption,
       rowKey = transferProps.rowKey,
@@ -111,6 +113,8 @@ var Transfer = function Transfer(props) {
   var mergedPagination = !children && pagination;
   var leftTitle = titles[0] || transferLang.leftTitle;
   var rightTitle = titles[1] || transferLang.rightTitle;
+  var leftPlaceholder = searchPlaceholder[0] || transferLang.searchPlaceholder[0];
+  var rightPlaceholder = searchPlaceholder[1] || transferLang.searchPlaceholder[1];
 
   var setStateKeys = function setStateKeys(direction, keys) {
     if (direction === 'left') {
@@ -312,6 +316,7 @@ var Transfer = function Transfer(props) {
     style: style
   }, /*#__PURE__*/_react.default.createElement(_list.default, {
     prefixCls: "".concat(transferPrefixCls, "-list"),
+    placeholder: leftPlaceholder,
     titleText: leftTitle,
     dataSource: leftDataSource,
     filterOption: filterOption,
@@ -343,6 +348,7 @@ var Transfer = function Transfer(props) {
     oneWay: oneWay
   }), /*#__PURE__*/_react.default.createElement(_list.default, {
     prefixCls: "".concat(transferPrefixCls, "-list"),
+    placeholder: rightPlaceholder,
     titleText: rightTitle,
     dataSource: rightDataSource,
     filterOption: filterOption,

package/lib/tree/style/index.css

@@ -132,6 +132,7 @@
   font-size: var(--kd-c-tree-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
   margin-left: var(--kd-c-tree-spacing-margin-left, 0px);
+  padding: var(--kd-c-tree-spacing-padding-vertical, 3px) 0;
 }
 .kd-tree-root {
   min-width: 100%;
@@ -313,16 +314,19 @@
 }
 .kd-tree-node-drag-over {
   background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
-  border: 2px solid var(--kd-c-tree-node-drag-over-color-border, #5582f3);
+  -webkit-box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
+          box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
 }
-.kd-tree-node-drag-line {
+.kd-tree-node-drag-line-top,
+.kd-tree-node-drag-line-bottom {
   position: absolute;
   left: 0;
-  top: 100%;
+  top: 0;
   width: 100%;
   border-top: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
 }
-.kd-tree-node-drag-line::before {
+.kd-tree-node-drag-line-top::before,
+.kd-tree-node-drag-line-bottom::before {
   content: '';
   width: 4px;
   height: 4px;
@@ -334,6 +338,12 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+.kd-tree-node-drag-line-top {
+  top: 0;
+}
+.kd-tree-node-drag-line-bottom {
+  top: 100%;
+}
 .kd-tree-node-leaf-icon {
   height: var(--kd-c-tree-node-icon-sizing-height, 16px);
   width: var(--kd-c-tree-node-icon-sizing-width, 16px);

package/lib/tree/style/index.less

@@ -12,6 +12,7 @@
   font-size: @tree-font-size;
   color: @tree-color-text;
   margin-left: @tree-margin-left;
+  padding: @tree-padding-vertical 0;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -136,26 +137,35 @@
 
   &-drag-over {
     background-color: @tree-node-drag-over-color-background;
-    border: 2px solid @tree-node-drag-over-border-color;
+    box-shadow: inset 0 0 0 2px @tree-node-drag-over-border-color;
   }
 
   &-drag-line {
-    position: absolute;
-    left: 0;
-    top: 100%;
-    width: 100%;
-    border-top: 2px solid @tree-node-drag-line-border-color;
-
-    &::before {
-      content: '';
-      width: 4px;
-      height: 4px;
-      background-color: #fff;
-      border-radius: 50%;
-      border: 2px solid @tree-node-drag-line-border-color;
+    &-top, &-bottom {
       position: absolute;
-      top: -1px;
-      transform: translateY(-50%);
+      left: 0;
+      top: 0;
+      width: 100%;
+      border-top: 2px solid @tree-node-drag-line-border-color;
+      
+      &::before {
+        content: '';
+        width: 4px;
+        height: 4px;
+        background-color: #fff;
+        border-radius: 50%;
+        border: 2px solid @tree-node-drag-line-border-color;
+        position: absolute;
+        top: -1px;
+        transform: translateY(-50%);
+      }
+    }
+    &-top {
+      top: 0;
+    }
+
+    &-bottom {
+      top: 100%;
     }
   }
   &-leaf-icon {

package/lib/tree/style/token.less

@@ -22,7 +22,10 @@
 @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
 @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
+
+// spacing
 @tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 0px);
+@tree-padding-vertical: var(~'@{tree-prefix}-spacing-padding-vertical', 3px);
 
 // font
 @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);

package/lib/tree/tree.js

@@ -298,47 +298,32 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var handleDragOver = _react.default.useCallback(function (event, node, dropTarget) {
     var dropPos = (0, _treeUtils.calcDropPosition)(event, dropTarget);
-    setDropPosition(dropPos);
-    var dragNode = getDragNode();
 
-    if (dragNode.key === node.key) {
-      setDropPosition(null);
+    if (!delayedDragEnterRef.current) {
+      delayedDragEnterRef.current = {};
     }
 
-    onDragOver && onDragOver({
-      event: event,
-      node: node
-    });
-  }, [onDragOver]);
-
-  var handleDragLeave = _react.default.useCallback(function (event, node) {
-    onDragLeave && onDragLeave({
-      event: event,
-      node: node
-    });
-  }, [onDragLeave]);
+    if (dropPos !== 0 && dropPos !== dropPosition) {
+      (0, _keys.default)(delayedDragEnterRef.current).forEach(function (key) {
+        clearTimeout(delayedDragEnterRef.current[key]);
+        delayedDragEnterRef.current[key] = null;
+      });
+    }
 
-  var handleDragEnter = _react.default.useCallback(function (event, node, dropTarget) {
+    setDropPosition(dropPos);
     var key = node.key,
         pos = node.pos;
     var dragNode = getDragNode();
 
-    if (!dragNode) {
-      return;
-    }
-
-    if (!delayedDragEnterRef.current) {
-      delayedDragEnterRef.current = {};
+    if (dragNode.key === node.key) {
+      setDropPosition(null);
     }
 
-    (0, _keys.default)(delayedDragEnterRef.current).forEach(function (key) {
-      clearTimeout(delayedDragEnterRef.current[key]);
-    });
+    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key && dropPos === 0) {
+      if (dragNode.key === node.key || delayedDragEnterRef.current[pos]) {
+        return;
+      }
 
-    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
-      var dragPos = (0, _treeUtils.calcDropPosition)(event, dropTarget);
-      setDragOverNodeKey(key);
-      setDropPosition(dragPos);
       delayedDragEnterRef.current[pos] = setTimeout(function () {
         var newExpandedKeys = (0, _toConsumableArray2.default)(expandedKeys);
 
@@ -357,14 +342,39 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }, 800);
     }
 
+    onDragOver && onDragOver({
+      event: event,
+      node: node
+    });
+  }, [TreeProps, dropPosition, expandedKeys, onDragOver, onExpand, setExpandedKeys]);
+
+  var handleDragLeave = _react.default.useCallback(function (event, node) {
+    onDragLeave && onDragLeave({
+      event: event,
+      node: node
+    });
+  }, [onDragLeave]);
+
+  var handleDragEnter = _react.default.useCallback(function (event, node, _dropTarget) {
+    var key = node.key;
+    var dragNode = getDragNode();
+
+    if (!dragNode) {
+      return;
+    }
+
+    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
+      setDragOverNodeKey(key);
+    }
+
     onDragEnter && onDragEnter({
       event: event,
       node: node
     });
-  }, [TreeProps, expandedKeys, onDragEnter, onExpand, setExpandedKeys]);
+  }, [onDragEnter]);
 
   var handleDragEnd = _react.default.useCallback(function (event, node) {
-    setDragOverNodeKey('');
+    setDragOverNodeKey(null);
     onDragEnd && onDragEnd({
       event: event,
       node: node
@@ -472,6 +482,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     item.getDragNode = getDragNode;
     item.setDragNode = setDragNode;
     item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
+    item.dropPosition = dropPosition;
     item.expandOnClickNode = expandOnClickNode;
     item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
     item.loadData = loadData;