Skip to content

Commit c367ca1

Browse files
author
liyuan-meng
committed
🐛[Select][TreeSelect]修改搜索逻辑
1 parent ec6ffe6 commit c367ca1

10 files changed

Lines changed: 348 additions & 217 deletions

File tree

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

Lines changed: 89 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -69,84 +69,95 @@ export default function SelectDemo() {
6969
<Checkbox checked={disabled} onChange={checked => {
7070
setDisabled(checked)
7171
}}>禁用</Checkbox>
72-
<h5>搜索框在下拉框外（单选-新）</h5>
73-
<Select
74-
searchable
75-
allowClear
76-
disabled={disabled}
77-
supportLightText
78-
placeholder="带搜索的下拉单选"
79-
onSearch={handleSearch}
80-
onChange={handleChange}
81-
style={{width: 260}}
82-
dataSource={dataList}
83-
// size="large"
84-
/>
85-
<h5>搜索框在下拉框外（多选-新）</h5>
86-
<Select
87-
hasSelectAll
88-
searchable
89-
allowClear
90-
disabled={disabled}
91-
multiple
92-
supportLightText
93-
placeholder="带搜索的下拉多选"
94-
onSearch={handleSearch}
95-
onChange={handleChange}
96-
style={{width: 260}}
97-
labelKey="name"
98-
valueKey="userId"
99-
dataSource={dataList.map(item => ({
100-
name: item.label,
101-
userId: item.value
102-
}))}
103-
/>
104-
<h5>搜索框在下拉框外（多选限制标签数量-新）</h5>
105-
<Select
106-
hasSelectAll
107-
searchable
108-
allowClear
109-
disabled={disabled}
110-
multiple
111-
supportLightText
112-
placeholder="带搜索的下拉多选"
113-
onSearch={handleSearch}
114-
onChange={handleChange}
115-
style={{width: 260}}
116-
dataSource={dataList}
117-
maxTagCount={1}
118-
/>
119-
<h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>搜索框在下拉框内（单选-旧）</h5>
120-
<Select
121-
searchable
122-
searchInBox={false}
123-
allowClear
124-
disabled={disabled}
125-
supportLightText
126-
placeholder="带搜索的下拉单选"
127-
onSearch={handleSearch}
128-
onChange={handleChange}
129-
style={{width: 260}}
130-
dataSource={dataList}
131-
position="auto"
132-
// size="large"
133-
/>
134-
<h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>搜索框在下拉框内（多选-旧）</h5>
135-
<Select
136-
hasSelectAll
137-
multiple
138-
searchable
139-
searchInBox={false}
140-
allowClear
141-
disabled={disabled}
142-
supportLightText
143-
placeholder="带搜索的下拉单选"
144-
onSearch={handleSearch}
145-
onChange={handleChange}
146-
style={{width: 260}}
147-
dataSource={dataList}
148-
// size="large"
149-
/>
72+
<div>
73+
<h5>搜索框在下拉框外（单选-新）</h5>
74+
<Select
75+
searchable
76+
allowClear
77+
disabled={disabled}
78+
supportLightText
79+
placeholder="带搜索的下拉单选"
80+
onSearch={handleSearch}
81+
onChange={handleChange}
82+
style={{width: 260}}
83+
dataSource={dataList}
84+
// size="large"
85+
/>
86+
</div>
87+
<div>
88+
<h5>搜索框在下拉框外（多选-新）</h5>
89+
<Select
90+
hasSelectAll
91+
searchable
92+
allowClear
93+
disabled={disabled}
94+
multiple
95+
supportLightText
96+
placeholder="带搜索的下拉多选"
97+
onSearch={handleSearch}
98+
onChange={handleChange}
99+
style={{width: 260}}
100+
labelKey="name"
101+
valueKey="userId"
102+
dataSource={dataList.map(item => ({
103+
name: item.label,
104+
userId: item.value
105+
}))}
106+
/>
107+
</div>
108+
<div>
109+
<h5>搜索框在下拉框外（多选限制标签数量-新）</h5>
110+
<Select
111+
hasSelectAll
112+
searchable
113+
allowClear
114+
disabled={disabled}
115+
multiple
116+
supportLightText
117+
placeholder="带搜索的下拉多选"
118+
onSearch={handleSearch}
119+
onChange={handleChange}
120+
style={{width: 260}}
121+
dataSource={dataList}
122+
maxTagCount={1}
123+
/>
124+
</div>
125+
<div>
126+
<h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>搜索框在下拉框内（单选-旧）</h5>
127+
<Select
128+
searchable
129+
searchInBox={false}
130+
allowClear
131+
disabled={disabled}
132+
supportLightText
133+
placeholder="带搜索的下拉单选"
134+
onSearch={handleSearch}
135+
onChange={handleChange}
136+
style={{width: 260}}
137+
dataSource={dataList}
138+
position="auto"
139+
// size="large"
140+
/>
141+
</div>
142+
<div>
143+
<h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>搜索框在下拉框内（多选-旧）</h5>
144+
<Select
145+
hasSelectAll
146+
multiple
147+
searchable
148+
searchInBox={false}
149+
showTag={false}
150+
allowClear
151+
disabled={disabled}
152+
supportLightText
153+
placeholder="带搜索的下拉单选"
154+
onSearch={handleSearch}
155+
onChange={handleChange}
156+
style={{width: 260}}
157+
dataSource={dataList}
158+
// size="large"
159+
/>
160+
</div>
150161
</div>
151162
);
152163
}

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

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ export default function SelectDemo() {
3939
const [size, setSize ] = useState('default');
4040

4141
return (
42-
<div className="demo">
43-
<div style={{ marginBottom: 10 }}>
42+
<div>
43+
<div>
4444
<Button size="large" onClick={() => setSize('large')}>大尺寸</Button>
4545
{blank}
4646
<Button size="default" onClick={() => setSize('default')}>默认</Button>
@@ -59,7 +59,19 @@ export default function SelectDemo() {
5959
))}
6060
</Select>
6161
<Select
62-
defaultValue={'3'}
62+
allowClear
63+
searchable
64+
size={size}
65+
style={{ width: 150 }}
66+
multiple
67+
>
68+
{dataList.map((item, index) => (
69+
<Option value={item.value} disabled={item.disabled} key={index}>
70+
{item.label}
71+
</Option>
72+
))}
73+
</Select>
74+
<Select
6375
size={size}
6476
style={{ width: 120 }}
6577
multiple
@@ -70,6 +82,27 @@ export default function SelectDemo() {
7082
</Option>
7183
))}
7284
</Select>
85+
<Select
86+
searchable
87+
size={size}
88+
style={{ width: 120 }}
89+
>
90+
{dataList.map((item, index) => (
91+
<Option value={item.value} disabled={item.disabled} key={index}>
92+
{item.label}
93+
</Option>
94+
))}
95+
</Select>
96+
<Select
97+
size={size}
98+
style={{ width: 120 }}
99+
>
100+
{dataList.map((item, index) => (
101+
<Option value={item.value} disabled={item.disabled} key={index}>
102+
{item.label}
103+
</Option>
104+
))}
105+
</Select>
73106
<Select dataSource={[]} size={size} style={{ width: 220 }} />
74107
</div>
75108
);

0 commit comments

Comments
 (0)