@hi-ui/check-tree-select 4.0.0-beta.32 → 4.0.0-beta.35

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.
@@ -49,6 +49,8 @@ var funcUtils = require('@hi-ui/func-utils');
49
49
 
50
50
  var useSearchMode = require('@hi-ui/use-search-mode');
51
51
 
52
+ var useCheck = require('./hooks/use-check.js');
53
+
52
54
  function _interopDefaultLegacy(e) {
53
55
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
54
56
  'default': e
@@ -79,7 +81,8 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
79
81
  onClose = _a.onClose,
80
82
  _a$fieldNames = _a.fieldNames,
81
83
  fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
82
- checkedMode = _a.checkedMode,
84
+ _a$checkedMode = _a.checkedMode,
85
+ checkedMode = _a$checkedMode === void 0 ? 'ALL' : _a$checkedMode,
83
86
  _a$defaultExpandAll = _a.defaultExpandAll,
84
87
  defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
85
88
  expandedIdsProp = _a.expandedIds,
@@ -115,8 +118,7 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
115
118
  onClose: onClose
116
119
  }),
117
120
  menuVisible = _useUncontrolledToggl[0],
118
- menuVisibleAction = _useUncontrolledToggl[1]; // const [viewSelected, setViewSelected] = useState(false)
119
-
121
+ menuVisibleAction = _useUncontrolledToggl[1];
120
122
  /**
121
123
  * 转换对象
122
124
  */
@@ -159,34 +161,27 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
159
161
  expandedIds = _useUncontrolledState[0],
160
162
  tryChangeExpandedIds = _useUncontrolledState[1];
161
163
 
162
- var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
163
- value = _useUncontrolledState2[0],
164
- tryChangeValue = _useUncontrolledState2[1]; // 搜索时临时选中缓存数据
165
-
166
-
167
- var _useState = React.useState([]),
168
- selectedItems = _useState[0],
169
- setSelectedItems = _useState[1];
170
-
171
- var onSelect = React.useCallback(function (checkedIds, option) {
172
- tryChangeValue(checkedIds, option); // 存取异步选中数据
173
-
174
- setSelectedItems(function (prev) {
175
- var next = [].concat(prev);
176
- var targetNode = option.targetNode,
177
- checked = option.checked;
178
-
179
- if (checked) {
180
- next.push(targetNode);
181
- } else {
182
- next.filter(function (item) {
183
- return item.id !== targetNode.id;
184
- });
185
- }
186
-
187
- return next;
188
- });
189
- }, [tryChangeValue]); // ************************** 异步搜索 ************************* //
164
+ var _useCheck = useCheck.useCheck(checkedMode, disabled, flattedData, defaultValue, valueProp, onChange),
165
+ value = _useCheck[0],
166
+ tryChangeValue = _useCheck[1],
167
+ onNodeCheck = _useCheck[2],
168
+ checkedNodes = _useCheck[3],
169
+ parsedCheckedIds = _useCheck[4];
170
+
171
+ var onCheck = React.useCallback(function (checkedIds, option) {
172
+ var targetNode = option.targetNode,
173
+ checked = option.checked;
174
+ onNodeCheck(targetNode, checked);
175
+ }, [onNodeCheck]);
176
+ var onValueChange = React.useCallback(function (values, targetItem, shouldChecked) {
177
+ // 清空
178
+ if (values.length === 0) {
179
+ tryChangeValue([], null, shouldChecked, []);
180
+ } else {
181
+ // 操作单个
182
+ onNodeCheck(targetItem[0], shouldChecked);
183
+ }
184
+ }, [tryChangeValue, onNodeCheck]); // ************************** 异步搜索 ************************* //
190
185
  // const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
191
186
 
192
187
  var _b = useSearchMode.useAsyncSearch({
@@ -252,9 +247,9 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
252
247
  }; // 下拉菜单不能合并(因为树形数据,不知道是第几级)
253
248
 
254
249
  var mergedData = React.useMemo(function () {
255
- var nextData = selectedItems.concat(flattedData);
250
+ var nextData = checkedNodes.concat(flattedData);
256
251
  return arrayUtils.uniqBy(nextData, 'id');
257
- }, [selectedItems, flattedData]);
252
+ }, [checkedNodes, flattedData]);
258
253
  var cls = classname.cx(prefixCls, className); // 过滤掉未选中的数据
259
254
  // const tagList = useMemo(() => {
260
255
  // // @ts-ignore
@@ -295,19 +290,22 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
295
290
  focused: menuVisible,
296
291
  appearance: appearance,
297
292
  value: value,
298
- onChange: tryChangeValue,
293
+ onChange: onValueChange,
299
294
  data: mergedData,
300
295
  // @ts-ignore
301
296
  invalid: invalid
302
297
  })
303
- }), typeAssertion.isArrayNonEmpty(treeProps.data) ? /*#__PURE__*/React__default["default"].createElement(tree.Tree, Object.assign({
298
+ }), typeAssertion.isArrayNonEmpty(treeProps.data) ?
299
+ /*#__PURE__*/
300
+ // 只做渲染,不做逻辑处理(比如搜索过滤后,check操作的是对过滤后的data操作,这是不符合预期的)
301
+ React__default["default"].createElement(tree.Tree, Object.assign({
304
302
  className: prefixCls + "__tree",
305
303
  selectable: false,
306
304
  checkable: true,
307
305
  checkOnSelect: true,
308
- checkedMode: checkedMode,
309
- checkedIds: value,
310
- onCheck: onSelect,
306
+ checkedMode: checkedMode === 'SEPARATE' ? 'SEPARATE' : 'ALL',
307
+ checkedIds: parsedCheckedIds,
308
+ onCheck: onCheck,
311
309
  // TODO: 支持 fieldNames
312
310
  // @ts-ignore
313
311
  onLoadChildren: onLoadChildren,
@@ -0,0 +1,92 @@
1
+ /** @LICENSE
2
+ * @hi-ui/check-tree-select
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-select#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ 'use strict';
11
+
12
+ Object.defineProperty(exports, '__esModule', {
13
+ value: true
14
+ });
15
+
16
+ var React = require('react');
17
+
18
+ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
19
+
20
+ var useCheck$1 = require('@hi-ui/use-check');
21
+
22
+ var index = require('../utils/index.js');
23
+ /**
24
+ * 用于 tree 组件复选的 hook
25
+ */
26
+
27
+
28
+ var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultCheckedIds, checkedIdsProp, onCheck) {
29
+ // 搜索时临时选中缓存数据
30
+ var _useState = React.useState([]),
31
+ checkedNodes = _useState[0],
32
+ setCheckedNodes = _useState[1];
33
+
34
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultCheckedIds, checkedIdsProp, function (checkedIds, checkedNode, checked, semiCheckedIds) {
35
+ var nextCheckedNodes = flattedData.filter(function (item) {
36
+ return checkedIds.includes(item.id);
37
+ });
38
+ setCheckedNodes(nextCheckedNodes);
39
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(checkedIds, {
40
+ checkedNodes: nextCheckedNodes.map(function (item) {
41
+ return item.raw;
42
+ }),
43
+ targetNode: checkedNode,
44
+ semiCheckedIds: semiCheckedIds,
45
+ checked: checked
46
+ });
47
+ }),
48
+ checkedIds = _useUncontrolledState[0],
49
+ trySetCheckedIds = _useUncontrolledState[1]; // 入口数据处理
50
+
51
+
52
+ var parsedCheckedIds = React.useMemo(function () {
53
+ return index.parseCheckDataDirty(checkedMode, checkedIds, flattedData, allowCheck);
54
+ }, [checkedMode, checkedIds, flattedData]);
55
+ var cascaded = checkedMode !== 'SEPARATE';
56
+
57
+ var _useCascadeCheck = useCheck$1.useCascadeCheck({
58
+ cascaded: cascaded,
59
+ disabled: disabled,
60
+ flattedData: flattedData,
61
+ checkedIds: parsedCheckedIds,
62
+ onCheck: function onCheck(checkedIds, checkedNode, checked, semiCheckedIds) {
63
+ // 出口数据处理
64
+ var processedIds = index.processCheckedIds(checkedMode, checkedIds, flattedData, allowCheck);
65
+ trySetCheckedIds(processedIds, checkedNode, checked, semiCheckedIds);
66
+ },
67
+ allowCheck: allowCheck
68
+ }),
69
+ onNodeCheck = _useCascadeCheck[0];
70
+
71
+ var proxyOnNodeCheck = React.useCallback(function (target, shouldChecked) {
72
+ // 保证 target 来源于原数据自身,而不是tree内部
73
+ var targetNode = flattedData.find(function (item) {
74
+ return item.id === target.id;
75
+ });
76
+
77
+ if (targetNode) {
78
+ onNodeCheck(targetNode, shouldChecked);
79
+ }
80
+ }, [onNodeCheck, flattedData]);
81
+ return [checkedIds, trySetCheckedIds, proxyOnNodeCheck, checkedNodes, parsedCheckedIds];
82
+ };
83
+
84
+ var allowCheck = function allowCheck(targetItem) {
85
+ if (targetItem.disabled) {
86
+ return false;
87
+ }
88
+
89
+ return true;
90
+ };
91
+
92
+ exports.useCheck = useCheck;
@@ -14,7 +14,7 @@ Object.defineProperty(exports, '__esModule', {
14
14
  });
15
15
  var css_248z = "";
16
16
 
17
- var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
17
+ var __styleInject__ = require('inject-head-style')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
@@ -0,0 +1,162 @@
1
+ /** @LICENSE
2
+ * @hi-ui/check-tree-select
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-select#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ 'use strict';
11
+
12
+ Object.defineProperty(exports, '__esModule', {
13
+ value: true
14
+ });
15
+
16
+ var treeUtils = require('@hi-ui/tree-utils');
17
+
18
+ var typeAssertion = require('@hi-ui/type-assertion');
19
+ /**
20
+ * 处理选中的回显数据
21
+ *
22
+ * @param checkedIds 当前所有被选中的节点 ID 集合
23
+ * @param nodeEntries 所有数据的Map 集合
24
+ * @param type 数据回显方式
25
+ */
26
+
27
+
28
+ var processCheckedIds = function processCheckedIds(type, checkedIds, flattenData, allowCheck) {
29
+ var keySet = new Set(checkedIds);
30
+
31
+ switch (type) {
32
+ case 'CHILD':
33
+ return checkedIds.filter(function (id) {
34
+ var node = treeUtils.fFindNodeById(flattenData, id);
35
+
36
+ if (node) {
37
+ var children = node.children;
38
+
39
+ if (typeAssertion.isArrayNonEmpty(children)) {
40
+ if (children.filter(allowCheck).every(function (node) {
41
+ return keySet.has(node.id);
42
+ })) {
43
+ return false;
44
+ }
45
+ }
46
+ } // 没有孩子节点,保留
47
+
48
+
49
+ return true;
50
+ });
51
+
52
+ case 'PARENT':
53
+ return checkedIds.filter(function (id) {
54
+ var node = treeUtils.fFindNodeById(flattenData, id);
55
+
56
+ if (node) {
57
+ // 向上递归遍历是否被勾选
58
+ var ancestors = treeUtils.getNodeAncestors(node);
59
+
60
+ if (ancestors.some(function (parent) {
61
+ return keySet.has(parent.id);
62
+ })) {
63
+ return false;
64
+ }
65
+ }
66
+
67
+ return true;
68
+ });
69
+ }
70
+
71
+ return checkedIds;
72
+ };
73
+ /**
74
+ * 根据传入的 checkedIds 解析全选/半选数据
75
+ */
76
+
77
+
78
+ var parseCheckDataDirty = function parseCheckDataDirty(type, checkedIds, flattenData, allowCheck) {
79
+ switch (type) {
80
+ case 'CHILD':
81
+ case 'PARENT':
82
+ return dirtyCheck(checkedIds, flattenData, allowCheck);
83
+ }
84
+
85
+ return checkedIds;
86
+ };
87
+
88
+ function dirtyCheck(checkedIds, flattenData, allowCheck) {
89
+ var nodeEntities = flattenData.reduce(function (prev, cur) {
90
+ prev[cur.id] = cur;
91
+ return prev;
92
+ }, {});
93
+ var checkedIdsSet = new Set(checkedIds.filter(function (id) {
94
+ return !!nodeEntities[id];
95
+ }));
96
+ var depthEntities = new Map();
97
+ var maxDepth = 0; // Convert entities by depth for calculation
98
+
99
+ Object.keys(nodeEntities).forEach(function (id) {
100
+ var entity = nodeEntities[id];
101
+ var depth = entity.depth;
102
+ var depthSet = depthEntities.get(depth);
103
+
104
+ if (!depthSet) {
105
+ depthSet = new Set();
106
+ depthEntities.set(depth, depthSet);
107
+ }
108
+
109
+ depthSet.add(entity);
110
+ maxDepth = Math.max(maxDepth, depth);
111
+ });
112
+ return fillCheck(checkedIdsSet, depthEntities, nodeEntities, maxDepth, allowCheck);
113
+ }
114
+ /**
115
+ * 对 checkedIds 级联遗漏选项 id 填充
116
+ *
117
+ * 1. 把所有嵌套孩子节点 allowCheck 的都标记为 checked
118
+ * 2. 祖先节点从下至上维护 checked 状态
119
+ */
120
+
121
+
122
+ function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck) {
123
+ var checkedIdsSet = new Set(checkedIds);
124
+ checkedIdsSet.forEach(function (id) {
125
+ var checkedNode = nodeEntities[id];
126
+ var nestedChildren = treeUtils.findNestedChildren(checkedNode, allowCheck);
127
+ nestedChildren.forEach(function (child) {
128
+ checkedIdsSet.add(child.id);
129
+ });
130
+ }); // 缓存中间结果,优化查询
131
+
132
+ var visitedIds = new Map();
133
+
134
+ for (var depth = maxDepth - 1; depth >= 0; --depth) {
135
+ var entities = depthEntities.get(depth);
136
+ entities === null || entities === void 0 ? void 0 : entities.forEach(function (entity) {
137
+ var id = entity.id,
138
+ children = entity.children;
139
+ if (visitedIds.has(id)) return;
140
+
141
+ if (typeAssertion.isArrayNonEmpty(children)) {
142
+ var shouldChecked = !children.some(function (child) {
143
+ if (visitedIds.has(child.id)) {
144
+ return !visitedIds.get(child.id);
145
+ }
146
+
147
+ return !checkedIdsSet.has(child.id);
148
+ });
149
+ visitedIds.set(id, shouldChecked);
150
+
151
+ if (shouldChecked && allowCheck(entity)) {
152
+ checkedIdsSet.add(id);
153
+ }
154
+ }
155
+ });
156
+ }
157
+
158
+ return Array.from(checkedIdsSet);
159
+ }
160
+
161
+ exports.parseCheckDataDirty = parseCheckDataDirty;
162
+ exports.processCheckedIds = processCheckedIds;
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useCallback, useMemo, useState } from 'react';
11
+ import React, { forwardRef, useCallback, useMemo } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
@@ -24,6 +24,7 @@ import { UpOutlined, DownOutlined } from '@hi-ui/icons';
24
24
  import { useLocaleContext } from '@hi-ui/locale-context';
25
25
  import { callAllFuncs } from '@hi-ui/func-utils';
26
26
  import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useHighlightSearch, useSearchMode } from '@hi-ui/use-search-mode';
27
+ import { useCheck } from './hooks/use-check.js';
27
28
  var TREE_SELECT_PREFIX = getPrefixCls('check-tree-select');
28
29
  var DEFAULT_DATA = [];
29
30
  var DEFAULT_VALUE = [];
@@ -46,7 +47,8 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
46
47
  onClose = _a.onClose,
47
48
  _a$fieldNames = _a.fieldNames,
48
49
  fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
49
- checkedMode = _a.checkedMode,
50
+ _a$checkedMode = _a.checkedMode,
51
+ checkedMode = _a$checkedMode === void 0 ? 'ALL' : _a$checkedMode,
50
52
  _a$defaultExpandAll = _a.defaultExpandAll,
51
53
  defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
52
54
  expandedIdsProp = _a.expandedIds,
@@ -82,8 +84,7 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
82
84
  onClose: onClose
83
85
  }),
84
86
  menuVisible = _useUncontrolledToggl[0],
85
- menuVisibleAction = _useUncontrolledToggl[1]; // const [viewSelected, setViewSelected] = useState(false)
86
-
87
+ menuVisibleAction = _useUncontrolledToggl[1];
87
88
  /**
88
89
  * 转换对象
89
90
  */
@@ -126,34 +127,27 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
126
127
  expandedIds = _useUncontrolledState[0],
127
128
  tryChangeExpandedIds = _useUncontrolledState[1];
128
129
 
129
- var _useUncontrolledState2 = useUncontrolledState(defaultValue, valueProp, onChange),
130
- value = _useUncontrolledState2[0],
131
- tryChangeValue = _useUncontrolledState2[1]; // 搜索时临时选中缓存数据
132
-
133
-
134
- var _useState = useState([]),
135
- selectedItems = _useState[0],
136
- setSelectedItems = _useState[1];
137
-
138
- var onSelect = useCallback(function (checkedIds, option) {
139
- tryChangeValue(checkedIds, option); // 存取异步选中数据
140
-
141
- setSelectedItems(function (prev) {
142
- var next = [].concat(prev);
143
- var targetNode = option.targetNode,
144
- checked = option.checked;
145
-
146
- if (checked) {
147
- next.push(targetNode);
148
- } else {
149
- next.filter(function (item) {
150
- return item.id !== targetNode.id;
151
- });
152
- }
153
-
154
- return next;
155
- });
156
- }, [tryChangeValue]); // ************************** 异步搜索 ************************* //
130
+ var _useCheck = useCheck(checkedMode, disabled, flattedData, defaultValue, valueProp, onChange),
131
+ value = _useCheck[0],
132
+ tryChangeValue = _useCheck[1],
133
+ onNodeCheck = _useCheck[2],
134
+ checkedNodes = _useCheck[3],
135
+ parsedCheckedIds = _useCheck[4];
136
+
137
+ var onCheck = useCallback(function (checkedIds, option) {
138
+ var targetNode = option.targetNode,
139
+ checked = option.checked;
140
+ onNodeCheck(targetNode, checked);
141
+ }, [onNodeCheck]);
142
+ var onValueChange = useCallback(function (values, targetItem, shouldChecked) {
143
+ // 清空
144
+ if (values.length === 0) {
145
+ tryChangeValue([], null, shouldChecked, []);
146
+ } else {
147
+ // 操作单个
148
+ onNodeCheck(targetItem[0], shouldChecked);
149
+ }
150
+ }, [tryChangeValue, onNodeCheck]); // ************************** 异步搜索 ************************* //
157
151
  // const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
158
152
 
159
153
  var _b = useAsyncSearch({
@@ -219,9 +213,9 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
219
213
  }; // 下拉菜单不能合并(因为树形数据,不知道是第几级)
220
214
 
221
215
  var mergedData = useMemo(function () {
222
- var nextData = selectedItems.concat(flattedData);
216
+ var nextData = checkedNodes.concat(flattedData);
223
217
  return uniqBy(nextData, 'id');
224
- }, [selectedItems, flattedData]);
218
+ }, [checkedNodes, flattedData]);
225
219
  var cls = cx(prefixCls, className); // 过滤掉未选中的数据
226
220
  // const tagList = useMemo(() => {
227
221
  // // @ts-ignore
@@ -262,19 +256,22 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
262
256
  focused: menuVisible,
263
257
  appearance: appearance,
264
258
  value: value,
265
- onChange: tryChangeValue,
259
+ onChange: onValueChange,
266
260
  data: mergedData,
267
261
  // @ts-ignore
268
262
  invalid: invalid
269
263
  })
270
- }), isArrayNonEmpty(treeProps.data) ? /*#__PURE__*/React.createElement(Tree, Object.assign({
264
+ }), isArrayNonEmpty(treeProps.data) ?
265
+ /*#__PURE__*/
266
+ // 只做渲染,不做逻辑处理(比如搜索过滤后,check操作的是对过滤后的data操作,这是不符合预期的)
267
+ React.createElement(Tree, Object.assign({
271
268
  className: prefixCls + "__tree",
272
269
  selectable: false,
273
270
  checkable: true,
274
271
  checkOnSelect: true,
275
- checkedMode: checkedMode,
276
- checkedIds: value,
277
- onCheck: onSelect,
272
+ checkedMode: checkedMode === 'SEPARATE' ? 'SEPARATE' : 'ALL',
273
+ checkedIds: parsedCheckedIds,
274
+ onCheck: onCheck,
278
275
  // TODO: 支持 fieldNames
279
276
  // @ts-ignore
280
277
  onLoadChildren: onLoadChildren,
@@ -0,0 +1,82 @@
1
+ /** @LICENSE
2
+ * @hi-ui/check-tree-select
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-select#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { useState, useMemo, useCallback } from 'react';
11
+ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
12
+ import { useCascadeCheck } from '@hi-ui/use-check';
13
+ import { parseCheckDataDirty, processCheckedIds } from '../utils/index.js';
14
+ /**
15
+ * 用于 tree 组件复选的 hook
16
+ */
17
+
18
+ var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultCheckedIds, checkedIdsProp, onCheck) {
19
+ // 搜索时临时选中缓存数据
20
+ var _useState = useState([]),
21
+ checkedNodes = _useState[0],
22
+ setCheckedNodes = _useState[1];
23
+
24
+ var _useUncontrolledState = useUncontrolledState(defaultCheckedIds, checkedIdsProp, function (checkedIds, checkedNode, checked, semiCheckedIds) {
25
+ var nextCheckedNodes = flattedData.filter(function (item) {
26
+ return checkedIds.includes(item.id);
27
+ });
28
+ setCheckedNodes(nextCheckedNodes);
29
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(checkedIds, {
30
+ checkedNodes: nextCheckedNodes.map(function (item) {
31
+ return item.raw;
32
+ }),
33
+ targetNode: checkedNode,
34
+ semiCheckedIds: semiCheckedIds,
35
+ checked: checked
36
+ });
37
+ }),
38
+ checkedIds = _useUncontrolledState[0],
39
+ trySetCheckedIds = _useUncontrolledState[1]; // 入口数据处理
40
+
41
+
42
+ var parsedCheckedIds = useMemo(function () {
43
+ return parseCheckDataDirty(checkedMode, checkedIds, flattedData, allowCheck);
44
+ }, [checkedMode, checkedIds, flattedData]);
45
+ var cascaded = checkedMode !== 'SEPARATE';
46
+
47
+ var _useCascadeCheck = useCascadeCheck({
48
+ cascaded: cascaded,
49
+ disabled: disabled,
50
+ flattedData: flattedData,
51
+ checkedIds: parsedCheckedIds,
52
+ onCheck: function onCheck(checkedIds, checkedNode, checked, semiCheckedIds) {
53
+ // 出口数据处理
54
+ var processedIds = processCheckedIds(checkedMode, checkedIds, flattedData, allowCheck);
55
+ trySetCheckedIds(processedIds, checkedNode, checked, semiCheckedIds);
56
+ },
57
+ allowCheck: allowCheck
58
+ }),
59
+ onNodeCheck = _useCascadeCheck[0];
60
+
61
+ var proxyOnNodeCheck = useCallback(function (target, shouldChecked) {
62
+ // 保证 target 来源于原数据自身,而不是tree内部
63
+ var targetNode = flattedData.find(function (item) {
64
+ return item.id === target.id;
65
+ });
66
+
67
+ if (targetNode) {
68
+ onNodeCheck(targetNode, shouldChecked);
69
+ }
70
+ }, [onNodeCheck, flattedData]);
71
+ return [checkedIds, trySetCheckedIds, proxyOnNodeCheck, checkedNodes, parsedCheckedIds];
72
+ };
73
+
74
+ var allowCheck = function allowCheck(targetItem) {
75
+ if (targetItem.disabled) {
76
+ return false;
77
+ }
78
+
79
+ return true;
80
+ };
81
+
82
+ export { useCheck };
@@ -7,7 +7,7 @@
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 __styleInject__ from 'style-inject/dist/style-inject.es.js';
10
+ import __styleInject__ from 'inject-head-style';
11
11
  var css_248z = "";
12
12
 
13
13
  __styleInject__(css_248z);
@@ -0,0 +1,153 @@
1
+ /** @LICENSE
2
+ * @hi-ui/check-tree-select
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-select#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { fFindNodeById, getNodeAncestors, findNestedChildren } from '@hi-ui/tree-utils';
11
+ import { isArrayNonEmpty } from '@hi-ui/type-assertion';
12
+ /**
13
+ * 处理选中的回显数据
14
+ *
15
+ * @param checkedIds 当前所有被选中的节点 ID 集合
16
+ * @param nodeEntries 所有数据的Map 集合
17
+ * @param type 数据回显方式
18
+ */
19
+
20
+ var processCheckedIds = function processCheckedIds(type, checkedIds, flattenData, allowCheck) {
21
+ var keySet = new Set(checkedIds);
22
+
23
+ switch (type) {
24
+ case 'CHILD':
25
+ return checkedIds.filter(function (id) {
26
+ var node = fFindNodeById(flattenData, id);
27
+
28
+ if (node) {
29
+ var children = node.children;
30
+
31
+ if (isArrayNonEmpty(children)) {
32
+ if (children.filter(allowCheck).every(function (node) {
33
+ return keySet.has(node.id);
34
+ })) {
35
+ return false;
36
+ }
37
+ }
38
+ } // 没有孩子节点,保留
39
+
40
+
41
+ return true;
42
+ });
43
+
44
+ case 'PARENT':
45
+ return checkedIds.filter(function (id) {
46
+ var node = fFindNodeById(flattenData, id);
47
+
48
+ if (node) {
49
+ // 向上递归遍历是否被勾选
50
+ var ancestors = getNodeAncestors(node);
51
+
52
+ if (ancestors.some(function (parent) {
53
+ return keySet.has(parent.id);
54
+ })) {
55
+ return false;
56
+ }
57
+ }
58
+
59
+ return true;
60
+ });
61
+ }
62
+
63
+ return checkedIds;
64
+ };
65
+ /**
66
+ * 根据传入的 checkedIds 解析全选/半选数据
67
+ */
68
+
69
+
70
+ var parseCheckDataDirty = function parseCheckDataDirty(type, checkedIds, flattenData, allowCheck) {
71
+ switch (type) {
72
+ case 'CHILD':
73
+ case 'PARENT':
74
+ return dirtyCheck(checkedIds, flattenData, allowCheck);
75
+ }
76
+
77
+ return checkedIds;
78
+ };
79
+
80
+ function dirtyCheck(checkedIds, flattenData, allowCheck) {
81
+ var nodeEntities = flattenData.reduce(function (prev, cur) {
82
+ prev[cur.id] = cur;
83
+ return prev;
84
+ }, {});
85
+ var checkedIdsSet = new Set(checkedIds.filter(function (id) {
86
+ return !!nodeEntities[id];
87
+ }));
88
+ var depthEntities = new Map();
89
+ var maxDepth = 0; // Convert entities by depth for calculation
90
+
91
+ Object.keys(nodeEntities).forEach(function (id) {
92
+ var entity = nodeEntities[id];
93
+ var depth = entity.depth;
94
+ var depthSet = depthEntities.get(depth);
95
+
96
+ if (!depthSet) {
97
+ depthSet = new Set();
98
+ depthEntities.set(depth, depthSet);
99
+ }
100
+
101
+ depthSet.add(entity);
102
+ maxDepth = Math.max(maxDepth, depth);
103
+ });
104
+ return fillCheck(checkedIdsSet, depthEntities, nodeEntities, maxDepth, allowCheck);
105
+ }
106
+ /**
107
+ * 对 checkedIds 级联遗漏选项 id 填充
108
+ *
109
+ * 1. 把所有嵌套孩子节点 allowCheck 的都标记为 checked
110
+ * 2. 祖先节点从下至上维护 checked 状态
111
+ */
112
+
113
+
114
+ function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck) {
115
+ var checkedIdsSet = new Set(checkedIds);
116
+ checkedIdsSet.forEach(function (id) {
117
+ var checkedNode = nodeEntities[id];
118
+ var nestedChildren = findNestedChildren(checkedNode, allowCheck);
119
+ nestedChildren.forEach(function (child) {
120
+ checkedIdsSet.add(child.id);
121
+ });
122
+ }); // 缓存中间结果,优化查询
123
+
124
+ var visitedIds = new Map();
125
+
126
+ for (var depth = maxDepth - 1; depth >= 0; --depth) {
127
+ var entities = depthEntities.get(depth);
128
+ entities === null || entities === void 0 ? void 0 : entities.forEach(function (entity) {
129
+ var id = entity.id,
130
+ children = entity.children;
131
+ if (visitedIds.has(id)) return;
132
+
133
+ if (isArrayNonEmpty(children)) {
134
+ var shouldChecked = !children.some(function (child) {
135
+ if (visitedIds.has(child.id)) {
136
+ return !visitedIds.get(child.id);
137
+ }
138
+
139
+ return !checkedIdsSet.has(child.id);
140
+ });
141
+ visitedIds.set(id, shouldChecked);
142
+
143
+ if (shouldChecked && allowCheck(entity)) {
144
+ checkedIdsSet.add(id);
145
+ }
146
+ }
147
+ });
148
+ }
149
+
150
+ return Array.from(checkedIdsSet);
151
+ }
152
+
153
+ export { parseCheckDataDirty, processCheckedIds };
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
- import { FieldNames, CheckTreeSelectDataItem } from './types';
3
- import { FlattedTreeNodeData, TreeNodeEventData } from '@hi-ui/tree';
2
+ import { CheckTreeSelectDataItem, CheckTreeSelectItemEventData, CheckTreeSelectAppearanceEnum } from './types';
3
+ import { FlattedTreeNodeData } from '@hi-ui/tree';
4
4
  import { PickerProps } from '@hi-ui/picker';
5
- import { HiBaseAppearanceEnum } from '@hi-ui/core';
6
5
  /**
7
6
  * TODO: What is CheckTreeSelect
8
7
  */
@@ -15,7 +14,7 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
15
14
  /**
16
15
  * 设置 data 中 id, title, disabled, children 对应的 key (3.0 新增) object - { title: 'title', id: 'id',disabled:'disabled', children: 'children'}
17
16
  */
18
- fieldNames?: FieldNames;
17
+ fieldNames?: Record<string, string>;
19
18
  /**
20
19
  * 多选数据交互时回填、回显模式
21
20
  * PARENT: 当所有子节点被选中时将只保留父节点
@@ -24,10 +23,6 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
24
23
  * SEPARATE:父子完全独立受控
25
24
  */
26
25
  checkedMode?: 'ALL' | 'PARENT' | 'CHILD' | 'SEPARATE';
27
- /**
28
- * 数据选择类型
29
- */
30
- type?: 'single' | 'multiple';
31
26
  /**
32
27
  * 是否有边框
33
28
  */
@@ -81,11 +76,11 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
81
76
  /**
82
77
  * 自定义渲染节点的 title 内容
83
78
  */
84
- render?: (node: TreeNodeEventData) => React.ReactNode;
79
+ render?: (node: CheckTreeSelectItemEventData) => React.ReactNode;
85
80
  /**
86
81
  * 点击异步加载子项
87
82
  */
88
- onLoadChildren?: (node: TreeNodeEventData) => void | Promise<CheckTreeSelectDataItem[] | void>;
83
+ onLoadChildren?: (node: CheckTreeSelectItemEventData) => void | Promise<CheckTreeSelectDataItem[] | void>;
89
84
  /**
90
85
  * 异步加载数据。暂不对外暴露
91
86
  */
@@ -105,13 +100,13 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
105
100
  * 选中时触发
106
101
  * checkedIds: 选中项 ID 集合
107
102
  * checkedNodes: 选中项数据项集合
108
- * targetNode: 当前操作节点
103
+ * targetNode: 当前操作节点,清空时为 null
109
104
  * checked: 当前操作是否为选中操作
110
105
  */
111
106
  onChange?: (checkedIds: React.ReactText[], options: {
112
107
  checkedNodes: CheckTreeSelectDataItem[];
113
108
  semiCheckedIds: React.ReactText[];
114
- targetNode: TreeNodeEventData;
109
+ targetNode: CheckTreeSelectItemEventData | null;
115
110
  checked: boolean;
116
111
  }) => void;
117
112
  /**
@@ -121,7 +116,7 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
121
116
  /**
122
117
  * 设置展现形式
123
118
  */
124
- appearance?: HiBaseAppearanceEnum;
119
+ appearance?: CheckTreeSelectAppearanceEnum;
125
120
  /**
126
121
  * 设置虚拟滚动容器的可视高度。暂不对外暴露
127
122
  * @private
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { FlattedCheckTreeSelectDataItem, CheckTreeSelectItemEventData, CheckTreeSelectDataItem } from '../types';
3
+ /**
4
+ * 用于 tree 组件复选的 hook
5
+ */
6
+ export declare const useCheck: (checkedMode: string, disabled: boolean, flattedData: FlattedCheckTreeSelectDataItem[], defaultCheckedIds: React.ReactText[], checkedIdsProp?: React.ReactText[] | undefined, onCheck?: ((checkedIds: React.ReactText[], options: {
7
+ checkedNodes: CheckTreeSelectDataItem[];
8
+ semiCheckedIds: React.ReactText[];
9
+ targetNode: CheckTreeSelectItemEventData;
10
+ checked: boolean;
11
+ }) => void) | undefined) => readonly [React.ReactText[], (stateOrFunction: React.SetStateAction<React.ReactText[]>, ...args: any[]) => void, (target: FlattedCheckTreeSelectDataItem, shouldChecked: boolean) => void, FlattedCheckTreeSelectDataItem[], React.ReactText[]];
@@ -1,5 +1,6 @@
1
- import { HiBaseDataItem } from '@hi-ui/core';
1
+ import type { HiBaseAppearanceEnum, HiBaseDataItem } from '@hi-ui/core';
2
2
  import React from 'react';
3
+ import { TreeNodeEventData } from '@hi-ui/tree';
3
4
  export interface CheckTreeSelectDataItem extends HiBaseDataItem {
4
5
  /**
5
6
  * 节点唯一 id
@@ -10,25 +11,29 @@ export interface CheckTreeSelectDataItem extends HiBaseDataItem {
10
11
  */
11
12
  title?: React.ReactNode;
12
13
  /**
13
- * 子级数据
14
+ * 子级数据列表
14
15
  */
15
16
  children?: CheckTreeSelectDataItem[];
16
17
  /**
17
- * 是否禁用
18
+ * 是否禁用该节点
18
19
  */
19
20
  disabled?: boolean;
20
21
  /**
21
- * 是否为叶子节点
22
+ * 是否为叶子节点,当 children 为空数组也表示为叶子结点
22
23
  */
23
24
  isLeaf?: boolean;
24
25
  }
25
26
  export interface FlattedCheckTreeSelectDataItem extends CheckTreeSelectDataItem {
27
+ /**
28
+ * 节点唯一 id
29
+ */
30
+ id: React.ReactText;
26
31
  /**
27
32
  * 该节点的子节点列表
28
33
  */
29
34
  children?: FlattedCheckTreeSelectDataItem[];
30
35
  /**
31
- * 关联用户传入的原始节点
36
+ * 关联用户传入的原始数据对象
32
37
  */
33
38
  raw: CheckTreeSelectDataItem;
34
39
  /**
@@ -72,9 +77,6 @@ export interface CheckTreeSelectDataSource<T = any> {
72
77
  }
73
78
  export declare type FilterOptionFunc = (keyword: string, item: CheckTreeSelectDataItem) => boolean;
74
79
  export declare type DataSourceFunc = (keyword: string) => CheckTreeSelectDataSource;
75
- export declare type FieldNames = {
76
- id?: string;
77
- title?: string;
78
- disabled?: string;
79
- children?: string;
80
- };
80
+ export interface CheckTreeSelectItemEventData extends TreeNodeEventData {
81
+ }
82
+ export declare type CheckTreeSelectAppearanceEnum = HiBaseAppearanceEnum | undefined;
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ /**
3
+ * 处理选中的回显数据
4
+ *
5
+ * @param checkedIds 当前所有被选中的节点 ID 集合
6
+ * @param nodeEntries 所有数据的Map 集合
7
+ * @param type 数据回显方式
8
+ */
9
+ export declare const processCheckedIds: (type: string, checkedIds: React.ReactText[], flattenData: any, allowCheck: (node: any) => boolean) => React.ReactText[];
10
+ /**
11
+ * 根据传入的 checkedIds 解析全选/半选数据
12
+ */
13
+ export declare const parseCheckDataDirty: (type: string, checkedIds: React.ReactText[], flattenData: any, allowCheck?: ((node: any) => boolean) | undefined) => React.ReactText[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/check-tree-select",
3
- "version": "4.0.0-beta.32",
3
+ "version": "4.0.0-beta.35",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,34 +43,35 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/array-utils": "^4.0.0-beta.7",
46
+ "@hi-ui/array-utils": "^4.0.0-beta.8",
47
47
  "@hi-ui/classname": "^4.0.0-beta.0",
48
- "@hi-ui/core": "^4.0.0-beta.8",
48
+ "@hi-ui/core": "^4.0.0-beta.9",
49
49
  "@hi-ui/core-css": "^4.0.0-beta.5",
50
- "@hi-ui/env": "^4.0.0-beta.0",
51
- "@hi-ui/func-utils": "^4.0.0-beta.12",
52
- "@hi-ui/highlighter": "^4.0.0-beta.9",
53
- "@hi-ui/icons": "^4.0.0-beta.10",
54
- "@hi-ui/locale-context": "^4.0.0-beta.18",
55
- "@hi-ui/picker": "^4.0.0-beta.23",
56
- "@hi-ui/popper": "^4.0.0-beta.13",
57
- "@hi-ui/tag-input": "^4.0.0-beta.18",
58
- "@hi-ui/tree": "^4.0.0-beta.30",
59
- "@hi-ui/tree-utils": "^4.0.0-beta.4",
60
- "@hi-ui/type-assertion": "^4.0.0-beta.4",
61
- "@hi-ui/use-data-source": "^4.0.0-beta.5",
62
- "@hi-ui/use-search-mode": "^4.0.0-beta.18",
63
- "@hi-ui/use-toggle": "^4.0.0-beta.4",
64
- "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.4"
50
+ "@hi-ui/env": "^4.0.0-beta.1",
51
+ "@hi-ui/func-utils": "^4.0.0-beta.13",
52
+ "@hi-ui/highlighter": "^4.0.0-beta.10",
53
+ "@hi-ui/icons": "^4.0.0-beta.11",
54
+ "@hi-ui/locale-context": "^4.0.0-beta.19",
55
+ "@hi-ui/picker": "^4.0.0-beta.26",
56
+ "@hi-ui/popper": "^4.0.0-beta.15",
57
+ "@hi-ui/tag-input": "^4.0.0-beta.19",
58
+ "@hi-ui/tree": "^4.0.0-beta.32",
59
+ "@hi-ui/tree-utils": "^4.0.0-beta.5",
60
+ "@hi-ui/type-assertion": "^4.0.0-beta.5",
61
+ "@hi-ui/use-check": "^4.0.0-beta.5",
62
+ "@hi-ui/use-data-source": "^4.0.0-beta.6",
63
+ "@hi-ui/use-search-mode": "^4.0.0-beta.20",
64
+ "@hi-ui/use-toggle": "^4.0.0-beta.5",
65
+ "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5"
65
66
  },
66
67
  "peerDependencies": {
67
68
  "react": ">=16.8.6",
68
69
  "react-dom": ">=16.8.6"
69
70
  },
70
71
  "devDependencies": {
71
- "@hi-ui/hi-build": "^4.0.0-beta.4",
72
+ "@hi-ui/hi-build": "^4.0.0-beta.5",
72
73
  "react": "^17.0.1",
73
74
  "react-dom": "^17.0.1"
74
75
  },
75
- "gitHead": "1639653e72981dcce445765c8b80866adcffcad0"
76
+ "gitHead": "8bb668d29361fae483ac3fde460bfc7e010417a6"
76
77
  }