Skip to content

Commit ad40198

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

File tree

3 files changed

+165
-68
lines changed

3 files changed

+165
-68
lines changed

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

Lines changed: 57 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,71 @@
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 [singleValue, setSingleValue] = useState('t1');
11+
const [singleLoading, setSingleLoading] = useState(false);
12+
const [singleOptions, setSingleOptions] = useState([]);
613

7-
const [loading, setLoading] = useState(false);
8-
const [options, setOptions] = useState([]);
14+
const [multipleValue, setMultipleValue] = useState(['t1', 't8']);
15+
const [multipleLoading, setMultipleLoading] = useState(false);
16+
const [multipleOptions, setMultipleOptions] = 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+
setMultipleOptions(OPTIONS);
26+
setMultipleLoading(false);
27+
}, 500);
28+
}, []);
1329

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

39+
const handleMultiple = (search: string) => {
40+
setMultipleLoading(true);
1741
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);
42+
const filtered = OPTIONS.filter((item) => item.label.includes(search));
43+
setMultipleOptions(filtered);
44+
setMultipleLoading(false);
3845
}, 500);
3946
};
4047

4148
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-
/>
49+
<Space direction="vertical">
50+
<Select
51+
filterable
52+
options={singleOptions}
53+
value={singleValue}
54+
loading={singleLoading}
55+
onChange={setSingleValue}
56+
onSearch={handleSingle}
57+
/>
58+
<Select
59+
multiple
60+
filterable
61+
options={multipleOptions}
62+
value={multipleValue}
63+
loading={multipleLoading}
64+
onChange={setMultipleValue}
65+
onSearch={handleMultiple}
66+
style={{ width: '400px' }}
67+
/>
68+
</Space>
5169
);
5270
};
5371

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

Lines changed: 107 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -88567,44 +88567,123 @@ 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"
8858288581
>
88583-
<input
88584-
class="t-input__inner"
88585-
placeholder="请选择"
88586-
type="text"
88582+
<div
88583+
class="t-input__wrap"
88584+
spellcheck="false"
88585+
value="t1"
88586+
>
88587+
<div
88588+
class="t-input t-align-left t-input--suffix"
88589+
>
88590+
<input
88591+
class="t-input__inner"
88592+
placeholder="请选择"
88593+
type="text"
88594+
value="t1"
88595+
/>
88596+
<span
88597+
class="t-input__suffix t-input__suffix-icon"
88598+
>
88599+
<div
88600+
class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"
88601+
>
88602+
<svg
88603+
class="t-loading__gradient t-icon-loading"
88604+
height="1em"
88605+
version="1.1"
88606+
viewBox="0 0 12 12"
88607+
width="1em"
88608+
xmlns="http://www.w3.org/2000/svg"
88609+
>
88610+
<foreignobject
88611+
height="12"
88612+
width="12"
88613+
x="0"
88614+
y="0"
88615+
>
88616+
<div
88617+
class="t-loading__gradient-conic"
88618+
/>
88619+
</foreignobject>
88620+
</svg>
88621+
</div>
88622+
</span>
88623+
</div>
88624+
</div>
88625+
</div>
88626+
</div>
88627+
</div>
88628+
<div
88629+
class="t-space-item"
88630+
>
88631+
<div
88632+
class="t-select__wrap"
88633+
style="width: 400px;"
88634+
>
88635+
<div
88636+
class="t-select t-select-input t-select-input--multiple"
88637+
>
88638+
<div
88639+
class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag"
88640+
spellcheck="false"
8858788641
value=""
88588-
/>
88589-
<span
88590-
class="t-input__suffix t-input__suffix-icon"
8859188642
>
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"
88643+
<div
88644+
class="t-input t-align-left t-input--prefix t-input--suffix"
8859988645
>
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"
88646+
<div
88647+
class="t-input__prefix"
8860588648
/>
88606-
</svg>
88607-
</span>
88649+
<input
88650+
class="t-input__inner"
88651+
placeholder=""
88652+
type="text"
88653+
value=""
88654+
/>
88655+
<span
88656+
class="t-input__input-pre"
88657+
/>
88658+
<span
88659+
class="t-input__suffix t-input__suffix-icon"
88660+
>
88661+
<div
88662+
class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"
88663+
>
88664+
<svg
88665+
class="t-loading__gradient t-icon-loading"
88666+
height="1em"
88667+
version="1.1"
88668+
viewBox="0 0 12 12"
88669+
width="1em"
88670+
xmlns="http://www.w3.org/2000/svg"
88671+
>
88672+
<foreignobject
88673+
height="12"
88674+
width="12"
88675+
x="0"
88676+
y="0"
88677+
>
88678+
<div
88679+
class="t-loading__gradient-conic"
88680+
/>
88681+
</foreignobject>
88682+
</svg>
88683+
</div>
88684+
</span>
88685+
</div>
88686+
</div>
8860888687
</div>
8860988688
</div>
8861088689
</div>
@@ -150176,7 +150255,7 @@ exports[`ssr snapshot test > ssr test packages/components/select/_example/popup-
150176150255

150177150256
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>"`;
150178150257

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>"`;
150258+
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>"`;
150180150259

150181150260
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>"`;
150182150261

‎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)