@hi-ui/cascader 4.1.1 → 4.1.3
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 +36 -0
- package/lib/cjs/Cascader.js +95 -159
- package/lib/cjs/CascaderMenuList.js +35 -74
- package/lib/cjs/context.js +0 -9
- package/lib/cjs/hooks/use-async-switch.js +9 -45
- package/lib/cjs/hooks/use-cache/lib/esm/index.js +3 -10
- package/lib/cjs/hooks/use-select.js +3 -17
- package/lib/cjs/icons/index.js +3 -20
- package/lib/cjs/index.js +0 -3
- package/lib/cjs/styles/index.scss.js +1 -4
- package/lib/cjs/use-cascader.js +33 -53
- package/lib/cjs/utils/index.js +1 -24
- package/lib/esm/Cascader.js +84 -113
- package/lib/esm/CascaderMenuList.js +22 -38
- package/lib/esm/context.js +0 -4
- package/lib/esm/hooks/use-async-switch.js +5 -22
- package/lib/esm/hooks/use-cache/lib/esm/index.js +3 -5
- package/lib/esm/hooks/use-select.js +3 -9
- package/lib/esm/styles/index.scss.js +1 -3
- package/lib/esm/use-cascader.js +33 -42
- package/lib/esm/utils/index.js +1 -18
- package/package.json +22 -22
package/lib/esm/use-cascader.js
CHANGED
@@ -16,68 +16,60 @@ import { useSelect } from './hooks/use-select.js';
|
|
16
16
|
import { useAsyncSwitch } from './hooks/use-async-switch.js';
|
17
17
|
var NOOP_ARRAY = [];
|
18
18
|
var NOOP_VALUE = [];
|
19
|
-
|
20
19
|
var useCascader = function useCascader(_a) {
|
21
20
|
var _a$defaultValue = _a.defaultValue,
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
21
|
+
defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
|
22
|
+
valueProp = _a.value,
|
23
|
+
onChangeProp = _a.onChange,
|
24
|
+
_a$data = _a.data,
|
25
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
26
|
+
_a$disabled = _a.disabled,
|
27
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
28
|
+
_a$changeOnSelect = _a.changeOnSelect,
|
29
|
+
changeOnSelect = _a$changeOnSelect === void 0 ? false : _a$changeOnSelect,
|
30
|
+
_a$flatted = _a.flatted,
|
31
|
+
flatted = _a$flatted === void 0 ? false : _a$flatted,
|
32
|
+
onSelectProp = _a.onSelect,
|
33
|
+
onLoadChildren = _a.onLoadChildren,
|
34
|
+
cascaderDataProp = _a.cascaderData,
|
35
|
+
setCascaderDataProp = _a.setCascaderData,
|
36
|
+
flattedDataProp = _a.flattedData,
|
37
|
+
fieldNames = _a.fieldNames,
|
38
|
+
rest = __rest(_a, ["defaultValue", "value", "onChange", "data", "disabled", "changeOnSelect", "flatted", "onSelect", "onLoadChildren", "cascaderData", "setCascaderData", "flattedData", "fieldNames"]);
|
41
39
|
var _useCache = useCache(data),
|
42
|
-
|
43
|
-
|
44
|
-
|
40
|
+
cacheData = _useCache[0],
|
41
|
+
setCacheData = _useCache[1];
|
45
42
|
var cascaderData = cascaderDataProp !== null && cascaderDataProp !== void 0 ? cascaderDataProp : cacheData;
|
46
43
|
var setCascaderData = setCascaderDataProp !== null && setCascaderDataProp !== void 0 ? setCascaderDataProp : setCacheData;
|
47
44
|
var flattedData = useMemo(function () {
|
48
45
|
return flattedDataProp !== null && flattedDataProp !== void 0 ? flattedDataProp : flattenTreeData(cascaderData, fieldNames);
|
49
46
|
}, [cascaderData, flattedDataProp, fieldNames]);
|
50
|
-
|
51
47
|
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChangeProp),
|
52
|
-
|
53
|
-
|
54
|
-
|
48
|
+
value = _useUncontrolledState[0],
|
49
|
+
tryChangeValue = _useUncontrolledState[1];
|
55
50
|
var onSelect = function onSelect(value, item, itemPaths) {
|
56
51
|
tryChangeValue(itemPaths.map(function (_ref) {
|
57
52
|
var id = _ref.id;
|
58
53
|
return id;
|
59
54
|
}));
|
60
55
|
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
61
|
-
};
|
62
|
-
|
63
|
-
|
56
|
+
};
|
57
|
+
// 单击选中某项
|
64
58
|
var _useSelect = useSelect(disabled, onSelect, changeOnSelect, onLoadChildren),
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
59
|
+
selectedId = _useSelect[0],
|
60
|
+
onOptionSelect = _useSelect[1],
|
61
|
+
setSelectedId = _useSelect[2];
|
62
|
+
// 选中 id 路径
|
70
63
|
var selectedIds = useMemo(function () {
|
71
64
|
return getActiveNodePaths(flattedData, selectedId).map(function (_ref2) {
|
72
65
|
var id = _ref2.id;
|
73
66
|
return id;
|
74
67
|
});
|
75
|
-
}, [flattedData, selectedId]);
|
76
|
-
|
68
|
+
}, [flattedData, selectedId]);
|
69
|
+
// 存在异步加载数据的情况时,单击选中时需要控制异步加载状态
|
77
70
|
var _useAsyncSwitch = useAsyncSwitch(setCascaderData, onOptionSelect, onLoadChildren),
|
78
|
-
|
79
|
-
|
80
|
-
|
71
|
+
isLoadingId = _useAsyncSwitch[0],
|
72
|
+
onItemExpand = _useAsyncSwitch[1];
|
81
73
|
var onItemHover = useCallback(function (option) {
|
82
74
|
// hover模式,仅展开节点,不触发 change
|
83
75
|
onItemExpand(option, true);
|
@@ -90,7 +82,7 @@ var useCascader = function useCascader(_a) {
|
|
90
82
|
}, [flatted, flattedData, selectedId, isCanLoadChildren]);
|
91
83
|
var getItemRequiredProps = useCallback(function (_ref3) {
|
92
84
|
var id = _ref3.id,
|
93
|
-
|
85
|
+
depth = _ref3.depth;
|
94
86
|
return {
|
95
87
|
active: value[depth] === id,
|
96
88
|
selected: flatted ? selectedId === id : selectedIds[depth] === id,
|
@@ -118,5 +110,4 @@ var useCascader = function useCascader(_a) {
|
|
118
110
|
menuList: menuList
|
119
111
|
};
|
120
112
|
};
|
121
|
-
|
122
113
|
export { useCascader };
|
package/lib/esm/utils/index.js
CHANGED
@@ -9,10 +9,10 @@
|
|
9
9
|
*/
|
10
10
|
import { baseFlattenTree, getTopDownAncestors } from '@hi-ui/tree-utils';
|
11
11
|
import { isArrayNonEmpty } from '@hi-ui/type-assertion';
|
12
|
+
|
12
13
|
/**
|
13
14
|
* 扁平化树数据结构,基于前序遍历
|
14
15
|
*/
|
15
|
-
|
16
16
|
var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
17
17
|
/**
|
18
18
|
* 转换对象
|
@@ -21,10 +21,8 @@ var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
|
21
21
|
if (fieldNames) {
|
22
22
|
return node[fieldNames[key] || key];
|
23
23
|
}
|
24
|
-
|
25
24
|
return node[key];
|
26
25
|
};
|
27
|
-
|
28
26
|
return baseFlattenTree({
|
29
27
|
tree: treeData,
|
30
28
|
childrenFieldName: function childrenFieldName(node) {
|
@@ -32,7 +30,6 @@ var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
|
32
30
|
},
|
33
31
|
transform: function transform(node) {
|
34
32
|
var _a, _b;
|
35
|
-
|
36
33
|
var flattedNode = node;
|
37
34
|
var raw = node.raw;
|
38
35
|
flattedNode.id = getKeyFields(raw, 'id');
|
@@ -46,8 +43,6 @@ var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
|
46
43
|
/**
|
47
44
|
* 获取选中节点的节点路径,包含选中节点
|
48
45
|
*/
|
49
|
-
|
50
|
-
|
51
46
|
var getActiveNodePaths = function getActiveNodePaths(flattedData, selectedId) {
|
52
47
|
if (flattedData.length === 0) return [];
|
53
48
|
var selectedOption = flattedData.find(function (_ref) {
|
@@ -60,8 +55,6 @@ var getActiveNodePaths = function getActiveNodePaths(flattedData, selectedId) {
|
|
60
55
|
/**
|
61
56
|
* 获取自顶向下的兄弟节点列表菜单
|
62
57
|
*/
|
63
|
-
|
64
|
-
|
65
58
|
var getActiveMenus = function getActiveMenus(flattedData, selectedId) {
|
66
59
|
if (flattedData.length === 0) return [];
|
67
60
|
var root = flattedData[0].parent;
|
@@ -72,48 +65,39 @@ var getActiveMenus = function getActiveMenus(flattedData, selectedId) {
|
|
72
65
|
return selectedId === id;
|
73
66
|
});
|
74
67
|
if (!selectedOption) return menu;
|
75
|
-
|
76
68
|
if (selectedOption.children) {
|
77
69
|
menu = [selectedOption.children];
|
78
70
|
} else {
|
79
71
|
menu = [];
|
80
72
|
}
|
81
|
-
|
82
73
|
while (selectedOption.parent) {
|
83
74
|
menu.push(selectedOption.parent.children);
|
84
75
|
selectedOption = selectedOption.parent;
|
85
76
|
}
|
86
|
-
|
87
77
|
return menu.reverse();
|
88
78
|
};
|
89
|
-
|
90
79
|
var getFlattedMenus = function getFlattedMenus(data, filter) {
|
91
80
|
return [data.filter(function (item) {
|
92
81
|
return !filter(item);
|
93
82
|
})];
|
94
83
|
};
|
95
|
-
|
96
84
|
var checkCanLoadChildren = function checkCanLoadChildren(node, onLoadChildren) {
|
97
85
|
var hasChildren = isArrayNonEmpty(node.children);
|
98
86
|
return hasChildren || onLoadChildren && !node.isLeaf && !node.children;
|
99
87
|
};
|
100
|
-
|
101
88
|
function getItemEventData(node, requiredProps) {
|
102
89
|
return Object.assign(Object.assign({}, node), requiredProps);
|
103
90
|
}
|
104
|
-
|
105
91
|
var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
|
106
92
|
var result = [];
|
107
93
|
searchedData.forEach(function (item) {
|
108
94
|
while (item && item.depth >= 0) {
|
109
95
|
var depth = item.depth;
|
110
96
|
var depthResult = result[depth];
|
111
|
-
|
112
97
|
if (!depthResult) {
|
113
98
|
depthResult = new Map();
|
114
99
|
result[depth] = depthResult;
|
115
100
|
}
|
116
|
-
|
117
101
|
depthResult.set(item.id, item);
|
118
102
|
item = item.parent;
|
119
103
|
}
|
@@ -129,5 +113,4 @@ var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
|
|
129
113
|
});
|
130
114
|
});
|
131
115
|
};
|
132
|
-
|
133
116
|
export { checkCanLoadChildren, flattenTreeData, getActiveMenus, getActiveNodePaths, getFilteredMenuList, getFlattedMenus, getItemEventData };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@hi-ui/cascader",
|
3
|
-
"version": "4.1.
|
3
|
+
"version": "4.1.3",
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
5
5
|
"keywords": [],
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
@@ -43,33 +43,33 @@
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
44
44
|
},
|
45
45
|
"dependencies": {
|
46
|
-
"@hi-ui/array-utils": "^4.0.
|
47
|
-
"@hi-ui/classname": "^4.0.
|
48
|
-
"@hi-ui/env": "^4.0.
|
49
|
-
"@hi-ui/func-utils": "^4.0.
|
50
|
-
"@hi-ui/highlighter": "^4.0.
|
51
|
-
"@hi-ui/icons": "^4.0.
|
52
|
-
"@hi-ui/input": "^4.0.
|
53
|
-
"@hi-ui/picker": "^4.
|
54
|
-
"@hi-ui/popper": "^4.
|
55
|
-
"@hi-ui/spinner": "^4.0.
|
56
|
-
"@hi-ui/tree-utils": "^4.
|
57
|
-
"@hi-ui/type-assertion": "^4.0.
|
58
|
-
"@hi-ui/use-check-state": "^4.0.
|
59
|
-
"@hi-ui/use-data-source": "^4.0.
|
60
|
-
"@hi-ui/use-latest": "^4.0.
|
61
|
-
"@hi-ui/use-search-mode": "^4.
|
62
|
-
"@hi-ui/use-toggle": "^4.0.
|
63
|
-
"@hi-ui/use-uncontrolled-state": "^4.0.
|
46
|
+
"@hi-ui/array-utils": "^4.0.2",
|
47
|
+
"@hi-ui/classname": "^4.0.2",
|
48
|
+
"@hi-ui/env": "^4.0.2",
|
49
|
+
"@hi-ui/func-utils": "^4.0.2",
|
50
|
+
"@hi-ui/highlighter": "^4.0.6",
|
51
|
+
"@hi-ui/icons": "^4.0.16",
|
52
|
+
"@hi-ui/input": "^4.0.11",
|
53
|
+
"@hi-ui/picker": "^4.1.2",
|
54
|
+
"@hi-ui/popper": "^4.1.1",
|
55
|
+
"@hi-ui/spinner": "^4.0.6",
|
56
|
+
"@hi-ui/tree-utils": "^4.1.2",
|
57
|
+
"@hi-ui/type-assertion": "^4.0.2",
|
58
|
+
"@hi-ui/use-check-state": "^4.0.2",
|
59
|
+
"@hi-ui/use-data-source": "^4.0.2",
|
60
|
+
"@hi-ui/use-latest": "^4.0.2",
|
61
|
+
"@hi-ui/use-search-mode": "^4.1.2",
|
62
|
+
"@hi-ui/use-toggle": "^4.0.2",
|
63
|
+
"@hi-ui/use-uncontrolled-state": "^4.0.2"
|
64
64
|
},
|
65
65
|
"peerDependencies": {
|
66
|
-
"@hi-ui/core": ">=4.0.
|
66
|
+
"@hi-ui/core": ">=4.0.6",
|
67
67
|
"react": ">=16.8.6",
|
68
68
|
"react-dom": ">=16.8.6"
|
69
69
|
},
|
70
70
|
"devDependencies": {
|
71
|
-
"@hi-ui/core": "^4.0.
|
72
|
-
"@hi-ui/core-css": "^4.1.
|
71
|
+
"@hi-ui/core": "^4.0.6",
|
72
|
+
"@hi-ui/core-css": "^4.1.3",
|
73
73
|
"react": "^17.0.1",
|
74
74
|
"react-dom": "^17.0.1"
|
75
75
|
}
|