@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/cjs/context.js
CHANGED
@@ -9,24 +9,15 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
13
|
-
value: true
|
14
|
-
});
|
15
|
-
|
16
12
|
var React = require('react');
|
17
|
-
|
18
13
|
var cascaderContext = /*#__PURE__*/React.createContext(null);
|
19
14
|
var CascaderProvider = cascaderContext.Provider;
|
20
|
-
|
21
15
|
var useCascaderContext = function useCascaderContext() {
|
22
16
|
var context = React.useContext(cascaderContext);
|
23
|
-
|
24
17
|
if (!context) {
|
25
18
|
throw new Error('The cascaderContext context should using in Cascader.');
|
26
19
|
}
|
27
|
-
|
28
20
|
return context;
|
29
21
|
};
|
30
|
-
|
31
22
|
exports.CascaderProvider = CascaderProvider;
|
32
23
|
exports.useCascaderContext = useCascaderContext;
|
@@ -9,39 +9,19 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
13
|
-
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
15
|
-
value: true
|
16
|
-
});
|
17
|
-
|
18
12
|
var _regeneratorRuntime = require('@babel/runtime/regenerator');
|
19
|
-
|
20
13
|
var tslib = require('tslib');
|
21
|
-
|
22
14
|
var React = require('react');
|
23
|
-
|
24
15
|
var useLatest = require('@hi-ui/use-latest');
|
25
|
-
|
26
16
|
var treeUtils = require('@hi-ui/tree-utils');
|
27
|
-
|
28
17
|
var useCheckState = require('@hi-ui/use-check-state');
|
29
|
-
|
30
|
-
function _interopDefaultLegacy(e) {
|
31
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
32
|
-
'default': e
|
33
|
-
};
|
34
|
-
}
|
35
|
-
|
36
|
-
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
|
37
|
-
|
38
18
|
var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadChildren) {
|
39
|
-
var onLoadChildrenLatest = useLatest.useLatestCallback(onLoadChildren);
|
40
|
-
|
19
|
+
var onLoadChildrenLatest = useLatest.useLatestCallback(onLoadChildren);
|
20
|
+
// 加载节点
|
41
21
|
var loadChildren = React.useCallback(function (node) {
|
42
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/
|
22
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
43
23
|
var childrenNodes;
|
44
|
-
return
|
24
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
45
25
|
while (1) {
|
46
26
|
switch (_context.prev = _context.next) {
|
47
27
|
case 0:
|
@@ -50,10 +30,8 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
|
|
50
30
|
var id = _ref.id;
|
51
31
|
return id;
|
52
32
|
}));
|
53
|
-
|
54
33
|
case 2:
|
55
34
|
childrenNodes = _context.sent;
|
56
|
-
|
57
35
|
if (Array.isArray(childrenNodes)) {
|
58
36
|
setCascaderData(function (prev) {
|
59
37
|
var nextTreeData = treeUtils.cloneTree(prev);
|
@@ -61,7 +39,6 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
|
|
61
39
|
return nextTreeData;
|
62
40
|
});
|
63
41
|
}
|
64
|
-
|
65
42
|
case 4:
|
66
43
|
case "end":
|
67
44
|
return _context.stop();
|
@@ -70,64 +47,52 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
|
|
70
47
|
}, _callee);
|
71
48
|
}));
|
72
49
|
}, [onLoadChildrenLatest, setCascaderData]);
|
73
|
-
|
74
50
|
var _useCheckState = useCheckState.useCheckState(),
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
51
|
+
isLoadingId = _useCheckState.has,
|
52
|
+
addLoadingIds = _useCheckState.add,
|
53
|
+
removeLoadingIds = _useCheckState.remove;
|
79
54
|
var onExpandLatest = useLatest.useLatestCallback(onExpand);
|
80
55
|
var onNodeSwitch = React.useCallback(function (node, onlyExpand) {
|
81
56
|
if (onlyExpand === void 0) {
|
82
57
|
onlyExpand = false;
|
83
58
|
}
|
84
|
-
|
85
|
-
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2() {
|
59
|
+
return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
86
60
|
var id, children, isLeaf;
|
87
|
-
return
|
61
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
88
62
|
while (1) {
|
89
63
|
switch (_context2.prev = _context2.next) {
|
90
64
|
case 0:
|
91
65
|
// 直接触发选中该节点
|
92
66
|
onExpandLatest(node, onlyExpand);
|
93
67
|
id = node.id, children = node.children, isLeaf = node.isLeaf;
|
94
|
-
|
95
68
|
if (!children) {
|
96
69
|
_context2.next = 4;
|
97
70
|
break;
|
98
71
|
}
|
99
|
-
|
100
72
|
return _context2.abrupt("return");
|
101
|
-
|
102
73
|
case 4:
|
103
74
|
if (!isLeaf) {
|
104
75
|
_context2.next = 6;
|
105
76
|
break;
|
106
77
|
}
|
107
|
-
|
108
78
|
return _context2.abrupt("return");
|
109
|
-
|
110
79
|
case 6:
|
111
80
|
if (!onLoadChildren) {
|
112
81
|
_context2.next = 17;
|
113
82
|
break;
|
114
83
|
}
|
115
|
-
|
116
84
|
addLoadingIds(id);
|
117
85
|
_context2.prev = 8;
|
118
86
|
_context2.next = 11;
|
119
87
|
return loadChildren(node);
|
120
|
-
|
121
88
|
case 11:
|
122
89
|
removeLoadingIds(id);
|
123
90
|
_context2.next = 17;
|
124
91
|
break;
|
125
|
-
|
126
92
|
case 14:
|
127
93
|
_context2.prev = 14;
|
128
94
|
_context2.t0 = _context2["catch"](8);
|
129
95
|
removeLoadingIds(id);
|
130
|
-
|
131
96
|
case 17:
|
132
97
|
case "end":
|
133
98
|
return _context2.stop();
|
@@ -138,5 +103,4 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
|
|
138
103
|
}, [loadChildren, onLoadChildren, onExpandLatest, addLoadingIds, removeLoadingIds]);
|
139
104
|
return [isLoadingId, onNodeSwitch];
|
140
105
|
};
|
141
|
-
|
142
106
|
exports.useAsyncSwitch = useAsyncSwitch;
|
@@ -9,11 +9,8 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
13
|
-
value: true
|
14
|
-
});
|
15
|
-
|
16
12
|
var React = require('react');
|
13
|
+
|
17
14
|
/** @LICENSE
|
18
15
|
* @hi-ui/use-cache
|
19
16
|
* https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
|
@@ -27,17 +24,13 @@ var React = require('react');
|
|
27
24
|
/**
|
28
25
|
* A hook using for data cache that compatible with the controlled and uncontrolled modes coexist.
|
29
26
|
*/
|
30
|
-
|
31
|
-
|
32
27
|
var useCache = function useCache(data) {
|
33
28
|
var _useState = React.useState(data),
|
34
|
-
|
35
|
-
|
36
|
-
|
29
|
+
internalData = _useState[0],
|
30
|
+
setInternalData = _useState[1];
|
37
31
|
React.useEffect(function () {
|
38
32
|
setInternalData(data);
|
39
33
|
}, [data]);
|
40
34
|
return [internalData, setInternalData];
|
41
35
|
};
|
42
|
-
|
43
36
|
exports.useCache = useCache;
|
@@ -9,32 +9,21 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
13
|
-
value: true
|
14
|
-
});
|
15
|
-
|
16
12
|
var React = require('react');
|
17
|
-
|
18
13
|
var useLatest = require('@hi-ui/use-latest');
|
19
|
-
|
20
14
|
var treeUtils = require('@hi-ui/tree-utils');
|
21
|
-
|
22
15
|
var index = require('../utils/index.js');
|
16
|
+
|
23
17
|
/**
|
24
18
|
* 用于选中的 hook
|
25
19
|
*/
|
26
|
-
|
27
|
-
|
28
20
|
var useSelect = function useSelect(disabled, onSelect, changeOnSelect, onLoadChildren) {
|
29
21
|
var onSelectLatest = useLatest.useLatestCallback(onSelect);
|
30
|
-
|
31
22
|
var _useState = React.useState(''),
|
32
|
-
|
33
|
-
|
34
|
-
|
23
|
+
selectedId = _useState[0],
|
24
|
+
setSelectedId = _useState[1];
|
35
25
|
var proxyOnSelect = React.useCallback(function (selectedId, selectOption) {
|
36
26
|
var optionPaths = treeUtils.getTopDownAncestors(selectOption);
|
37
|
-
|
38
27
|
if (changeOnSelect) {
|
39
28
|
// 任意选中
|
40
29
|
onSelectLatest(selectedId, selectOption, optionPaths);
|
@@ -48,11 +37,9 @@ var useSelect = function useSelect(disabled, onSelect, changeOnSelect, onLoadChi
|
|
48
37
|
var onItemSelect = React.useCallback(function (targetItem, onlyExpand) {
|
49
38
|
if (disabled) return;
|
50
39
|
if (targetItem.disabled) return;
|
51
|
-
|
52
40
|
if (onlyExpand) {
|
53
41
|
// 仅展开,不做选中处理
|
54
42
|
var canLoadChildren = index.checkCanLoadChildren(targetItem, onLoadChildren);
|
55
|
-
|
56
43
|
if (canLoadChildren) {
|
57
44
|
setSelectedId(targetItem.id);
|
58
45
|
}
|
@@ -63,5 +50,4 @@ var useSelect = function useSelect(disabled, onSelect, changeOnSelect, onLoadChi
|
|
63
50
|
}, [disabled, proxyOnSelect, onLoadChildren]);
|
64
51
|
return [selectedId, onItemSelect, setSelectedId];
|
65
52
|
};
|
66
|
-
|
67
53
|
exports.useSelect = useSelect;
|
package/lib/cjs/icons/index.js
CHANGED
@@ -9,34 +9,17 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
13
|
-
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
15
|
-
value: true
|
16
|
-
});
|
17
|
-
|
18
12
|
var React = require('react');
|
19
|
-
|
20
13
|
var icons = require('@hi-ui/icons');
|
21
|
-
|
22
14
|
var spinner = require('@hi-ui/spinner');
|
23
|
-
|
24
|
-
|
25
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
26
|
-
'default': e
|
27
|
-
};
|
28
|
-
}
|
29
|
-
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
31
|
-
|
32
|
-
var defaultSuffixIcon = /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null);
|
33
|
-
var defaultLeafIcon = /*#__PURE__*/React__default["default"].createElement("span", {
|
15
|
+
var defaultSuffixIcon = /*#__PURE__*/React.createElement(icons.DownOutlined, null);
|
16
|
+
var defaultLeafIcon = /*#__PURE__*/React.createElement("span", {
|
34
17
|
style: {
|
35
18
|
display: 'inline-block',
|
36
19
|
width: 16
|
37
20
|
}
|
38
21
|
});
|
39
|
-
var defaultLoadingIcon = /*#__PURE__*/
|
22
|
+
var defaultLoadingIcon = /*#__PURE__*/React.createElement(spinner.Spinner, null);
|
40
23
|
exports.defaultLeafIcon = defaultLeafIcon;
|
41
24
|
exports.defaultLoadingIcon = defaultLoadingIcon;
|
42
25
|
exports.defaultSuffixIcon = defaultSuffixIcon;
|
package/lib/cjs/index.js
CHANGED
@@ -12,10 +12,7 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
var css_248z = "@charset \"UTF-8\";.hi-v4-cascader__popper .hi-v4-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v4-cascader__popper .hi-v4-picker__loading, .hi-v4-cascader__popper .hi-v4-picker__empty {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);}.hi-v4-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v4-cascader-search .hi-v4-input__prefix {font-size: 16px;padding-left: 0;}.hi-v4-cascader-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v4-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v4-cascader-menu-list--flatted .hi-v4-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v4-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v4-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 260px;overflow: auto;padding: 0 var(--hi-v4-spacing-4, 8px);border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-cascader-menu:last-of-type {border: none;}.hi-v4-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-cascader-menu-option {padding: var(--hi-v4-spacing-1, 2px) var(--hi-v4-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v4-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-cascader-menu-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-cascader-menu-option--focused {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-cascader-menu-option--checked {font-weight: 700;}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background: transparent;}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-gray-400, #
|
16
|
-
|
15
|
+
var css_248z = "@charset \"UTF-8\";.hi-v4-cascader__popper .hi-v4-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v4-cascader__popper .hi-v4-picker__loading, .hi-v4-cascader__popper .hi-v4-picker__empty {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);}.hi-v4-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v4-cascader-search .hi-v4-input__prefix {font-size: 16px;padding-left: 0;}.hi-v4-cascader-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v4-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v4-cascader-menu-list--flatted .hi-v4-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v4-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v4-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 260px;overflow: auto;padding: 0 var(--hi-v4-spacing-4, 8px);border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-cascader-menu:last-of-type {border: none;}.hi-v4-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-cascader-menu-option {padding: var(--hi-v4-spacing-1, 2px) var(--hi-v4-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v4-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-cascader-menu-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-cascader-menu-option--focused {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-cascader-menu-option--checked {font-weight: 700;}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background: transparent;}.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v4-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v4-cascader-menu .title__text--col {display: inline-block;}.hi-v4-cascader-menu .title__text--col::after {content: \" / \";}.hi-v4-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v4-cascader-menu .title__text--matched {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-cascader-menu-switcher--loading {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-cascader-menu-switcher--arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v4-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor;}.hi-v4-cascader__icon--loading svg {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
|
17
16
|
var __styleInject__ = require('style-inject')["default"];
|
18
|
-
|
19
17
|
__styleInject__(css_248z);
|
20
|
-
|
21
18
|
exports["default"] = css_248z;
|
package/lib/cjs/use-cascader.js
CHANGED
@@ -9,88 +9,69 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
13
|
-
value: true
|
14
|
-
});
|
15
|
-
|
16
12
|
var tslib = require('tslib');
|
17
|
-
|
18
13
|
var React = require('react');
|
19
|
-
|
20
14
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
21
|
-
|
22
15
|
var index = require('./hooks/use-cache/lib/esm/index.js');
|
23
|
-
|
24
16
|
var index$1 = require('./utils/index.js');
|
25
|
-
|
26
17
|
var useSelect = require('./hooks/use-select.js');
|
27
|
-
|
28
18
|
var useAsyncSwitch = require('./hooks/use-async-switch.js');
|
29
|
-
|
30
19
|
var NOOP_ARRAY = [];
|
31
20
|
var NOOP_VALUE = [];
|
32
|
-
|
33
21
|
var useCascader = function useCascader(_a) {
|
34
22
|
var _a$defaultValue = _a.defaultValue,
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
23
|
+
defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
|
24
|
+
valueProp = _a.value,
|
25
|
+
onChangeProp = _a.onChange,
|
26
|
+
_a$data = _a.data,
|
27
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
28
|
+
_a$disabled = _a.disabled,
|
29
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
30
|
+
_a$changeOnSelect = _a.changeOnSelect,
|
31
|
+
changeOnSelect = _a$changeOnSelect === void 0 ? false : _a$changeOnSelect,
|
32
|
+
_a$flatted = _a.flatted,
|
33
|
+
flatted = _a$flatted === void 0 ? false : _a$flatted,
|
34
|
+
onSelectProp = _a.onSelect,
|
35
|
+
onLoadChildren = _a.onLoadChildren,
|
36
|
+
cascaderDataProp = _a.cascaderData,
|
37
|
+
setCascaderDataProp = _a.setCascaderData,
|
38
|
+
flattedDataProp = _a.flattedData,
|
39
|
+
fieldNames = _a.fieldNames,
|
40
|
+
rest = tslib.__rest(_a, ["defaultValue", "value", "onChange", "data", "disabled", "changeOnSelect", "flatted", "onSelect", "onLoadChildren", "cascaderData", "setCascaderData", "flattedData", "fieldNames"]);
|
54
41
|
var _useCache = index.useCache(data),
|
55
|
-
|
56
|
-
|
57
|
-
|
42
|
+
cacheData = _useCache[0],
|
43
|
+
setCacheData = _useCache[1];
|
58
44
|
var cascaderData = cascaderDataProp !== null && cascaderDataProp !== void 0 ? cascaderDataProp : cacheData;
|
59
45
|
var setCascaderData = setCascaderDataProp !== null && setCascaderDataProp !== void 0 ? setCascaderDataProp : setCacheData;
|
60
46
|
var flattedData = React.useMemo(function () {
|
61
47
|
return flattedDataProp !== null && flattedDataProp !== void 0 ? flattedDataProp : index$1.flattenTreeData(cascaderData, fieldNames);
|
62
48
|
}, [cascaderData, flattedDataProp, fieldNames]);
|
63
|
-
|
64
49
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChangeProp),
|
65
|
-
|
66
|
-
|
67
|
-
|
50
|
+
value = _useUncontrolledState[0],
|
51
|
+
tryChangeValue = _useUncontrolledState[1];
|
68
52
|
var onSelect = function onSelect(value, item, itemPaths) {
|
69
53
|
tryChangeValue(itemPaths.map(function (_ref) {
|
70
54
|
var id = _ref.id;
|
71
55
|
return id;
|
72
56
|
}));
|
73
57
|
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
74
|
-
};
|
75
|
-
|
76
|
-
|
58
|
+
};
|
59
|
+
// 单击选中某项
|
77
60
|
var _useSelect = useSelect.useSelect(disabled, onSelect, changeOnSelect, onLoadChildren),
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
61
|
+
selectedId = _useSelect[0],
|
62
|
+
onOptionSelect = _useSelect[1],
|
63
|
+
setSelectedId = _useSelect[2];
|
64
|
+
// 选中 id 路径
|
83
65
|
var selectedIds = React.useMemo(function () {
|
84
66
|
return index$1.getActiveNodePaths(flattedData, selectedId).map(function (_ref2) {
|
85
67
|
var id = _ref2.id;
|
86
68
|
return id;
|
87
69
|
});
|
88
|
-
}, [flattedData, selectedId]);
|
89
|
-
|
70
|
+
}, [flattedData, selectedId]);
|
71
|
+
// 存在异步加载数据的情况时,单击选中时需要控制异步加载状态
|
90
72
|
var _useAsyncSwitch = useAsyncSwitch.useAsyncSwitch(setCascaderData, onOptionSelect, onLoadChildren),
|
91
|
-
|
92
|
-
|
93
|
-
|
73
|
+
isLoadingId = _useAsyncSwitch[0],
|
74
|
+
onItemExpand = _useAsyncSwitch[1];
|
94
75
|
var onItemHover = React.useCallback(function (option) {
|
95
76
|
// hover模式,仅展开节点,不触发 change
|
96
77
|
onItemExpand(option, true);
|
@@ -103,7 +84,7 @@ var useCascader = function useCascader(_a) {
|
|
103
84
|
}, [flatted, flattedData, selectedId, isCanLoadChildren]);
|
104
85
|
var getItemRequiredProps = React.useCallback(function (_ref3) {
|
105
86
|
var id = _ref3.id,
|
106
|
-
|
87
|
+
depth = _ref3.depth;
|
107
88
|
return {
|
108
89
|
active: value[depth] === id,
|
109
90
|
selected: flatted ? selectedId === id : selectedIds[depth] === id,
|
@@ -131,5 +112,4 @@ var useCascader = function useCascader(_a) {
|
|
131
112
|
menuList: menuList
|
132
113
|
};
|
133
114
|
};
|
134
|
-
|
135
115
|
exports.useCascader = useCascader;
|
package/lib/cjs/utils/index.js
CHANGED
@@ -9,18 +9,12 @@
|
|
9
9
|
*/
|
10
10
|
'use strict';
|
11
11
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
13
|
-
value: true
|
14
|
-
});
|
15
|
-
|
16
12
|
var treeUtils = require('@hi-ui/tree-utils');
|
17
|
-
|
18
13
|
var typeAssertion = require('@hi-ui/type-assertion');
|
14
|
+
|
19
15
|
/**
|
20
16
|
* 扁平化树数据结构,基于前序遍历
|
21
17
|
*/
|
22
|
-
|
23
|
-
|
24
18
|
var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
25
19
|
/**
|
26
20
|
* 转换对象
|
@@ -29,10 +23,8 @@ var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
|
29
23
|
if (fieldNames) {
|
30
24
|
return node[fieldNames[key] || key];
|
31
25
|
}
|
32
|
-
|
33
26
|
return node[key];
|
34
27
|
};
|
35
|
-
|
36
28
|
return treeUtils.baseFlattenTree({
|
37
29
|
tree: treeData,
|
38
30
|
childrenFieldName: function childrenFieldName(node) {
|
@@ -40,7 +32,6 @@ var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
|
40
32
|
},
|
41
33
|
transform: function transform(node) {
|
42
34
|
var _a, _b;
|
43
|
-
|
44
35
|
var flattedNode = node;
|
45
36
|
var raw = node.raw;
|
46
37
|
flattedNode.id = getKeyFields(raw, 'id');
|
@@ -54,8 +45,6 @@ var flattenTreeData = function flattenTreeData(treeData, fieldNames) {
|
|
54
45
|
/**
|
55
46
|
* 获取选中节点的节点路径,包含选中节点
|
56
47
|
*/
|
57
|
-
|
58
|
-
|
59
48
|
var getActiveNodePaths = function getActiveNodePaths(flattedData, selectedId) {
|
60
49
|
if (flattedData.length === 0) return [];
|
61
50
|
var selectedOption = flattedData.find(function (_ref) {
|
@@ -68,8 +57,6 @@ var getActiveNodePaths = function getActiveNodePaths(flattedData, selectedId) {
|
|
68
57
|
/**
|
69
58
|
* 获取自顶向下的兄弟节点列表菜单
|
70
59
|
*/
|
71
|
-
|
72
|
-
|
73
60
|
var getActiveMenus = function getActiveMenus(flattedData, selectedId) {
|
74
61
|
if (flattedData.length === 0) return [];
|
75
62
|
var root = flattedData[0].parent;
|
@@ -80,48 +67,39 @@ var getActiveMenus = function getActiveMenus(flattedData, selectedId) {
|
|
80
67
|
return selectedId === id;
|
81
68
|
});
|
82
69
|
if (!selectedOption) return menu;
|
83
|
-
|
84
70
|
if (selectedOption.children) {
|
85
71
|
menu = [selectedOption.children];
|
86
72
|
} else {
|
87
73
|
menu = [];
|
88
74
|
}
|
89
|
-
|
90
75
|
while (selectedOption.parent) {
|
91
76
|
menu.push(selectedOption.parent.children);
|
92
77
|
selectedOption = selectedOption.parent;
|
93
78
|
}
|
94
|
-
|
95
79
|
return menu.reverse();
|
96
80
|
};
|
97
|
-
|
98
81
|
var getFlattedMenus = function getFlattedMenus(data, filter) {
|
99
82
|
return [data.filter(function (item) {
|
100
83
|
return !filter(item);
|
101
84
|
})];
|
102
85
|
};
|
103
|
-
|
104
86
|
var checkCanLoadChildren = function checkCanLoadChildren(node, onLoadChildren) {
|
105
87
|
var hasChildren = typeAssertion.isArrayNonEmpty(node.children);
|
106
88
|
return hasChildren || onLoadChildren && !node.isLeaf && !node.children;
|
107
89
|
};
|
108
|
-
|
109
90
|
function getItemEventData(node, requiredProps) {
|
110
91
|
return Object.assign(Object.assign({}, node), requiredProps);
|
111
92
|
}
|
112
|
-
|
113
93
|
var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
|
114
94
|
var result = [];
|
115
95
|
searchedData.forEach(function (item) {
|
116
96
|
while (item && item.depth >= 0) {
|
117
97
|
var depth = item.depth;
|
118
98
|
var depthResult = result[depth];
|
119
|
-
|
120
99
|
if (!depthResult) {
|
121
100
|
depthResult = new Map();
|
122
101
|
result[depth] = depthResult;
|
123
102
|
}
|
124
|
-
|
125
103
|
depthResult.set(item.id, item);
|
126
104
|
item = item.parent;
|
127
105
|
}
|
@@ -137,7 +115,6 @@ var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
|
|
137
115
|
});
|
138
116
|
});
|
139
117
|
};
|
140
|
-
|
141
118
|
exports.checkCanLoadChildren = checkCanLoadChildren;
|
142
119
|
exports.flattenTreeData = flattenTreeData;
|
143
120
|
exports.getActiveMenus = getActiveMenus;
|