Skip to content

Commit 7d7c91b

Browse files
RylanBotRylanBot
committed
docs: update demo
1 parent 44572f6 commit 7d7c91b

File tree

3 files changed

+168
-68
lines changed

3 files changed

+168
-68
lines changed

‎packages/components/select/_example/remote-search.tsx‎

Lines changed: 59 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,73 @@
1-
import React, { useState } from 'react';
2-
import { Select } from 'tdesign-react';
1+
import React, { useEffect, useState } from 'react';
2+
import { Select, Space } from 'tdesign-react';
3+
4+
const OPTIONS = Array.from({ length: 20 }).map((_, i) => ({
5+
value: `t${i + 1}`,
6+
label: `Tencent_${i + 1}`,
7+
}));
38

49
const RemoteSearchSelect = () => {
5-
const [value, setValue] = useState('');
10+
const [singleLoading, setSingleLoading] = useState(false);
11+
const [singleOptions, setSingleOptions] = useState([]);
12+
const [singleValue, setSingleValue] = useState('');
613

7-
const [loading, setLoading] = useState(false);
8-
const [options, setOptions] = useState([]);
14+
const [multipleLoading, setMultipleLoading] = useState(false);
15+
const [multipleOptions, setMultipleOptions] = useState([]);
16+
const [multipleValue, setMultipleValue] = useState([]);
917

10-
const onChange = (value: string) => {
11-
setValue(value);
12-
};
18+
useEffect(() => {
19+
setSingleLoading(true);
20+
setMultipleLoading(true);
21+
22+
setTimeout(() => {
23+
setSingleOptions(OPTIONS);
24+
setSingleLoading(false);
25+
setSingleValue(OPTIONS[0].value);
26+
setMultipleOptions(OPTIONS);
27+
setMultipleLoading(false);
28+
setMultipleValue([OPTIONS[0].value, OPTIONS[1].value]);
29+
}, 500);
30+
}, []);
1331

14-
const handleRemoteSearch = (search: string) => {
15-
setLoading(true);
32+
const handleSingle = (search: string) => {
33+
setSingleLoading(true);
34+
setTimeout(() => {
35+
const filtered = OPTIONS.filter((item) => item.label.includes(search));
36+
setSingleOptions(filtered);
37+
setSingleLoading(false);
38+
}, 500);
39+
};
1640

41+
const handleMultiple = (search: string) => {
42+
setMultipleLoading(true);
1743
setTimeout(() => {
18-
setLoading(false);
19-
let options = [];
20-
if (search) {
21-
options = [
22-
{
23-
value: `腾讯_test1`,
24-
label: `腾讯_test1`,
25-
},
26-
{
27-
value: `腾讯_test2`,
28-
label: `腾讯_test2`,
29-
},
30-
{
31-
value: `腾讯_test3`,
32-
label: `腾讯_test3`,
33-
},
34-
].filter((item) => item.label.includes(search));
35-
}
36-
37-
setOptions(options);
44+
const filtered = OPTIONS.filter((item) => item.label.includes(search));
45+
setMultipleOptions(filtered);
46+
setMultipleLoading(false);
3847
}, 500);
3948
};
4049

4150
return (
42-
<Select
43-
filterable
44-
value={value}
45-
onChange={onChange}
46-
style={{ width: '40%' }}
47-
loading={loading}
48-
onSearch={handleRemoteSearch}
49-
options={options}
50-
/>
51+
<Space direction="vertical">
52+
<Select
53+
filterable
54+
options={singleOptions}
55+
value={singleValue}
56+
loading={singleLoading}
57+
onChange={setSingleValue}
58+
onSearch={handleSingle}
59+
/>
60+
<Select
61+
multiple
62+
filterable
63+
options={multipleOptions}
64+
value={multipleValue}
65+
loading={multipleLoading}
66+
onChange={setMultipleValue}
67+
onSearch={handleMultiple}
68+
style={{ width: '400px' }}
69+
/>
70+
</Space>
5171
);
5272
};
5373

‎test/snap/__snapshots__/csr.test.jsx.snap‎

Lines changed: 108 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -88567,44 +88567,124 @@ exports[`csr snapshot test > csr test packages/components/select/_example/prefix
8856788567
exports[`csr snapshot test > csr test packages/components/select/_example/remote-search.tsx 1`] = `
8856888568
<div>
8856988569
<div
88570-
class="t-select__wrap"
88571-
style="width: 40%;"
88570+
class="t-space t-space-vertical"
88571+
style="gap: 16px;"
8857288572
>
8857388573
<div
88574-
class="t-select t-select-input t-select-input--empty"
88574+
class="t-space-item"
8857588575
>
8857688576
<div
88577-
class="t-input__wrap"
88578-
spellcheck="false"
88577+
class="t-select__wrap"
8857988578
>
8858088579
<div
88581-
class="t-input t-align-left t-input--suffix"
88580+
class="t-select t-select-input t-select-input--empty"
8858288581
>
88583-
<input
88584-
class="t-input__inner"
88585-
placeholder="请选择"
88586-
type="text"
88582+
<div
88583+
class="t-input__wrap"
88584+
spellcheck="false"
88585+
>
88586+
<div
88587+
class="t-input t-align-left t-input--suffix"
88588+
>
88589+
<input
88590+
class="t-input__inner"
88591+
placeholder="请选择"
88592+
type="text"
88593+
value=""
88594+
/>
88595+
<span
88596+
class="t-input__suffix t-input__suffix-icon"
88597+
>
88598+
<div
88599+
class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"
88600+
>
88601+
<svg
88602+
class="t-loading__gradient t-icon-loading"
88603+
height="1em"
88604+
version="1.1"
88605+
viewBox="0 0 12 12"
88606+
width="1em"
88607+
xmlns="http://www.w3.org/2000/svg"
88608+
>
88609+
<foreignobject
88610+
height="12"
88611+
width="12"
88612+
x="0"
88613+
y="0"
88614+
>
88615+
<div
88616+
class="t-loading__gradient-conic"
88617+
/>
88618+
</foreignobject>
88619+
</svg>
88620+
</div>
88621+
</span>
88622+
</div>
88623+
</div>
88624+
</div>
88625+
</div>
88626+
</div>
88627+
<div
88628+
class="t-space-item"
88629+
>
88630+
<div
88631+
class="t-select__wrap"
88632+
style="width: 400px;"
88633+
>
88634+
<div
88635+
class="t-select t-select-input t-select-input--multiple t-select-input--empty"
88636+
>
88637+
<div
88638+
class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty"
88639+
spellcheck="false"
8858788640
value=""
88588-
/>
88589-
<span
88590-
class="t-input__suffix t-input__suffix-icon"
8859188641
>
88592-
<svg
88593-
class="t-fake-arrow t-select__right-icon"
88594-
fill="none"
88595-
height="16"
88596-
viewBox="0 0 16 16"
88597-
width="16"
88598-
xmlns="http://www.w3.org/2000/svg"
88642+
<div
88643+
class="t-input t-align-left t-input--prefix t-input--suffix"
8859988644
>
88600-
<path
88601-
d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
88602-
stroke="black"
88603-
stroke-opacity="0.9"
88604-
stroke-width="1.3"
88645+
<div
88646+
class="t-input__prefix"
8860588647
/>
88606-
</svg>
88607-
</span>
88648+
<input
88649+
class="t-input__inner"
88650+
placeholder="请选择"
88651+
type="text"
88652+
value=""
88653+
/>
88654+
<span
88655+
class="t-input__input-pre"
88656+
>
88657+
请选择
88658+
</span>
88659+
<span
88660+
class="t-input__suffix t-input__suffix-icon"
88661+
>
88662+
<div
88663+
class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"
88664+
>
88665+
<svg
88666+
class="t-loading__gradient t-icon-loading"
88667+
height="1em"
88668+
version="1.1"
88669+
viewBox="0 0 12 12"
88670+
width="1em"
88671+
xmlns="http://www.w3.org/2000/svg"
88672+
>
88673+
<foreignobject
88674+
height="12"
88675+
width="12"
88676+
x="0"
88677+
y="0"
88678+
>
88679+
<div
88680+
class="t-loading__gradient-conic"
88681+
/>
88682+
</foreignobject>
88683+
</svg>
88684+
</div>
88685+
</span>
88686+
</div>
88687+
</div>
8860888688
</div>
8860988689
</div>
8861088690
</div>
@@ -150176,7 +150256,7 @@ exports[`ssr snapshot test > ssr test packages/components/select/_example/popup-
150176150256

150177150257
exports[`ssr snapshot test > ssr test packages/components/select/_example/prefix.tsx 1`] = `"<div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><span class="t-input__prefix t-input__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse" style="fill:none;margin-right:8px"><g id="browse" clip-path="url(#clip0_543_7945)"><path id="fill1" fill="transparent" d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"></path><path id="fill2" fill="transparent" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"></path><path id="stroke1" stroke="currentColor" d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
150178150258

150179-
exports[`ssr snapshot test > ssr test packages/components/select/_example/remote-search.tsx 1`] = `"<div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
150259+
exports[`ssr snapshot test > ssr test packages/components/select/_example/remote-search.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-select__wrap" style="width:400px"><div class="t-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div>"`;
150180150260

150181150261
exports[`ssr snapshot test > ssr test packages/components/select/_example/scroll-bottom.tsx 1`] = `"<div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
150182150262

‎test/snap/__snapshots__/ssr.test.jsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -844,7 +844,7 @@ exports[`ssr snapshot test > ssr test packages/components/select/_example/popup-
844844

845845
exports[`ssr snapshot test > ssr test packages/components/select/_example/prefix.tsx 1`] = `"<div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><span class="t-input__prefix t-input__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse" style="fill:none;margin-right:8px"><g id="browse" clip-path="url(#clip0_543_7945)"><path id="fill1" fill="transparent" d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"></path><path id="fill2" fill="transparent" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"></path><path id="stroke1" stroke="currentColor" d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
846846

847-
exports[`ssr snapshot test > ssr test packages/components/select/_example/remote-search.tsx 1`] = `"<div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
847+
exports[`ssr snapshot test > ssr test packages/components/select/_example/remote-search.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-select__wrap" style="width:400px"><div class="t-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div>"`;
848848

849849
exports[`ssr snapshot test > ssr test packages/components/select/_example/scroll-bottom.tsx 1`] = `"<div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
850850

0 commit comments

Comments
 (0)