@hi-ui/check-select 4.0.0-alpha.6 → 4.0.0-beta.0
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 +116 -7
- package/lib/cjs/CheckSelect.js +290 -144
- package/lib/cjs/CheckSelect.js.map +1 -1
- package/lib/cjs/hooks/use-data.js +104 -0
- package/lib/cjs/hooks/use-data.js.map +1 -0
- package/lib/cjs/hooks/use-flatten-data.js +78 -0
- package/lib/cjs/hooks/use-flatten-data.js.map +1 -0
- package/lib/cjs/index.js +0 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/use-check-select.js +50 -96
- package/lib/cjs/use-check-select.js.map +1 -1
- package/lib/esm/CheckSelect.js +284 -141
- package/lib/esm/CheckSelect.js.map +1 -1
- package/lib/esm/hooks/use-data.js +94 -0
- package/lib/esm/hooks/use-data.js.map +1 -0
- package/lib/esm/hooks/use-flatten-data.js +69 -0
- package/lib/esm/hooks/use-flatten-data.js.map +1 -0
- package/lib/esm/index.js +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/use-check-select.js +49 -88
- package/lib/esm/use-check-select.js.map +1 -1
- package/lib/types/CheckSelect.d.ts +57 -21
- package/lib/types/context.d.ts +8 -30
- package/lib/types/hooks/index.d.ts +2 -0
- package/lib/types/hooks/use-data.d.ts +4 -0
- package/lib/types/hooks/use-flatten-data.d.ts +2 -0
- package/lib/types/hooks/use-search.d.ts +2 -2
- package/lib/types/types.d.ts +29 -5
- package/lib/types/use-check-select.d.ts +20 -52
- package/package.json +29 -19
- package/lib/cjs/hooks/use-search.js +0 -154
- package/lib/cjs/hooks/use-search.js.map +0 -1
- package/lib/cjs/utils/type-assertion/lib/esm/index.js +0 -42
- package/lib/cjs/utils/type-assertion/lib/esm/index.js.map +0 -1
- package/lib/esm/hooks/use-search.js +0 -144
- package/lib/esm/hooks/use-search.js.map +0 -1
- package/lib/esm/utils/type-assertion/lib/esm/index.js +0 -33
- package/lib/esm/utils/type-assertion/lib/esm/index.js.map +0 -1
@@ -0,0 +1,94 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/check-select
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-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 { __rest } from 'tslib';
|
11
|
+
import { useMemo, isValidElement } from 'react';
|
12
|
+
import { toArray } from '@hi-ui/use-children';
|
13
|
+
var NOOP_ARRAY = [];
|
14
|
+
|
15
|
+
var useData = function useData(_ref) {
|
16
|
+
var data = _ref.data,
|
17
|
+
children = _ref.children;
|
18
|
+
return useMemo(function () {
|
19
|
+
var mergedData; // data 优先级大于内嵌式组合
|
20
|
+
|
21
|
+
if (Array.isArray(data)) {
|
22
|
+
mergedData = data;
|
23
|
+
} else if (children) {
|
24
|
+
mergedData = parseChildren(children);
|
25
|
+
}
|
26
|
+
|
27
|
+
return mergedData || NOOP_ARRAY;
|
28
|
+
}, [children, data]);
|
29
|
+
};
|
30
|
+
|
31
|
+
var parseChildren = function parseChildren(children) {
|
32
|
+
var data = [];
|
33
|
+
var list = toArray(children);
|
34
|
+
list.forEach(function (item) {
|
35
|
+
if (! /*#__PURE__*/isValidElement(item)) return;
|
36
|
+
if (!item.type) return;
|
37
|
+
var HiName = item.type.HiName;
|
38
|
+
|
39
|
+
switch (HiName) {
|
40
|
+
case 'CheckSelectOption':
|
41
|
+
var option = parseOption(item);
|
42
|
+
data.push(option);
|
43
|
+
break;
|
44
|
+
|
45
|
+
case 'CheckSelectOptionGroup':
|
46
|
+
var optGroup = parseOptionGroup(item);
|
47
|
+
data.push(optGroup);
|
48
|
+
break;
|
49
|
+
}
|
50
|
+
});
|
51
|
+
return data;
|
52
|
+
};
|
53
|
+
|
54
|
+
var parseOption = function parseOption(node) {
|
55
|
+
var _a = node.props,
|
56
|
+
value = _a.value,
|
57
|
+
children = _a.children,
|
58
|
+
disabled = _a.disabled,
|
59
|
+
rest = __rest(_a, ["value", "children", "disabled", "groupTitle"]);
|
60
|
+
|
61
|
+
var option = {
|
62
|
+
id: value,
|
63
|
+
title: children,
|
64
|
+
disabled: disabled,
|
65
|
+
// TODO:使用 Symbol 注入,避免 data 传入使用
|
66
|
+
rootProps: rest
|
67
|
+
};
|
68
|
+
return option;
|
69
|
+
};
|
70
|
+
|
71
|
+
var parseOptionGroup = function parseOptionGroup(node) {
|
72
|
+
var key = node.key,
|
73
|
+
_a = node.props,
|
74
|
+
groupId = _a.groupId,
|
75
|
+
label = _a.label,
|
76
|
+
children = _a.children,
|
77
|
+
rest = __rest(_a, ["groupId", "label", "children"]);
|
78
|
+
|
79
|
+
var optGroup = {
|
80
|
+
groupId: groupId !== null && groupId !== void 0 ? groupId : key,
|
81
|
+
groupTitle: label,
|
82
|
+
rootProps: rest,
|
83
|
+
children: []
|
84
|
+
};
|
85
|
+
|
86
|
+
if (children) {
|
87
|
+
optGroup.children = parseChildren(children);
|
88
|
+
}
|
89
|
+
|
90
|
+
return optGroup;
|
91
|
+
};
|
92
|
+
|
93
|
+
export { parseChildren, useData };
|
94
|
+
//# sourceMappingURL=use-data.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"use-data.js","sources":["../../../src/hooks/use-data.ts"],"sourcesContent":[null],"names":["NOOP_ARRAY","useData","data","children","useMemo","mergedData","Array","isArray","parseChildren","list","toArray","forEach","item","isValidElement","type","HiName","option","parseOption","push","optGroup","parseOptionGroup","node","_a","value","disabled","rest","id","title","rootProps","key","groupId","label","groupTitle"],"mappings":";;;;;;;;;;;;AAIA,IAAMA,UAAU,GAAG,EAAnB;;IAEaC,OAAO,GAAG,SAAVA,OAAU,KAAA;MAAGC,YAAAA;MAAMC,gBAAAA;SACvBC,OAAO,CAAC;QACTC;;QAGAC,KAAK,CAACC,OAAND,CAAcJ,IAAdI,GAAqB;AACvBD,MAAAA,UAAU,GAAGH,IAAbG;AADF,WAEO,IAAIF,QAAJ,EAAc;AACnBE,MAAAA,UAAU,GAAGG,aAAa,CAACL,QAAD,CAA1BE;;;WAGKA,UAAU,IAAIL;AAVT,GAAA,EAWX,CAACG,QAAD,EAAWD,IAAX,CAXW;;;IAcHM,aAAa,GAAG,SAAhBA,aAAgB,CAACL,QAAD;MACrBD,IAAI,GAAG;MACPO,IAAI,GAAGC,OAAO,CAACP,QAAD;AAEpBM,EAAAA,IAAI,CAACE,OAALF,CAAa,UAACG,IAAD;QACP,eAACC,cAAc,CAACD,IAAD,GAAQ;QACvB,CAACA,IAAI,CAACE,MAAM;QAGNC,MADV,GAEIH,IAFJ,CACEE,IACEF,CADMG;;YAGFA;WACD;YACGC,MAAM,GAAGC,WAAW,CAACL,IAAD;AAC1BV,QAAAA,IAAI,CAACgB,IAALhB,CAAUc,MAAVd;;;WAEG;YACGiB,QAAQ,GAAGC,gBAAgB,CAACR,IAAD;AACjCV,QAAAA,IAAI,CAACgB,IAALhB,CAAUiB,QAAVjB;;;AAfN,GAAAO;SAoBOP;;;AAGT,IAAMe,WAAW,GAAG,SAAdA,WAAc,CAACI,IAAD;MAEhBC,KACED,IAAI;MADGE,KAAT,KAAA,CAASA;MAAOpB,QAAhB,KAAA,CAAgBA;MAAUqB,QAA1B,KAAA,CAA0BA;MAAyBC,IAAnD,cAAO,QAAA,YAAA,YAAA,cAAA;;MAGHT,MAAM,GAAG;AACbU,IAAAA,EAAE,EAAEH,KADS;AAEbI,IAAAA,KAAK,EAAExB,QAFM;AAGbqB,IAAAA,QAAQ,EAAEA,QAHG;;AAKbI,IAAAA,SAAS,EAAEH;AALE;SAQRT;AAbT,CAAA;;AAgBA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,IAAD;MAErBQ,GADI,GAGFR,IAHE,CACJQ;MACAP,EAFI,GAGFD,IAAI;MADGS,OAFL,KAAA,CAEKA;MAASC,KAFd,KAAA,CAEcA;MAAO5B,QAFrB,KAAA,CAEqBA;MAAasB,IAFlC,cAEG,UAAA,SAAA,YAAA;;MAGHN,QAAQ,GAAG;AACfW,IAAAA,OAAO,EAAEA,OAAO,SAAPA,IAAAA,OAAO,WAAPA,GAAAA,OAAAA,GAAWD,GADL;AAEfG,IAAAA,UAAU,EAAED,KAFG;AAGfH,IAAAA,SAAS,EAAEH,IAHI;AAIftB,IAAAA,QAAQ,EAAE;AAJK;;MAObA,UAAU;AACZgB,IAAAA,QAAQ,CAAChB,QAATgB,GAAoBX,aAAa,CAACL,QAAD,CAAjCgB;;;SAGKA;AAjBT,CAAA;;"}
|
@@ -0,0 +1,69 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/check-select
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-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 { useMemo } from 'react';
|
11
|
+
import { baseFlattenTree } from '@hi-ui/tree-utils';
|
12
|
+
var NOOP_ARRAY = [];
|
13
|
+
var DEFAULT_FIELD_NAMES = {};
|
14
|
+
|
15
|
+
var useFlattenData = function useFlattenData(_ref) {
|
16
|
+
var _ref$data = _ref.data,
|
17
|
+
data = _ref$data === void 0 ? NOOP_ARRAY : _ref$data,
|
18
|
+
_ref$fieldNames = _ref.fieldNames,
|
19
|
+
fieldNames = _ref$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref$fieldNames;
|
20
|
+
var flattedData = useMemo(function () {
|
21
|
+
return flattenData({
|
22
|
+
data: data,
|
23
|
+
fieldNames: fieldNames
|
24
|
+
});
|
25
|
+
}, [data, fieldNames]);
|
26
|
+
return flattedData;
|
27
|
+
};
|
28
|
+
|
29
|
+
var flattenData = function flattenData(_ref2) {
|
30
|
+
var _ref2$data = _ref2.data,
|
31
|
+
data = _ref2$data === void 0 ? NOOP_ARRAY : _ref2$data,
|
32
|
+
_ref2$fieldNames = _ref2.fieldNames,
|
33
|
+
fieldNames = _ref2$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref2$fieldNames; // 转换对象
|
34
|
+
|
35
|
+
var getKeyFields = function getKeyFields(node, key) {
|
36
|
+
return node[fieldNames[key] || key];
|
37
|
+
};
|
38
|
+
|
39
|
+
return baseFlattenTree({
|
40
|
+
tree: data,
|
41
|
+
childrenFieldName: function childrenFieldName(node) {
|
42
|
+
return getKeyFields(node, 'children');
|
43
|
+
},
|
44
|
+
transform: function transform(node) {
|
45
|
+
var _a; // 不对外暴露
|
46
|
+
|
47
|
+
|
48
|
+
delete node.parent;
|
49
|
+
var raw = node.raw;
|
50
|
+
|
51
|
+
if ('groupId' in raw) {
|
52
|
+
// 用于虚拟列表唯一 id
|
53
|
+
node.id = raw.groupId;
|
54
|
+
node.groupId = raw.groupId;
|
55
|
+
node.groupTitle = raw.groupTitle;
|
56
|
+
} else {
|
57
|
+
// 支持 fieldNames 转换
|
58
|
+
node.id = getKeyFields(raw, 'id');
|
59
|
+
node.title = getKeyFields(raw, 'title');
|
60
|
+
node.disabled = (_a = getKeyFields(raw, 'disabled')) !== null && _a !== void 0 ? _a : false;
|
61
|
+
}
|
62
|
+
|
63
|
+
return node;
|
64
|
+
}
|
65
|
+
});
|
66
|
+
};
|
67
|
+
|
68
|
+
export { flattenData, useFlattenData };
|
69
|
+
//# sourceMappingURL=use-flatten-data.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"use-flatten-data.js","sources":["../../../src/hooks/use-flatten-data.ts"],"sourcesContent":[null],"names":["NOOP_ARRAY","DEFAULT_FIELD_NAMES","useFlattenData","data","fieldNames","flattedData","useMemo","flattenData","getKeyFields","node","key","baseFlattenTree","tree","childrenFieldName","transform","parent","raw","id","groupId","groupTitle","title","disabled"],"mappings":";;;;;;;;;;;AAIA,IAAMA,UAAU,GAAG,EAAnB;AACA,IAAMC,mBAAmB,GAAG,EAA5B;;IAEaC,cAAc,GAAG,SAAjBA,cAAiB,KAAA;uBAAGC;MAAAA,8BAAOH;6BAAYI;MAAAA,0CAAaH;MACzDI,WAAW,GAAGC,OAAO,CAAC;WACnBC,WAAW,CAAC;AAAEJ,MAAAA,IAAI,EAAJA,IAAF;AAAQC,MAAAA,UAAU,EAAVA;AAAR,KAAD;AADO,GAAA,EAExB,CAACD,IAAD,EAAOC,UAAP,CAFwB;SAIpBC;;;IAGIE,WAAW,GAAG,SAAdA,WAAc,MAAA;yBAAGJ;MAAAA,+BAAOH;+BAAYI;MAAAA,2CAAaH;;MAEtDO,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAYC,GAAZ;WAAyCD,IAAI,CAACL,UAAU,CAACM,GAAD,CAAVN,IAAmBM,GAApB;AAAlE;;SAEOC,eAAe,CAAC;AACrBC,IAAAA,IAAI,EAAET,IADe;AAErBU,IAAAA,iBAAiB,EAAE,0BAAA,CAACJ,IAAD;aAAUD,YAAY,CAACC,IAAD,EAAO,UAAP;AAFpB,KAAA;AAGrBK,IAAAA,SAAS,EAAE,kBAAA,CAACL,IAAD;;;;aAEFA,IAAI,CAACM;UAEJC,GAAR,GAAgBP,IAAhB,CAAQO;;UAEJ,aAAaA,KAAK;;AAEpBP,QAAAA,IAAI,CAACQ,EAALR,GAAUO,GAAG,CAACE,OAAdT;AACAA,QAAAA,IAAI,CAACS,OAALT,GAAeO,GAAG,CAACE,OAAnBT;AACAA,QAAAA,IAAI,CAACU,UAALV,GAAkBO,GAAG,CAACG,UAAtBV;AAJF,aAKO;;AAELA,QAAAA,IAAI,CAACQ,EAALR,GAAUD,YAAY,CAACQ,GAAD,EAAM,IAAN,CAAtBP;AACAA,QAAAA,IAAI,CAACW,KAALX,GAAaD,YAAY,CAACQ,GAAD,EAAM,OAAN,CAAzBP;AACAA,QAAAA,IAAI,CAACY,QAALZ,GAAgB,MAAAD,YAAY,CAACQ,GAAD,EAAM,UAAN,CAAZ,UAAA,iBAAA,KAAA,GAAiC,KAAjDP;;;aAEKA;;AApBY,GAAD;;;"}
|
package/lib/esm/index.js
CHANGED
@@ -8,5 +8,5 @@
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
10
|
import './styles/index.scss.js';
|
11
|
-
export { CheckSelect, CheckSelectOption, CheckSelectOptionGroup,
|
11
|
+
export { CheckSelect, CheckSelectOption, CheckSelectOptionGroup, CheckSelect as default } from './CheckSelect.js';
|
12
12
|
//# sourceMappingURL=index.js.map
|
@@ -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
|
-
var css_248z = "
|
10
|
+
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-check-select-option {\n margin-top: 4px;\n margin-top: var(--hi-v4-spacing-2, 4px);\n margin-bottom: 4px;\n margin-bottom: var(--hi-v4-spacing-2, 4px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n cursor: pointer;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n font-weight: 400;\n font-weight: var(--hi-v4-text-weight-normal, 400);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option__indent {\n display: inline-block;\n width: 16px;\n height: 100%; }\n.hi-v4-check-select-option__title {\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n padding: 6px;\n padding: var(--hi-v4-spacing-3, 6px);\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n line-height: inherit; }\n.hi-v4-check-select-option:hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--focused {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--disabled {\n cursor: not-allowed;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-check-select-option-group {\n display: inline-block;\n margin-top: 12px;\n margin-top: var(--hi-v4-spacing-6, 12px);\n margin-bottom: 4px;\n margin-bottom: var(--hi-v4-spacing-2, 4px);\n padding: 6px 0 6px 6px;\n padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n font-weight: 400;\n font-weight: var(--hi-v4-text-weight-normal, 400);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option-group:first-child {\n margin-top: 4px;\n margin-top: var(--hi-v4-spacing-2, 4px); }\n";
|
11
11
|
|
12
12
|
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
13
13
|
|
@@ -8,12 +8,15 @@
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
10
|
import { __rest } from 'tslib';
|
11
|
-
import
|
11
|
+
import { useRef, useCallback } from 'react';
|
12
12
|
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
13
|
-
import {
|
13
|
+
import { uniqBy } from 'lodash';
|
14
14
|
import { useCheck } from '@hi-ui/use-check';
|
15
|
-
import { useLatestCallback } from '@hi-ui/use-latest';
|
16
|
-
import {
|
15
|
+
import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
|
16
|
+
import { useData } from './hooks/use-data.js';
|
17
|
+
import { useFlattenData } from './hooks/use-flatten-data.js';
|
18
|
+
import '@hi-ui/env';
|
19
|
+
import '@hi-ui/type-assertion';
|
17
20
|
var NOOP_ARRAY = [];
|
18
21
|
var NOOP_VALUE = [];
|
19
22
|
|
@@ -28,75 +31,51 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
28
31
|
defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
|
29
32
|
onChangeProp = _a.onChange,
|
30
33
|
onSelect = _a.onSelect,
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
34
|
+
fieldNames = _a.fieldNames,
|
35
|
+
rest = __rest(_a, ["data", "children", "disabled", "value", "defaultValue", "onChange", "onSelect", "fieldNames"]);
|
36
|
+
|
37
|
+
var data = useData({
|
38
|
+
data: dataProp,
|
39
|
+
children: children
|
40
|
+
});
|
41
|
+
var flattedData = useFlattenData({
|
42
|
+
data: data,
|
43
|
+
fieldNames: fieldNames
|
44
|
+
});
|
45
|
+
var flattedDataRef = useLatestRef(flattedData);
|
37
46
|
|
38
|
-
var
|
39
|
-
|
40
|
-
|
41
|
-
var list = toArray(child);
|
42
|
-
var arr = [];
|
43
|
-
list.forEach(function (item) {
|
44
|
-
if (! /*#__PURE__*/React.isValidElement(item)) return; // @ts-ignore
|
45
|
-
|
46
|
-
if (item.type.HiName === 'CheckSelectOption') {
|
47
|
-
var props = item.props;
|
48
|
-
|
49
|
-
var _value = props.value,
|
50
|
-
_children = props.children,
|
51
|
-
_disabled = props.disabled,
|
52
|
-
_rest = __rest(props, ["value", "children", "disabled", "groupTitle"]);
|
53
|
-
|
54
|
-
var option = {
|
55
|
-
id: _value,
|
56
|
-
title: _children,
|
57
|
-
disabled: _disabled,
|
58
|
-
rootProps: _rest
|
59
|
-
};
|
60
|
-
arr.push(option); // @ts-ignore
|
61
|
-
} else if (item.type.HiName === 'CheckSelectOptionGroup') {
|
62
|
-
var _props = item.props;
|
63
|
-
|
64
|
-
var label = _props.label,
|
65
|
-
_children2 = _props.children,
|
66
|
-
_rest2 = __rest(_props, ["label", "children"]);
|
47
|
+
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChangeProp),
|
48
|
+
value = _useUncontrolledState[0],
|
49
|
+
tryChangeValue = _useUncontrolledState[1];
|
67
50
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
}; // @ts-ignore
|
51
|
+
var onSelectLatest = useLatestCallback(onSelect);
|
52
|
+
var selectedItemsRef = useRef([]);
|
53
|
+
var proxyTryChangeValue = useCallback(function (value, item, shouldChecked) {
|
54
|
+
var changedItems = item;
|
73
55
|
|
74
|
-
|
75
|
-
|
76
|
-
optGroup.children = dfs(_children2);
|
77
|
-
}
|
56
|
+
if (!Array.isArray(item)) {
|
57
|
+
changedItems = [item];
|
78
58
|
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
return arr;
|
83
|
-
};
|
59
|
+
if (shouldChecked) {
|
60
|
+
selectedItemsRef.current.push(item);
|
61
|
+
}
|
84
62
|
|
85
|
-
|
63
|
+
onSelectLatest(value, item, shouldChecked);
|
86
64
|
}
|
87
65
|
|
88
|
-
|
89
|
-
}, [children, dataProp]);
|
90
|
-
|
91
|
-
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChangeProp),
|
92
|
-
value = _useUncontrolledState[0],
|
93
|
-
tryChangeValue = _useUncontrolledState[1];
|
66
|
+
var selectedItems = uniqBy([].concat(changedItems, selectedItemsRef.current, flattedDataRef.current), 'id'); // 调用用户的select
|
94
67
|
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
68
|
+
var checkedItems = selectedItems // 使用最新的value
|
69
|
+
.filter(function (item) {
|
70
|
+
return value.includes(item.id);
|
71
|
+
}).map(function (item) {
|
72
|
+
return 'raw' in item ? item.raw : item;
|
73
|
+
});
|
74
|
+
tryChangeValue(value, // TODO: 处理脏数据
|
75
|
+
changedItems.map(function (item) {
|
76
|
+
return 'raw' in item ? item.raw : item;
|
77
|
+
}), checkedItems);
|
78
|
+
}, [tryChangeValue, onSelectLatest, flattedDataRef, selectedItemsRef]);
|
100
79
|
|
101
80
|
var _useCheckDefault = useCheck({
|
102
81
|
disabled: disabled,
|
@@ -105,34 +84,16 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
105
84
|
allowCheck: allowCheck
|
106
85
|
}),
|
107
86
|
onOptionCheck = _useCheckDefault[0],
|
108
|
-
|
109
|
-
|
110
|
-
var _useSearch = useSearch(data, filter),
|
111
|
-
inSearch = _useSearch[0],
|
112
|
-
matchedItems = _useSearch[1],
|
113
|
-
inputProps = _useSearch[2],
|
114
|
-
isEmpty = _useSearch[3],
|
115
|
-
resetSearch = _useSearch[4];
|
87
|
+
isCheckedId = _useCheckDefault[1];
|
116
88
|
|
117
|
-
var getSearchInputProps = useCallback(function () {
|
118
|
-
return {
|
119
|
-
placeholder: searchPlaceholder,
|
120
|
-
value: inputProps.value,
|
121
|
-
onChange: inputProps.onChange
|
122
|
-
};
|
123
|
-
}, [searchPlaceholder, inputProps]);
|
124
89
|
return {
|
125
90
|
rootProps: rest,
|
126
|
-
data:
|
91
|
+
data: data,
|
92
|
+
flattedData: flattedData,
|
127
93
|
value: value,
|
94
|
+
tryChangeValue: proxyTryChangeValue,
|
128
95
|
onSelect: onOptionCheck,
|
129
|
-
|
130
|
-
emptyContent: emptyContent,
|
131
|
-
getSearchInputProps: getSearchInputProps,
|
132
|
-
tryChangeValue: tryChangeValue,
|
133
|
-
isEmpty: isEmpty,
|
134
|
-
resetSearch: resetSearch,
|
135
|
-
titleRender: titleRender
|
96
|
+
isCheckedId: isCheckedId
|
136
97
|
};
|
137
98
|
};
|
138
99
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"use-check-select.js","sources":["../../src/use-check-select.ts"],"sourcesContent":[null],"names":["NOOP_ARRAY","NOOP_VALUE","useCheckSelect","_a","data","dataProp","children","disabled","valueProp","value","defaultValue","onChangeProp","onChange","onSelect","
|
1
|
+
{"version":3,"file":"use-check-select.js","sources":["../../src/use-check-select.ts"],"sourcesContent":[null],"names":["NOOP_ARRAY","NOOP_VALUE","useCheckSelect","_a","data","dataProp","children","disabled","valueProp","value","defaultValue","onChangeProp","onChange","onSelect","fieldNames","rest","useData","flattedData","useFlattenData","flattedDataRef","useLatestRef","useUncontrolledState","tryChangeValue","onSelectLatest","useLatestCallback","selectedItemsRef","useRef","proxyTryChangeValue","useCallback","item","shouldChecked","changedItems","Array","isArray","current","push","selectedItems","uniqBy","checkedItems","filter","includes","id","map","raw","useCheckDefault","checkedIds","onCheck","allowCheck","onOptionCheck","isCheckedId","rootProps","option"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,IAAMA,UAAU,GAAG,EAAnB;AACA,IAAMC,UAAU,GAAG,EAAnB;;IAEaC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD;mBAC5BC;MAAMC,gCAAWL;MACjBM,cAAAA;uBACAC;MAAAA,oCAAW;MACJC,eAAPC;2BACAC;MAAAA,4CAAeT;MACLU,kBAAVC;MACAC,cAAAA;MACAC,gBAAAA;MACGC,kBAT0B,OAAA,YAAA,YAAA,SAAA,gBAAA,YAAA,YAAA,cAAA;;MAWvBX,IAAI,GAAGY,OAAO,CAAC;AAAEZ,IAAAA,IAAI,EAAEC,QAAR;AAAkBC,IAAAA,QAAQ,EAARA;AAAlB,GAAD;MACdW,WAAW,GAAGC,cAAc,CAAC;AAAEd,IAAAA,IAAI,EAAJA,IAAF;AAAQU,IAAAA,UAAU,EAAVA;AAAR,GAAD;MAC5BK,cAAc,GAAGC,YAAY,CAACH,WAAD;;8BAEHI,oBAAoB,CAACX,YAAD,EAAeF,SAAf,EAA0BG,YAA1B;MAA7CF,KAAP;MAAca,cAAd;;MAEMC,cAAc,GAAGC,iBAAiB,CAACX,QAAD;MAElCY,gBAAgB,GAAGC,MAAM,CAAQ,EAAR;MAEzBC,mBAAmB,GAAGC,WAAW,CACrC,UACEnB,KADF,EAEEoB,IAFF,EAGEC,aAHF;QAKMC,YAAY,GAAGF;;QAEf,CAACG,KAAK,CAACC,OAAND,CAAcH,IAAdG,GAAqB;AACxBD,MAAAA,YAAY,GAAG,CAACF,IAAD,CAAfE;;UAEID,eAAe;AACjBL,QAAAA,gBAAgB,CAACS,OAAjBT,CAAyBU,IAAzBV,CAA8BI,IAA9BJ;;;AAEFF,MAAAA,cAAc,CAACd,KAAD,EAAQoB,IAAR,EAAcC,aAAd,CAAdP;;;QAGIa,aAAa,GAAGC,MAAM,WACtBN,cAAiBN,gBAAgB,CAACS,SAAYf,cAAc,CAACe,QADvC,EAE1B,IAF0B;;QAMtBI,YAAY,GAAGF,aAAa;AAAA,KAE/BG,MAFkBH,CAEX,UAACP,IAAD;aAAUpB,KAAK,CAAC+B,QAAN/B,CAAeoB,IAAI,CAACY,EAApBhC;AAFC,KAAA2B,EAGlBM,GAHkBN,CAGd,UAACP,IAAD;aAAW,SAASA,IAAT,GAAgBA,IAAI,CAACc,GAArB,GAA2Bd;AAHxB,KAAAO;AAKrBd,IAAAA,cAAc,CACZb,KADY;AAGZsB,IAAAA,YAAY,CAACW,GAAbX,CAAiB,UAACF,IAAD;aAAW,SAASA,IAAT,GAAgBA,IAAI,CAACc,GAArB,GAA2Bd;AAAvD,KAAAE,CAHY,EAIZO,YAJY,CAAdhB;AA5BmC,GAAA,EAmCrC,CAACA,cAAD,EAAiBC,cAAjB,EAAiCJ,cAAjC,EAAiDM,gBAAjD,CAnCqC;;yBAsCFmB,QAAe,CAAC;AACnDrC,IAAAA,QAAQ,EAARA,QADmD;AAEnDsC,IAAAA,UAAU,EAAEpC,KAFuC;AAGnDqC,IAAAA,OAAO,EAAEnB,mBAH0C;AAInDoB,IAAAA,UAAU,EAAVA;AAJmD,GAAD;MAA7CC,aAAP;MAAsBC,WAAtB;;SAOO;AACLC,IAAAA,SAAS,EAAEnC,IADN;AAELX,IAAAA,IAAI,EAAJA,IAFK;AAGLa,IAAAA,WAAW,EAAXA,WAHK;AAILR,IAAAA,KAAK,EAALA,KAJK;AAKLa,IAAAA,cAAc,EAAEK,mBALX;AAMLd,IAAAA,QAAQ,EAAEmC,aANL;AAOLC,IAAAA,WAAW,EAAXA;AAPK;;;AA4DT,IAAMF,UAAU,GAAG,SAAbA,UAAa,CAACI,MAAD;SAAiB,CAACA,MAAM,CAAC5C;AAA5C,CAAA;;"}
|
@@ -1,22 +1,22 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
3
|
-
import type {
|
4
|
-
import {
|
2
|
+
import { UseCheckSelectProps } from './use-check-select';
|
3
|
+
import type { HiBaseAppearanceEnum, HiBaseHTMLProps } from '@hi-ui/core';
|
4
|
+
import { CheckSelectDataItem, CheckSelectEventData } from './types';
|
5
|
+
import { PickerProps } from '@hi-ui/picker';
|
6
|
+
import { UseDataSource } from '@hi-ui/use-data-source';
|
5
7
|
/**
|
6
8
|
* TODO: What is CheckSelect
|
7
9
|
*/
|
8
10
|
export declare const CheckSelect: React.ForwardRefExoticComponent<CheckSelectProps & React.RefAttributes<HTMLDivElement | null>>;
|
9
|
-
export interface CheckSelectProps extends Omit<
|
11
|
+
export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheckSelectProps {
|
10
12
|
/**
|
11
|
-
*
|
12
|
-
|
13
|
-
popper?: PopperProps;
|
14
|
-
/**
|
15
|
-
* 设置虚拟滚动容器的可视高度
|
13
|
+
* 设置虚拟滚动容器的可视高度。暂不对外暴露
|
14
|
+
* @private
|
16
15
|
*/
|
17
16
|
height?: number;
|
18
17
|
/**
|
19
|
-
*
|
18
|
+
* 设置虚拟列表每项的固定高度。暂不对外暴露
|
19
|
+
* @private
|
20
20
|
*/
|
21
21
|
itemHeight?: number;
|
22
22
|
/**
|
@@ -44,13 +44,39 @@ export interface CheckSelectProps extends Omit<HiBaseHTMLFieldProps<'div'>, 'onC
|
|
44
44
|
*/
|
45
45
|
size?: 'sm' | 'md' | 'lg';
|
46
46
|
/**
|
47
|
-
*
|
47
|
+
* 自定义渲染节点的 title 内容
|
48
48
|
*/
|
49
|
-
|
49
|
+
render?: (item: CheckSelectEventData) => React.ReactNode;
|
50
50
|
/**
|
51
|
-
*
|
51
|
+
* 自定义选择后触发器所展示的内容,只在 title 为字符串时有效
|
52
52
|
*/
|
53
|
-
|
53
|
+
displayRender?: (option: CheckSelectEventData) => React.ReactNode;
|
54
|
+
/**
|
55
|
+
* 触发器输入框占位符
|
56
|
+
*/
|
57
|
+
placeholder?: string;
|
58
|
+
/**
|
59
|
+
* 设置展现形式
|
60
|
+
*/
|
61
|
+
appearance?: HiBaseAppearanceEnum;
|
62
|
+
/**
|
63
|
+
* 节点搜索模式,仅在mode=normal模式下生效
|
64
|
+
*/
|
65
|
+
searchMode?: 'highlight' | 'filter';
|
66
|
+
/**
|
67
|
+
* 自定义搜索过滤器,仅在 searchable 为 true 时有效
|
68
|
+
* 第一个参数为输入的关键字,
|
69
|
+
* 第二个为数据项,返回值为 true 时将出现在结果项
|
70
|
+
*/
|
71
|
+
filterOption?: (keyword: string, item: CheckSelectDataItem) => boolean;
|
72
|
+
/**
|
73
|
+
* 异步加载数据
|
74
|
+
*/
|
75
|
+
dataSource?: UseDataSource<CheckSelectDataItem>;
|
76
|
+
/**
|
77
|
+
* 自定义下拉菜单底部渲染
|
78
|
+
*/
|
79
|
+
renderExtraFooter?: () => React.ReactNode;
|
54
80
|
/**
|
55
81
|
* 自定义 input 后缀 icon
|
56
82
|
*/
|
@@ -59,12 +85,22 @@ export interface CheckSelectProps extends Omit<HiBaseHTMLFieldProps<'div'>, 'onC
|
|
59
85
|
* 自定义清除 tags 的 icon
|
60
86
|
*/
|
61
87
|
clearIcon?: React.ReactNode;
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
88
|
+
/**
|
89
|
+
* 面板打开时回调
|
90
|
+
*/
|
91
|
+
onOpen?: () => void;
|
92
|
+
/**
|
93
|
+
* 面板关闭时回调
|
94
|
+
*/
|
95
|
+
onClose?: () => void;
|
96
|
+
/**
|
97
|
+
* 是否开启全选功能
|
98
|
+
*/
|
99
|
+
showCheckAll?: boolean;
|
100
|
+
/**
|
101
|
+
* 是否开启查看仅已选功能
|
102
|
+
*/
|
103
|
+
showOnlyShowChecked?: boolean;
|
68
104
|
}
|
69
105
|
/**
|
70
106
|
* TODO: What is CheckSelectOption
|
@@ -75,6 +111,6 @@ export interface CheckSelectOptionProps extends HiBaseHTMLProps {
|
|
75
111
|
/**
|
76
112
|
* TODO: What is CheckSelectOptionGroup
|
77
113
|
*/
|
78
|
-
export declare const CheckSelectOptionGroup: React.ForwardRefExoticComponent<Pick<
|
114
|
+
export declare const CheckSelectOptionGroup: React.ForwardRefExoticComponent<Pick<CheckSelectOptionGroupProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
|
79
115
|
export interface CheckSelectOptionGroupProps extends HiBaseHTMLProps {
|
80
116
|
}
|
package/lib/types/context.d.ts
CHANGED
@@ -1,41 +1,19 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
export declare const CheckSelectProvider: import("react").Provider<Omit<{
|
3
|
-
rootProps: {
|
4
|
-
displayRender?: ((option: import("./types").CheckSelectOptionItem) => import("react").ReactNode) | undefined;
|
5
|
-
placeholder?: string | undefined;
|
6
|
-
};
|
3
|
+
rootProps: {};
|
7
4
|
data: any[];
|
5
|
+
flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
|
8
6
|
value: import("react").ReactText[];
|
7
|
+
tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectEventData | import("./types").CheckSelectEventData[], shouldChecked: boolean) => void;
|
9
8
|
onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
|
10
|
-
|
11
|
-
emptyContent: boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | null;
|
12
|
-
getSearchInputProps: () => {
|
13
|
-
placeholder: string | undefined;
|
14
|
-
value: string;
|
15
|
-
onChange: (evt: import("react").ChangeEvent<HTMLInputElement>) => void;
|
16
|
-
};
|
17
|
-
tryChangeValue: (newState: import("react").ReactText[], ...args: any[]) => void;
|
18
|
-
isEmpty: boolean;
|
19
|
-
resetSearch: () => void;
|
20
|
-
titleRender: ((item: import("./types").CheckSelectOptionItem) => import("react").ReactNode) | undefined;
|
9
|
+
isCheckedId: (id: import("react").ReactText) => boolean;
|
21
10
|
}, "rootProps"> | null>;
|
22
11
|
export declare const useCheckSelectContext: () => Omit<{
|
23
|
-
rootProps: {
|
24
|
-
displayRender?: ((option: import("./types").CheckSelectOptionItem) => import("react").ReactNode) | undefined;
|
25
|
-
placeholder?: string | undefined;
|
26
|
-
};
|
12
|
+
rootProps: {};
|
27
13
|
data: any[];
|
14
|
+
flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
|
28
15
|
value: import("react").ReactText[];
|
16
|
+
tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectEventData | import("./types").CheckSelectEventData[], shouldChecked: boolean) => void;
|
29
17
|
onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
|
30
|
-
|
31
|
-
emptyContent: boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | null;
|
32
|
-
getSearchInputProps: () => {
|
33
|
-
placeholder: string | undefined;
|
34
|
-
value: string;
|
35
|
-
onChange: (evt: import("react").ChangeEvent<HTMLInputElement>) => void;
|
36
|
-
};
|
37
|
-
tryChangeValue: (newState: import("react").ReactText[], ...args: any[]) => void;
|
38
|
-
isEmpty: boolean;
|
39
|
-
resetSearch: () => void;
|
40
|
-
titleRender: ((item: import("./types").CheckSelectOptionItem) => import("react").ReactNode) | undefined;
|
18
|
+
isCheckedId: (id: import("react").ReactText) => boolean;
|
41
19
|
}, "rootProps">;
|
@@ -0,0 +1,2 @@
|
|
1
|
+
export declare const useFlattenData: ({ data, fieldNames }: any) => import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
|
2
|
+
export declare const flattenData: ({ data, fieldNames }: any) => import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import { CheckSelectMergedItem } from '../types';
|
3
3
|
/**
|
4
4
|
* 支持搜索功能的 hook
|
5
5
|
*/
|
6
|
-
export declare const useSearch: (flattedData:
|
6
|
+
export declare const useSearch: (flattedData: CheckSelectMergedItem[], filter?: ((keyword: string, option: CheckSelectMergedItem) => boolean) | undefined) => readonly [boolean, CheckSelectMergedItem[], {
|
7
7
|
value: string;
|
8
8
|
onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
|
9
9
|
}, boolean, () => void];
|