@hi-ui/check-select 4.0.0-beta.3 → 4.0.0-beta.32
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/README.md +25 -25
- package/lib/cjs/CheckSelect.js +115 -73
- package/lib/cjs/context.js +0 -1
- package/lib/cjs/hooks/use-data.js +0 -1
- package/lib/cjs/hooks/use-flatten-data.js +0 -1
- package/lib/cjs/index.js +0 -1
- package/lib/cjs/styles/index.scss.js +2 -3
- package/lib/cjs/use-check-select.js +18 -17
- package/lib/esm/CheckSelect.js +100 -58
- package/lib/esm/context.js +0 -1
- package/lib/esm/hooks/use-data.js +0 -1
- package/lib/esm/hooks/use-flatten-data.js +0 -1
- package/lib/esm/index.js +0 -1
- package/lib/esm/styles/index.scss.js +3 -5
- package/lib/esm/use-check-select.js +19 -18
- package/lib/types/CheckSelect.d.ts +6 -10
- package/lib/types/context.d.ts +4 -2
- package/lib/types/types.d.ts +9 -7
- package/lib/types/use-check-select.d.ts +7 -7
- package/package.json +27 -27
- package/lib/cjs/CheckSelect.js.map +0 -1
- package/lib/cjs/context.js.map +0 -1
- package/lib/cjs/hooks/use-data.js.map +0 -1
- package/lib/cjs/hooks/use-flatten-data.js.map +0 -1
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/styles/index.scss.js.map +0 -1
- package/lib/cjs/use-check-select.js.map +0 -1
- package/lib/esm/CheckSelect.js.map +0 -1
- package/lib/esm/context.js.map +0 -1
- package/lib/esm/hooks/use-data.js.map +0 -1
- package/lib/esm/hooks/use-flatten-data.js.map +0 -1
- package/lib/esm/index.js.map +0 -1
- package/lib/esm/styles/index.scss.js.map +0 -1
- package/lib/esm/use-check-select.js.map +0 -1
package/README.md
CHANGED
|
@@ -16,30 +16,30 @@
|
|
|
16
16
|
|
|
17
17
|
## Props
|
|
18
18
|
|
|
19
|
-
| 参数 | 说明 | 类型
|
|
20
|
-
| ----------------- | -------------------------------------------------------------------------------------------------------- |
|
|
21
|
-
| data | 下拉框选项数据源 | DataItem[] \| groupDataItem[]
|
|
22
|
-
| fieldNames | 设置 data 中 id, title, disabled, children 对应的 key | object
|
|
23
|
-
| dataSource | 关键词搜索时，触发异步下拉框选项数据源 | DataSource (keyword: string) => (DataSource \| DataItem \| Promise)
|
|
24
|
-
| value | 被选中项的值 | ReactText[]
|
|
25
|
-
| defaultValue | 默认被选中项的值 | ReactText[]
|
|
26
|
-
| showCheckAll | 是否显示**全选**，只对多选生效 | boolean
|
|
27
|
-
| showJustSelected | 是否显示**仅看已选**，只对多选生效 (3.0 新增) | boolean
|
|
28
|
-
| searchable | 是否可以筛选 | boolean
|
|
29
|
-
| filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean
|
|
30
|
-
| clearable | 是否可以清空 | boolean
|
|
31
|
-
| disabled | 是否禁用 | boolean
|
|
32
|
-
| placeholder | 输入框占位 | string
|
|
33
|
-
| searchPlaceholder | 搜索输入框占位 | string
|
|
34
|
-
| emptyContent | 设置选项为空时展示的内容 | ReactNode
|
|
35
|
-
| loadingContent | 设置加载中时展示的内容 | ReactNode
|
|
36
|
-
| optionWidth | 自定义下拉选项宽度 | number
|
|
37
|
-
| renderExtraFooter | 自定义下拉菜单底部渲染 | () => ReactNode
|
|
38
|
-
| overlayClassName | 下拉根元素的类名称 | string
|
|
39
|
-
| onOverlayScroll | 下拉列表滚动时的回调 | function
|
|
40
|
-
| overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps
|
|
41
|
-
| render | 自定义渲染节点的 title 内容径 | (item:
|
|
42
|
-
| displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string
|
|
19
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
20
|
+
| ----------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
|
|
21
|
+
| data | 下拉框选项数据源 | DataItem[] \| groupDataItem[] | - | - |
|
|
22
|
+
| fieldNames | 设置 data 中 id, title, disabled, children 对应的 key | object | - | { title: 'title', id: 'id',disabled:'disabled', children: 'children'} |
|
|
23
|
+
| dataSource | 关键词搜索时，触发异步下拉框选项数据源 | DataSource (keyword: string) => (DataSource \| DataItem \| Promise) | - | - |
|
|
24
|
+
| value | 被选中项的值 | ReactText[] | - | - |
|
|
25
|
+
| defaultValue | 默认被选中项的值 | ReactText[] | - | - |
|
|
26
|
+
| showCheckAll | 是否显示**全选**，只对多选生效 | boolean | true \| false | false |
|
|
27
|
+
| showJustSelected | 是否显示**仅看已选**，只对多选生效 (3.0 新增) | boolean | true \| false | false |
|
|
28
|
+
| searchable | 是否可以筛选 | boolean | true \| false | false |
|
|
29
|
+
| filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean | (keyword: string, item: DataItem) => boolean | - |
|
|
30
|
+
| clearable | 是否可以清空 | boolean | true \| false | true |
|
|
31
|
+
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
32
|
+
| placeholder | 输入框占位 | string | - | '请选择' |
|
|
33
|
+
| searchPlaceholder | 搜索输入框占位 | string | - | '搜索' |
|
|
34
|
+
| emptyContent | 设置选项为空时展示的内容 | ReactNode | - | '无匹配数据' |
|
|
35
|
+
| loadingContent | 设置加载中时展示的内容 | ReactNode | - | '数据加载中...' |
|
|
36
|
+
| optionWidth | 自定义下拉选项宽度 | number | - | |
|
|
37
|
+
| renderExtraFooter | 自定义下拉菜单底部渲染 | () => ReactNode | - | 无内容 |
|
|
38
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | - |
|
|
39
|
+
| onOverlayScroll | 下拉列表滚动时的回调 | function | - | - |
|
|
40
|
+
| overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps | - | - |
|
|
41
|
+
| render | 自定义渲染节点的 title 内容径 | (item: CheckSelectItemEventData, keyword: string) => React.ReactNode | - |
|
|
42
|
+
| displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string | - | - |
|
|
43
43
|
|
|
44
44
|
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 CheckSelect，请尝试使用 `overlay={ container: triggerNode.parentElement }` 将下拉弹层渲染节点固定在触发器的父元素中。
|
|
45
45
|
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
| title | 下拉选择项标题 | string | - | - |
|
|
68
68
|
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
69
69
|
|
|
70
|
-
###
|
|
70
|
+
### CheckSelectItemEventData
|
|
71
71
|
|
|
72
72
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
73
73
|
| -------- | -------------------------------- | ------- | ------------- | ------ |
|
package/lib/cjs/CheckSelect.js
CHANGED
|
@@ -41,7 +41,7 @@ var VirtualList = require('rc-virtual-list');
|
|
|
41
41
|
|
|
42
42
|
var picker = require('@hi-ui/picker');
|
|
43
43
|
|
|
44
|
-
var
|
|
44
|
+
var arrayUtils = require('@hi-ui/array-utils');
|
|
45
45
|
|
|
46
46
|
var highlighter = require('@hi-ui/highlighter');
|
|
47
47
|
|
|
@@ -102,6 +102,8 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
102
102
|
itemHeight = _a$itemHeight === void 0 ? 40 : _a$itemHeight,
|
|
103
103
|
_a$virtual = _a.virtual,
|
|
104
104
|
virtual = _a$virtual === void 0 ? true : _a$virtual,
|
|
105
|
+
onOpen = _a.onOpen,
|
|
106
|
+
onClose = _a.onClose,
|
|
105
107
|
appearance = _a.appearance,
|
|
106
108
|
invalid = _a.invalid,
|
|
107
109
|
dataSource = _a.dataSource,
|
|
@@ -112,14 +114,18 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
112
114
|
onSearchProp = _a.onSearch,
|
|
113
115
|
_a$fieldNames = _a.fieldNames,
|
|
114
116
|
fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
|
|
115
|
-
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "
|
|
117
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
|
|
116
118
|
|
|
117
119
|
var i18n = localeContext.useLocaleContext();
|
|
118
120
|
var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
|
|
119
121
|
|
|
120
|
-
var
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
123
|
+
disabled: disabled,
|
|
124
|
+
onOpen: onOpen,
|
|
125
|
+
onClose: onClose
|
|
126
|
+
}),
|
|
127
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
128
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
|
123
129
|
|
|
124
130
|
var displayRender = React.useCallback(function (item) {
|
|
125
131
|
if (typeAssertion.isFunction(displayRenderProp)) {
|
|
@@ -127,34 +133,20 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
127
133
|
}
|
|
128
134
|
|
|
129
135
|
return item.title;
|
|
130
|
-
}, [displayRenderProp]);
|
|
131
|
-
|
|
132
|
-
var _useState = React.useState([]),
|
|
133
|
-
selectedItems = _useState[0],
|
|
134
|
-
setSelectedItems = _useState[1];
|
|
135
|
-
|
|
136
|
-
var onSelect = useLatest.useLatestCallback(function (value, item, shouldChecked) {
|
|
137
|
-
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, shouldChecked);
|
|
138
|
-
|
|
139
|
-
if (shouldChecked) {
|
|
140
|
-
// TODO：as useCheckList
|
|
141
|
-
setSelectedItems(function (prev) {
|
|
142
|
-
return [].concat(prev, [item]);
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
});
|
|
136
|
+
}, [displayRenderProp]);
|
|
146
137
|
|
|
147
138
|
var _b = useCheckSelect.useCheckSelect(Object.assign(Object.assign({}, rest), {
|
|
148
139
|
children: children,
|
|
149
140
|
fieldNames: fieldNames,
|
|
150
|
-
onSelect:
|
|
141
|
+
onSelect: onSelectProp
|
|
151
142
|
})),
|
|
152
143
|
rootProps = _b.rootProps,
|
|
153
144
|
context$1 = tslib.__rest(_b, ["rootProps"]);
|
|
154
145
|
|
|
155
146
|
var value = context$1.value,
|
|
156
147
|
tryChangeValue = context$1.tryChangeValue,
|
|
157
|
-
flattedData = context$1.flattedData
|
|
148
|
+
flattedData = context$1.flattedData,
|
|
149
|
+
checkedItems = context$1.checkedItems; // ************************** 搜索 ************************* //
|
|
158
150
|
|
|
159
151
|
var _c = useSearchMode.useAsyncSearch({
|
|
160
152
|
dataSource: dataSource,
|
|
@@ -199,10 +191,10 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
199
191
|
|
|
200
192
|
|
|
201
193
|
var highlight = !!searchValue && searchMode === 'filter';
|
|
202
|
-
var ret = highlight ? /*#__PURE__*/React__default[
|
|
194
|
+
var ret = highlight ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
203
195
|
checked: node.checked,
|
|
204
196
|
disabled: node.disabled
|
|
205
|
-
}, /*#__PURE__*/React__default[
|
|
197
|
+
}, /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
|
|
206
198
|
keyword: searchValue
|
|
207
199
|
}, node.title)) : true;
|
|
208
200
|
return ret;
|
|
@@ -210,18 +202,19 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
210
202
|
var shouldUseSearch = !!searchValue && !hasError;
|
|
211
203
|
var showData = React.useMemo(function () {
|
|
212
204
|
return shouldUseSearch ? stateInSearch.data : flattedData;
|
|
213
|
-
}, [shouldUseSearch, flattedData, stateInSearch.data]); //
|
|
205
|
+
}, [shouldUseSearch, flattedData, stateInSearch.data]); // 根据 id 进行合并，注意必须是扁平数据
|
|
214
206
|
|
|
215
207
|
var mergedData = React.useMemo(function () {
|
|
216
|
-
var nextData =
|
|
217
|
-
return
|
|
218
|
-
}, [
|
|
208
|
+
var nextData = checkedItems.concat(flattedData);
|
|
209
|
+
return arrayUtils.uniqBy(nextData, 'id');
|
|
210
|
+
}, [checkedItems, flattedData]);
|
|
219
211
|
|
|
220
|
-
var
|
|
221
|
-
filterItems =
|
|
222
|
-
setFilterItems =
|
|
212
|
+
var _useState = React.useState(null),
|
|
213
|
+
filterItems = _useState[0],
|
|
214
|
+
setFilterItems = _useState[1];
|
|
223
215
|
|
|
224
216
|
var dropdownItems = filterItems || showData;
|
|
217
|
+
var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
|
|
225
218
|
|
|
226
219
|
var _useMemo = React.useMemo(function () {
|
|
227
220
|
var dropdownIds = dropdownItems.filter(function (item) {
|
|
@@ -243,29 +236,53 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
243
236
|
allChecked = _useMemo[0],
|
|
244
237
|
indeterminate = _useMemo[1];
|
|
245
238
|
|
|
239
|
+
var valueLatestRef = useLatest.useLatestRef(value);
|
|
246
240
|
var toggleCheckAll = React.useCallback(function (showChecked) {
|
|
247
|
-
var
|
|
248
|
-
|
|
249
|
-
});
|
|
241
|
+
var value = valueLatestRef.current; // 当前页的数据选项
|
|
242
|
+
|
|
250
243
|
var items = dropdownItems.filter(function (item) {
|
|
251
244
|
return !('groupTitle' in item);
|
|
252
245
|
});
|
|
246
|
+
var targetIds = items.map(function (_ref2) {
|
|
247
|
+
var id = _ref2.id;
|
|
248
|
+
return id;
|
|
249
|
+
});
|
|
250
|
+
var allData = arrayUtils.uniqBy(items.concat(mergedData), 'id');
|
|
253
251
|
|
|
254
252
|
if (showChecked) {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
return id;
|
|
258
|
-
})
|
|
253
|
+
var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
|
|
254
|
+
var changedIds = nextCheckedIds.filter(function (id) {
|
|
255
|
+
return !value.includes(id);
|
|
256
|
+
});
|
|
257
|
+
var changedItems = allData.filter(function (_ref3) {
|
|
258
|
+
var id = _ref3.id;
|
|
259
|
+
return changedIds.includes(id);
|
|
260
|
+
});
|
|
261
|
+
tryChangeValue(nextCheckedIds, changedItems, showChecked);
|
|
259
262
|
} else {
|
|
260
|
-
|
|
263
|
+
var _nextCheckedIds = value.filter(function (id) {
|
|
264
|
+
return !targetIds.includes(id);
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
var _changedIds = value.filter(function (id) {
|
|
268
|
+
return !_nextCheckedIds.includes(id);
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
var _changedItems = allData.filter(function (_ref4) {
|
|
272
|
+
var id = _ref4.id;
|
|
273
|
+
return _changedIds.includes(id);
|
|
274
|
+
}); // items
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
tryChangeValue(_nextCheckedIds, _changedItems, showChecked);
|
|
261
278
|
}
|
|
262
|
-
}, [dropdownItems, mergedData,
|
|
279
|
+
}, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
|
|
263
280
|
|
|
264
281
|
var renderDefaultFooter = function renderDefaultFooter() {
|
|
265
282
|
var extra = renderExtraFooter ? renderExtraFooter() : null;
|
|
266
283
|
|
|
267
284
|
if (showCheckAll) {
|
|
268
|
-
return /*#__PURE__*/React__default[
|
|
285
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
269
286
|
indeterminate: indeterminate,
|
|
270
287
|
checked: allChecked,
|
|
271
288
|
onChange: function onChange(evt) {
|
|
@@ -277,35 +294,28 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
277
294
|
return extra;
|
|
278
295
|
};
|
|
279
296
|
|
|
297
|
+
var expandedViewRef = React.useRef('normal');
|
|
280
298
|
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
|
281
|
-
return /*#__PURE__*/React__default[
|
|
299
|
+
return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
|
|
282
300
|
value: context$1
|
|
283
|
-
}, /*#__PURE__*/React__default[
|
|
301
|
+
}, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
|
|
284
302
|
ref: ref,
|
|
285
303
|
className: cls
|
|
286
304
|
}, rootProps, {
|
|
287
305
|
visible: menuVisible,
|
|
288
|
-
onOpen: function onOpen() {
|
|
289
|
-
if (showOnlyShowChecked) {
|
|
290
|
-
if (filterItems) {
|
|
291
|
-
setFilterItems(null);
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
menuVisibleAction.on();
|
|
296
|
-
},
|
|
297
306
|
disabled: disabled,
|
|
307
|
+
onOpen: menuVisibleAction.on,
|
|
298
308
|
onClose: menuVisibleAction.off,
|
|
299
309
|
searchable: searchable,
|
|
300
310
|
onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
|
|
301
311
|
loading: loading,
|
|
302
312
|
footer: renderDefaultFooter(),
|
|
303
|
-
trigger: /*#__PURE__*/React__default[
|
|
313
|
+
trigger: /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, {
|
|
304
314
|
clearable: clearable,
|
|
305
315
|
placeholder: placeholder,
|
|
306
316
|
// @ts-ignore
|
|
307
317
|
displayRender: displayRender,
|
|
308
|
-
suffix: menuVisible ? /*#__PURE__*/React__default[
|
|
318
|
+
suffix: menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
|
|
309
319
|
focused: menuVisible,
|
|
310
320
|
appearance: appearance,
|
|
311
321
|
value: value,
|
|
@@ -313,19 +323,52 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
313
323
|
onChange: tryChangeValue,
|
|
314
324
|
data: mergedData,
|
|
315
325
|
invalid: invalid,
|
|
316
|
-
|
|
317
|
-
if (showOnlyShowChecked)
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
326
|
+
onClick: function onClick(evt) {
|
|
327
|
+
if (!showOnlyShowChecked) return;
|
|
328
|
+
if (disabled) return; // 阻止 Picker 调用 onOpen/onClose
|
|
329
|
+
|
|
330
|
+
evt.preventDefault();
|
|
331
|
+
|
|
332
|
+
if (filterItems) {
|
|
333
|
+
setFilterItems(null);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
if (menuVisible) {
|
|
337
|
+
if (expandedViewRef.current === 'normal') {
|
|
338
|
+
menuVisibleAction.off();
|
|
339
|
+
}
|
|
340
|
+
} else {
|
|
341
|
+
menuVisibleAction.on();
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
expandedViewRef.current = 'normal';
|
|
345
|
+
},
|
|
346
|
+
expandable: showOnlyShowChecked,
|
|
347
|
+
activeExpandable: activeExpandable,
|
|
348
|
+
onExpand: function onExpand(evt) {
|
|
349
|
+
if (!showOnlyShowChecked) return;
|
|
350
|
+
if (disabled) return; // 阻止冒泡触发外层 onClick
|
|
351
|
+
|
|
352
|
+
evt.stopPropagation();
|
|
353
|
+
evt.preventDefault();
|
|
354
|
+
setFilterItems(function () {
|
|
355
|
+
return mergedData.filter(function (item) {
|
|
356
|
+
return value.includes(item.id);
|
|
322
357
|
});
|
|
358
|
+
});
|
|
359
|
+
|
|
360
|
+
if (menuVisible) {
|
|
361
|
+
if (expandedViewRef.current !== 'normal') {
|
|
362
|
+
menuVisibleAction.off();
|
|
363
|
+
}
|
|
364
|
+
} else {
|
|
365
|
+
menuVisibleAction.on();
|
|
323
366
|
}
|
|
324
367
|
|
|
325
|
-
|
|
368
|
+
expandedViewRef.current = 'onlyChecked';
|
|
326
369
|
}
|
|
327
370
|
})
|
|
328
|
-
}), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default[
|
|
371
|
+
}), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], {
|
|
329
372
|
itemKey: "id",
|
|
330
373
|
fullHeight: false,
|
|
331
374
|
height: height,
|
|
@@ -334,9 +377,9 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
334
377
|
data: dropdownItems
|
|
335
378
|
}, function (node) {
|
|
336
379
|
/* 反向 map，搜索删选数据时会对数据进行处理 */
|
|
337
|
-
return 'groupTitle' in node ? /*#__PURE__*/React__default[
|
|
380
|
+
return 'groupTitle' in node ? /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
|
|
338
381
|
label: node.groupTitle
|
|
339
|
-
}) : /*#__PURE__*/React__default[
|
|
382
|
+
}) : /*#__PURE__*/React__default["default"].createElement(CheckSelectOption, {
|
|
340
383
|
option: node,
|
|
341
384
|
depth: node.depth,
|
|
342
385
|
titleRender: proxyTitleRender
|
|
@@ -386,14 +429,14 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
386
429
|
var renderTitle = React.useCallback(function (node, titleRender) {
|
|
387
430
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
388
431
|
var title = titleRender ? titleRender(node) : true;
|
|
389
|
-
return /*#__PURE__*/React__default[
|
|
432
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
390
433
|
className: prefixCls + "__title"
|
|
391
|
-
}, title === true ? /*#__PURE__*/React__default[
|
|
434
|
+
}, title === true ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
392
435
|
checked: node.checked,
|
|
393
436
|
disabled: node.disabled
|
|
394
437
|
}, node.title) : title);
|
|
395
438
|
}, [prefixCls]);
|
|
396
|
-
return /*#__PURE__*/React__default[
|
|
439
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
397
440
|
ref: ref,
|
|
398
441
|
className: cls
|
|
399
442
|
}, rest, {
|
|
@@ -420,10 +463,10 @@ var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
420
463
|
rest = tslib.__rest(_a, ["prefixCls", "className", "label"]);
|
|
421
464
|
|
|
422
465
|
var cls = classname.cx(prefixCls, className);
|
|
423
|
-
return /*#__PURE__*/React__default[
|
|
466
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
424
467
|
ref: ref,
|
|
425
468
|
className: cls
|
|
426
|
-
}, rest), /*#__PURE__*/React__default[
|
|
469
|
+
}, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label));
|
|
427
470
|
}); // @ts-ignore
|
|
428
471
|
|
|
429
472
|
CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
|
|
@@ -438,12 +481,12 @@ if (env.__DEV__) {
|
|
|
438
481
|
|
|
439
482
|
var renderIndent = function renderIndent(prefixCls, depth) {
|
|
440
483
|
return times.times(depth, function (index) {
|
|
441
|
-
return /*#__PURE__*/React__default[
|
|
484
|
+
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
442
485
|
key: index,
|
|
443
486
|
style: {
|
|
444
487
|
alignSelf: 'stretch'
|
|
445
488
|
}
|
|
446
|
-
}, /*#__PURE__*/React__default[
|
|
489
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
447
490
|
className: classname.cx(prefixCls + "__indent")
|
|
448
491
|
}));
|
|
449
492
|
});
|
|
@@ -452,4 +495,3 @@ var renderIndent = function renderIndent(prefixCls, depth) {
|
|
|
452
495
|
exports.CheckSelect = CheckSelect;
|
|
453
496
|
exports.CheckSelectOption = CheckSelectOption;
|
|
454
497
|
exports.CheckSelectOptionGroup = CheckSelectOptionGroup;
|
|
455
|
-
//# sourceMappingURL=CheckSelect.js.map
|
package/lib/cjs/context.js
CHANGED
package/lib/cjs/index.js
CHANGED
|
@@ -12,11 +12,10 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = "
|
|
15
|
+
var css_248z = ".hi-v4-check-select-option {margin-top: var(--hi-v4-spacing-2, 4px);margin-bottom: var(--hi-v4-spacing-2, 4px);-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: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px);font-size: inherit;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
16
|
|
|
17
|
-
var __styleInject__ = require('
|
|
17
|
+
var __styleInject__ = require('inject-head-style')["default"];
|
|
18
18
|
|
|
19
19
|
__styleInject__(css_248z);
|
|
20
20
|
|
|
21
21
|
exports["default"] = css_248z;
|
|
22
|
-
//# sourceMappingURL=index.scss.js.map
|
|
@@ -19,7 +19,7 @@ var React = require('react');
|
|
|
19
19
|
|
|
20
20
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var arrayUtils = require('@hi-ui/array-utils');
|
|
23
23
|
|
|
24
24
|
var useCheck = require('@hi-ui/use-check');
|
|
25
25
|
|
|
@@ -65,33 +65,34 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
|
65
65
|
tryChangeValue = _useUncontrolledState[1];
|
|
66
66
|
|
|
67
67
|
var onSelectLatest = useLatest.useLatestCallback(onSelect);
|
|
68
|
-
var
|
|
68
|
+
var usedItemsRef = React.useRef([]); // 扁平化的选中数据，可能包括异步临时选中缓存数据
|
|
69
|
+
|
|
70
|
+
var _useState = React.useState([]),
|
|
71
|
+
checkedItems = _useState[0],
|
|
72
|
+
setCheckedItems = _useState[1];
|
|
73
|
+
|
|
69
74
|
var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
|
|
70
75
|
var changedItems = item;
|
|
71
76
|
|
|
72
77
|
if (!Array.isArray(item)) {
|
|
73
78
|
changedItems = [item];
|
|
74
|
-
|
|
75
|
-
if (shouldChecked) {
|
|
76
|
-
selectedItemsRef.current.push(item);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
79
|
onSelectLatest(value, item, shouldChecked);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
var
|
|
82
|
+
var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
|
|
83
|
+
usedItemsRef.current = usedItems; // 使用最新的value
|
|
83
84
|
|
|
84
|
-
var
|
|
85
|
-
.filter(function (item) {
|
|
85
|
+
var nextCheckedItems = usedItems.filter(function (item) {
|
|
86
86
|
return value.includes(item.id);
|
|
87
|
-
}).map(function (item) {
|
|
88
|
-
return 'raw' in item ? item.raw : item;
|
|
89
87
|
});
|
|
90
|
-
|
|
88
|
+
setCheckedItems(nextCheckedItems);
|
|
89
|
+
tryChangeValue(value, // 处理脏数据
|
|
91
90
|
changedItems.map(function (item) {
|
|
92
91
|
return 'raw' in item ? item.raw : item;
|
|
93
|
-
}),
|
|
94
|
-
|
|
92
|
+
}), nextCheckedItems.map(function (item) {
|
|
93
|
+
return 'raw' in item ? item.raw : item;
|
|
94
|
+
}));
|
|
95
|
+
}, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
|
|
95
96
|
|
|
96
97
|
var _useCheckDefault = useCheck.useCheck({
|
|
97
98
|
disabled: disabled,
|
|
@@ -109,7 +110,8 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
|
109
110
|
value: value,
|
|
110
111
|
tryChangeValue: proxyTryChangeValue,
|
|
111
112
|
onSelect: onOptionCheck,
|
|
112
|
-
isCheckedId: isCheckedId
|
|
113
|
+
isCheckedId: isCheckedId,
|
|
114
|
+
checkedItems: checkedItems
|
|
113
115
|
};
|
|
114
116
|
};
|
|
115
117
|
|
|
@@ -118,4 +120,3 @@ var allowCheck = function allowCheck(option) {
|
|
|
118
120
|
};
|
|
119
121
|
|
|
120
122
|
exports.useCheckSelect = useCheckSelect;
|
|
121
|
-
//# sourceMappingURL=use-check-select.js.map
|