@hi-ui/check-cascader 4.0.0-beta.26 → 4.0.0-beta.29
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/lib/cjs/CheckCascader.js +21 -46
- package/lib/cjs/CheckCascaderMenu.js +3 -1
- package/lib/cjs/CheckCascaderMenus.js +12 -13
- package/lib/cjs/hooks/{use-cache.js → use-cache/lib/esm/index.js} +11 -4
- package/lib/cjs/hooks/use-check.js +12 -5
- package/lib/cjs/utils/index.js +177 -66
- package/lib/esm/CheckCascader.js +17 -38
- package/lib/esm/CheckCascaderMenu.js +3 -2
- package/lib/esm/CheckCascaderMenus.js +12 -13
- package/lib/esm/hooks/{use-cache.js → use-cache/lib/esm/index.js} +11 -4
- package/lib/esm/hooks/use-check.js +11 -5
- package/lib/esm/utils/index.js +175 -68
- package/lib/types/CheckCascader.d.ts +14 -11
- package/lib/types/CheckCascaderMenu.d.ts +4 -4
- package/lib/types/CheckCascaderMenus.d.ts +18 -7
- package/lib/types/context.d.ts +6 -6
- package/lib/types/hooks/index.d.ts +0 -2
- package/lib/types/hooks/use-async-switch.d.ts +2 -2
- package/lib/types/hooks/use-check.d.ts +3 -3
- package/lib/types/hooks/use-select.d.ts +2 -2
- package/lib/types/types.d.ts +11 -12
- package/lib/types/utils/index.d.ts +17 -10
- package/package.json +9 -8
- package/lib/cjs/hooks/use-search.js +0 -39
- package/lib/esm/hooks/use-search.js +0 -30
- package/lib/types/hooks/use-cache.d.ts +0 -8
- package/lib/types/hooks/use-search.d.ts +0 -13
@@ -12,7 +12,8 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
12
12
|
import { defaultLoadingIcon, defaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
|
13
13
|
import Checkbox from '@hi-ui/checkbox';
|
14
14
|
import { useCheckCascaderContext } from './context.js';
|
15
|
-
import {
|
15
|
+
import { getCascaderItemEventData } from './utils/index.js';
|
16
|
+
import { getNodeAncestorsWithMe } from '@hi-ui/tree-utils';
|
16
17
|
var _role = 'check-cascader-menu';
|
17
18
|
|
18
19
|
var _prefix = getPrefixCls(_role);
|
@@ -49,7 +50,7 @@ var CheckCascaderMenu = function CheckCascaderMenu(_ref) {
|
|
49
50
|
|
50
51
|
return flatted ? /*#__PURE__*/React.createElement("span", {
|
51
52
|
className: cx("title__text", "title__text--cols")
|
52
|
-
},
|
53
|
+
}, getNodeAncestorsWithMe(option).reverse().map(function (item, index) {
|
53
54
|
return /*#__PURE__*/React.createElement("span", {
|
54
55
|
className: "title__text--col",
|
55
56
|
key: item.id
|
@@ -50,7 +50,13 @@ var CheckCascaderMenus = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
50
50
|
onChange = _a.onChange,
|
51
51
|
titleRender = _a.titleRender,
|
52
52
|
flatted = _a.flatted,
|
53
|
-
|
53
|
+
_a$checkedMode = _a.checkedMode,
|
54
|
+
checkedMode = _a$checkedMode === void 0 ? 'ALL' : _a$checkedMode,
|
55
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "flattedData", "onChangeData", "value", "defaultValue", "disabled", "expandTrigger", "changeOnSelect", "checkCascaded", "onLoadChildren", "onChange", "onSelect", "titleRender", "flatted", "checkedMode"]);
|
56
|
+
|
57
|
+
if (checkCascaded === false) {
|
58
|
+
checkedMode = 'SEPARATE';
|
59
|
+
}
|
54
60
|
|
55
61
|
var _useSelect = useSelect(disabled),
|
56
62
|
selectedId = _useSelect[0],
|
@@ -62,17 +68,10 @@ var CheckCascaderMenus = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
62
68
|
isLoadingId = _useAsyncSwitch[0],
|
63
69
|
onItemExpand = _useAsyncSwitch[1];
|
64
70
|
|
65
|
-
var _useCheck = useCheck(
|
66
|
-
var checkedIds = _ref.checkedIds
|
67
|
-
semiCheckedIds = _ref.semiCheckedIds; // @ts-ignore
|
68
|
-
|
69
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(checkedIds, {
|
70
|
-
trigger: 'checkbox',
|
71
|
-
target: target,
|
72
|
-
shouldChecked: shouldChecked,
|
73
|
-
semiCheckedIds: semiCheckedIds // checkedItems: fFindNodesByIds(flattedData, checkedIds),
|
71
|
+
var _useCheck = useCheck(checkedMode, disabled, flattedData, defaultValue, valueProp, function (_ref, target, shouldChecked) {
|
72
|
+
var checkedIds = _ref.checkedIds; // @ts-ignore
|
74
73
|
|
75
|
-
|
74
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(checkedIds, target, shouldChecked);
|
76
75
|
}),
|
77
76
|
onOptionCheck = _useCheck[0],
|
78
77
|
isCheckedId = _useCheck[1],
|
@@ -85,8 +84,8 @@ var CheckCascaderMenus = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
85
84
|
selected: flatted ? selectedId === id : selectedIds[depth] === id,
|
86
85
|
checked: isCheckedId(id),
|
87
86
|
loading: isLoadingId(id),
|
88
|
-
semiChecked: isSemiCheckedId(id),
|
89
|
-
|
87
|
+
semiChecked: isSemiCheckedId(id) // focused: false,
|
88
|
+
|
90
89
|
};
|
91
90
|
});
|
92
91
|
var providedValue = useMemo(function () {
|
@@ -8,11 +8,18 @@
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
10
|
import { useState, useEffect } from 'react';
|
11
|
-
/**
|
12
|
-
*
|
11
|
+
/** @LICENSE
|
12
|
+
* @hi-ui/use-cache
|
13
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
|
13
14
|
*
|
14
|
-
* @
|
15
|
-
*
|
15
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
16
|
+
*
|
17
|
+
* This source code is licensed under the MIT license found in the
|
18
|
+
* LICENSE file in the root directory of this source tree.
|
19
|
+
*/
|
20
|
+
|
21
|
+
/**
|
22
|
+
* A hook using for data cache that compatible with the controlled and uncontrolled modes coexist.
|
16
23
|
*/
|
17
24
|
|
18
25
|
var useCache = function useCache(data) {
|
@@ -7,29 +7,35 @@
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
|
-
import { useCascadeCheck } from '@hi-ui/use-check';
|
11
10
|
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
11
|
+
import { useCascadeCheck } from '@hi-ui/use-check';
|
12
|
+
import { processCheckedIds, parseCheckDataDirty } from '../utils/index.js';
|
12
13
|
var NOOP_ARRAY = [];
|
13
14
|
|
14
|
-
var useCheck = function useCheck(
|
15
|
+
var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultCheckedIds, checkedIdsProp, onCheck) {
|
15
16
|
if (defaultCheckedIds === void 0) {
|
16
17
|
defaultCheckedIds = NOOP_ARRAY;
|
17
18
|
}
|
18
19
|
|
19
20
|
var _useUncontrolledState = useUncontrolledState(defaultCheckedIds, checkedIdsProp, function (checkedIds, checkedNode, shouldChecked, semiCheckedIds) {
|
21
|
+
// 出口数据处理
|
22
|
+
var processedIds = processCheckedIds(checkedMode, checkedIds, flattedData, allowCheck);
|
20
23
|
onCheck === null || onCheck === void 0 ? void 0 : onCheck({
|
21
|
-
checkedIds:
|
24
|
+
checkedIds: processedIds,
|
22
25
|
semiCheckedIds: semiCheckedIds
|
23
26
|
}, checkedNode, shouldChecked);
|
24
27
|
}),
|
25
28
|
checkedIds = _useUncontrolledState[0],
|
26
|
-
trySetCheckedIds = _useUncontrolledState[1];
|
29
|
+
trySetCheckedIds = _useUncontrolledState[1]; // 入口数据处理
|
30
|
+
|
27
31
|
|
32
|
+
var parsedCheckedIds = parseCheckDataDirty(checkedMode, checkedIds, flattedData, allowCheck);
|
33
|
+
var cascaded = checkedMode !== 'SEPARATE';
|
28
34
|
return useCascadeCheck({
|
29
35
|
cascaded: cascaded,
|
30
36
|
disabled: disabled,
|
31
37
|
flattedData: flattedData,
|
32
|
-
checkedIds:
|
38
|
+
checkedIds: parsedCheckedIds,
|
33
39
|
onCheck: trySetCheckedIds,
|
34
40
|
allowCheck: allowCheck
|
35
41
|
});
|
package/lib/esm/utils/index.js
CHANGED
@@ -7,81 +7,46 @@
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
|
-
|
10
|
+
import { baseFlattenTree, getTopDownAncestors, fFindNodeById, getNodeAncestors, findNestedChildren } from '@hi-ui/tree-utils';
|
11
|
+
import { isArrayNonEmpty } from '@hi-ui/type-assertion';
|
11
12
|
/**
|
12
13
|
* 扁平化树数据结构,基于前序遍历
|
13
14
|
*
|
14
15
|
* @param treeData
|
15
16
|
* @returns
|
16
17
|
*/
|
17
|
-
var flattenTreeData = function flattenTreeData(treeData) {
|
18
|
-
var flattedTreeData = [];
|
19
|
-
|
20
|
-
var dig = function dig(node, depth, parent) {
|
21
|
-
var id = node.id,
|
22
|
-
title = node.title,
|
23
|
-
children = node.children,
|
24
|
-
_node$checkable = node.checkable,
|
25
|
-
checkable = _node$checkable === void 0 ? true : _node$checkable,
|
26
|
-
_node$isLeaf = node.isLeaf,
|
27
|
-
isLeaf = _node$isLeaf === void 0 ? false : _node$isLeaf,
|
28
|
-
_node$disabled = node.disabled,
|
29
|
-
disabled = _node$disabled === void 0 ? false : _node$disabled,
|
30
|
-
_node$disabledCheckbo = node.disabledCheckbox,
|
31
|
-
disabledCheckbox = _node$disabledCheckbo === void 0 ? false : _node$disabledCheckbo;
|
32
|
-
var flattedNode = {
|
33
|
-
id: id,
|
34
|
-
title: title,
|
35
|
-
depth: depth,
|
36
|
-
parent: parent,
|
37
|
-
raw: node,
|
38
|
-
isLeaf: isLeaf,
|
39
|
-
disabled: disabled,
|
40
|
-
disabledCheckbox: disabledCheckbox,
|
41
|
-
checkable: checkable
|
42
|
-
};
|
43
|
-
flattedTreeData.push(flattedNode);
|
44
|
-
|
45
|
-
if (children) {
|
46
|
-
var childDepth = depth + 1;
|
47
|
-
flattedNode.children = children.map(function (child) {
|
48
|
-
return dig(child, childDepth, flattedNode);
|
49
|
-
});
|
50
|
-
}
|
51
|
-
|
52
|
-
return flattedNode;
|
53
|
-
}; // @ts-ignore
|
54
18
|
|
19
|
+
var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
20
|
+
/**
|
21
|
+
* 转换对象
|
22
|
+
*/
|
23
|
+
var getKeyFields = function getKeyFields(node, key) {
|
24
|
+
if (fieldNames) {
|
25
|
+
return node[fieldNames[key] || key];
|
26
|
+
}
|
55
27
|
|
56
|
-
|
57
|
-
|
58
|
-
treeRoot.children = treeData.map(function (node) {
|
59
|
-
return dig(node, 0, treeRoot);
|
60
|
-
});
|
61
|
-
return flattedTreeData;
|
62
|
-
};
|
63
|
-
|
64
|
-
var getTreeRoot = function getTreeRoot() {
|
65
|
-
return {
|
66
|
-
depth: -1
|
28
|
+
return node[key];
|
67
29
|
};
|
68
|
-
};
|
69
|
-
/**
|
70
|
-
* 获取祖先节点,包括自己
|
71
|
-
* @param node
|
72
|
-
* @returns
|
73
|
-
*/
|
74
|
-
|
75
|
-
|
76
|
-
var getNodeAncestors = function getNodeAncestors(node) {
|
77
|
-
var ancestors = [];
|
78
30
|
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
31
|
+
return baseFlattenTree({
|
32
|
+
tree: treeData,
|
33
|
+
childrenFieldName: function childrenFieldName(node) {
|
34
|
+
return getKeyFields(node, 'children');
|
35
|
+
},
|
36
|
+
transform: function transform(node) {
|
37
|
+
var _a, _b, _c, _d;
|
38
|
+
|
39
|
+
var flattedNode = node;
|
40
|
+
var raw = node.raw;
|
41
|
+
flattedNode.id = getKeyFields(raw, 'id');
|
42
|
+
flattedNode.title = getKeyFields(raw, 'title');
|
43
|
+
flattedNode.disabled = (_a = getKeyFields(raw, 'disabled')) !== null && _a !== void 0 ? _a : false;
|
44
|
+
flattedNode.isLeaf = (_b = getKeyFields(raw, 'isLeaf')) !== null && _b !== void 0 ? _b : false;
|
45
|
+
flattedNode.checkable = (_c = getKeyFields(raw, 'checkable')) !== null && _c !== void 0 ? _c : true;
|
46
|
+
flattedNode.disabledCheckbox = (_d = getKeyFields(raw, 'disabledCheckbox')) !== null && _d !== void 0 ? _d : false;
|
47
|
+
return flattedNode;
|
48
|
+
}
|
49
|
+
});
|
85
50
|
};
|
86
51
|
|
87
52
|
var getActiveMenus = function getActiveMenus(data, selectedIds) {
|
@@ -123,14 +88,156 @@ var getActiveMenuIds = function getActiveMenuIds(data, selectedIds) {
|
|
123
88
|
return selectedIds === id;
|
124
89
|
});
|
125
90
|
if (!selectedOption) return [];
|
126
|
-
return
|
91
|
+
return getTopDownAncestors(selectedOption).map(function (_ref4) {
|
127
92
|
var id = _ref4.id;
|
128
93
|
return id;
|
129
|
-
})
|
94
|
+
});
|
130
95
|
};
|
131
96
|
|
132
97
|
function getCascaderItemEventData(node, requiredProps) {
|
133
98
|
return Object.assign(Object.assign({}, node), requiredProps);
|
134
99
|
}
|
100
|
+
/**
|
101
|
+
* 处理选中的回显数据
|
102
|
+
*
|
103
|
+
* @param checkedIds 当前所有被选中的节点 ID 集合
|
104
|
+
* @param nodeEntries 所有数据的Map 集合
|
105
|
+
* @param type 数据回显方式
|
106
|
+
*/
|
107
|
+
|
108
|
+
|
109
|
+
var processCheckedIds = function processCheckedIds(type, checkedIds, flattenData, allowCheck) {
|
110
|
+
var keySet = new Set(checkedIds);
|
111
|
+
|
112
|
+
switch (type) {
|
113
|
+
case 'CHILD':
|
114
|
+
return checkedIds.filter(function (id) {
|
115
|
+
var node = fFindNodeById(flattenData, id);
|
116
|
+
|
117
|
+
if (node) {
|
118
|
+
var children = node.children;
|
119
|
+
|
120
|
+
if (isArrayNonEmpty(children)) {
|
121
|
+
if (children.filter(allowCheck).every(function (node) {
|
122
|
+
return keySet.has(node.id);
|
123
|
+
})) {
|
124
|
+
return false;
|
125
|
+
}
|
126
|
+
}
|
127
|
+
} // 没有孩子节点,保留
|
128
|
+
|
129
|
+
|
130
|
+
return true;
|
131
|
+
});
|
132
|
+
|
133
|
+
case 'PARENT':
|
134
|
+
return checkedIds.filter(function (id) {
|
135
|
+
var node = fFindNodeById(flattenData, id);
|
136
|
+
|
137
|
+
if (node) {
|
138
|
+
// 向上递归遍历是否被勾选
|
139
|
+
var ancestors = getNodeAncestors(node);
|
140
|
+
console.log(ancestors);
|
141
|
+
|
142
|
+
if (ancestors.some(function (parent) {
|
143
|
+
return keySet.has(parent.id);
|
144
|
+
})) {
|
145
|
+
return false;
|
146
|
+
}
|
147
|
+
}
|
148
|
+
|
149
|
+
return true;
|
150
|
+
});
|
151
|
+
}
|
152
|
+
|
153
|
+
return checkedIds;
|
154
|
+
};
|
155
|
+
/**
|
156
|
+
* 根据传入的 checkedIds 解析全选/半选数据
|
157
|
+
*/
|
158
|
+
|
159
|
+
|
160
|
+
var parseCheckDataDirty = function parseCheckDataDirty(type, checkedIds, flattenData, allowCheck) {
|
161
|
+
switch (type) {
|
162
|
+
case 'CHILD':
|
163
|
+
case 'PARENT':
|
164
|
+
return dirtyCheck(checkedIds, flattenData, allowCheck);
|
165
|
+
}
|
166
|
+
|
167
|
+
return checkedIds;
|
168
|
+
};
|
169
|
+
|
170
|
+
function dirtyCheck(checkedIds, flattenData, allowCheck) {
|
171
|
+
var nodeEntities = flattenData.reduce(function (prev, cur) {
|
172
|
+
prev[cur.id] = cur;
|
173
|
+
return prev;
|
174
|
+
}, {});
|
175
|
+
var checkedIdsSet = new Set(checkedIds.filter(function (id) {
|
176
|
+
return !!nodeEntities[id];
|
177
|
+
}));
|
178
|
+
var depthEntities = new Map();
|
179
|
+
var maxDepth = 0; // Convert entities by depth for calculation
|
180
|
+
|
181
|
+
Object.keys(nodeEntities).forEach(function (id) {
|
182
|
+
var entity = nodeEntities[id];
|
183
|
+
var depth = entity.depth;
|
184
|
+
var depthSet = depthEntities.get(depth);
|
185
|
+
|
186
|
+
if (!depthSet) {
|
187
|
+
depthSet = new Set();
|
188
|
+
depthEntities.set(depth, depthSet);
|
189
|
+
}
|
190
|
+
|
191
|
+
depthSet.add(entity);
|
192
|
+
maxDepth = Math.max(maxDepth, depth);
|
193
|
+
});
|
194
|
+
return fillCheck(checkedIdsSet, depthEntities, nodeEntities, maxDepth, allowCheck);
|
195
|
+
}
|
196
|
+
/**
|
197
|
+
* 对 checkedIds 级联遗漏选项 id 填充
|
198
|
+
*
|
199
|
+
* 1. 把所有嵌套孩子节点 allowCheck 的都标记为 checked
|
200
|
+
* 2. 祖先节点从下至上维护 checked 状态
|
201
|
+
*/
|
202
|
+
|
203
|
+
|
204
|
+
function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck) {
|
205
|
+
var checkedIdsSet = new Set(checkedIds);
|
206
|
+
checkedIdsSet.forEach(function (id) {
|
207
|
+
var checkedNode = nodeEntities[id];
|
208
|
+
var nestedChildren = findNestedChildren(checkedNode, allowCheck);
|
209
|
+
nestedChildren.forEach(function (child) {
|
210
|
+
checkedIdsSet.add(child.id);
|
211
|
+
});
|
212
|
+
}); // 缓存中间结果,优化查询
|
213
|
+
|
214
|
+
var visitedIds = new Map();
|
215
|
+
|
216
|
+
for (var depth = maxDepth - 1; depth >= 0; --depth) {
|
217
|
+
var entities = depthEntities.get(depth);
|
218
|
+
entities === null || entities === void 0 ? void 0 : entities.forEach(function (entity) {
|
219
|
+
var id = entity.id,
|
220
|
+
children = entity.children;
|
221
|
+
if (visitedIds.has(id)) return;
|
222
|
+
|
223
|
+
if (isArrayNonEmpty(children)) {
|
224
|
+
var shouldChecked = !children.some(function (child) {
|
225
|
+
if (visitedIds.has(child.id)) {
|
226
|
+
return !visitedIds.get(child.id);
|
227
|
+
}
|
228
|
+
|
229
|
+
return !checkedIdsSet.has(child.id);
|
230
|
+
});
|
231
|
+
visitedIds.set(id, shouldChecked);
|
232
|
+
|
233
|
+
if (shouldChecked && allowCheck(entity)) {
|
234
|
+
checkedIdsSet.add(id);
|
235
|
+
}
|
236
|
+
}
|
237
|
+
});
|
238
|
+
}
|
239
|
+
|
240
|
+
return Array.from(checkedIdsSet);
|
241
|
+
}
|
135
242
|
|
136
|
-
export { flattenTreeData, getActiveMenuIds, getActiveMenus, getCascaderItemEventData, getFlattedMenus,
|
243
|
+
export { flattenTreeData, getActiveMenuIds, getActiveMenus, getCascaderItemEventData, getFlattedMenus, parseCheckDataDirty, processCheckedIds };
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import { CheckCascaderDataItem, ExpandTrigger, CheckCascaderDataItemEventData, FlattedCheckCascaderDataItem } from './types';
|
3
3
|
import { PickerProps } from '@hi-ui/picker';
|
4
4
|
import { HiBaseAppearanceEnum } from '@hi-ui/core';
|
5
5
|
/**
|
@@ -10,7 +10,7 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger'> {
|
|
10
10
|
/**
|
11
11
|
* 设置选择项数据源
|
12
12
|
*/
|
13
|
-
data:
|
13
|
+
data: CheckCascaderDataItem[];
|
14
14
|
/**
|
15
15
|
* 设置当前多选值
|
16
16
|
*/
|
@@ -28,7 +28,7 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger'> {
|
|
28
28
|
* 选项被点击时的回调。暂不对外暴露
|
29
29
|
* @private
|
30
30
|
*/
|
31
|
-
onSelect?: (selectedId: React.ReactText, selectedOption:
|
31
|
+
onSelect?: (selectedId: React.ReactText, selectedOption: CheckCascaderDataItemEventData) => void;
|
32
32
|
/**
|
33
33
|
* 次级菜单的展开方式
|
34
34
|
*/
|
@@ -56,11 +56,11 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger'> {
|
|
56
56
|
/**
|
57
57
|
* 自定义渲染节点的 title 内容
|
58
58
|
*/
|
59
|
-
render?: (item:
|
59
|
+
render?: (item: CheckCascaderDataItemEventData) => React.ReactNode;
|
60
60
|
/**
|
61
61
|
* 自定义选择后触发器所展示的内容
|
62
62
|
*/
|
63
|
-
displayRender?: (checkedOption:
|
63
|
+
displayRender?: (checkedOption: FlattedCheckCascaderDataItem) => React.ReactNode;
|
64
64
|
/**
|
65
65
|
* 支持 checkbox 级联(正反选)功能
|
66
66
|
*/
|
@@ -81,12 +81,7 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger'> {
|
|
81
81
|
/**
|
82
82
|
* 异步请求更新数据
|
83
83
|
*/
|
84
|
-
onLoadChildren?: (item:
|
85
|
-
/**
|
86
|
-
* 是否单行展示,超出 +1。暂不对外暴露
|
87
|
-
* @private
|
88
|
-
*/
|
89
|
-
wrap?: boolean;
|
84
|
+
onLoadChildren?: (item: CheckCascaderDataItemEventData, idPaths: React.ReactText[]) => Promise<CheckCascaderDataItem[] | void> | void;
|
90
85
|
/**
|
91
86
|
* 设置展现形式
|
92
87
|
*/
|
@@ -97,4 +92,12 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger'> {
|
|
97
92
|
* 第二个为数据项,返回值为 true 时将出现在结果项
|
98
93
|
*/
|
99
94
|
filterOption?: (keyword: string, item: any) => boolean;
|
95
|
+
/**
|
96
|
+
* 多选数据交互时回填、回显模式
|
97
|
+
* PARENT: 当所有子节点被选中时将只保留父节点
|
98
|
+
* ALL: 所有被选中节点,不区分父子节点(不支持异步数据加载勾选checkbox)
|
99
|
+
* CHILD: 仅显示子节点(不支持异步数据加载勾选checkbox)
|
100
|
+
* SEPARATE:父子完全独立受控
|
101
|
+
*/
|
102
|
+
checkedMode?: 'PARENT' | 'CHILD' | 'ALL' | 'SEPARATE';
|
100
103
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import { FlattedCheckCascaderDataItem, CheckCascaderDataItemRequiredProps } from './types';
|
3
3
|
export declare const CheckCascaderMenu: ({ prefixCls, role, className, data: menu, getCascaderItemRequiredProps, }: CheckCascaderMenuProps) => JSX.Element;
|
4
4
|
export interface CheckCascaderMenuProps {
|
5
5
|
/**
|
@@ -21,13 +21,13 @@ export interface CheckCascaderMenuProps {
|
|
21
21
|
/**
|
22
22
|
* 设置选择项数据源
|
23
23
|
*/
|
24
|
-
data:
|
24
|
+
data: FlattedCheckCascaderDataItem[];
|
25
25
|
/**
|
26
26
|
* 自定义渲染节点的 title 内容
|
27
27
|
*/
|
28
|
-
titleRender?: (item:
|
28
|
+
titleRender?: (item: FlattedCheckCascaderDataItem) => React.ReactNode;
|
29
29
|
/**
|
30
30
|
* 获取级联选项必要状态
|
31
31
|
*/
|
32
|
-
getCascaderItemRequiredProps: (option:
|
32
|
+
getCascaderItemRequiredProps: (option: FlattedCheckCascaderDataItem) => CheckCascaderDataItemRequiredProps;
|
33
33
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { ExpandTrigger,
|
2
|
+
import { ExpandTrigger, CheckCascaderDataItemEventData, FlattedCheckCascaderDataItem, CheckCascaderDataItem } from './types';
|
3
3
|
/**
|
4
4
|
* TODO: What is CheckCascaderMenus
|
5
5
|
*/
|
@@ -24,15 +24,15 @@ export interface CascaderMenusProps {
|
|
24
24
|
/**
|
25
25
|
* 设置选择项数据源
|
26
26
|
*/
|
27
|
-
data:
|
27
|
+
data: CheckCascaderDataItem[];
|
28
28
|
/**
|
29
29
|
* 更新选择项数据源
|
30
30
|
*/
|
31
|
-
onChangeData: React.Dispatch<React.SetStateAction<
|
31
|
+
onChangeData: React.Dispatch<React.SetStateAction<CheckCascaderDataItem[]>>;
|
32
32
|
/**
|
33
33
|
* 设置选择项数据源
|
34
34
|
*/
|
35
|
-
flattedData:
|
35
|
+
flattedData: FlattedCheckCascaderDataItem[];
|
36
36
|
/**
|
37
37
|
* 设置当前多选值
|
38
38
|
*/
|
@@ -48,7 +48,7 @@ export interface CascaderMenusProps {
|
|
48
48
|
/**
|
49
49
|
* 选项被点击时的回调
|
50
50
|
*/
|
51
|
-
onSelect?: (selectedId: React.ReactText, selectedOption:
|
51
|
+
onSelect?: (selectedId: React.ReactText, selectedOption: CheckCascaderDataItemEventData) => void;
|
52
52
|
/**
|
53
53
|
* 次级菜单的展开方式
|
54
54
|
*/
|
@@ -64,7 +64,15 @@ export interface CascaderMenusProps {
|
|
64
64
|
/**
|
65
65
|
* 自定义渲染节点的 title 内容
|
66
66
|
*/
|
67
|
-
titleRender?: (item:
|
67
|
+
titleRender?: (item: CheckCascaderDataItemEventData) => React.ReactNode;
|
68
|
+
/**
|
69
|
+
* 多选数据交互时回填、回显模式
|
70
|
+
* PARENT: 当所有子节点被选中时将只保留父节点
|
71
|
+
* ALL: 所有被选中节点,不区分父子节点(不支持异步数据加载勾选checkbox)
|
72
|
+
* CHILD: 仅显示子节点(不支持异步数据加载勾选checkbox)
|
73
|
+
* SEPARATE:父子完全独立受控
|
74
|
+
*/
|
75
|
+
checkedMode?: 'PARENT' | 'CHILD' | 'ALL' | 'SEPARATE';
|
68
76
|
/**
|
69
77
|
* 支持 checkbox 级联(正反选)功能
|
70
78
|
*/
|
@@ -73,5 +81,8 @@ export interface CascaderMenusProps {
|
|
73
81
|
* 将 check 子项拍平展示
|
74
82
|
*/
|
75
83
|
flatted?: boolean;
|
76
|
-
|
84
|
+
/**
|
85
|
+
* 点击异步加载子项
|
86
|
+
*/
|
87
|
+
onLoadChildren?: (item: CheckCascaderDataItemEventData, idPaths: React.ReactText[]) => Promise<CheckCascaderDataItem[] | void> | void;
|
77
88
|
}
|
package/lib/types/context.d.ts
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { ExpandTrigger,
|
2
|
+
import { ExpandTrigger, CheckCascaderDataItemEventData, CheckCascaderDataItem, FlattedCheckCascaderDataItem, CheckCascaderDataItemRequiredProps } from './types';
|
3
3
|
interface CheckCascaderContext {
|
4
|
-
onLoadChildren?: (item:
|
4
|
+
onLoadChildren?: (item: CheckCascaderDataItemEventData, idPaths: React.ReactText[]) => Promise<CheckCascaderDataItem[] | void> | void;
|
5
5
|
disabled?: boolean;
|
6
6
|
expandTrigger?: ExpandTrigger;
|
7
|
-
onCheck?: (option:
|
8
|
-
onSelect?: (selectedOption:
|
7
|
+
onCheck?: (option: CheckCascaderDataItemEventData, shouldChecked: boolean) => void;
|
8
|
+
onSelect?: (selectedOption: CheckCascaderDataItemEventData) => void;
|
9
9
|
flatted?: boolean;
|
10
10
|
changeOnSelect?: boolean;
|
11
|
-
titleRender?: (item:
|
12
|
-
getCascaderItemRequiredProps?: (item:
|
11
|
+
titleRender?: (item: CheckCascaderDataItemEventData) => React.ReactNode;
|
12
|
+
getCascaderItemRequiredProps?: (item: FlattedCheckCascaderDataItem) => CheckCascaderDataItemRequiredProps;
|
13
13
|
}
|
14
14
|
export declare const CheckCascaderProvider: React.Provider<CheckCascaderContext>;
|
15
15
|
export declare const useCheckCascaderContext: () => CheckCascaderContext;
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
3
|
-
export declare const useAsyncSwitch: (setCascaderData: React.Dispatch<React.SetStateAction<
|
2
|
+
import { CheckCascaderDataItem, CheckCascaderDataItemEventData } from '../types';
|
3
|
+
export declare const useAsyncSwitch: (setCascaderData: React.Dispatch<React.SetStateAction<CheckCascaderDataItem[]>>, onExpand?: ((selectedOption: CheckCascaderDataItemEventData) => void) | undefined, onLoadChildren?: ((item: CheckCascaderDataItemEventData, idPaths: React.ReactText[]) => Promise<CheckCascaderDataItem[] | void> | void) | undefined) => readonly [(id: React.ReactText) => boolean, (node: CheckCascaderDataItemEventData) => Promise<void>];
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
3
|
-
export declare const useCheck: (
|
2
|
+
import { CheckCascaderDataItemEventData, FlattedCheckCascaderDataItem } from '../types';
|
3
|
+
export declare const useCheck: (checkedMode: string, disabled: boolean, flattedData: FlattedCheckCascaderDataItem[], defaultCheckedIds?: React.ReactText[], checkedIdsProp?: React.ReactText[] | undefined, onCheck?: ((checkedInfo: {
|
4
4
|
checkedIds: React.ReactText[];
|
5
5
|
semiCheckedIds: React.ReactText[];
|
6
|
-
}, node:
|
6
|
+
}, node: CheckCascaderDataItemEventData, checked: boolean) => void) | undefined) => readonly [(targetItem: import("@hi-ui/use-check").UseCascadeCheckItem, shouldChecked: boolean) => void, (id: React.ReactText) => boolean, (id: React.ReactText) => boolean];
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import { CheckCascaderDataItemEventData } from '../types';
|
3
3
|
/**
|
4
4
|
* 用于选中的 hook
|
5
5
|
*
|
6
6
|
* @param disabled
|
7
7
|
* @returns
|
8
8
|
*/
|
9
|
-
export declare const useSelect: (disabled: boolean) => readonly [React.ReactText | undefined, (selectedOption:
|
9
|
+
export declare const useSelect: (disabled: boolean) => readonly [React.ReactText | undefined, (selectedOption: CheckCascaderDataItemEventData) => void];
|