@kdcloudjs/kdesign 1.5.11 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/kdesign-complete.less +69 -35
  3. package/dist/kdesign.css +65 -26
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +148 -124
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/avatar/style/index.css +4 -4
  11. package/es/avatar/style/mixin.less +1 -1
  12. package/es/date-picker/calendar.js +5 -17
  13. package/es/date-picker/date-panel.js +4 -3
  14. package/es/date-picker/interface.d.ts +6 -0
  15. package/es/date-picker/locale/zh_CN.js +3 -0
  16. package/es/date-picker/panel/week/week.js +1 -1
  17. package/es/date-picker/range-picker.js +1 -0
  18. package/es/date-picker/style/index.css +45 -16
  19. package/es/date-picker/style/index.less +36 -16
  20. package/es/date-picker/style/mixin.less +1 -0
  21. package/es/date-picker/style/token.less +1 -1
  22. package/es/dropdown/dropdown.js +1 -1
  23. package/es/input/ClearableLabeledInput.d.ts +1 -1
  24. package/es/input/ClearableLabeledInput.js +3 -3
  25. package/es/input/TextArea.d.ts +1 -1
  26. package/es/input/TextArea.js +2 -2
  27. package/es/input/input.d.ts +1 -1
  28. package/es/locale/locale.d.ts +7 -1
  29. package/es/locale/zh-CN.d.ts +4 -1
  30. package/es/locale/zh-CN.js +1 -1
  31. package/es/pagination/pagination.js +2 -1
  32. package/es/search/quick-search.js +1 -1
  33. package/es/search/search.js +3 -2
  34. package/es/slider/slider.js +1 -1
  35. package/es/slider/sliderTooltip.js +4 -3
  36. package/es/steps/Steps.js +0 -1
  37. package/es/transfer/list-body.js +14 -3
  38. package/es/transfer/list.d.ts +1 -0
  39. package/es/transfer/list.js +7 -14
  40. package/es/transfer/transfer.d.ts +1 -0
  41. package/es/transfer/transfer.js +6 -0
  42. package/es/tree/style/index.css +15 -5
  43. package/es/tree/style/index.less +26 -16
  44. package/es/tree/style/token.less +4 -1
  45. package/es/tree/tree.js +44 -31
  46. package/es/tree/treeNode.js +8 -4
  47. package/lib/avatar/style/index.css +4 -4
  48. package/lib/avatar/style/mixin.less +1 -1
  49. package/lib/date-picker/calendar.js +4 -16
  50. package/lib/date-picker/date-panel.js +4 -3
  51. package/lib/date-picker/interface.d.ts +6 -0
  52. package/lib/date-picker/locale/zh_CN.js +3 -0
  53. package/lib/date-picker/panel/week/week.js +1 -1
  54. package/lib/date-picker/range-picker.js +1 -0
  55. package/lib/date-picker/style/index.css +45 -16
  56. package/lib/date-picker/style/index.less +36 -16
  57. package/lib/date-picker/style/mixin.less +1 -0
  58. package/lib/date-picker/style/token.less +1 -1
  59. package/lib/dropdown/dropdown.js +1 -1
  60. package/lib/input/ClearableLabeledInput.d.ts +1 -1
  61. package/lib/input/ClearableLabeledInput.js +3 -3
  62. package/lib/input/TextArea.d.ts +1 -1
  63. package/lib/input/TextArea.js +2 -2
  64. package/lib/input/input.d.ts +1 -1
  65. package/lib/locale/locale.d.ts +7 -1
  66. package/lib/locale/zh-CN.d.ts +4 -1
  67. package/lib/locale/zh-CN.js +1 -1
  68. package/lib/pagination/pagination.js +3 -1
  69. package/lib/search/quick-search.js +1 -1
  70. package/lib/search/search.js +3 -2
  71. package/lib/slider/slider.js +1 -1
  72. package/lib/slider/sliderTooltip.js +4 -3
  73. package/lib/steps/Steps.js +0 -1
  74. package/lib/transfer/list-body.js +13 -2
  75. package/lib/transfer/list.d.ts +1 -0
  76. package/lib/transfer/list.js +6 -14
  77. package/lib/transfer/transfer.d.ts +1 -0
  78. package/lib/transfer/transfer.js +6 -0
  79. package/lib/tree/style/index.css +15 -5
  80. package/lib/tree/style/index.less +26 -16
  81. package/lib/tree/style/token.less +4 -1
  82. package/lib/tree/tree.js +45 -32
  83. package/lib/tree/treeNode.js +8 -4
  84. package/package.json +2 -2
@@ -114,7 +114,7 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
114
114
  setOptionShow(!!searchValue);
115
115
  }, [searchValue]);
116
116
  var quickSearchPrefixCls = getPrefixCls(prefixCls, 'quick-search', customPrefixcls);
117
- var quickSearchCls = classNames(quickSearchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-focused"), isFocused || tagsList.length), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-border"), borderType === 'border'), _classNames));
117
+ var quickSearchCls = classNames(quickSearchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-focused"), isFocused || tagsList.length), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-border"), borderType === 'bordered'), _classNames));
118
118
  var quickSearchSelectorCls = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(quickSearchPrefixCls, "-selector"), true), _defineProperty(_classNames2, "".concat(quickSearchPrefixCls, "-selector-disabled"), disabled), _classNames2));
119
119
  var inputCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-input"), true)); // 下拉列表样式
120
120
 
@@ -66,7 +66,7 @@ var InternalSearch = function InternalSearch(props, ref) {
66
66
  setFocused = _useState2[1];
67
67
 
68
68
  var searchPrefixCls = getPrefixCls(prefixCls, 'search', customPrefixcls);
69
- var searchCls = classNames(searchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(searchPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(searchPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(searchPrefixCls, "-focused"), focused && !disabled), _defineProperty(_classNames, "".concat(searchPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(searchPrefixCls, "-border"), borderType === 'border'), _classNames));
69
+ var searchCls = classNames(searchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(searchPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(searchPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(searchPrefixCls, "-focused"), focused && !disabled), _defineProperty(_classNames, "".concat(searchPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(searchPrefixCls, "-border"), borderType === 'bordered'), _classNames));
70
70
  var handleSearchChange = useCallback(function (event) {
71
71
  onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
72
72
  }, [onSearch]);
@@ -110,7 +110,8 @@ var InternalSearch = function InternalSearch(props, ref) {
110
110
  disabled: disabled,
111
111
  onSearch: onSearch,
112
112
  className: className,
113
- style: style
113
+ style: style,
114
+ placeholder: placeholder
114
115
  }), children);
115
116
  }
116
117
 
@@ -265,7 +265,7 @@ var InteranalSlider = function InteranalSlider(props, ref) {
265
265
  }), /*#__PURE__*/React.createElement(SliderTooltip, {
266
266
  ref: handleRef,
267
267
  placement: tooltipPlacement,
268
- tip: tipFormatter || value,
268
+ tip: tipFormatter === null || tipFormatter === void 0 ? void 0 : tipFormatter(value),
269
269
  visible: disabled ? false : tooltipVisible,
270
270
  prefixCls: sliderPrefixCls,
271
271
  vertical: vertical,
@@ -28,7 +28,8 @@ var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
28
28
  min = props.min,
29
29
  max = props.max,
30
30
  bound = props.bound,
31
- others = __rest(props, ["visible", "prefixCls", "reverse", "vertical", "min", "max", "bound"]);
31
+ tip = props.tip,
32
+ others = __rest(props, ["visible", "prefixCls", "reverse", "vertical", "min", "max", "bound", "tip"]);
32
33
 
33
34
  var thisTooltipRef = useRef(null);
34
35
  var tooltipRef = ref || thisTooltipRef;
@@ -40,8 +41,8 @@ var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
40
41
  return /*#__PURE__*/React.createElement(Tooltip, _extends({
41
42
  ref: tooltipRef
42
43
  }, others, {
43
- tip: bound,
44
- visible: visible,
44
+ tip: tip || bound,
45
+ visible: tip !== null && visible,
45
46
  placement: placement
46
47
  }), /*#__PURE__*/React.createElement("div", {
47
48
  className: sliderHandleClass,
package/es/steps/Steps.js CHANGED
@@ -107,7 +107,6 @@ var Steps = function Steps(props) {
107
107
  }
108
108
  }
109
109
 
110
- childProps.active = stepNumber === current;
111
110
  return /*#__PURE__*/cloneElement(child, childProps);
112
111
  }));
113
112
  };
@@ -3,7 +3,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
3
3
  import _typeof from "@babel/runtime-corejs3/helpers/typeof";
4
4
  import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
5
5
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
6
- import React, { useState } from 'react';
6
+ import React, { useEffect, useMemo, useState } from 'react';
7
7
  import classNames from 'classnames';
8
8
  import { tuple } from '../_utils/type';
9
9
  import Pagination from '../pagination';
@@ -43,6 +43,10 @@ var ListBody = function ListBody(props) {
43
43
  current = _useState2[0],
44
44
  setCurrent = _useState2[1];
45
45
 
46
+ var mergedPagination = useMemo(function () {
47
+ return parsePagination(pagination);
48
+ }, [pagination]);
49
+
46
50
  var onItemSelect = function onItemSelect(item) {
47
51
  var checked = selectedKeys.indexOf(item.key) >= 0;
48
52
  itemSelect(item.key, !checked);
@@ -57,7 +61,6 @@ var ListBody = function ListBody(props) {
57
61
  };
58
62
 
59
63
  var getItems = function getItems() {
60
- var mergedPagination = parsePagination(pagination);
61
64
  var displayItems = filteredRenderItems;
62
65
 
63
66
  if (mergedPagination) {
@@ -67,8 +70,16 @@ var ListBody = function ListBody(props) {
67
70
  return displayItems;
68
71
  };
69
72
 
73
+ useEffect(function () {
74
+ var total = filteredRenderItems.length;
75
+
76
+ if (mergedPagination && (current - 1) * mergedPagination.pageSize >= total) {
77
+ var pageSize = mergedPagination.pageSize;
78
+ var pageNo = total % pageSize === 0 ? total / pageSize : Math.floor(total / pageSize) + 1;
79
+ setCurrent(pageNo);
80
+ }
81
+ }, [mergedPagination, filteredRenderItems]);
70
82
  var paginationNode = null;
71
- var mergedPagination = parsePagination(pagination);
72
83
 
73
84
  if (mergedPagination) {
74
85
  paginationNode = /*#__PURE__*/React.createElement("div", {
@@ -10,6 +10,7 @@ declare type RenderListFunction = (props: TransferListBodyProps) => React.ReactN
10
10
  export interface TransferListProps {
11
11
  prefixCls: string;
12
12
  titleText: string;
13
+ placeholder: string;
13
14
  dataSource: TransferItem[];
14
15
  filterOption?: (filterText: string, item: TransferItem) => boolean;
15
16
  style?: React.CSSProperties;
@@ -4,10 +4,9 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
4
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
5
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
6
6
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
- import React, { useState, useContext } from 'react';
7
+ import React, { useState } from 'react';
8
8
  import { omit } from '../_utils/omit';
9
9
  import Search from './search';
10
- import ConfigContext from '../config-provider/ConfigContext';
11
10
  import DefaultListBody, { OmitProps } from './list-body';
12
11
  import classNames from 'classnames';
13
12
  import Checkbox from '../checkbox';
@@ -23,9 +22,6 @@ function isRenderResultPlainObject(result) {
23
22
  var TransferList = function TransferList(props) {
24
23
  var _classNames;
25
24
 
26
- var _useContext = useContext(ConfigContext),
27
- locale = _useContext.locale;
28
-
29
25
  var prefixCls = props.prefixCls,
30
26
  dataSource = props.dataSource,
31
27
  filterOption = props.filterOption,
@@ -44,11 +40,8 @@ var TransferList = function TransferList(props) {
44
40
  showSelectAll = props.showSelectAll,
45
41
  pagination = props.pagination,
46
42
  footer = props.footer,
47
- showRemove = props.showRemove;
48
- var transferLang = locale.getCompLangMsg({
49
- componentName: 'Transfer'
50
- });
51
- var searchPlaceholder = transferLang.searchPlaceholder;
43
+ showRemove = props.showRemove,
44
+ placeholder = props.placeholder;
52
45
 
53
46
  var _useState = useState(''),
54
47
  _useState2 = _slicedToArray(_useState, 2),
@@ -121,7 +114,7 @@ var TransferList = function TransferList(props) {
121
114
  };
122
115
  };
123
116
 
124
- var getListBody = function getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
117
+ var getListBody = function getListBody(prefixCls, placeholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
125
118
  var _context;
126
119
 
127
120
  var search = showSearch ? /*#__PURE__*/React.createElement("div", {
@@ -130,7 +123,7 @@ var TransferList = function TransferList(props) {
130
123
  prefixCls: "".concat(prefixCls, "-search"),
131
124
  onChange: onFilterChange,
132
125
  handleClear: onClear,
133
- placeholder: searchPlaceholder,
126
+ placeholder: placeholder,
134
127
  value: filterValue,
135
128
  disabled: disabled
136
129
  })) : null;
@@ -216,8 +209,8 @@ var TransferList = function TransferList(props) {
216
209
  filteredItems = _getFilteredItems.filteredItems,
217
210
  filteredRenderItems = _getFilteredItems.filteredRenderItems;
218
211
 
219
- var checkAllCheckbox = !showRemove && !pagination && getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled);
220
- var listBody = getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
212
+ var checkAllCheckbox = !showRemove && getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled);
213
+ var listBody = getListBody(prefixCls, placeholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
221
214
  var listCls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-with-pagination"), pagination), _defineProperty(_classNames, "".concat(prefixCls, "-with-footer"), footerDom), _classNames));
222
215
  return /*#__PURE__*/React.createElement("div", {
223
216
  className: listCls,
@@ -18,6 +18,7 @@ export interface TransferProps {
18
18
  noDataContent?: ((param: TransferRenderParam) => React.ReactNode) | React.ReactNode;
19
19
  titles?: string[];
20
20
  operations?: string[];
21
+ searchPlaceholder?: string[];
21
22
  showSearch?: boolean;
22
23
  filterOption?: (inputValue: string, item: TransferItem) => boolean;
23
24
  rowKey?: (record: TransferItem) => string;
@@ -43,6 +43,8 @@ var Transfer = function Transfer(props) {
43
43
  titles = _transferProps$titles === void 0 ? [] : _transferProps$titles,
44
44
  _transferProps$operat = transferProps.operations,
45
45
  operations = _transferProps$operat === void 0 ? [] : _transferProps$operat,
46
+ _transferProps$search = transferProps.searchPlaceholder,
47
+ searchPlaceholder = _transferProps$search === void 0 ? [] : _transferProps$search,
46
48
  showSearch = transferProps.showSearch,
47
49
  filterOption = transferProps.filterOption,
48
50
  rowKey = transferProps.rowKey,
@@ -78,6 +80,8 @@ var Transfer = function Transfer(props) {
78
80
  var mergedPagination = !children && pagination;
79
81
  var leftTitle = titles[0] || transferLang.leftTitle;
80
82
  var rightTitle = titles[1] || transferLang.rightTitle;
83
+ var leftPlaceholder = searchPlaceholder[0] || transferLang.searchPlaceholder[0];
84
+ var rightPlaceholder = searchPlaceholder[1] || transferLang.searchPlaceholder[1];
81
85
 
82
86
  var setStateKeys = function setStateKeys(direction, keys) {
83
87
  if (direction === 'left') {
@@ -279,6 +283,7 @@ var Transfer = function Transfer(props) {
279
283
  style: style
280
284
  }, /*#__PURE__*/React.createElement(List, {
281
285
  prefixCls: "".concat(transferPrefixCls, "-list"),
286
+ placeholder: leftPlaceholder,
282
287
  titleText: leftTitle,
283
288
  dataSource: leftDataSource,
284
289
  filterOption: filterOption,
@@ -310,6 +315,7 @@ var Transfer = function Transfer(props) {
310
315
  oneWay: oneWay
311
316
  }), /*#__PURE__*/React.createElement(List, {
312
317
  prefixCls: "".concat(transferPrefixCls, "-list"),
318
+ placeholder: rightPlaceholder,
313
319
  titleText: rightTitle,
314
320
  dataSource: rightDataSource,
315
321
  filterOption: filterOption,
@@ -131,7 +131,8 @@
131
131
  flex-grow: 1;
132
132
  font-size: var(--kd-c-tree-font-size, var(--kd-g-font-size-small, 12px));
133
133
  color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
134
- margin-left: var(--kd-c-tree-spacing-margin-left, 16px);
134
+ margin-left: var(--kd-c-tree-spacing-margin-left, 0px);
135
+ padding: var(--kd-c-tree-spacing-padding-vertical, 3px) 0;
135
136
  }
136
137
  .kd-tree-root {
137
138
  min-width: 100%;
@@ -313,16 +314,19 @@
313
314
  }
314
315
  .kd-tree-node-drag-over {
315
316
  background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
316
- border: 2px solid var(--kd-c-tree-node-drag-over-color-border, #5582f3);
317
+ -webkit-box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
318
+ box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
317
319
  }
318
- .kd-tree-node-drag-line {
320
+ .kd-tree-node-drag-line-top,
321
+ .kd-tree-node-drag-line-bottom {
319
322
  position: absolute;
320
323
  left: 0;
321
- top: 100%;
324
+ top: 0;
322
325
  width: 100%;
323
326
  border-top: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
324
327
  }
325
- .kd-tree-node-drag-line::before {
328
+ .kd-tree-node-drag-line-top::before,
329
+ .kd-tree-node-drag-line-bottom::before {
326
330
  content: '';
327
331
  width: 4px;
328
332
  height: 4px;
@@ -334,6 +338,12 @@
334
338
  -webkit-transform: translateY(-50%);
335
339
  transform: translateY(-50%);
336
340
  }
341
+ .kd-tree-node-drag-line-top {
342
+ top: 0;
343
+ }
344
+ .kd-tree-node-drag-line-bottom {
345
+ top: 100%;
346
+ }
337
347
  .kd-tree-node-leaf-icon {
338
348
  height: var(--kd-c-tree-node-icon-sizing-height, 16px);
339
349
  width: var(--kd-c-tree-node-icon-sizing-width, 16px);
@@ -12,6 +12,7 @@
12
12
  font-size: @tree-font-size;
13
13
  color: @tree-color-text;
14
14
  margin-left: @tree-margin-left;
15
+ padding: @tree-padding-vertical 0;
15
16
  &-root {
16
17
  min-width: 100%;
17
18
  flex-shrink: 0;
@@ -136,26 +137,35 @@
136
137
 
137
138
  &-drag-over {
138
139
  background-color: @tree-node-drag-over-color-background;
139
- border: 2px solid @tree-node-drag-over-border-color;
140
+ box-shadow: inset 0 0 0 2px @tree-node-drag-over-border-color;
140
141
  }
141
142
 
142
143
  &-drag-line {
143
- position: absolute;
144
- left: 0;
145
- top: 100%;
146
- width: 100%;
147
- border-top: 2px solid @tree-node-drag-line-border-color;
148
-
149
- &::before {
150
- content: '';
151
- width: 4px;
152
- height: 4px;
153
- background-color: #fff;
154
- border-radius: 50%;
155
- border: 2px solid @tree-node-drag-line-border-color;
144
+ &-top, &-bottom {
156
145
  position: absolute;
157
- top: -1px;
158
- transform: translateY(-50%);
146
+ left: 0;
147
+ top: 0;
148
+ width: 100%;
149
+ border-top: 2px solid @tree-node-drag-line-border-color;
150
+
151
+ &::before {
152
+ content: '';
153
+ width: 4px;
154
+ height: 4px;
155
+ background-color: #fff;
156
+ border-radius: 50%;
157
+ border: 2px solid @tree-node-drag-line-border-color;
158
+ position: absolute;
159
+ top: -1px;
160
+ transform: translateY(-50%);
161
+ }
162
+ }
163
+ &-top {
164
+ top: 0;
165
+ }
166
+
167
+ &-bottom {
168
+ top: 100%;
159
169
  }
160
170
  }
161
171
  &-leaf-icon {
@@ -22,7 +22,10 @@
22
22
  @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
23
23
  @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
24
24
  @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
25
- @tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 16px);
25
+
26
+ // spacing
27
+ @tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 0px);
28
+ @tree-padding-vertical: var(~'@{tree-prefix}-spacing-padding-vertical', 3px);
26
29
 
27
30
  // font
28
31
  @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);
package/es/tree/tree.js CHANGED
@@ -250,45 +250,32 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
250
250
  }, [onDragStart]);
251
251
  var handleDragOver = React.useCallback(function (event, node, dropTarget) {
252
252
  var dropPos = calcDropPosition(event, dropTarget);
253
- setDropPosition(dropPos);
254
- var dragNode = getDragNode();
255
253
 
256
- if (dragNode.key === node.key) {
257
- setDropPosition(null);
254
+ if (!delayedDragEnterRef.current) {
255
+ delayedDragEnterRef.current = {};
258
256
  }
259
257
 
260
- onDragOver && onDragOver({
261
- event: event,
262
- node: node
263
- });
264
- }, [onDragOver]);
265
- var handleDragLeave = React.useCallback(function (event, node) {
266
- onDragLeave && onDragLeave({
267
- event: event,
268
- node: node
269
- });
270
- }, [onDragLeave]);
271
- var handleDragEnter = React.useCallback(function (event, node, dropTarget) {
258
+ if (dropPos !== 0 && dropPos !== dropPosition) {
259
+ _Object$keys(delayedDragEnterRef.current).forEach(function (key) {
260
+ clearTimeout(delayedDragEnterRef.current[key]);
261
+ delayedDragEnterRef.current[key] = null;
262
+ });
263
+ }
264
+
265
+ setDropPosition(dropPos);
272
266
  var key = node.key,
273
267
  pos = node.pos;
274
268
  var dragNode = getDragNode();
275
269
 
276
- if (!dragNode) {
277
- return;
278
- }
279
-
280
- if (!delayedDragEnterRef.current) {
281
- delayedDragEnterRef.current = {};
270
+ if (dragNode.key === node.key) {
271
+ setDropPosition(null);
282
272
  }
283
273
 
284
- _Object$keys(delayedDragEnterRef.current).forEach(function (key) {
285
- clearTimeout(delayedDragEnterRef.current[key]);
286
- });
274
+ if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key && dropPos === 0) {
275
+ if (dragNode.key === node.key || delayedDragEnterRef.current[pos]) {
276
+ return;
277
+ }
287
278
 
288
- if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
289
- var dragPos = calcDropPosition(event, dropTarget);
290
- setDragOverNodeKey(key);
291
- setDropPosition(dragPos);
292
279
  delayedDragEnterRef.current[pos] = setTimeout(function () {
293
280
  var newExpandedKeys = _toConsumableArray(expandedKeys);
294
281
 
@@ -307,13 +294,36 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
307
294
  }, 800);
308
295
  }
309
296
 
297
+ onDragOver && onDragOver({
298
+ event: event,
299
+ node: node
300
+ });
301
+ }, [TreeProps, dropPosition, expandedKeys, onDragOver, onExpand, setExpandedKeys]);
302
+ var handleDragLeave = React.useCallback(function (event, node) {
303
+ onDragLeave && onDragLeave({
304
+ event: event,
305
+ node: node
306
+ });
307
+ }, [onDragLeave]);
308
+ var handleDragEnter = React.useCallback(function (event, node, _dropTarget) {
309
+ var key = node.key;
310
+ var dragNode = getDragNode();
311
+
312
+ if (!dragNode) {
313
+ return;
314
+ }
315
+
316
+ if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
317
+ setDragOverNodeKey(key);
318
+ }
319
+
310
320
  onDragEnter && onDragEnter({
311
321
  event: event,
312
322
  node: node
313
323
  });
314
- }, [TreeProps, expandedKeys, onDragEnter, onExpand, setExpandedKeys]);
324
+ }, [onDragEnter]);
315
325
  var handleDragEnd = React.useCallback(function (event, node) {
316
- setDragOverNodeKey('');
326
+ setDragOverNodeKey(null);
317
327
  onDragEnd && onDragEnd({
318
328
  event: event,
319
329
  node: node
@@ -322,6 +332,8 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
322
332
  var handleDrop = React.useCallback(function (event, node, dragNode, dragNodesKeys) {
323
333
  var _context3;
324
334
 
335
+ setDragOverNodeKey(null);
336
+ setDropPosition(null);
325
337
  var pos = getPos(flattenAllData, dragNodesKeys);
326
338
 
327
339
  var keys = _concatInstanceProperty(_context3 = getAllChildKeys(flattenAllData, pos)).call(_context3, dragNodesKeys);
@@ -419,6 +431,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
419
431
  item.getDragNode = getDragNode;
420
432
  item.setDragNode = setDragNode;
421
433
  item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
434
+ item.dropPosition = dropPosition;
422
435
  item.expandOnClickNode = expandOnClickNode;
423
436
  item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
424
437
  item.loadData = loadData;
@@ -58,6 +58,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
58
58
  indeterminate = TreeNodeProps.indeterminate,
59
59
  estimatedItemSize = TreeNodeProps.estimatedItemSize,
60
60
  dragOver = TreeNodeProps.dragOver,
61
+ dropPosition = TreeNodeProps.dropPosition,
61
62
  expandOnClickNode = TreeNodeProps.expandOnClickNode,
62
63
  loading = TreeNodeProps.loading,
63
64
  onExpand = TreeNodeProps.onExpand,
@@ -69,7 +70,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
69
70
  onDragEnd = TreeNodeProps.onDragEnd,
70
71
  onDrop = TreeNodeProps.onDrop,
71
72
  onSelect = TreeNodeProps.onSelect,
72
- others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
73
+ others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
73
74
 
74
75
  var nodeData = React.useMemo(function () {
75
76
  return _extends({
@@ -237,7 +238,9 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
237
238
  }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), /*#__PURE__*/React.createElement("div", {
238
239
  className: classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap"), true), _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-hover"), !expandOnClickNode && !disabled), _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-selected"), selected && selectable && !disabled && !expandOnClickNode), _classNames5)),
239
240
  onClick: expandOnClickNode ? undefined : handleClick
240
- }, checkable ? /*#__PURE__*/React.createElement(Checkbox, {
241
+ }, showDragLine && dropPosition === -1 && /*#__PURE__*/React.createElement("span", {
242
+ className: classNames("".concat(treeNodePrefixCls, "-drag-line-top"))
243
+ }), checkable ? /*#__PURE__*/React.createElement(Checkbox, {
241
244
  onChange: handleOnchange,
242
245
  checked: checked,
243
246
  indeterminate: !disabled && indeterminate,
@@ -249,8 +252,8 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
249
252
  className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
250
253
  }, title)) : /*#__PURE__*/React.createElement("span", {
251
254
  className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
252
- }, title), showDragLine && !dragOver && /*#__PURE__*/React.createElement("span", {
253
- className: classNames("".concat(treeNodePrefixCls, "-drag-line"))
255
+ }, title), showDragLine && dropPosition === 1 && /*#__PURE__*/React.createElement("span", {
256
+ className: classNames("".concat(treeNodePrefixCls, "-drag-line-bottom"))
254
257
  }))));
255
258
  };
256
259
 
@@ -312,6 +315,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
312
315
  var handleDrop = React.useCallback(function (e) {
313
316
  if (!draggable) return;
314
317
  setShowDragLine(false);
318
+ setForbiddenChildrenPointerEvents(false);
315
319
  var data = getDragNode();
316
320
  var sourceKey = data === null || data === void 0 ? void 0 : data.key;
317
321
 
@@ -124,7 +124,7 @@
124
124
  font-size: var(--kd-c-avatar-font-size-base, 22px);
125
125
  }
126
126
  .kd-avatar.kd-avatar-icon > .kdicon {
127
- vertical-align: unset !important;
127
+ vertical-align: top;
128
128
  }
129
129
  .kd-avatar-lg {
130
130
  width: var(--kd-c-avatar-size-large, 60px);
@@ -142,7 +142,7 @@
142
142
  font-size: var(--kd-c-avatar-font-size-large, 36px);
143
143
  }
144
144
  .kd-avatar-lg.kd-avatar-icon > .kdicon {
145
- vertical-align: unset !important;
145
+ vertical-align: top;
146
146
  }
147
147
  .kd-avatar-sm {
148
148
  width: var(--kd-c-avatar-size-small, 32px);
@@ -160,7 +160,7 @@
160
160
  font-size: var(--kd-c-avatar-font-size-small, 18px);
161
161
  }
162
162
  .kd-avatar-sm.kd-avatar-icon > .kdicon {
163
- vertical-align: unset !important;
163
+ vertical-align: top;
164
164
  }
165
165
  .kd-avatar-xs {
166
166
  width: var(--kd-c-avatar-size-x-small, 24px);
@@ -178,7 +178,7 @@
178
178
  font-size: var(--kd-c-avatar-font-size-x-small, 14px);
179
179
  }
180
180
  .kd-avatar-xs.kd-avatar-icon > .kdicon {
181
- vertical-align: unset !important;
181
+ vertical-align: top;
182
182
  }
183
183
  .kd-avatar-square {
184
184
  border-radius: var(--kd-c-avatar-border-radius, 2px);
@@ -16,7 +16,7 @@
16
16
  font-size: @font-size;
17
17
 
18
18
  & > .@{icon-prefix-cls} {
19
- vertical-align: unset !important;
19
+ vertical-align: top;
20
20
  }
21
21
  }
22
22
  }
@@ -36,28 +36,17 @@ var DATE_ROW_COUNT = 6;
36
36
  function Calendar(props) {
37
37
  var context = (0, _react.useContext)(_context2.default);
38
38
  var prefixCls = context.prefixCls,
39
- viewDate = context.viewDate;
39
+ viewDate = context.viewDate,
40
+ locale = context.locale;
40
41
  var picker = props.picker,
41
- useWeekdaysShort = props.useWeekdaysShort,
42
42
  showWeekNumber = props.showWeekNumber,
43
43
  showWeeksTitle = props.showWeeksTitle,
44
44
  showTime = props.showTime,
45
- disabledDate = props.disabledDate; // const isWeekInMonth = (startOfWeek: DateType) => {
46
- // const endOfWeek = addDays(startOfWeek, 6)
47
- // return isSameMonth(startOfWeek, viewDate) || isSameMonth(endOfWeek, viewDate)
48
- // }
49
- // 获取title部分 周的格式
50
-
51
- var formatWeekday = function formatWeekday(day) {
52
- return useWeekdaysShort ? (0, _dateFns.getWeekdayShortInLocale)(day) : (0, _dateFns.getWeekdayMinInLocale)(day);
53
- }; // const getEffectTime = () => {
54
- // }
55
-
45
+ disabledDate = props.disabledDate;
56
46
 
57
47
  var renderWeeksTitle = function renderWeeksTitle() {
58
48
  var _context;
59
49
 
60
- var startOfWeek = (0, _dateFns.getStartOfWeek)(viewDate);
61
50
  var dayNames = [];
62
51
  var weekTitleCls = (0, _classnames.default)("".concat(prefixCls, "-weektitle"));
63
52
  var weekTitleItemCls = (0, _classnames.default)("".concat(prefixCls, "-weektitle-item"));
@@ -73,8 +62,7 @@ function Calendar(props) {
73
62
  return /*#__PURE__*/_react.default.createElement("div", {
74
63
  className: weekTitleCls
75
64
  }, (0, _concat.default)(dayNames).call(dayNames, (0, _map.default)(_context = [0, 1, 2, 3, 4, 5, 6]).call(_context, function (offset) {
76
- var day = (0, _dateFns.addDays)(startOfWeek, offset);
77
- var weekDayName = formatWeekday(day);
65
+ var weekDayName = locale.weekTitle[offset];
78
66
  return /*#__PURE__*/_react.default.createElement("div", {
79
67
  key: offset,
80
68
  className: weekTitleItemCls
@@ -51,7 +51,8 @@ function Panel(props) {
51
51
  var prefixCls = context.prefixCls,
52
52
  viewDate = context.viewDate,
53
53
  setViewDate = context.setViewDate,
54
- panelPosition = context.panelPosition;
54
+ panelPosition = context.panelPosition,
55
+ locale = context.locale;
55
56
  var _props$picker = props.picker,
56
57
  picker = _props$picker === void 0 ? 'date' : _props$picker,
57
58
  format = props.format,
@@ -149,7 +150,7 @@ function Panel(props) {
149
150
  var year = (0, _dateFns.getYear)(viewDate);
150
151
  var headerCls = (0, _classnames.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-month"));
151
152
  return {
152
- children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, year, "\u5E74"),
153
+ children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, year + locale.year),
153
154
  className: headerCls
154
155
  };
155
156
  };
@@ -159,7 +160,7 @@ function Panel(props) {
159
160
  var month = (0, _dateFns.getMonth)(viewDate) + 1;
160
161
  var headerCls = (0, _classnames.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
161
162
  return {
162
- children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, year, "\u5E74"), /*#__PURE__*/_react.default.createElement("span", null, month, "\u6708")),
163
+ children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, year + locale.year), /*#__PURE__*/_react.default.createElement("span", null, month + locale.month)),
163
164
  className: headerCls
164
165
  };
165
166
  };
@@ -10,6 +10,9 @@ export interface Locale {
10
10
  'DatePicker.now': string;
11
11
  'DatePicker.confrim': string;
12
12
  'DatePicker.today': string;
13
+ 'DatePicker.year': string;
14
+ 'DatePicker.month': string;
15
+ 'DatePicker.weekTitle': [string, string, string, string, string, string, string];
13
16
  'DatePicker.rangePlaceholder': [string, string];
14
17
  'DatePicker.rangeYearPlaceholder': [string, string];
15
18
  'DatePicker.rangeMonthPlaceholder': [string, string];
@@ -28,6 +31,9 @@ export interface InnerLocale {
28
31
  now: string;
29
32
  confrim: string;
30
33
  today: string;
34
+ year: string;
35
+ month: string;
36
+ weekTitle: [string, string, string, string, string, string, string];
31
37
  rangePlaceholder: [string, string];
32
38
  rangeYearPlaceholder: [string, string];
33
39
  rangeMonthPlaceholder: [string, string];