Skip to content

Commit f182fb1

Browse files
zombieJzombieJ
committed
chore: support prefix
1 parent 9b000f1 commit f182fb1

File tree

4 files changed

+340
-3
lines changed

4 files changed

+340
-3
lines changed

‎docs/demo/prefix-suffix.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: prefix-suffix
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
# Prefix & Suffix Demo
9+
10+
This demo shows how to use `prefix` and `suffix` props with the Overflow component.
11+
12+
<code src="../../examples/prefix-demo.tsx"></code>

‎examples/basic.tsx‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ function renderRest(items: ItemType[]) {
4848
const Demo = () => {
4949
const [responsive, setResponsive] = React.useState(true);
5050
const [data, setData] = React.useState(createData(1));
51+
const [showPrefix, setShowPrefix] = React.useState(true);
52+
const [showSuffix, setShowSuffix] = React.useState(true);
5153

5254
return (
5355
<div style={{ padding: 32 }}>
@@ -59,6 +61,26 @@ const Demo = () => {
5961
>
6062
{responsive ? 'Responsive' : 'MaxCount: 6'}
6163
</button>
64+
65+
<button
66+
type="button"
67+
onClick={() => {
68+
setShowPrefix(!showPrefix);
69+
}}
70+
style={{ marginLeft: 8 }}
71+
>
72+
{showPrefix ? 'Hide Prefix' : 'Show Prefix'}
73+
</button>
74+
75+
<button
76+
type="button"
77+
onClick={() => {
78+
setShowSuffix(!showSuffix);
79+
}}
80+
style={{ marginLeft: 8 }}
81+
>
82+
{showSuffix ? 'Hide Suffix' : 'Show Suffix'}
83+
</button>
6284
<select
6385
style={{ width: 200, height: 32 }}
6486
value={data.length}
@@ -98,7 +120,30 @@ const Demo = () => {
98120
renderItem={renderItem}
99121
renderRest={renderRest}
100122
maxCount={responsive ? 'responsive' : 6}
101-
// suffix={<span>1</span>}
123+
prefix={showPrefix ? (
124+
<div
125+
style={{
126+
margin: '0 8px 0 0',
127+
padding: '4px 8px',
128+
background: 'rgba(0, 255, 0, 0.3)',
129+
border: '1px solid green',
130+
}}
131+
>
132+
前缀:
133+
</div>
134+
) : undefined}
135+
suffix={showSuffix ? (
136+
<div
137+
style={{
138+
margin: '0 0 0 8px',
139+
padding: '4px 8px',
140+
background: 'rgba(0, 0, 255, 0.3)',
141+
border: '1px solid blue',
142+
}}
143+
>
144+
后缀
145+
</div>
146+
) : undefined}
102147
/>
103148
</div>
104149
</div>

‎examples/prefix-demo.tsx‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
import React from 'react';
2+
import Overflow from '../src';
3+
import '../assets/index.less';
4+
import './common.less';
5+
6+
interface ItemType {
7+
value: string | number;
8+
label: string;
9+
}
10+
11+
function createData(count: number): ItemType[] {
12+
const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
13+
value: index,
14+
label: `Item ${index + 1}`,
15+
}));
16+
17+
return data;
18+
}
19+
20+
function renderItem(item: ItemType) {
21+
return (
22+
<div
23+
style={{
24+
margin: '0 4px',
25+
padding: '6px 12px',
26+
background: '#f0f0f0',
27+
border: '1px solid #d9d9d9',
28+
borderRadius: '4px',
29+
}}
30+
>
31+
{item.label}
32+
</div>
33+
);
34+
}
35+
36+
function renderRest(items: ItemType[]) {
37+
return (
38+
<div
39+
style={{
40+
margin: '0 4px',
41+
padding: '6px 12px',
42+
background: '#fff2e8',
43+
border: '1px solid #ffbb96',
44+
borderRadius: '4px',
45+
color: '#d46b08',
46+
}}
47+
>
48+
+{items.length} more
49+
</div>
50+
);
51+
}
52+
53+
const PrefixDemo = () => {
54+
const [itemCount, setItemCount] = React.useState(8);
55+
const [prefixType, setPrefixType] = React.useState<'none' | 'text' | 'icon' | 'complex'>('text');
56+
const [suffixType, setSuffixType] = React.useState<'none' | 'text' | 'button'>('none');
57+
58+
const data = React.useMemo(() => createData(itemCount), [itemCount]);
59+
60+
const renderPrefix = () => {
61+
switch (prefixType) {
62+
case 'text':
63+
return (
64+
<div
65+
style={{
66+
padding: '6px 12px',
67+
background: '#e6f7ff',
68+
border: '1px solid #91d5ff',
69+
borderRadius: '4px',
70+
color: '#1890ff',
71+
fontWeight: 'bold',
72+
}}
73+
>
74+
标签:
75+
</div>
76+
);
77+
case 'icon':
78+
return (
79+
<div
80+
style={{
81+
padding: '6px 8px',
82+
background: '#f6ffed',
83+
border: '1px solid #b7eb8f',
84+
borderRadius: '4px',
85+
color: '#52c41a',
86+
}}
87+
>
88+
🏷️
89+
</div>
90+
);
91+
case 'complex':
92+
return (
93+
<div
94+
style={{
95+
padding: '4px 8px',
96+
background: 'linear-gradient(45deg, #f0f0f0, #e6f7ff)',
97+
border: '1px solid #91d5ff',
98+
borderRadius: '4px',
99+
display: 'flex',
100+
alignItems: 'center',
101+
gap: '4px',
102+
}}
103+
>
104+
<span style={{ fontSize: '12px' }}>📋</span>
105+
<span style={{ fontSize: '12px', color: '#1890ff' }}>分类:</span>
106+
</div>
107+
);
108+
default:
109+
return undefined;
110+
}
111+
};
112+
113+
const renderSuffix = () => {
114+
switch (suffixType) {
115+
case 'text':
116+
return (
117+
<div
118+
style={{
119+
padding: '6px 12px',
120+
background: '#fff1f0',
121+
border: '1px solid #ffccc7',
122+
borderRadius: '4px',
123+
color: '#f5222d',
124+
fontSize: '12px',
125+
}}
126+
>
127+
(总计)
128+
</div>
129+
);
130+
case 'button':
131+
return (
132+
<button
133+
style={{
134+
padding: '4px 8px',
135+
background: '#f0f0f0',
136+
border: '1px solid #d9d9d9',
137+
borderRadius: '4px',
138+
cursor: 'pointer',
139+
fontSize: '12px',
140+
}}
141+
onClick={() => alert('查看更多')}
142+
>
143+
更多 →
144+
</button>
145+
);
146+
default:
147+
return undefined;
148+
}
149+
};
150+
151+
return (
152+
<div style={{ padding: 32 }}>
153+
<h2>Prefix Demo</h2>
154+
155+
<div style={{ marginBottom: 16 }}>
156+
<label style={{ marginRight: 8 }}>Items Count:</label>
157+
<select
158+
value={itemCount}
159+
onChange={(e) => setItemCount(Number(e.target.value))}
160+
style={{ marginRight: 16, padding: '2px 4px' }}
161+
>
162+
<option value={3}>3</option>
163+
<option value={5}>5</option>
164+
<option value={8}>8</option>
165+
<option value={12}>12</option>
166+
<option value={20}>20</option>
167+
</select>
168+
169+
<label style={{ marginRight: 8 }}>Prefix:</label>
170+
<select
171+
value={prefixType}
172+
onChange={(e) => setPrefixType(e.target.value as any)}
173+
style={{ marginRight: 16, padding: '2px 4px' }}
174+
>
175+
<option value="none">None</option>
176+
<option value="text">Text</option>
177+
<option value="icon">Icon</option>
178+
<option value="complex">Complex</option>
179+
</select>
180+
181+
<label style={{ marginRight: 8 }}>Suffix:</label>
182+
<select
183+
value={suffixType}
184+
onChange={(e) => setSuffixType(e.target.value as any)}
185+
style={{ padding: '2px 4px' }}
186+
>
187+
<option value="none">None</option>
188+
<option value="text">Text</option>
189+
<option value="button">Button</option>
190+
</select>
191+
</div>
192+
193+
<div
194+
style={{
195+
border: '2px solid #1890ff',
196+
padding: 16,
197+
borderRadius: 8,
198+
background: '#fafafa',
199+
}}
200+
>
201+
<h3 style={{ margin: '0 0 16px 0', color: '#1890ff' }}>Responsive Mode:</h3>
202+
<div
203+
style={{
204+
border: '1px dashed #d9d9d9',
205+
padding: 12,
206+
maxWidth: 500,
207+
background: 'white',
208+
borderRadius: 4,
209+
}}
210+
>
211+
<Overflow<ItemType>
212+
data={data}
213+
renderItem={renderItem}
214+
renderRest={renderRest}
215+
maxCount="responsive"
216+
prefix={renderPrefix()}
217+
suffix={renderSuffix()}
218+
/>
219+
</div>
220+
</div>
221+
222+
<div
223+
style={{
224+
border: '2px solid #52c41a',
225+
padding: 16,
226+
borderRadius: 8,
227+
background: '#fafafa',
228+
marginTop: 24,
229+
}}
230+
>
231+
<h3 style={{ margin: '0 0 16px 0', color: '#52c41a' }}>Fixed MaxCount (5):</h3>
232+
<div
233+
style={{
234+
border: '1px dashed #d9d9d9',
235+
padding: 12,
236+
background: 'white',
237+
borderRadius: 4,
238+
}}
239+
>
240+
<Overflow<ItemType>
241+
data={data}
242+
renderItem={renderItem}
243+
renderRest={renderRest}
244+
maxCount={5}
245+
prefix={renderPrefix()}
246+
suffix={renderSuffix()}
247+
/>
248+
</div>
249+
</div>
250+
</div>
251+
);
252+
};
253+
254+
export default PrefixDemo;

0 commit comments

Comments
 (0)