@hi-ui/check-select 4.3.2 → 4.3.4
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 +63 -0
- package/lib/cjs/CheckSelect.js +143 -223
- package/lib/cjs/context.js +0 -6
- package/lib/cjs/hooks/use-cache/lib/esm/index.js +3 -7
- package/lib/cjs/hooks/use-data.js +12 -28
- package/lib/cjs/hooks/use-flatten-data.js +9 -19
- package/lib/cjs/index.js +0 -3
- package/lib/cjs/styles/index.scss.js +0 -3
- package/lib/cjs/use-check-select.js +32 -57
- package/lib/cjs/utils/index.js +1 -5
- package/lib/esm/CheckSelect.js +139 -190
- package/lib/esm/context.js +0 -4
- package/lib/esm/hooks/use-cache/lib/esm/index.js +3 -5
- package/lib/esm/hooks/use-data.js +12 -24
- package/lib/esm/hooks/use-flatten-data.js +9 -16
- package/lib/esm/styles/index.scss.js +0 -2
- package/lib/esm/use-check-select.js +32 -45
- package/lib/esm/utils/index.js +0 -5
- package/package.json +27 -27
@@ -12,8 +12,8 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
var React = require('react');
|
16
|
+
|
17
17
|
/** @LICENSE
|
18
18
|
* @hi-ui/use-cache
|
19
19
|
* https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
|
@@ -27,17 +27,13 @@ var React = require('react');
|
|
27
27
|
/**
|
28
28
|
* A hook using for data cache that compatible with the controlled and uncontrolled modes coexist.
|
29
29
|
*/
|
30
|
-
|
31
|
-
|
32
30
|
var useCache = function useCache(data) {
|
33
31
|
var _useState = React.useState(data),
|
34
|
-
|
35
|
-
|
36
|
-
|
32
|
+
internalData = _useState[0],
|
33
|
+
setInternalData = _useState[1];
|
37
34
|
React.useEffect(function () {
|
38
35
|
setInternalData(data);
|
39
36
|
}, [data]);
|
40
37
|
return [internalData, setInternalData];
|
41
38
|
};
|
42
|
-
|
43
39
|
exports.useCache = useCache;
|
@@ -12,31 +12,24 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
var tslib = require('tslib');
|
17
|
-
|
18
16
|
var React = require('react');
|
19
|
-
|
20
17
|
var useChildren = require('@hi-ui/use-children');
|
21
|
-
|
22
18
|
var NOOP_ARRAY = [];
|
23
|
-
|
24
19
|
var useData = function useData(_ref) {
|
25
20
|
var data = _ref.data,
|
26
|
-
|
21
|
+
children = _ref.children;
|
27
22
|
return React.useMemo(function () {
|
28
|
-
var mergedData;
|
29
|
-
|
23
|
+
var mergedData;
|
24
|
+
// data 优先级大于内嵌式组合
|
30
25
|
if (Array.isArray(data)) {
|
31
26
|
mergedData = data;
|
32
27
|
} else if (children) {
|
33
28
|
mergedData = parseChildren(children);
|
34
29
|
}
|
35
|
-
|
36
30
|
return mergedData || NOOP_ARRAY;
|
37
31
|
}, [children, data]);
|
38
32
|
};
|
39
|
-
|
40
33
|
var parseChildren = function parseChildren(children) {
|
41
34
|
var data = [];
|
42
35
|
var list = useChildren.toArray(children);
|
@@ -44,13 +37,11 @@ var parseChildren = function parseChildren(children) {
|
|
44
37
|
if (! /*#__PURE__*/React.isValidElement(item)) return;
|
45
38
|
if (!item.type) return;
|
46
39
|
var HiName = item.type.HiName;
|
47
|
-
|
48
40
|
switch (HiName) {
|
49
41
|
case 'CheckSelectOption':
|
50
42
|
var option = parseOption(item);
|
51
43
|
data.push(option);
|
52
44
|
break;
|
53
|
-
|
54
45
|
case 'CheckSelectOptionGroup':
|
55
46
|
var optGroup = parseOptionGroup(item);
|
56
47
|
data.push(optGroup);
|
@@ -59,14 +50,12 @@ var parseChildren = function parseChildren(children) {
|
|
59
50
|
});
|
60
51
|
return data;
|
61
52
|
};
|
62
|
-
|
63
53
|
var parseOption = function parseOption(node) {
|
64
54
|
var _a = node.props,
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
55
|
+
value = _a.value,
|
56
|
+
children = _a.children,
|
57
|
+
disabled = _a.disabled,
|
58
|
+
rest = tslib.__rest(_a, ["value", "children", "disabled", "groupTitle"]);
|
70
59
|
var option = {
|
71
60
|
id: value,
|
72
61
|
title: children,
|
@@ -76,28 +65,23 @@ var parseOption = function parseOption(node) {
|
|
76
65
|
};
|
77
66
|
return option;
|
78
67
|
};
|
79
|
-
|
80
68
|
var parseOptionGroup = function parseOptionGroup(node) {
|
81
69
|
var key = node.key,
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
70
|
+
_a = node.props,
|
71
|
+
groupId = _a.groupId,
|
72
|
+
label = _a.label,
|
73
|
+
children = _a.children,
|
74
|
+
rest = tslib.__rest(_a, ["groupId", "label", "children"]);
|
88
75
|
var optGroup = {
|
89
76
|
groupId: groupId !== null && groupId !== void 0 ? groupId : key,
|
90
77
|
groupTitle: label,
|
91
78
|
rootProps: rest,
|
92
79
|
children: []
|
93
80
|
};
|
94
|
-
|
95
81
|
if (children) {
|
96
82
|
optGroup.children = parseChildren(children);
|
97
83
|
}
|
98
|
-
|
99
84
|
return optGroup;
|
100
85
|
};
|
101
|
-
|
102
86
|
exports.parseChildren = parseChildren;
|
103
87
|
exports.useData = useData;
|
@@ -12,19 +12,15 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
var React = require('react');
|
17
|
-
|
18
16
|
var treeUtils = require('@hi-ui/tree-utils');
|
19
|
-
|
20
17
|
var NOOP_ARRAY = [];
|
21
18
|
var DEFAULT_FIELD_NAMES = {};
|
22
|
-
|
23
19
|
var useFlattenData = function useFlattenData(_ref) {
|
24
20
|
var _ref$data = _ref.data,
|
25
|
-
|
26
|
-
|
27
|
-
|
21
|
+
data = _ref$data === void 0 ? NOOP_ARRAY : _ref$data,
|
22
|
+
_ref$fieldNames = _ref.fieldNames,
|
23
|
+
fieldNames = _ref$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref$fieldNames;
|
28
24
|
var flattedData = React.useMemo(function () {
|
29
25
|
return flattenData({
|
30
26
|
data: data,
|
@@ -33,29 +29,25 @@ var useFlattenData = function useFlattenData(_ref) {
|
|
33
29
|
}, [data, fieldNames]);
|
34
30
|
return flattedData;
|
35
31
|
};
|
36
|
-
|
37
32
|
var flattenData = function flattenData(_ref2) {
|
38
33
|
var _ref2$data = _ref2.data,
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
34
|
+
data = _ref2$data === void 0 ? NOOP_ARRAY : _ref2$data,
|
35
|
+
_ref2$fieldNames = _ref2.fieldNames,
|
36
|
+
fieldNames = _ref2$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref2$fieldNames;
|
37
|
+
// 转换对象
|
43
38
|
var getKeyFields = function getKeyFields(node, key) {
|
44
39
|
return node[fieldNames[key] || key];
|
45
40
|
};
|
46
|
-
|
47
41
|
return treeUtils.baseFlattenTree({
|
48
42
|
tree: data,
|
49
43
|
childrenFieldName: function childrenFieldName(node) {
|
50
44
|
return getKeyFields(node, 'children');
|
51
45
|
},
|
52
46
|
transform: function transform(node) {
|
53
|
-
var _a;
|
54
|
-
|
55
|
-
|
47
|
+
var _a;
|
48
|
+
// 不对外暴露
|
56
49
|
delete node.parent;
|
57
50
|
var raw = node.raw;
|
58
|
-
|
59
51
|
if ('groupId' in raw) {
|
60
52
|
// 用于虚拟列表唯一 id
|
61
53
|
node.id = raw.groupId;
|
@@ -67,11 +59,9 @@ var flattenData = function flattenData(_ref2) {
|
|
67
59
|
node.title = getKeyFields(raw, 'title');
|
68
60
|
node.disabled = (_a = getKeyFields(raw, 'disabled')) !== null && _a !== void 0 ? _a : false;
|
69
61
|
}
|
70
|
-
|
71
62
|
return node;
|
72
63
|
}
|
73
64
|
});
|
74
65
|
};
|
75
|
-
|
76
66
|
exports.flattenData = flattenData;
|
77
67
|
exports.useFlattenData = useFlattenData;
|
package/lib/cjs/index.js
CHANGED
@@ -12,11 +12,8 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
require('./styles/index.scss.js');
|
17
|
-
|
18
16
|
var CheckSelect = require('./CheckSelect.js');
|
19
|
-
|
20
17
|
exports.CheckSelect = CheckSelect.CheckSelect;
|
21
18
|
exports.CheckSelectOption = CheckSelect.CheckSelectOption;
|
22
19
|
exports.CheckSelectOptionGroup = CheckSelect.CheckSelectOptionGroup;
|
@@ -13,9 +13,6 @@ Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
14
14
|
});
|
15
15
|
var css_248z = ".hi-v4-check-select-option {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v4-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option__indent {display: inline-block;width: 16px;height: 100%;}.hi-v4-check-select-option__title {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;font-weight: inherit;color: inherit;line-height: inherit;}.hi-v4-check-select-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--focused {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-check-select-option-group {display: inline-block;margin-top: var(--hi-v4-spacing-6, 12px);margin-bottom: var(--hi-v4-spacing-2, 4px);padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option-group:first-child {margin-top: var(--hi-v4-spacing-2, 4px);}";
|
16
|
-
|
17
16
|
var __styleInject__ = require('style-inject')["default"];
|
18
|
-
|
19
17
|
__styleInject__(css_248z);
|
20
|
-
|
21
18
|
exports["default"] = css_248z;
|
@@ -12,77 +12,57 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
var tslib = require('tslib');
|
17
|
-
|
18
16
|
var React = require('react');
|
19
|
-
|
20
17
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
21
|
-
|
22
18
|
var arrayUtils = require('@hi-ui/array-utils');
|
23
|
-
|
24
19
|
var useCheck = require('@hi-ui/use-check');
|
25
|
-
|
26
20
|
var useLatest = require('@hi-ui/use-latest');
|
27
|
-
|
28
21
|
var index = require('./hooks/use-cache/lib/esm/index.js');
|
29
|
-
|
30
22
|
var useData = require('./hooks/use-data.js');
|
31
|
-
|
32
23
|
var useFlattenData = require('./hooks/use-flatten-data.js');
|
33
|
-
|
34
24
|
require('@hi-ui/env');
|
35
|
-
|
36
25
|
require('@hi-ui/type-assertion');
|
37
|
-
|
38
26
|
var NOOP_ARRAY = [];
|
39
27
|
var NOOP_VALUE = [];
|
40
|
-
|
41
28
|
var useCheckSelect = function useCheckSelect(_a) {
|
42
29
|
var _a$data = _a.data,
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
30
|
+
dataProp = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
31
|
+
children = _a.children,
|
32
|
+
_a$disabled = _a.disabled,
|
33
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
34
|
+
valueProp = _a.value,
|
35
|
+
_a$defaultValue = _a.defaultValue,
|
36
|
+
defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
|
37
|
+
onChangeProp = _a.onChange,
|
38
|
+
onSelect = _a.onSelect,
|
39
|
+
fieldNames = _a.fieldNames,
|
40
|
+
rest = tslib.__rest(_a, ["data", "children", "disabled", "value", "defaultValue", "onChange", "onSelect", "fieldNames"]);
|
55
41
|
var data = useData.useData({
|
56
42
|
data: dataProp,
|
57
43
|
children: children
|
58
44
|
});
|
59
|
-
|
60
45
|
var _useCache = index.useCache(data),
|
61
|
-
|
62
|
-
|
63
|
-
|
46
|
+
cacheData = _useCache[0],
|
47
|
+
setCacheData = _useCache[1];
|
64
48
|
var flattedData = useFlattenData.useFlattenData({
|
65
49
|
data: cacheData,
|
66
50
|
fieldNames: fieldNames
|
67
51
|
});
|
68
52
|
var flattedDataRef = useLatest.useLatestRef(flattedData);
|
69
|
-
|
70
53
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChangeProp),
|
71
|
-
|
72
|
-
|
73
|
-
|
54
|
+
value = _useUncontrolledState[0],
|
55
|
+
tryChangeValue = _useUncontrolledState[1];
|
74
56
|
var onSelectLatest = useLatest.useLatestCallback(onSelect);
|
75
|
-
var usedItemsRef = React.useRef([]);
|
76
|
-
|
57
|
+
var usedItemsRef = React.useRef([]);
|
58
|
+
// 扁平化的选中数据,可能包括异步临时选中缓存数据
|
77
59
|
var _useState = React.useState([]),
|
78
|
-
|
79
|
-
|
60
|
+
checkedItems = _useState[0],
|
61
|
+
setCheckedItems = _useState[1];
|
80
62
|
/**
|
81
63
|
* 更新缓存的 data 数据
|
82
64
|
* 兼容在搜索异步加载结果的场景时,将选中的项加入到 cacheData 数据中,这样再次打开下拉框时可以显示之前选中的值
|
83
65
|
*/
|
84
|
-
|
85
|
-
|
86
66
|
var updateCacheData = React.useCallback(function (nextCheckedItems) {
|
87
67
|
var newData = [].concat(cacheData);
|
88
68
|
nextCheckedItems.forEach(function (item) {
|
@@ -96,38 +76,35 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
96
76
|
}, [cacheData, flattedData, setCacheData]);
|
97
77
|
var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
|
98
78
|
var changedItems = item;
|
99
|
-
|
100
79
|
if (!Array.isArray(item)) {
|
101
80
|
changedItems = [item];
|
102
81
|
onSelectLatest(value, item, shouldChecked);
|
103
82
|
}
|
104
|
-
|
105
83
|
var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
|
106
|
-
usedItemsRef.current = usedItems;
|
107
|
-
|
84
|
+
usedItemsRef.current = usedItems;
|
85
|
+
// 使用最新的value
|
108
86
|
var nextCheckedItems = usedItems.filter(function (item) {
|
109
87
|
return value.includes(item.id);
|
110
88
|
});
|
111
89
|
setCheckedItems(nextCheckedItems);
|
112
|
-
tryChangeValue(value,
|
90
|
+
tryChangeValue(value,
|
91
|
+
// 处理脏数据
|
113
92
|
changedItems.map(function (item) {
|
114
93
|
return 'raw' in item ? item.raw : item;
|
115
94
|
}), nextCheckedItems.map(function (item) {
|
116
95
|
return 'raw' in item ? item.raw : item;
|
117
|
-
}));
|
118
|
-
|
96
|
+
}));
|
97
|
+
// 每次更新 value 时,同步更新下 cacheData
|
119
98
|
updateCacheData(nextCheckedItems);
|
120
99
|
}, [flattedDataRef, tryChangeValue, updateCacheData, onSelectLatest]);
|
121
|
-
|
122
100
|
var _useCheckDefault = useCheck.useCheck({
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
101
|
+
disabled: disabled,
|
102
|
+
checkedIds: value,
|
103
|
+
onCheck: proxyTryChangeValue,
|
104
|
+
allowCheck: allowCheck
|
105
|
+
}),
|
106
|
+
onOptionCheck = _useCheckDefault[0],
|
107
|
+
isCheckedId = _useCheckDefault[1];
|
131
108
|
return {
|
132
109
|
rootProps: rest,
|
133
110
|
data: data,
|
@@ -139,9 +116,7 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
139
116
|
checkedItems: checkedItems
|
140
117
|
};
|
141
118
|
};
|
142
|
-
|
143
119
|
var allowCheck = function allowCheck(option) {
|
144
120
|
return !option.disabled;
|
145
121
|
};
|
146
|
-
|
147
122
|
exports.useCheckSelect = useCheckSelect;
|
package/lib/cjs/utils/index.js
CHANGED
@@ -12,10 +12,10 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
+
|
15
16
|
/**
|
16
17
|
* 判断选项是否进行可选操作
|
17
18
|
*/
|
18
|
-
|
19
19
|
var isCheckableOption = function isCheckableOption(item) {
|
20
20
|
if ('groupTitle' in item) return false;
|
21
21
|
if (item.disabled) return false;
|
@@ -24,13 +24,10 @@ var isCheckableOption = function isCheckableOption(item) {
|
|
24
24
|
/**
|
25
25
|
* 判断选项为
|
26
26
|
*/
|
27
|
-
|
28
|
-
|
29
27
|
var isOption = function isOption(item) {
|
30
28
|
if ('groupTitle' in item) return false;
|
31
29
|
return true;
|
32
30
|
};
|
33
|
-
|
34
31
|
var getAllCheckedStatus = function getAllCheckedStatus(dropdownItems, values, filterFunc) {
|
35
32
|
var dropdownIds = dropdownItems.filter(filterFunc).map(function (_ref) {
|
36
33
|
var id = _ref.id;
|
@@ -46,7 +43,6 @@ var getAllCheckedStatus = function getAllCheckedStatus(dropdownItems, values, fi
|
|
46
43
|
});
|
47
44
|
return [hasValue && dropdownIdsSet.size === 0, hasValue && dropdownIdsSet.size > 0];
|
48
45
|
};
|
49
|
-
|
50
46
|
exports.getAllCheckedStatus = getAllCheckedStatus;
|
51
47
|
exports.isCheckableOption = isCheckableOption;
|
52
48
|
exports.isOption = isOption;
|