Skip to content

Commit 69b31af

Browse files
author
liyuan-meng
committed
[Select]废弃 searchInbox 属性，多选组件支持配置已选数据超长展示省略号
1 parent 534608e commit 69b31af

28 files changed

Lines changed: 515 additions & 427 deletions

‎src/components/c-dropdown/index.less‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@
3737
z-index: 100;
3838

3939
&-menu-area {
40-
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1),
41-
0px 2px 8px 0px rgba(0, 0, 0, 0.04);
4240
border-radius: 6px;
4341
background: #fff;
4442
width: fit-content;

‎src/components/select/demos/basic.md‎

Lines changed: 21 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -34,88 +34,34 @@ const dataList = [
3434
];
3535

3636
export default function SelectDemo() {
37-
const [multiDataList, setDataList] = useState(dataList);
3837
const handleChange = (value, prevValue) => {
3938
console.log('select --- ' + value);
4039
console.log('prevSelect --- ' + prevValue);
4140
};
4241

4342
return (
4443
<div className="demo">
45-
<Select
46-
defaultValue={'3'}
47-
onChange={handleChange}
48-
style={{ width: 120 }}
49-
>
50-
{dataList.map((item, index) => (
51-
<Option value={item.value} disabled={item.disabled} key={index}>
52-
{item.label}
53-
</Option>
54-
))}
55-
</Select>
56-
<Select
57-
defaultValue={'3'}
58-
disabled
59-
onChange={handleChange}
60-
style={{ width: 120 }}
61-
>
62-
{dataList.map((item, index) => (
63-
<Option value={item.value} disabled={item.disabled} key={index}>
64-
{item.label}
65-
</Option>
66-
))}
67-
</Select>
68-
<br/>
69-
<Select
70-
placeholder="多选有tag"
71-
onChange={values => {
72-
if (values.length > 1) {
73-
setDataList(multiDataList.map((item, index) => ({
74-
...item,
75-
disabled: !values.includes(item.value)
76-
})))
77-
} else {
78-
setDataList(multiDataList.map((item, index) => ({
79-
...item,
80-
disabled: false
81-
})))
82-
}
83-
}}
84-
style={{ width: 220 }}
85-
multiple
86-
>
87-
{multiDataList.map((item, index) => (
88-
<Option value={item.value} disabled={item.disabled} key={`${index}-${item.disabled}`}>
89-
{item.label}
90-
</Option>
91-
))}
92-
</Select>
93-
<Select
94-
placeholder="多选无tag"
95-
style={{ width: 220 }}
96-
multiple
97-
showTag={false}
98-
>
99-
{multiDataList.map((item, index) => (
100-
<Option value={item.value} key={`${index}-${item.disabled}`}>
101-
{item.label}
102-
</Option>
103-
))}
104-
</Select>
105-
<br/>
106-
<Select
107-
defaultValue={'3'}
108-
onChange={handleChange}
109-
style={{ width: 120 }}
110-
allowClear
111-
>
112-
{dataList.map((item, index) => (
113-
<Option value={item.value} disabled={item.disabled} key={index}>
114-
{item.label}
115-
</Option>
116-
))}
117-
</Select>
118-
<Select dataSource={[]} style={{ width: 220 }}></Select>
44+
<div style={{ display: 'flex', gap: 30 }}>
45+
<div>
46+
<h5>单选</h5>
47+
<Select
48+
style={{ width: 328 }}
49+
allowClear
50+
onChange={handleChange}
51+
dataSource={dataList}
52+
/>
53+
</div>
54+
<div>
55+
<h5>多选</h5>
56+
<Select
57+
style={{ width: 328 }}
58+
multiple
59+
allowClear
60+
onChange={handleChange}
61+
dataSource={dataList}
62+
/>
63+
</div>
64+
</div>
11965
</div>
12066
);
12167
}

‎src/components/select/demos/borderRadius.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
order: 2
3+
title: 基本使用
4+
desc: 基本使用
5+
---
6+
7+
```jsx
8+
/**
9+
* title: 自定义圆角
10+
* desc: 自定义圆角
11+
*/
12+
import React, { useState } from 'react';
13+
import { Select } from 'cloud-react';
14+
15+
const Option = Select.Option;
16+
17+
const dataList = [
18+
{
19+
label: 'JQuery',
20+
value: '1',
21+
},
22+
{
23+
label: 'Vue',
24+
value: '2',
25+
},
26+
{
27+
label: 'React',
28+
value: '3',
29+
},
30+
{
31+
label: 'Angular',
32+
value: '4',
33+
},
34+
];
35+
36+
export default function SelectDemo() {
37+
const handleChange = (value, prevValue) => {
38+
console.log('select --- ' + value);
39+
console.log('prevSelect --- ' + prevValue);
40+
};
41+
42+
return (
43+
<div className="demo">
44+
<Select
45+
onChange={handleChange}
46+
style={{ width: 328 }}
47+
dataSource={dataList}
48+
borderRadiusSize="default"
49+
/>
50+
<Select
51+
onChange={handleChange}
52+
style={{ width: 328 }}
53+
dataSource={dataList}
54+
borderRadiusSize="medium"
55+
/>
56+
<Select
57+
onChange={handleChange}
58+
style={{ width: 328 }}
59+
dataSource={dataList}
60+
borderRadiusSize="large"
61+
/>
62+
</div>
63+
);
64+
}
65+
```

‎src/components/select/demos/customItem.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function SelectDemo() {
4646

4747

4848
return (
49-
<Select style={{width: 200 }} defaultValue={1}>
49+
<Select style={{ width: 328 }} defaultValue={1}>
5050
{dataList.map((item, index) => (
5151
<Option value={item.value} disabled={item.disabled} key={index}>
5252
<div style={{display: 'flex', alignItem: 'center', lineHeight: '24px'}}>

‎src/components/select/demos/desc.md‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function SelectDemo() {
8686
searchable
8787
defaultValue={'3'}
8888
onChange={handleChange}
89-
style={{ width: 300 }}
89+
style={{ width: 328 }}
9090
dataSource={dataList}
9191
/>
9292
<Select
@@ -95,36 +95,32 @@ export default function SelectDemo() {
9595
multiple
9696
defaultValue={['3', '4']}
9797
onChange={handleChange}
98-
style={{ width: 300 }}
98+
style={{ width: 328 }}
9999
dataSource={dataList}
100100
/>
101101
<Select
102102
onChange={handleChange}
103-
style={{ width: 300 }}
103+
style={{ width: 328 }}
104104
showDesc
105105
searchable
106106
dataSource={groupList}
107107
/>
108-
<Select
109-
showDesc
110-
searchable
111-
searchInBox={false}
112-
defaultValue={'3'}
113-
onChange={handleChange}
114-
style={{ width: 300 }}
115-
dataSource={dataList}
116-
/>
117-
<Select
118-
showDesc
119-
searchable
120-
multiple
121-
searchInBox={false}
122-
showTag={false}
123-
defaultValue={['3', '4']}
124-
onChange={handleChange}
125-
style={{ width: 300 }}
126-
dataSource={dataList}
127-
/>
108+
{/*<Select*/}
109+
{/* showDesc*/}
110+
{/* searchable*/}
111+
{/* multiple*/}
112+
{/* showTag={false}*/}
113+
{/* defaultValue={['3', '4']}*/}
114+
{/* onChange={handleChange}*/}
115+
{/* style={{ width: 328 }}*/}
116+
{/*>*/}
117+
{/* {dataList.map((item, index) => (*/}
118+
{/* <Option value={item.value} disabled={item.disabled} key={index}>*/}
119+
{/* <span>{item.label}</span>*/}
120+
{/* <p>232323</p>*/}
121+
{/* </Option>*/}
122+
{/* ))}*/}
123+
{/*</Select>*/}
128124
</div>
129125
);
130126
}

‎src/components/select/demos/disabled.md‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎src/components/select/demos/ellipsis.md‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const dataList = [
2828
value: '4',
2929
},
3030
{
31-
label: '超长超长超长超长超长超长',
31+
label: '超长超长超长超长超长超长超长124414123超长超长',
3232
value: '5',
3333
},
3434
];
@@ -41,36 +41,57 @@ export default function SelectDemo() {
4141

4242
return (
4343
<div className="demo">
44-
<div style={{ marginBottom: 15 }}>超长展示...，鼠标放上去，通过 title 标签的形式展示全部</div>
44+
<h5>超长展示...，鼠标放上去，通过 title 标签的形式展示全部</h5>
4545
<Select
4646
isSupportTitle
47-
defaultValue={'3'}
47+
defaultValue={'5'}
4848
onChange={handleChange}
49-
style={{ width: 120 }}
49+
style={{ width: 328 }}
5050
dataSource={dataList}
5151
/>
5252
<Select
5353
multiple
54+
defaultValue={'5'}
5455
isSupportTitle
5556
onChange={handleChange}
56-
style={{ width: 120 }}
57+
style={{ width: 328 }}
5758
dataSource={dataList}
5859
/>
59-
<div style={{ marginBottom: 15, marginTop: 15 }}>下拉面板自适应宽度</div>
60+
<h5>下拉面板自适应宽度</h5>
6061
<Select
61-
defaultValue={'3'}
62+
defaultValue={'5'}
6263
onChange={handleChange}
63-
style={{ width: 120 }}
64+
style={{ width: 328 }}
6465
dataSource={dataList}
6566
dropdownStyle={{ width: 'fit-content' }}
6667
/>
6768
<Select
6869
multiple
70+
defaultValue={'5'}
6971
onChange={handleChange}
70-
style={{ width: 120 }}
72+
style={{ width: 328 }}
7173
dataSource={dataList}
7274
dropdownStyle={{ width: 'fit-content' }}
7375
/>
76+
<h5>超长可滚动</h5>
77+
<Select
78+
defaultValue={'5'}
79+
onChange={handleChange}
80+
style={{ width: 328 }}
81+
dataSource={dataList}
82+
scrollItem
83+
scrollSelected
84+
/>
85+
<Select
86+
multiple
87+
defaultValue={'5'}
88+
onChange={handleChange}
89+
style={{ width: 328 }}
90+
dataSource={dataList}
91+
showTag={false}
92+
scrollItem
93+
scrollSelected
94+
/>
7495
</div>
7596
);
7697
}

‎src/components/select/demos/group.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function SelectDemo() {
5959
<Select
6060
value={value}
6161
onChange={handleChange}
62-
style={{ width: 120 }}
62+
style={{ width: 328 }}
6363
dataSource={dataList}
6464
/>
6565
</div>

0 commit comments

Comments
 (0)