@kdcloudjs/kdesign 1.6.14 → 1.6.16
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 +53 -0
- package/dist/kdesign-complete.less +307 -239
- package/dist/kdesign.css +77 -5
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +950 -347
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +4 -4
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.d.ts +1 -0
- package/es/_utils/usePopper.js +3 -1
- package/es/button/button.js +1 -1
- package/es/button/style/index.css +3 -0
- package/es/button/style/index.less +4 -0
- package/es/button/style/token.less +1 -0
- package/es/carousel/carousel.d.ts +1 -0
- package/es/carousel/carousel.js +66 -3
- package/es/carousel/style/index.css +39 -0
- package/es/carousel/style/index.less +40 -0
- package/es/carousel/style/token.less +2 -0
- package/es/config-provider/compDefaultProps.d.ts +1 -0
- package/es/config-provider/compDefaultProps.js +2 -1
- package/es/date-picker/range/input-range.js +1 -1
- package/es/date-picker/single/input-date.js +1 -1
- package/es/form/Field.js +7 -1
- package/es/form/FieldContext.js +1 -0
- package/es/form/hooks/useForm.js +14 -20
- package/es/form/interface.d.ts +1 -0
- package/es/image/preview.d.ts +1 -0
- package/es/image/preview.js +31 -6
- package/es/input/style/index.css +4 -3
- package/es/input/style/index.less +230 -227
- package/es/input/style/token.less +11 -12
- package/es/modal/modal.js +4 -8
- package/es/modal/style/index.css +11 -0
- package/es/modal/style/index.less +10 -0
- package/es/select/select.js +15 -11
- package/es/style/core/motion/other.less +9 -0
- package/es/style/icon/kdicon.css +3 -1
- package/es/style/icon/kdicon.woff +0 -0
- package/es/style/index.css +16 -0
- package/es/table/feature/useFooterDataSource.d.ts +3 -0
- package/es/table/feature/useFooterDataSource.js +11 -0
- package/es/table/interface.d.ts +2 -0
- package/es/table/table.js +10 -9
- package/es/tooltip/tooltip.d.ts +1 -1
- package/es/tooltip/tooltip.js +10 -2
- package/es/tree/tree.d.ts +8 -0
- package/es/tree/tree.js +46 -17
- package/es/tree/treeHooks.d.ts +3 -3
- package/es/tree/treeHooks.js +9 -9
- package/es/tree/utils/treeUtils.d.ts +20 -6
- package/es/tree/utils/treeUtils.js +222 -40
- package/lib/_utils/usePopper.d.ts +1 -0
- package/lib/_utils/usePopper.js +3 -1
- package/lib/button/button.js +1 -1
- package/lib/button/style/index.css +3 -0
- package/lib/button/style/index.less +4 -0
- package/lib/button/style/token.less +1 -0
- package/lib/carousel/carousel.d.ts +1 -0
- package/lib/carousel/carousel.js +69 -2
- package/lib/carousel/style/index.css +39 -0
- package/lib/carousel/style/index.less +40 -0
- package/lib/carousel/style/token.less +2 -0
- package/lib/config-provider/compDefaultProps.d.ts +1 -0
- package/lib/config-provider/compDefaultProps.js +2 -1
- package/lib/date-picker/range/input-range.js +1 -1
- package/lib/date-picker/single/input-date.js +1 -1
- package/lib/form/Field.js +7 -1
- package/lib/form/FieldContext.js +1 -0
- package/lib/form/hooks/useForm.js +13 -20
- package/lib/form/interface.d.ts +1 -0
- package/lib/image/preview.d.ts +1 -0
- package/lib/image/preview.js +31 -6
- package/lib/input/style/index.css +4 -3
- package/lib/input/style/index.less +230 -227
- package/lib/input/style/token.less +11 -12
- package/lib/modal/modal.js +4 -8
- package/lib/modal/style/index.css +11 -0
- package/lib/modal/style/index.less +10 -0
- package/lib/select/select.js +15 -14
- package/lib/style/core/motion/other.less +9 -0
- package/lib/style/icon/kdicon.css +3 -1
- package/lib/style/icon/kdicon.woff +0 -0
- package/lib/style/index.css +16 -0
- package/lib/table/feature/useFooterDataSource.d.ts +3 -0
- package/lib/table/feature/useFooterDataSource.js +19 -0
- package/lib/table/interface.d.ts +2 -0
- package/lib/table/table.js +11 -9
- package/lib/tooltip/tooltip.d.ts +1 -1
- package/lib/tooltip/tooltip.js +16 -5
- package/lib/tree/tree.d.ts +8 -0
- package/lib/tree/tree.js +45 -16
- package/lib/tree/treeHooks.d.ts +3 -3
- package/lib/tree/treeHooks.js +8 -8
- package/lib/tree/utils/treeUtils.d.ts +20 -6
- package/lib/tree/utils/treeUtils.js +234 -39
- package/package.json +1 -1
package/lib/select/select.js
CHANGED
|
@@ -111,8 +111,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
111
111
|
|
|
112
112
|
var realChildren = Array.isArray(options) ? options : (0, _reactChildren.toArray)(children); // options配置项和默认children
|
|
113
113
|
|
|
114
|
-
var innerRef = _react.
|
|
115
|
-
|
|
114
|
+
var innerRef = (0, _react.useRef)();
|
|
116
115
|
var selectRef = ref || innerRef;
|
|
117
116
|
var searchRef = (0, _react.useRef)(null); // 搜索框ref
|
|
118
117
|
|
|
@@ -123,7 +122,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
123
122
|
selectMulOpts: []
|
|
124
123
|
}); // 多选ref已选中项
|
|
125
124
|
|
|
126
|
-
var measureRef = _react.
|
|
125
|
+
var measureRef = (0, _react.useRef)(null);
|
|
127
126
|
|
|
128
127
|
var _useState = (0, _react.useState)([]),
|
|
129
128
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -166,12 +165,10 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
166
165
|
var multipleFooterCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选,单选公共样式
|
|
167
166
|
|
|
168
167
|
var commCls = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames6, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _classNames6));
|
|
169
|
-
|
|
170
|
-
_react.default.useEffect(function () {
|
|
168
|
+
(0, _react.useEffect)(function () {
|
|
171
169
|
setOptionShow(!!props.visible);
|
|
172
170
|
}, [props.visible]); // realchildren更新时数据处理---待解决
|
|
173
171
|
|
|
174
|
-
|
|
175
172
|
(0, _react.useEffect)(function () {
|
|
176
173
|
if (isMultiple) {
|
|
177
174
|
multipleRef.current.selectedVal = initValue || [];
|
|
@@ -257,9 +254,9 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
257
254
|
var handleClick = function handleClick() {
|
|
258
255
|
if (disabled) return;
|
|
259
256
|
|
|
260
|
-
if (
|
|
257
|
+
if (optionShow) {
|
|
261
258
|
var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
|
|
262
|
-
onDropdownVisibleChange && onDropdownVisibleChange(
|
|
259
|
+
onDropdownVisibleChange && onDropdownVisibleChange(true);
|
|
263
260
|
}
|
|
264
261
|
};
|
|
265
262
|
|
|
@@ -496,9 +493,8 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
496
493
|
}; // 多选模式下清除某一项
|
|
497
494
|
|
|
498
495
|
|
|
499
|
-
var handleRemove = function handleRemove(e) {
|
|
496
|
+
var handleRemove = function handleRemove(e, tag) {
|
|
500
497
|
if (disabled) return;
|
|
501
|
-
var tag = e.currentTarget.parentNode.getAttribute('data-tag');
|
|
502
498
|
var _multipleRef$current4 = multipleRef.current,
|
|
503
499
|
selectedVal = _multipleRef$current4.selectedVal,
|
|
504
500
|
selectMulOpts = _multipleRef$current4.selectMulOpts;
|
|
@@ -698,7 +694,9 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
698
694
|
size: size,
|
|
699
695
|
closable: true,
|
|
700
696
|
disabled: disabled,
|
|
701
|
-
onClose:
|
|
697
|
+
onClose: function onClose(e) {
|
|
698
|
+
return handleRemove(e, value);
|
|
699
|
+
},
|
|
702
700
|
"data-tag": value
|
|
703
701
|
}, label));
|
|
704
702
|
}), maxTagCount && mulOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/_react.default.createElement("span", {
|
|
@@ -767,8 +765,10 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
767
765
|
};
|
|
768
766
|
|
|
769
767
|
var handleVisibleChange = function handleVisibleChange(visible) {
|
|
770
|
-
|
|
771
|
-
|
|
768
|
+
if (visible !== optionShow) {
|
|
769
|
+
props.visible === undefined && setOptionShow(visible);
|
|
770
|
+
onVisibleChange && onVisibleChange(visible);
|
|
771
|
+
}
|
|
772
772
|
};
|
|
773
773
|
|
|
774
774
|
var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
|
|
@@ -777,7 +777,8 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
777
777
|
popperStyle: catchStyle(),
|
|
778
778
|
defaultVisible: optionShow,
|
|
779
779
|
visible: optionShow,
|
|
780
|
-
onVisibleChange: handleVisibleChange
|
|
780
|
+
onVisibleChange: handleVisibleChange,
|
|
781
|
+
clickToClose: !isShowSearch
|
|
781
782
|
});
|
|
782
783
|
return (0, _usePopper.default)(renderSelect(), renderContent(), popperProps);
|
|
783
784
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@font-face {
|
|
2
2
|
font-family: "kdicon";
|
|
3
|
-
src: url("kdicon.woff?t=
|
|
3
|
+
src: url("kdicon.woff?t=1668600442688") format("woff")
|
|
4
4
|
}
|
|
5
5
|
.kdicon {
|
|
6
6
|
font-family: 'kdicon' !important;
|
|
@@ -24,8 +24,10 @@
|
|
|
24
24
|
.kdicon-analysis:before { content: "\e6ce"; }
|
|
25
25
|
.kdicon-arrow-down-solid:before { content: "\e656"; }
|
|
26
26
|
.kdicon-arrow-down:before { content: "\e627"; }
|
|
27
|
+
.kdicon-arrow-left-circle-solid:before { content: "\e720"; }
|
|
27
28
|
.kdicon-arrow-left-solid:before { content: "\e657"; }
|
|
28
29
|
.kdicon-arrow-left:before { content: "\e63f"; }
|
|
30
|
+
.kdicon-arrow-right-circle-solid:before { content: "\e71f"; }
|
|
29
31
|
.kdicon-arrow-right-solid:before { content: "\e655"; }
|
|
30
32
|
.kdicon-arrow-right:before { content: "\e62c"; }
|
|
31
33
|
.kdicon-arrow-up-solid:before { content: "\e654"; }
|
|
Binary file
|
package/lib/style/index.css
CHANGED
|
@@ -383,6 +383,22 @@
|
|
|
383
383
|
opacity: 0;
|
|
384
384
|
}
|
|
385
385
|
}
|
|
386
|
+
@-webkit-keyframes kdModalEffect {
|
|
387
|
+
0% {
|
|
388
|
+
opacity: 0;
|
|
389
|
+
}
|
|
390
|
+
100% {
|
|
391
|
+
opacity: 1;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
@keyframes kdModalEffect {
|
|
395
|
+
0% {
|
|
396
|
+
opacity: 0;
|
|
397
|
+
}
|
|
398
|
+
100% {
|
|
399
|
+
opacity: 1;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
386
402
|
.top-active {
|
|
387
403
|
-webkit-animation-name: kdZoomBottomIn;
|
|
388
404
|
animation-name: kdZoomBottomIn;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _table = require("@kdcloudjs/table");
|
|
9
|
+
|
|
10
|
+
function useFooterDataSource(pipeline, footerDataSource) {
|
|
11
|
+
if (footerDataSource) {
|
|
12
|
+
pipeline.use(_table.features.footerDataSource({
|
|
13
|
+
dataSource: footerDataSource
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
var _default = useFooterDataSource;
|
|
19
|
+
exports.default = _default;
|
package/lib/table/interface.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export declare type TableApi = {
|
|
|
14
14
|
getColumns: () => any[];
|
|
15
15
|
getDataSource: () => any[];
|
|
16
16
|
getFooterDataSource: () => any[];
|
|
17
|
+
clearRangeSelection: () => void;
|
|
17
18
|
};
|
|
18
19
|
export declare type TableInstance = {
|
|
19
20
|
api: TableApi;
|
|
@@ -44,6 +45,7 @@ export interface TableRowSelection {
|
|
|
44
45
|
column?: Partial<ArtColumnStaticPart>;
|
|
45
46
|
onChange?: (selectedRowKeys: string[], actionRowkey?: string, actionRowskeys?: string[], action?: string) => void;
|
|
46
47
|
isDisabled?(row: any, rowIndex: number): boolean;
|
|
48
|
+
highlightRowWhenSelected?: boolean;
|
|
47
49
|
}
|
|
48
50
|
export declare type TableRowDetail = RowDetailFeatureOptions;
|
|
49
51
|
export declare type TableFilter = FilterFeatureOptions;
|
package/lib/table/table.js
CHANGED
|
@@ -57,6 +57,8 @@ var _mergeCellHover = _interopRequireDefault(require("./feature/mergeCellHover")
|
|
|
57
57
|
|
|
58
58
|
var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
|
|
59
59
|
|
|
60
|
+
var _useFooterDataSource = _interopRequireDefault(require("./feature/useFooterDataSource"));
|
|
61
|
+
|
|
60
62
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
61
63
|
|
|
62
64
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -110,22 +112,21 @@ var Table = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
110
112
|
dataSource: dataSource
|
|
111
113
|
});
|
|
112
114
|
var pipelineRef = (0, _react.useRef)(pipeline);
|
|
113
|
-
pipelineRef.current = pipeline;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
pipeline.footerDataSource(footerDataSource);
|
|
119
|
-
}
|
|
115
|
+
pipelineRef.current = pipeline; // if (footerDataSource) {
|
|
116
|
+
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
117
|
+
// // @ts-ignore
|
|
118
|
+
// pipeline.footerDataSource(footerDataSource)
|
|
119
|
+
// }
|
|
120
120
|
|
|
121
121
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
122
|
-
var _a, _b, _c;
|
|
122
|
+
var _a, _b, _c, _d;
|
|
123
123
|
|
|
124
124
|
return {
|
|
125
125
|
api: {
|
|
126
126
|
getColumns: (_a = pipelineRef.current.getColumns) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current),
|
|
127
127
|
getDataSource: (_b = pipelineRef.current.getDataSource) === null || _b === void 0 ? void 0 : _b.bind(pipelineRef.current),
|
|
128
|
-
getFooterDataSource: (_c = pipelineRef.current.getFooterDataSource) === null || _c === void 0 ? void 0 : _c.bind(pipelineRef.current)
|
|
128
|
+
getFooterDataSource: (_c = pipelineRef.current.getFooterDataSource) === null || _c === void 0 ? void 0 : _c.bind(pipelineRef.current),
|
|
129
|
+
clearRangeSelection: (_d = pipelineRef.current.clearRangeSelection) === null || _d === void 0 ? void 0 : _d.bind(pipelineRef.current)
|
|
129
130
|
}
|
|
130
131
|
};
|
|
131
132
|
});
|
|
@@ -146,6 +147,7 @@ var Table = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
146
147
|
(0, _contextMenu.default)(pipeline, contextMenu);
|
|
147
148
|
(0, _useRangeSelection.default)(pipeline, rangeSelection);
|
|
148
149
|
(0, _mergeCellHover.default)(pipeline);
|
|
150
|
+
(0, _useFooterDataSource.default)(pipeline, footerDataSource);
|
|
149
151
|
/* -------------------------------------------------------------------------- */
|
|
150
152
|
|
|
151
153
|
/* after useTablePipeline, merge pipeline.getProps result */
|
package/lib/tooltip/tooltip.d.ts
CHANGED
package/lib/tooltip/tooltip.js
CHANGED
|
@@ -15,7 +15,7 @@ exports.default = void 0;
|
|
|
15
15
|
|
|
16
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
19
|
|
|
20
20
|
var _utils = require("../_utils");
|
|
21
21
|
|
|
@@ -27,28 +27,39 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
|
|
|
27
27
|
|
|
28
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
29
|
|
|
30
|
-
var Tooltip = /*#__PURE__*/
|
|
31
|
-
var _React$useContext =
|
|
30
|
+
var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
31
|
+
var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
|
|
32
32
|
getPrefixCls = _React$useContext.getPrefixCls,
|
|
33
33
|
pkgPrefixCls = _React$useContext.prefixCls,
|
|
34
34
|
userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
var allProps = (0, _utils.getCompProps)('ToolTip', userDefaultProps, props);
|
|
38
|
+
var status = (0, _react.useRef)();
|
|
38
39
|
var tip = allProps.tip,
|
|
39
40
|
children = allProps.children,
|
|
40
41
|
customPrefixcls = allProps.prefixCls; // className前缀
|
|
41
42
|
|
|
42
43
|
var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
|
|
43
|
-
|
|
44
|
+
|
|
45
|
+
var tiplocator = /*#__PURE__*/_react.default.cloneElement(_react.default.Children.count(children) === 1 && children.type ? children : /*#__PURE__*/_react.default.createElement("span", null, children), {
|
|
44
46
|
ref: children.ref || ref
|
|
45
47
|
});
|
|
48
|
+
|
|
49
|
+
var onVisibleChange = function onVisibleChange(v) {
|
|
50
|
+
if (status.current === v) return;
|
|
51
|
+
status.current = v;
|
|
52
|
+
props.onVisibleChange && props.onVisibleChange(v);
|
|
53
|
+
};
|
|
54
|
+
|
|
46
55
|
var popperProps = (0, _extends2.default)((0, _extends2.default)({}, allProps), {
|
|
47
|
-
prefixCls: prefixCls
|
|
56
|
+
prefixCls: prefixCls,
|
|
57
|
+
onVisibleChange: onVisibleChange
|
|
48
58
|
});
|
|
49
59
|
var tipPopper = typeof tip === 'function' ? tip() : tip;
|
|
50
60
|
return (0, _usePopper.default)(tiplocator, tipPopper, popperProps);
|
|
51
61
|
});
|
|
62
|
+
|
|
52
63
|
Tooltip.displayName = 'Tooltip';
|
|
53
64
|
var _default = Tooltip;
|
|
54
65
|
exports.default = _default;
|
package/lib/tree/tree.d.ts
CHANGED
|
@@ -57,5 +57,13 @@ export declare type TreeNodeData = {
|
|
|
57
57
|
showIcon?: boolean;
|
|
58
58
|
selectable?: boolean;
|
|
59
59
|
};
|
|
60
|
+
export declare type KeysDataType = {
|
|
61
|
+
[key: string]: TreeNodeData & {
|
|
62
|
+
pathParentKeys: string[];
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
export declare type PosDataType = {
|
|
66
|
+
[key: string]: TreeNodeData;
|
|
67
|
+
};
|
|
60
68
|
declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<unknown>>;
|
|
61
69
|
export default Tree;
|
package/lib/tree/tree.js
CHANGED
|
@@ -115,14 +115,8 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
115
115
|
return (0, _treeUtils.flattenAll)(treeData, []);
|
|
116
116
|
}, [treeData]),
|
|
117
117
|
flattenAllData = _React$useMemo.flattenAllData,
|
|
118
|
-
maxLevel = _React$useMemo.maxLevel
|
|
119
|
-
|
|
120
|
-
var _useChecked = (0, _treeHooks.useChecked)(checkStrictly, checkedKeysProps, defaultCheckedKeys, flattenAllData, maxLevel, checkable),
|
|
121
|
-
_useChecked2 = (0, _slicedToArray2.default)(_useChecked, 4),
|
|
122
|
-
checkedKeys = _useChecked2[0],
|
|
123
|
-
halfCheckedKeys = _useChecked2[1],
|
|
124
|
-
setCheckedKeys = _useChecked2[2],
|
|
125
|
-
setHalfCheckedKeys = _useChecked2[3];
|
|
118
|
+
maxLevel = _React$useMemo.maxLevel,
|
|
119
|
+
keysData = _React$useMemo.keysData;
|
|
126
120
|
|
|
127
121
|
var _React$useState = _react.default.useState(scrollToKey),
|
|
128
122
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
@@ -178,22 +172,40 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
178
172
|
loadingKeys = _React$useState14[0],
|
|
179
173
|
setLoadingKeys = _React$useState14[1];
|
|
180
174
|
|
|
175
|
+
var _React$useState15 = _react.default.useState([]),
|
|
176
|
+
_React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
|
|
177
|
+
searchExpandedKeys = _React$useState16[0],
|
|
178
|
+
setSearchExpandedKeys = _React$useState16[1];
|
|
179
|
+
|
|
181
180
|
var isSearching = _react.default.useMemo(function () {
|
|
182
181
|
return typeof filterTreeNode === 'function' && filterValue;
|
|
183
182
|
}, [filterValue]);
|
|
184
183
|
|
|
185
|
-
|
|
184
|
+
(0, _react.useEffect)(function () {
|
|
185
|
+
setSearchExpandedKeys([]);
|
|
186
|
+
}, [filterValue]);
|
|
187
|
+
|
|
188
|
+
var _useExpand = (0, _treeHooks.useExpand)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchExpandedKeys),
|
|
186
189
|
_useExpand2 = (0, _slicedToArray2.default)(_useExpand, 2),
|
|
187
190
|
expandedKeys = _useExpand2[0],
|
|
188
191
|
setExpandedKeys = _useExpand2[1];
|
|
189
192
|
|
|
190
|
-
var
|
|
193
|
+
var _React$useMemo2 = _react.default.useMemo(function () {
|
|
191
194
|
return (0, _treeUtils.getSpreadAttrData)(flattenAllData, expandedKeys);
|
|
192
|
-
}, [flattenAllData, expandedKeys])
|
|
195
|
+
}, [flattenAllData, expandedKeys]),
|
|
196
|
+
spreadAttrData = _React$useMemo2.spreadAttrData,
|
|
197
|
+
posData = _React$useMemo2.posData;
|
|
198
|
+
|
|
199
|
+
var _useChecked = (0, _treeHooks.useChecked)(checkStrictly, checkedKeysProps, defaultCheckedKeys, flattenAllData, maxLevel, checkable, keysData),
|
|
200
|
+
_useChecked2 = (0, _slicedToArray2.default)(_useChecked, 4),
|
|
201
|
+
checkedKeys = _useChecked2[0],
|
|
202
|
+
halfCheckedKeys = _useChecked2[1],
|
|
203
|
+
setCheckedKeys = _useChecked2[2],
|
|
204
|
+
setHalfCheckedKeys = _useChecked2[3];
|
|
193
205
|
|
|
194
206
|
var filterData = _react.default.useMemo(function () {
|
|
195
|
-
return (0, _treeUtils.getFilterData)(spreadAttrData, filterTreeNode, isSearching);
|
|
196
|
-
}, [spreadAttrData, isSearching]);
|
|
207
|
+
return (0, _treeUtils.getFilterData)(spreadAttrData, filterTreeNode, isSearching, posData, keysData);
|
|
208
|
+
}, [spreadAttrData, isSearching, posData, keysData]);
|
|
197
209
|
|
|
198
210
|
var _useViewportHeight = (0, _treeHooks.useViewportHeight)(height, listRef),
|
|
199
211
|
_useViewportHeight2 = (0, _slicedToArray2.default)(_useViewportHeight, 1),
|
|
@@ -270,6 +282,12 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
270
282
|
node: node,
|
|
271
283
|
expanded: expanded
|
|
272
284
|
});
|
|
285
|
+
|
|
286
|
+
if (isSearching) {
|
|
287
|
+
var newSearchExpandedKeys = expanded ? (0, _treeUtils.addKeys)(searchExpandedKeys, [key]) : (0, _treeUtils.delKey)(searchExpandedKeys, [key]);
|
|
288
|
+
setSearchExpandedKeys(newSearchExpandedKeys);
|
|
289
|
+
}
|
|
290
|
+
|
|
273
291
|
setScrollKey('');
|
|
274
292
|
setIsInit(false);
|
|
275
293
|
|
|
@@ -278,9 +296,17 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
278
296
|
}
|
|
279
297
|
}, [expandedKeys, onExpand, loadData, handleNodeLoad, loadedKeys, loadingKeys]);
|
|
280
298
|
|
|
281
|
-
var handleCheck = _react.default.useCallback(function (key, value, node, event,
|
|
299
|
+
var handleCheck = _react.default.useCallback(function (key, value, node, event, _pos) {
|
|
282
300
|
var newCheckedKeys = value ? (0, _treeUtils.addKeys)(checkedKeys, [key]) : (0, _treeUtils.delKey)(checkedKeys, [key]);
|
|
283
|
-
var checkState = checkStrictly ? (0, _treeUtils.getDataCheckededStateStrictly)(newCheckedKeys) : (0, _treeUtils.
|
|
301
|
+
var checkState = checkStrictly ? (0, _treeUtils.getDataCheckededStateStrictly)(newCheckedKeys) : (0, _treeUtils.getAllCheckedKeys)(key, value, checkedKeys, keysData, halfCheckedKeys);
|
|
302
|
+
|
|
303
|
+
if (!('checkedKeys' in TreeProps)) {
|
|
304
|
+
setCheckedKeys(checkState.checkedKeys);
|
|
305
|
+
setHalfCheckedKeys(checkState.halfCheckedKeys);
|
|
306
|
+
} else {
|
|
307
|
+
setHalfCheckedKeys(checkState.halfCheckedKeys);
|
|
308
|
+
}
|
|
309
|
+
|
|
284
310
|
onCheck && onCheck(checkState.checkedKeys, {
|
|
285
311
|
event: event,
|
|
286
312
|
node: node,
|
|
@@ -440,7 +466,10 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
440
466
|
}, [scrollToKey]);
|
|
441
467
|
(0, _react.useEffect)(function () {
|
|
442
468
|
setHalfCheckedKeys(halfCheckedKeys);
|
|
443
|
-
}, [halfCheckedKeys]);
|
|
469
|
+
}, [halfCheckedKeys, setHalfCheckedKeys]);
|
|
470
|
+
(0, _react.useEffect)(function () {
|
|
471
|
+
setCheckedKeys(checkedKeys);
|
|
472
|
+
}, [checkedKeys, setCheckedKeys]);
|
|
444
473
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
445
474
|
className: treeNodeClassName,
|
|
446
475
|
style: style,
|
package/lib/tree/treeHooks.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { TreeNodeData } from './tree';
|
|
1
|
+
import { TreeNodeData, KeysDataType } from './tree';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export declare const useViewportHeight: (height: number, listRef: React.RefObject<HTMLElement>) => number[];
|
|
4
4
|
export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
|
|
5
5
|
export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
|
|
6
|
-
export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[],
|
|
7
|
-
export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
|
|
6
|
+
export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], _flattenAllData: any[], _maxLevel: number, checkable: boolean, keysData: KeysDataType) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
|
|
7
|
+
export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchExpandedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
|
|
8
8
|
export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
|
|
9
9
|
export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
|
package/lib/tree/treeHooks.js
CHANGED
|
@@ -72,14 +72,14 @@ var usePlantomHeightEffect = function usePlantomHeightEffect(plantomRef, filterD
|
|
|
72
72
|
|
|
73
73
|
exports.usePlantomHeightEffect = usePlantomHeightEffect;
|
|
74
74
|
|
|
75
|
-
var useChecked = function useChecked(checkStrictly, checkedKeysProps, defaultCheckedKeys,
|
|
75
|
+
var useChecked = function useChecked(checkStrictly, checkedKeysProps, defaultCheckedKeys, _flattenAllData, _maxLevel, checkable, keysData) {
|
|
76
76
|
var initialCheckedState = _react.default.useMemo(function () {
|
|
77
77
|
if (!checkable) return {
|
|
78
78
|
checkedKeys: [],
|
|
79
79
|
halfCheckedKeys: []
|
|
80
80
|
};
|
|
81
|
-
return checkStrictly ? (0, _treeUtils.getDataCheckededStateStrictly)(checkedKeysProps || defaultCheckedKeys) : (0, _treeUtils.
|
|
82
|
-
}, [
|
|
81
|
+
return checkStrictly ? (0, _treeUtils.getDataCheckededStateStrictly)(checkedKeysProps || defaultCheckedKeys) : (0, _treeUtils.getInitCheckededKeys)(checkedKeysProps || defaultCheckedKeys, keysData);
|
|
82
|
+
}, [checkable, checkStrictly, checkedKeysProps, defaultCheckedKeys, keysData]);
|
|
83
83
|
|
|
84
84
|
var _React$useState3 = _react.default.useState(initialCheckedState.checkedKeys),
|
|
85
85
|
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
|
@@ -104,7 +104,7 @@ var useChecked = function useChecked(checkStrictly, checkedKeysProps, defaultChe
|
|
|
104
104
|
|
|
105
105
|
exports.useChecked = useChecked;
|
|
106
106
|
|
|
107
|
-
var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching) {
|
|
107
|
+
var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchExpandedKeys) {
|
|
108
108
|
var expandScrollkeys = [];
|
|
109
109
|
|
|
110
110
|
if (scrollKey) {
|
|
@@ -113,8 +113,8 @@ var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExp
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
var initialExpandedKeys = _react.default.useMemo(function () {
|
|
116
|
-
return (0, _treeUtils.getInitExpandedKeys)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, isSearching);
|
|
117
|
-
}, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, isSearching]);
|
|
116
|
+
return (0, _treeUtils.getInitExpandedKeys)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, isSearching, keysData, searchExpandedKeys);
|
|
117
|
+
}, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, isSearching, keysData, searchExpandedKeys]);
|
|
118
118
|
|
|
119
119
|
var newExpandedKeys = _react.default.useMemo(function () {
|
|
120
120
|
return (0, _treeUtils.getExpandedKeys)(expandedKeysProps, expandScrollkeys);
|
|
@@ -126,9 +126,9 @@ var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExp
|
|
|
126
126
|
setExpandedKeys = _React$useState8[1];
|
|
127
127
|
|
|
128
128
|
_react.default.useEffect(function () {
|
|
129
|
-
var keys = isInit ? initialExpandedKeys : newExpandedKeys;
|
|
129
|
+
var keys = isInit || isSearching ? initialExpandedKeys : newExpandedKeys;
|
|
130
130
|
setExpandedKeys(keys);
|
|
131
|
-
}, [newExpandedKeys, initialExpandedKeys]);
|
|
131
|
+
}, [newExpandedKeys, initialExpandedKeys, isSearching, isInit]);
|
|
132
132
|
|
|
133
133
|
return [expandedKeys, setExpandedKeys];
|
|
134
134
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TreeNodeData } from '../tree';
|
|
1
|
+
import { TreeNodeData, KeysDataType } from '../tree';
|
|
2
2
|
/**
|
|
3
3
|
* 打平所有数组,并添加pos位置信息,
|
|
4
4
|
* 方便根据expandKeys等计算节点的expand,checkedKeys计算节点checked状态
|
|
@@ -10,13 +10,15 @@ import { TreeNodeData } from '../tree';
|
|
|
10
10
|
export declare const flattenAll: (treeData: any[], newTreeData?: TreeNodeData[], level?: number, pos?: string | undefined) => {
|
|
11
11
|
flattenAllData: TreeNodeData[];
|
|
12
12
|
maxLevel: number;
|
|
13
|
+
keysData: KeysDataType;
|
|
13
14
|
};
|
|
14
15
|
export declare const getExpand: (expandedKeys: string[], key: string) => boolean;
|
|
15
16
|
export declare const getChecked: (checkedKeys: string[], key: string) => boolean;
|
|
16
17
|
export declare const getSelected: (selectedKeys: string[], key: string) => boolean;
|
|
17
18
|
export declare const getHalfChecked: (halfCheckedKeys: string[], key: string) => boolean;
|
|
18
|
-
export declare
|
|
19
|
-
export declare const
|
|
19
|
+
export declare function findfilterChildrenKeys(node: any, allFilterKeys: Set<any>): Set<string>;
|
|
20
|
+
export declare const getAllFilterKeys: (data: any[], filterTreeNode: FunctionConstructor, keysData: KeysDataType) => any;
|
|
21
|
+
export declare const getFilterData: (data: any[], filterTreeNode: FunctionConstructor, isSearching: boolean, posData?: {}, keysData?: {}) => any[];
|
|
20
22
|
export declare const getMaxLevel: (data: any[]) => number;
|
|
21
23
|
/**
|
|
22
24
|
*计算node的属性后返回新的 treedata
|
|
@@ -25,14 +27,26 @@ export declare const getMaxLevel: (data: any[]) => number;
|
|
|
25
27
|
* @param expandedKeys
|
|
26
28
|
* @param defaultExpandAll
|
|
27
29
|
*/
|
|
28
|
-
export declare const getSpreadAttrData: (treeData: any[], expandedKeys: string[]) =>
|
|
30
|
+
export declare const getSpreadAttrData: (treeData: any[], expandedKeys: string[]) => {
|
|
31
|
+
spreadAttrData: any[];
|
|
32
|
+
posData: any;
|
|
33
|
+
};
|
|
29
34
|
export declare const addKeys: (prevKeys?: string[], newKeys?: string[]) => string[];
|
|
30
35
|
export declare const getAllParentKeys: (data: any[], pos?: string) => string[];
|
|
31
36
|
export declare const getAllParentPos: (data: any[], pos?: string) => string[];
|
|
32
37
|
export declare const getAllChildKeys: (data: any[], pos?: string) => string[];
|
|
33
38
|
export declare const getPos: (data: any[], key: string) => any;
|
|
34
39
|
export declare const getInitCheckedKeys: (data: any[], keys: string[]) => any[];
|
|
35
|
-
export declare const getInitCheckededState: (data: any[], checkedKeys: string[] | undefined, maxLevel: number, init
|
|
40
|
+
export declare const getInitCheckededState: (data: any[], checkedKeys: string[] | undefined, maxLevel: number, init: boolean | undefined, posData: any, _keysData: KeysDataType) => {
|
|
41
|
+
checkedKeys: string[];
|
|
42
|
+
halfCheckedKeys: string[];
|
|
43
|
+
};
|
|
44
|
+
export declare function getChildNodeKeys(node: TreeNodeData, keysNodeProps: KeysDataType): Set<string>;
|
|
45
|
+
export declare const getInitCheckededKeys: (checkedKeys: string[] | undefined, keysNodeProps: KeysDataType) => {
|
|
46
|
+
checkedKeys: string[];
|
|
47
|
+
halfCheckedKeys: string[];
|
|
48
|
+
};
|
|
49
|
+
export declare function getAllCheckedKeys(key: string, checked: boolean, checkedKeys: string[], keysNodeProps: KeysDataType, halfCheckedKeys: string[]): {
|
|
36
50
|
checkedKeys: string[];
|
|
37
51
|
halfCheckedKeys: string[];
|
|
38
52
|
};
|
|
@@ -46,6 +60,6 @@ export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
|
|
|
46
60
|
};
|
|
47
61
|
export declare const delKey: (prevKeys: string[], delKeys: string[]) => never[] & string[];
|
|
48
62
|
export declare const getAllNodeKeys: (data: any[]) => string[];
|
|
49
|
-
export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean) => string[];
|
|
63
|
+
export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchExpandedKeys: string[]) => string[];
|
|
50
64
|
export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];
|
|
51
65
|
export declare const calcDropPosition: (event: React.MouseEvent, dropNode: HTMLElement) => 0 | 1 | -1;
|