@hi-ui/check-select 4.0.0-alpha.8 → 4.0.0-beta.2

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.
Files changed (39) hide show
  1. package/README.md +116 -7
  2. package/lib/cjs/CheckSelect.js +290 -144
  3. package/lib/cjs/CheckSelect.js.map +1 -1
  4. package/lib/cjs/hooks/use-data.js +104 -0
  5. package/lib/cjs/hooks/use-data.js.map +1 -0
  6. package/lib/cjs/hooks/use-flatten-data.js +78 -0
  7. package/lib/cjs/hooks/use-flatten-data.js.map +1 -0
  8. package/lib/cjs/index.js +0 -1
  9. package/lib/cjs/index.js.map +1 -1
  10. package/lib/cjs/styles/index.scss.js +1 -1
  11. package/lib/cjs/use-check-select.js +50 -96
  12. package/lib/cjs/use-check-select.js.map +1 -1
  13. package/lib/esm/CheckSelect.js +284 -141
  14. package/lib/esm/CheckSelect.js.map +1 -1
  15. package/lib/esm/hooks/use-data.js +94 -0
  16. package/lib/esm/hooks/use-data.js.map +1 -0
  17. package/lib/esm/hooks/use-flatten-data.js +69 -0
  18. package/lib/esm/hooks/use-flatten-data.js.map +1 -0
  19. package/lib/esm/index.js +1 -1
  20. package/lib/esm/styles/index.scss.js +1 -1
  21. package/lib/esm/use-check-select.js +49 -88
  22. package/lib/esm/use-check-select.js.map +1 -1
  23. package/lib/types/CheckSelect.d.ts +57 -21
  24. package/lib/types/context.d.ts +8 -30
  25. package/lib/types/hooks/index.d.ts +2 -0
  26. package/lib/types/hooks/use-data.d.ts +4 -0
  27. package/lib/types/hooks/use-flatten-data.d.ts +2 -0
  28. package/lib/types/hooks/use-search.d.ts +2 -2
  29. package/lib/types/types.d.ts +29 -5
  30. package/lib/types/use-check-select.d.ts +20 -52
  31. package/package.json +29 -19
  32. package/lib/cjs/hooks/use-search.js +0 -154
  33. package/lib/cjs/hooks/use-search.js.map +0 -1
  34. package/lib/cjs/utils/type-assertion/lib/esm/index.js +0 -42
  35. package/lib/cjs/utils/type-assertion/lib/esm/index.js.map +0 -1
  36. package/lib/esm/hooks/use-search.js +0 -144
  37. package/lib/esm/hooks/use-search.js.map +0 -1
  38. package/lib/esm/utils/type-assertion/lib/esm/index.js +0 -33
  39. package/lib/esm/utils/type-assertion/lib/esm/index.js.map +0 -1
package/README.md CHANGED
@@ -1,11 +1,120 @@
1
- # `@hi-ui/check-select`
1
+ # CheckSelect 多项选择器
2
2
 
3
- > TODO: description
3
+ 选择器是一种接收数据的容器，为用户提供选择一部分数据的能力。
4
4
 
5
- ## Usage
5
+ ## 何时使用
6
6
 
7
- ```
8
- const CheckSelect = require('@hi-ui/check-select');
7
+ 需要从大量的离散型数据中选择一部分时使用
9
8
 
10
- // TODO: DEMONSTRATE API
11
- ```
9
+ 备选项数量 5 个以上时
10
+
11
+ 不需要将全部备选项都展示给用户时
12
+
13
+ ## 使用示例
14
+
15
+ <!-- Inject Stories -->
16
+
17
+ ## Props
18
+
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: CheckSelectEventData, keyword: string) => React.ReactNode | - |
42
+ | displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string | - | - |
43
+
44
+ > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 CheckSelect，请尝试使用 `overlay={ container: triggerNode.parentElement }` 将下拉弹层渲染节点固定在触发器的父元素中。
45
+
46
+ ## Events
47
+
48
+ | 名称 | 说明 | 类型 | 参数 | 返回值 |
49
+ | -------- | ------------------ | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------ |
50
+ | onChange | 改变选项时触发函数 | (selectedIds: string[], changedItems: DataItem[], afterChangedItems: DataItem[]) => void | selectedIds: 所有选中项的 id 集合 <br /> changedItem: 变更的选项集合 <br /> afterChangedItems：变更后的选项集合 | - |
51
+
52
+ ## Type
53
+
54
+ ### groupDataItem
55
+
56
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
57
+ | ---------- | ----------------- | ---------------- | ------ | ------ |
58
+ | groupId | 下拉选项组唯一 id | string \| number | - | - |
59
+ | groupTitle | 下拉选项组标题 | string | - | - |
60
+ | children | 分组的时候使用 | DataItem[] | - | - |
61
+
62
+ ### DataItem
63
+
64
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
65
+ | -------- | ---------------- | --------- | ------------- | ------ |
66
+ | id | 下拉选择项唯一值 | ReactText | - | - |
67
+ | title | 下拉选择项标题 | string | - | - |
68
+ | disabled | 是否禁用 | boolean | true \| false | false |
69
+
70
+ ### CheckSelectEventData
71
+
72
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
73
+ | -------- | -------------------------------- | ------- | ------------- | ------ |
74
+ | id | 选择项值 | string | - | - |
75
+ | title | 选择项 | string | - | - |
76
+ | disabled | 是否禁用 | boolean | true \| false | false |
77
+ | raw | 原始数据，包括约定模型之外的数据 | object | - | - |
78
+ | checked | 节点是否被选中 | boolean | true \| false | - |
79
+ | focused | 节点是否被聚焦 | boolean | true \| false | - |
80
+
81
+ ### DataSource
82
+
83
+ > 继承 [Axios](https://www.kancloud.cn/yunye/axios/234845) 的 api
84
+
85
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
86
+ | ----------------- | ---------------------------------- | -------------------------------- | ------------- | ------ |
87
+ | url | 请求的 url | string | - | - |
88
+ | method | 请求方法 | string | get \| post | get |
89
+ | data | post 请求时请求体参数 | object | - | - |
90
+ | params | url 查询参数 | object | - | - |
91
+ | headers | 请求头 | object | - | - |
92
+ | withCredentials | 上传请求时是否携带 cookie | boolean | true \| false | false |
93
+ | transformResponse | 成功时的回调，用于对数据进行预处理 | (response: object) => DataItem[] | - | - |
94
+ | error | 请求发生异常的回调方法 | (error: object) => void | - | - |
95
+
96
+ ## CHANGELOG
97
+
98
+ > 从 Select 组件抽离多选模式出来，作为为单独 CheckSelect 组件。
99
+
100
+ | 参数 | 变更类型 | 变更内容 | 解决的问题 |
101
+ | ------------------- | ------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------ |
102
+ | propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
103
+ | ---- | ---- | ---- | ---- |
104
+ | value | update | 类型 string[] => string[] \| number[] | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
105
+ | defaultValue | update | 类型 string[] => string[] \| number[] | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
106
+ | id | update | 类型 string => string \| number | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
107
+ | bordered | deprecated | 字段 `bordered` => `appearance` | 对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值 |
108
+ | searchPlaceholder | feature | - | Picker 类型组件统一支持 |
109
+ | loadingContent | feature | - | Picker 类型组件统一支持，适配新 UI |
110
+ | overlay | feature | - | Picker 类型组件统一支持，聚合管理。比如： placement setOverlayContainer 等，之前有的加了有的没加 |
111
+ | virtual | feature | - | 支持虚拟列表 |
112
+ | height | feature | - | 支持虚拟列表 |
113
+ | itemHeight | feature | - | 支持虚拟列表 |
114
+ | type | deprecated | - | 拆分单选多选组件单独维护 |
115
+ | autoload | deprecated | - | 页面级首次渲染执行数据加载操作，取消内置 |
116
+ | onSearch | deprecated | - | 使用 dataSource 替代，功能重合 |
117
+ | appearance | feature | - | 统一支持：线性\面性\无边框 |
118
+ | displayRender | feature | - | 统一支持选择后内容自定义渲染 |
119
+ | setOverlayContainer | deprecated | - | 使用 overlay.container 替代，功能重合 |
120
+ | showOnlyShowChecked | update | showJustSelected -> showOnlyShowChecked | 规范命名 |