@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.
- package/CHANGELOG.md +41 -0
- package/dist/kdesign-complete.less +69 -35
- package/dist/kdesign.css +65 -26
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +148 -124
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/avatar/style/index.css +4 -4
- package/es/avatar/style/mixin.less +1 -1
- package/es/date-picker/calendar.js +5 -17
- package/es/date-picker/date-panel.js +4 -3
- package/es/date-picker/interface.d.ts +6 -0
- package/es/date-picker/locale/zh_CN.js +3 -0
- package/es/date-picker/panel/week/week.js +1 -1
- package/es/date-picker/range-picker.js +1 -0
- package/es/date-picker/style/index.css +45 -16
- package/es/date-picker/style/index.less +36 -16
- package/es/date-picker/style/mixin.less +1 -0
- package/es/date-picker/style/token.less +1 -1
- package/es/dropdown/dropdown.js +1 -1
- package/es/input/ClearableLabeledInput.d.ts +1 -1
- package/es/input/ClearableLabeledInput.js +3 -3
- package/es/input/TextArea.d.ts +1 -1
- package/es/input/TextArea.js +2 -2
- package/es/input/input.d.ts +1 -1
- package/es/locale/locale.d.ts +7 -1
- package/es/locale/zh-CN.d.ts +4 -1
- package/es/locale/zh-CN.js +1 -1
- package/es/pagination/pagination.js +2 -1
- package/es/search/quick-search.js +1 -1
- package/es/search/search.js +3 -2
- package/es/slider/slider.js +1 -1
- package/es/slider/sliderTooltip.js +4 -3
- package/es/steps/Steps.js +0 -1
- package/es/transfer/list-body.js +14 -3
- package/es/transfer/list.d.ts +1 -0
- package/es/transfer/list.js +7 -14
- package/es/transfer/transfer.d.ts +1 -0
- package/es/transfer/transfer.js +6 -0
- package/es/tree/style/index.css +15 -5
- package/es/tree/style/index.less +26 -16
- package/es/tree/style/token.less +4 -1
- package/es/tree/tree.js +44 -31
- package/es/tree/treeNode.js +8 -4
- package/lib/avatar/style/index.css +4 -4
- package/lib/avatar/style/mixin.less +1 -1
- package/lib/date-picker/calendar.js +4 -16
- package/lib/date-picker/date-panel.js +4 -3
- package/lib/date-picker/interface.d.ts +6 -0
- package/lib/date-picker/locale/zh_CN.js +3 -0
- package/lib/date-picker/panel/week/week.js +1 -1
- package/lib/date-picker/range-picker.js +1 -0
- package/lib/date-picker/style/index.css +45 -16
- package/lib/date-picker/style/index.less +36 -16
- package/lib/date-picker/style/mixin.less +1 -0
- package/lib/date-picker/style/token.less +1 -1
- package/lib/dropdown/dropdown.js +1 -1
- package/lib/input/ClearableLabeledInput.d.ts +1 -1
- package/lib/input/ClearableLabeledInput.js +3 -3
- package/lib/input/TextArea.d.ts +1 -1
- package/lib/input/TextArea.js +2 -2
- package/lib/input/input.d.ts +1 -1
- package/lib/locale/locale.d.ts +7 -1
- package/lib/locale/zh-CN.d.ts +4 -1
- package/lib/locale/zh-CN.js +1 -1
- package/lib/pagination/pagination.js +3 -1
- package/lib/search/quick-search.js +1 -1
- package/lib/search/search.js +3 -2
- package/lib/slider/slider.js +1 -1
- package/lib/slider/sliderTooltip.js +4 -3
- package/lib/steps/Steps.js +0 -1
- package/lib/transfer/list-body.js +13 -2
- package/lib/transfer/list.d.ts +1 -0
- package/lib/transfer/list.js +6 -14
- package/lib/transfer/transfer.d.ts +1 -0
- package/lib/transfer/transfer.js +6 -0
- package/lib/tree/style/index.css +15 -5
- package/lib/tree/style/index.less +26 -16
- package/lib/tree/style/token.less +4 -1
- package/lib/tree/tree.js +45 -32
- package/lib/tree/treeNode.js +8 -4
- 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 === '
|
|
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
|
|
package/es/search/search.js
CHANGED
|
@@ -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 === '
|
|
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
|
|
package/es/slider/slider.js
CHANGED
|
@@ -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
|
-
|
|
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
package/es/transfer/list-body.js
CHANGED
|
@@ -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", {
|
package/es/transfer/list.d.ts
CHANGED
|
@@ -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;
|
package/es/transfer/list.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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,
|
|
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:
|
|
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 &&
|
|
220
|
-
var listBody = getListBody(prefixCls,
|
|
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;
|
package/es/transfer/transfer.js
CHANGED
|
@@ -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,
|
package/es/tree/style/index.css
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
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:
|
|
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);
|
package/es/tree/style/index.less
CHANGED
|
@@ -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
|
-
|
|
140
|
+
box-shadow: inset 0 0 0 2px @tree-node-drag-over-border-color;
|
|
140
141
|
}
|
|
141
142
|
|
|
142
143
|
&-drag-line {
|
|
143
|
-
|
|
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
|
-
|
|
158
|
-
|
|
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 {
|
package/es/tree/style/token.less
CHANGED
|
@@ -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
|
-
|
|
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 (
|
|
257
|
-
|
|
254
|
+
if (!delayedDragEnterRef.current) {
|
|
255
|
+
delayedDragEnterRef.current = {};
|
|
258
256
|
}
|
|
259
257
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
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 (
|
|
277
|
-
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
if (!delayedDragEnterRef.current) {
|
|
281
|
-
delayedDragEnterRef.current = {};
|
|
270
|
+
if (dragNode.key === node.key) {
|
|
271
|
+
setDropPosition(null);
|
|
282
272
|
}
|
|
283
273
|
|
|
284
|
-
|
|
285
|
-
|
|
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
|
-
}, [
|
|
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;
|
package/es/tree/treeNode.js
CHANGED
|
@@ -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
|
-
},
|
|
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 &&
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
181
|
+
vertical-align: top;
|
|
182
182
|
}
|
|
183
183
|
.kd-avatar-square {
|
|
184
184
|
border-radius: var(--kd-c-avatar-border-radius, 2px);
|
|
@@ -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;
|
|
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
|
|
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
|
|
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
|
|
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];
|