Skip to content

Commit d05ec7e

Browse files
nullptr-znullptr-z
authoredMar 31, 2022
docs(SearchSelect): 完善示例文档&处理错误示例 (#730)
·
v5.0.0-bate-19v4.18.0
1 parent 46f7ec2 commit d05ec7e

File tree

3 files changed

+139
-148
lines changed

3 files changed

+139
-148
lines changed
 

‎packages/react-search-select/README.md

+97-54
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom';
2121
import { SearchSelect,Row,Col } from 'uiw';
2222

2323
const Demo = () => {
24-
const selectOption=[
24+
const option=[
2525
{ label: 'a1', value: 1 },
2626
{ label: 'a2', value: 2 },
2727
{ label: 'a3', value: 3 },
@@ -32,68 +32,96 @@ const Demo = () => {
3232
{ label: 'a8', value: 8 },
3333
]
3434

35-
const [option, setOption] = React.useState(selectOption);
36-
const [loading, setLoading] = React.useState(false);
37-
const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);
38-
const [value, setValue] = React.useState([{label: 'a7', value: 7}]);
39-
40-
function handleSearch(e) {
41-
setLoading(true)
42-
setTimeout(() => {
43-
const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
44-
setOption([...filterOpion]);
45-
setLoading(false);
46-
}, 500);
47-
}
48-
4935
return(
5036
<Row gutter={20}>
37+
<label>单选</label>
38+
<Row>
39+
<SearchSelect
40+
mode="single"
41+
style={{ width: 200 }}
42+
placeholder="请输入选择"
43+
option={option}
44+
/>
45+
</Row>
46+
<label>多选</label>
5147
<Row>
5248
<SearchSelect
5349
mode="multiple"
5450
style={{ width: 200 }}
55-
showSearch={true}
56-
labelInValue={true}
57-
maxTagCount={6}
58-
allowClear
59-
value={values}
6051
placeholder="请输入选择"
61-
onSearch={handleSearch}
62-
// onSelect={(value)=>console.log('onSelect',value)}
63-
loading={loading}
6452
option={option}
65-
onChange={(value) => {
66-
console.log('value', value)
67-
setValues(value)
68-
}}
6953
/>
7054
</Row>
55+
<label>禁用</label>
7156
<Row>
7257
<SearchSelect
7358
mode="single"
7459
style={{ width: 200 }}
75-
showSearch={true}
76-
labelInValue={true}
77-
maxTagCount={6}
78-
allowClear
79-
value={value}
8060
placeholder="请输入选择"
81-
onSearch={handleSearch}
82-
// onSelect={(value)=>console.log('onSelect',value)}
83-
loading={loading}
8461
option={option}
85-
onChange={(value) => {
62+
disabled={true}
63+
/>
64+
</Row>
65+
</Row>
66+
);
67+
};
68+
ReactDOM.render(<Demo />, _mount_);
69+
```
70+
71+
## 不同的value类型
72+
73+
通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]
74+
75+
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
76+
```jsx
77+
import ReactDOM from 'react-dom';
78+
import { SearchSelect,Row,Col } from 'uiw';
79+
80+
const Demo = () => {
81+
const option=[
82+
{ label: 'a1', value: 1 },
83+
{ label: 'a2', value: 2 },
84+
{ label: 'a3', value: 3 },
85+
{ label: 'a4', value: 4 },
86+
{ label: 'a5', value: 5 },
87+
{ label: 'a6', value: 6 },
88+
{ label: 'a7', value: 7 },
89+
{ label: 'a8', value: 8 },
90+
]
91+
92+
93+
const [loading, setLoading] = React.useState(false);
94+
const [value, setValue] = React.useState([1 ,7]);
95+
const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);
96+
97+
return(
98+
<Row gutter={20}>
99+
<Row>
100+
<SearchSelect
101+
mode="multiple"
102+
style={{ width: 200 }}
103+
value={value}
104+
option={option}
105+
onChange={(value)=> {
86106
console.log('value', value)
87107
setValue(value)
88108
}}
109+
placeholder="请输入选择"
89110
/>
90111
</Row>
91112
<Row>
92113
<SearchSelect
93-
mode="single"
114+
mode="multiple"
115+
labelInValue={true}
94116
style={{ width: 200 }}
117+
option={option}
118+
value={labelValue}
119+
onChange={(value)=> {
120+
console.log('value', value)
121+
setLabelValue(value)
122+
}}
123+
plac
95124
placeholder="请输入选择"
96-
disabled={true}
97125
/>
98126
</Row>
99127
</Row>
@@ -104,6 +132,8 @@ ReactDOM.render(<Demo />, _mount_);
104132

105133
## 限制选项个数
106134

135+
限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个
136+
107137
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
108138
```jsx
109139
import ReactDOM from 'react-dom';
@@ -140,7 +170,6 @@ const Demo = () => {
140170
<SearchSelect
141171
mode="multiple"
142172
style={{ width: 200 }}
143-
showSearch={true}
144173
valueAmount={valueAmount}
145174
allowClear
146175
value={values}
@@ -161,6 +190,8 @@ ReactDOM.render(<Demo />, _mount_);
161190

162191
## 显示最大数量
163192

193+
使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示
194+
164195
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
165196
```jsx
166197
import ReactDOM from 'react-dom';
@@ -203,7 +234,6 @@ const Demo = () => {
203234
<SearchSelect
204235
mode="multiple"
205236
style={{ width: 200 }}
206-
showSearch={true}
207237
labelInValue={true}
208238
maxTagCount={maxTagCount}
209239
allowClear
@@ -222,7 +252,9 @@ const Demo = () => {
222252
ReactDOM.render(<Demo />, _mount_);
223253
```
224254

225-
## 不可搜索
255+
## 启用搜索
256+
257+
将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现
226258

227259
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
228260
```jsx
@@ -242,22 +274,33 @@ const Demo = () => {
242274
]
243275

244276
const [values, setValues] = React.useState([1,7]);
277+
const [option, setOption] = React.useState(selectOption);
278+
const [loading, setLoading] = React.useState(false);
279+
280+
function handleSearch(e) {
281+
setLoading(true)
282+
setTimeout(() => {
283+
const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
284+
setOption([...filterOpion]);
285+
setLoading(false);
286+
}, 500);
287+
}
245288

246289
return(
247290
<Row style={{ marginLeft: 10 }}>
248-
<SearchSelect
249-
mode="multiple"
250-
style={{ width: 200 }}
251-
showSearch={true}
252-
labelInValue={false}
253-
showSearch={false}
254-
placeholder="请输入选择"
255-
value={values}
256-
option={selectOption}
257-
onChange={(value) => {
258-
setValues(value)
259-
}}
260-
/>
291+
<SearchSelect
292+
mode="multiple"
293+
showSearch={true}
294+
value={values}
295+
option={option}
296+
loading={loading}
297+
onSearch={handleSearch}
298+
placeholder="请输入选择"
299+
style={{ width: 200 }}
300+
onChange={(value) => {
301+
setValues(value)
302+
}}
303+
/>
261304
</Row>
262305
);
263306
};

‎packages/react-search-tree/README.md

+37-92
Original file line numberDiff line numberDiff line change
@@ -59,119 +59,62 @@ const data = [
5959
{ label: '澳门', key: 16 },
6060
];
6161

62-
const datas =[
63-
{ label: '上海市', key: 0 },
64-
{
65-
label: '北京市', key: 1,
66-
children:[
67-
{ label: '东城区', key: 10 },
68-
]
69-
},
70-
{ label: '成都市', key: 2 },
71-
]
72-
7362
const Demo = () => {
7463

7564
const [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])
76-
const [values,valuesSet]=useState([{ label: '北京市', key: 1 }])
7765
const [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])
7866

7967
const onChange=(selectd, selectedAll, isChecked)=>{
8068
console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
8169
valueSet(selectedAll)
8270
}
8371

84-
const onChanges=(selectd, selectedAll, isChecked)=>{
85-
console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)
86-
valuesSet(selectedAll)
87-
}
88-
8972
const onChangeSinge=(selectd, selectedAll, isChecked)=>{
9073
console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)
9174
valueSingeSet(selectedAll)
9275
}
9376

9477
return (
95-
<>
78+
<Row gutter={20}>
79+
<label>单选</label>
9680
<Row>
97-
<Col >
98-
<label>多选</label>
99-
<SearchTree
100-
style={{ width:300 }}
101-
allowClear={true}
102-
onSearch={(searchValue)=>console.log('multiple',searchValue)}
103-
onChange={onChange}
104-
value={value}
105-
options={data}
106-
placeholder="请输入选择"
107-
/>
108-
</Col>
81+
<SearchTree
82+
style={{width: 200}}
83+
multiple={false}
84+
allowClear={true}
85+
onSearch={(searchValue)=>console.log('singe',searchValue)}
86+
onChange={onChangeSinge}
87+
value={valueSinge}
88+
options={data}
89+
placeholder="请输入选择"
90+
/>
10991
</Row>
110-
<label>单选</label>
92+
<label>多选</label>
11193
<Row>
112-
<SearchTree
113-
style={{width:300}}
114-
loading={true}
115-
multiple={false}
116-
allowClear={true}
117-
onSearch={(searchValue)=>console.log('singe',searchValue)}
118-
onChange={onChanges}
119-
value={values}
120-
options={datas}
121-
placeholder="请输入选择"
122-
/>
123-
<Col style={{marginLeft:20}}>
124-
<SearchTree
125-
style={{width:300}}
126-
multiple={false}
127-
allowClear={true}
128-
onSearch={(searchValue)=>console.log('singe',searchValue)}
129-
onChange={onChangeSinge}
130-
value={valueSinge}
131-
options={data}
132-
placeholder="请输入选择"
133-
/>
134-
</Col>
94+
<SearchTree
95+
style={{ width: 200 }}
96+
allowClear={true}
97+
onSearch={(searchValue)=>console.log('multiple',searchValue)}
98+
onChange={onChange}
99+
value={value}
100+
options={data}
101+
placeholder="请输入选择"
102+
/>
135103
</Row>
136-
</>
137-
)
138-
}
139-
ReactDOM.render(<Demo />, _mount_);
140-
```
141-
142-
### 禁用
143-
144-
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
145-
```jsx
146-
import React, { useState, useEffect, useRef } from 'react';
147-
import ReactDOM from 'react-dom';
148-
import { SearchTree } from 'uiw';
149-
150-
const data = [
151-
{ label: '上海市', key: 0 },
152-
{
153-
label: '北京市', key: 1,
154-
children:[
155-
{ label: '东城区', key: 10 },
156-
]
157-
},
158-
{ label: '成都市', key: 2 },
159-
]
160-
161-
const Demo = () => {
162-
163-
return(
164-
<SearchTree
165-
disabled={true}
166-
style={{ width:300 }}
167-
allowClear={true}
168-
value={[{ label: '东城区', key: 10 },{ label: '成都市', key: 2 }]}
169-
options={data}
170-
placeholder="请输入选择"
171-
/>
104+
<label>禁用</label>
105+
<Row>
106+
<SearchTree
107+
disabled={true}
108+
style={{ width: 200 }}
109+
allowClear={true}
110+
value={[{ label: '东城区', key: 10 },{ label: '成都市', key: 2 }]}
111+
options={data}
112+
placeholder="请输入选择"
113+
/>
114+
</Row>
115+
</Row>
172116
)
173117
}
174-
175118
ReactDOM.render(<Demo />, _mount_);
176119
```
177120

@@ -294,6 +237,7 @@ const form=useRef()
294237
children: (
295238
<SearchTree
296239
allowClear={true}
240+
style={{ width: 200 }}
297241
onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
298242
onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
299243
options={data}
@@ -306,6 +250,7 @@ const form=useRef()
306250
children: (
307251
<SearchTree
308252
multiple={false}
253+
style={{ width: 200 }}
309254
allowClear={true}
310255
onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
311256
onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
@@ -366,4 +311,4 @@ ReactDOM.render(<Demo />, _mount_);
366311
| onSearch | 文本框值变化时回调 | function(searchValue) | - |
367312
| loading | 加载中状态 | Boolean | `false` |
368313
| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |
369-
314+
| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |

‎packages/react-search-tree/src/SearchTagInput.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useMemo, useState, useRef, useEffect, ReactElement } from 'react
22
import Dropdown, { DropdownProps } from '@uiw/react-dropdown';
33
import Icon from '@uiw/react-icon';
44
import Input from '@uiw/react-input';
5-
import Tag from '@uiw/react-tag';
5+
import Tag, { TagProps } from '@uiw/react-tag';
66
import Card from '@uiw/react-card';
77
import Empty from '@uiw/react-empty';
88
import { IProps } from '@uiw/utils';
@@ -29,6 +29,7 @@ export interface SearchTagInputProps<V> extends IProps, DropdownProps, DropConte
2929
placeholder?: string;
3030
emptyOption?: boolean | React.ReactNode;
3131
selectCloseDrop?: boolean;
32+
tagProps?: TagProps;
3233
}
3334

3435
function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputProps<V>) {
@@ -43,6 +44,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
4344
style,
4445
placeholder,
4546

47+
tagProps = {},
4648
content,
4749
options,
4850
values,
@@ -155,8 +157,9 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
155157
className={`${prefixCls}-tag`}
156158
key={index}
157159
closable
158-
disabled={disabled}
159160
color="#393E48"
161+
{...tagProps}
162+
disabled={disabled}
160163
onClose={(e) => {
161164
e.stopPropagation();
162165
removeSelectItem(index);

0 commit comments

Comments
 (0)
Please sign in to comment.