Skip to content

Commit 1f3d2e7

Browse files
TechQueryTechQuery
committed
[optimize] reduce Code size by Array map()
1 parent a247887 commit 1f3d2e7

File tree

12 files changed

+481
-735
lines changed

12 files changed

+481
-735
lines changed

‎document/source/components/Badge.mdx‎

Lines changed: 78 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,29 @@ import { Example } from '../../../source/component/Example';
1515
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
1616

1717
<Example>
18-
<h1>
19-
Example heading <Badge kind="secondary">New</Badge>
20-
</h1>
21-
<h2>
22-
Example heading <Badge kind="secondary">New</Badge>
23-
</h2>
24-
<h3>
25-
Example heading <Badge kind="secondary">New</Badge>
26-
</h3>
27-
<h4>
28-
Example heading <Badge kind="secondary">New</Badge>
29-
</h4>
30-
<h5>
31-
Example heading <Badge kind="secondary">New</Badge>
32-
</h5>
33-
<h6>
34-
Example heading <Badge kind="secondary">New</Badge>
35-
</h6>
18+
{[1, 2, 3, 4, 5, 6].map(level => {
19+
const Tag = 'h' + level;
20+
return (
21+
<Tag>
22+
Example heading <Badge kind="secondary">New</Badge>
23+
</Tag>
24+
);
25+
})}
3626
</Example>
3727

3828
```TSX
39-
import { render, createCell, Fragment } from 'web-cell';
29+
import { render, createCell } from 'web-cell';
4030
import { Badge } from 'boot-cell/source/Reminder/Badge';
4131

42-
render(
43-
<Fragment>
44-
<h1>
45-
Example heading <Badge kind="secondary">New</Badge>
46-
</h1>
47-
<h2>
48-
Example heading <Badge kind="secondary">New</Badge>
49-
</h2>
50-
<h3>
51-
Example heading <Badge kind="secondary">New</Badge>
52-
</h3>
53-
<h4>
54-
Example heading <Badge kind="secondary">New</Badge>
55-
</h4>
56-
<h5>
57-
Example heading <Badge kind="secondary">New</Badge>
58-
</h5>
59-
<h6>
32+
render([1, 2, 3, 4, 5, 6].map(level => {
33+
const Tag = 'h' + level;
34+
35+
return (
36+
<Tag>
6037
Example heading <Badge kind="secondary">New</Badge>
61-
</h6>
62-
</Fragment>
63-
);
38+
</Tag>
39+
);
40+
}));
6441
```
6542

6643
Badges can be used as part of links or buttons to provide a counter.
@@ -95,7 +72,7 @@ the “4” is the number of notifications), consider including additional conte
9572
<Example>
9673
<Button>
9774
Profile <Badge kind="light">9</badge>
98-
<span class="sr-only">unread messages</span>
75+
<span className="sr-only">unread messages</span>
9976
</Button>
10077
</Example>
10178

@@ -107,7 +84,7 @@ import { Button } from 'boot-cell/source/Form/Button';
10784
render(
10885
<Button>
10986
Profile <Badge kind="light">9</badge>
110-
<span class="sr-only">unread messages</span>
87+
<span className="sr-only">unread messages</span>
11188
</Button>
11289
);
11390
```
@@ -128,7 +105,7 @@ Add any of the below mentioned `kind` property values to change the appearance o
128105
</Example>
129106

130107
```TSX
131-
import { render, createCell, Fragment } from 'web-cell';
108+
import { render, createCell } from 'web-cell';
132109
import { Badge } from 'boot-cell/source/Reminder/Badge';
133110

134111
render(
@@ -157,119 +134,79 @@ Use the `pill` property to make badges more rounded (with a larger border-radius
157134
Useful if you miss the badges from v3.
158135

159136
<Example>
160-
<Badge pill>Primary</Badge>
161-
<Badge pill kind="secondary">
162-
Secondary
163-
</Badge>
164-
<Badge pill kind="success">
165-
Success
166-
</Badge>
167-
<Badge pill kind="danger">
168-
Danger
169-
</Badge>
170-
<Badge pill kind="warning">
171-
Warning
172-
</Badge>
173-
<Badge pill kind="info">
174-
Info
175-
</Badge>
176-
<Badge pill kind="light">
177-
Light
178-
</Badge>
179-
<Badge pill kind="dark">
180-
Dark
181-
</Badge>
137+
{[
138+
'primary',
139+
'secondary',
140+
'success',
141+
'danger',
142+
'warning',
143+
'info',
144+
'light',
145+
'dark'
146+
].map(kind => (
147+
<Badge pill kind={kind} className="text-capitalize">
148+
{kind}
149+
</Badge>
150+
))}
182151
</Example>
183152

184153
```TSX
185-
import { render, createCell, Fragment } from 'web-cell';
154+
import { render, createCell } from 'web-cell';
186155
import { Badge } from 'boot-cell/source/Reminder/Badge';
187156

188-
render(
189-
<Fragment>
190-
<Badge pill>Primary</Badge>
191-
<Badge pill kind="secondary">
192-
Secondary
193-
</Badge>
194-
<Badge pill kind="success">
195-
Success
196-
</Badge>
197-
<Badge pill kind="danger">
198-
Danger
199-
</Badge>
200-
<Badge pill kind="warning">
201-
Warning
202-
</Badge>
203-
<Badge pill kind="info">
204-
Info
205-
</Badge>
206-
<Badge pill kind="light">
207-
Light
208-
</Badge>
209-
<Badge pill kind="dark">
210-
Dark
211-
</Badge>
212-
</Fragment>
213-
);
157+
render([
158+
'primary',
159+
'secondary',
160+
'success',
161+
'danger',
162+
'warning',
163+
'info',
164+
'light',
165+
'dark'
166+
].map(kind => (
167+
<Badge pill kind={kind} className="text-capitalize">
168+
{kind}
169+
</Badge>
170+
)));
214171
```
215172

216173
## Links
217174

218175
Using `href` property on `<Badge />` quickly provide actionable badges with hover and focus states.
219176

220177
<Example>
221-
<Badge href=".">Primary</Badge>
222-
<Badge href="." kind="secondary">
223-
Secondary
224-
</Badge>
225-
<Badge href="." kind="success">
226-
Success
227-
</Badge>
228-
<Badge href="." kind="danger">
229-
Danger
230-
</Badge>
231-
<Badge href="." kind="warning">
232-
Warning
233-
</Badge>
234-
<Badge href="." kind="info">
235-
Info
236-
</Badge>
237-
<Badge href="." kind="light">
238-
Light
239-
</Badge>
240-
<Badge href="." kind="dark">
241-
Dark
242-
</Badge>
178+
{[
179+
'primary',
180+
'secondary',
181+
'success',
182+
'danger',
183+
'warning',
184+
'info',
185+
'light',
186+
'dark'
187+
].map(kind => (
188+
<Badge href="." kind={kind} className="text-capitalize">
189+
{kind}
190+
</Badge>
191+
))}
243192
</Example>
244193

245194
```TSX
246-
import { render, createCell, Fragment } from 'web-cell';
195+
import { render, createCell } from 'web-cell';
247196
import { Badge } from 'boot-cell/source/Reminder/Badge';
248197

249-
render(
250-
<Fragment>
251-
<Badge href=".">Primary</Badge>
252-
<Badge href="." kind="secondary">
253-
Secondary
254-
</Badge>
255-
<Badge href="." kind="success">
256-
Success
257-
</Badge>
258-
<Badge href="." kind="danger">
259-
Danger
260-
</Badge>
261-
<Badge href="." kind="warning">
262-
Warning
263-
</Badge>
264-
<Badge href="." kind="info">
265-
Info
266-
</Badge>
267-
<Badge href="." kind="light">
268-
Light
269-
</Badge>
270-
<Badge href="." kind="dark">
271-
Dark
272-
</Badge>
273-
</Fragment>
274-
);
198+
render([
199+
'primary',
200+
'secondary',
201+
'success',
202+
'danger',
203+
'warning',
204+
'info',
205+
'light',
206+
'dark'
207+
].map(kind => (
208+
<Badge href="." kind={kind} className="text-capitalize">
209+
{kind}
210+
</Badge>
211+
)));
275212
```

0 commit comments

Comments
 (0)