Skip to content

Commit ccb5fae

Browse files
vagusXvagusX
authored
feat: add custom render demo and test cases (#8)
1 parent 313a864 commit ccb5fae

File tree

7 files changed

+204
-33
lines changed

7 files changed

+204
-33
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ lib
2727
es
2828
yarn.lock
2929
package-lock.json
30+
pnpm-lock.yaml
3031
coverage/
3132
.doc
3233

‎assets/index.less‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,21 @@
1616
.@{segmented-prefix-cls} {
1717
position: relative;
1818

19-
display: inline-block;
20-
box-sizing: border-box;
21-
margin: 0;
22-
padding: 0;
23-
padding: 2px;
19+
display: inline-flex;
20+
align-items: stretch;
21+
justify-items: flex-start;
2422

2523
background-color: rgba(0, 0, 0, 0.04);
26-
2724
border-radius: 2px;
25+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
2826

2927
&-item {
30-
// box-sizing: border-box;
3128
position: relative;
32-
display: inline-block;
33-
height: 28px;
29+
min-height: 28px;
3430
padding: 4px 10px;
31+
3532
color: fade(#000, 85%);
36-
line-height: 28px;
3733
text-align: center;
38-
3934
cursor: pointer;
4035

4136
&-selected {
@@ -79,10 +74,10 @@
7974
.segmented-item-selected();
8075

8176
position: absolute;
82-
top: 2px;
83-
left: 0px;
77+
top: 0;
78+
left: 0;
8479
width: 0;
85-
height: 28px;
80+
height: 100%;
8681
padding: 4px 0;
8782
}
8883

‎assets/style.less‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
@import './index.less';
22

3+
// reset
4+
* {
5+
box-sizing: border-box;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
310
.wrapper {
411
margin-bottom: 10px;
512
}

‎docs/demo/custom-render.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## custom-render
2+
3+
<code src="../examples/custom-render.tsx">

‎docs/examples/custom-render.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import '../../assets/style.less';
2+
import * as React from 'react';
3+
import Segmented from 'rc-segmented';
4+
5+
const options = [
6+
{
7+
label: (
8+
<div>
9+
iOS
10+
<br />
11+
10
12+
<br />
13+
11
14+
</div>
15+
),
16+
value: 'iOS',
17+
},
18+
{ label: <h1>Android</h1>, value: 'Android' },
19+
{
20+
label: (
21+
<div>
22+
Web
23+
<br />
24+
345
25+
</div>
26+
),
27+
value: 'Web',
28+
},
29+
{ label: <h1>Electron</h1>, value: 'Electron', disabled: true },
30+
// debug usage
31+
// { label: '', value: 'Empty' },
32+
];
33+
34+
export default () => {
35+
return (
36+
<>
37+
<Segmented options={options} />
38+
</>
39+
);
40+
};

‎tests/__snapshots__/index.spec.tsx.snap‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,111 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`rc-segmented render 1`] = `
4+
<div
5+
class="rc-segmented"
6+
>
7+
<label
8+
class="rc-segmented-item rc-segmented-item-selected"
9+
>
10+
<input
11+
checked=""
12+
class="rc-segmented-item-input"
13+
type="radio"
14+
/>
15+
<span
16+
class="rc-segmented-item-label"
17+
>
18+
iOS
19+
</span>
20+
</label>
21+
<label
22+
class="rc-segmented-item"
23+
>
24+
<input
25+
class="rc-segmented-item-input"
26+
type="radio"
27+
/>
28+
<span
29+
class="rc-segmented-item-label"
30+
>
31+
<div
32+
id="android"
33+
>
34+
Android
35+
</div>
36+
</span>
37+
</label>
38+
<label
39+
class="rc-segmented-item"
40+
>
41+
<input
42+
class="rc-segmented-item-input"
43+
type="radio"
44+
/>
45+
<span
46+
class="rc-segmented-item-label"
47+
>
48+
<h2>
49+
Web
50+
</h2>
51+
</span>
52+
</label>
53+
</div>
54+
`;
55+
356
exports[`rc-segmented render empty segmented 1`] = `
457
<div
558
class="rc-segmented"
659
/>
760
`;
861

62+
exports[`rc-segmented render segmented ok 1`] = `
63+
<div
64+
class="rc-segmented"
65+
>
66+
<label
67+
class="rc-segmented-item rc-segmented-item-selected"
68+
>
69+
<input
70+
checked=""
71+
class="rc-segmented-item-input"
72+
type="radio"
73+
/>
74+
<span
75+
class="rc-segmented-item-label"
76+
>
77+
iOS
78+
</span>
79+
</label>
80+
<label
81+
class="rc-segmented-item"
82+
>
83+
<input
84+
class="rc-segmented-item-input"
85+
type="radio"
86+
/>
87+
<span
88+
class="rc-segmented-item-label"
89+
>
90+
Android
91+
</span>
92+
</label>
93+
<label
94+
class="rc-segmented-item"
95+
>
96+
<input
97+
class="rc-segmented-item-input"
98+
type="radio"
99+
/>
100+
<span
101+
class="rc-segmented-item-label"
102+
>
103+
Web
104+
</span>
105+
</label>
106+
</div>
107+
`;
108+
9109
exports[`rc-segmented render segmented with CSSMotion 1`] = `
10110
<div
11111
class="rc-segmented"

‎tests/index.spec.tsx‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import { act } from 'react-dom/test-utils';
3-
import { mount as emount } from 'enzyme';
43
import { mount } from './wrapper';
54

6-
import Segmented, { SegmentedValue } from '../src';
5+
import Segmented from '../src';
6+
import type { SegmentedValue } from '../src';
77

88
jest.mock('rc-motion/lib/util/motion', () => {
99
return {
@@ -27,13 +27,38 @@ describe('rc-segmented', () => {
2727
/>,
2828
);
2929

30+
expect(wrapper.render()).toMatchSnapshot();
31+
3032
expect(
3133
wrapper
3234
.find('.rc-segmented-item-input')
3335
.map((el) => (el.getDOMNode() as HTMLInputElement).checked),
3436
).toEqual([true, false, false]);
3537
});
3638

39+
it('render', () => {
40+
const wrapper = mount(
41+
<Segmented
42+
options={[
43+
{ label: 'iOS', value: 'iOS' },
44+
{ label: <div id="android">Android</div>, value: 'Android' },
45+
{ label: <h2>Web</h2>, value: 'Web' },
46+
]}
47+
/>,
48+
);
49+
50+
expect(wrapper.render()).toMatchSnapshot();
51+
52+
expect(
53+
wrapper
54+
.find('.rc-segmented-item-input')
55+
.map((el) => (el.getDOMNode() as HTMLInputElement).checked),
56+
).toEqual([true, false, false]);
57+
58+
expect(wrapper.find('#android').at(0).text()).toContain('Android');
59+
expect(wrapper.find('h2').at(0).text()).toContain('Web');
60+
});
61+
3762
it('render segmented with defaultValue', () => {
3863
const wrapper = mount(
3964
<Segmented options={['iOS', 'Android', 'Web']} defaultValue="Web" />,
@@ -199,23 +224,6 @@ describe('rc-segmented', () => {
199224
).toEqual([true, false, false]);
200225
});
201226

202-
it('render segmented with options null/undefined', () => {
203-
const handleValueChange = jest.fn();
204-
const wrapper = mount(
205-
<Segmented
206-
options={[null, undefined, ''] as any}
207-
disabled
208-
onChange={(e) => handleValueChange(e.target.value)}
209-
/>,
210-
);
211-
expect(wrapper.render()).toMatchSnapshot();
212-
expect(
213-
wrapper
214-
.find('.rc-segmented-item-label')
215-
.map((n) => n.getDOMNode().textContent),
216-
).toEqual(['', '', '']);
217-
});
218-
219227
it('render segmented with className and other html attribues', () => {
220228
const wrapper = mount(
221229
<Segmented
@@ -361,4 +369,21 @@ describe('rc-segmented', () => {
361369
// thumb should disappear
362370
expect(wrapper.find('.rc-segmented-thumb').length).toBe(0);
363371
});
372+
373+
it('render segmented with options null/undefined', () => {
374+
const handleValueChange = jest.fn();
375+
const wrapper = mount(
376+
<Segmented
377+
options={[null, undefined, ''] as any}
378+
disabled
379+
onChange={(e) => handleValueChange(e.target.value)}
380+
/>,
381+
);
382+
expect(wrapper.render()).toMatchSnapshot();
383+
expect(
384+
wrapper
385+
.find('.rc-segmented-item-label')
386+
.map((n) => n.getDOMNode().textContent),
387+
).toEqual(['', '', '']);
388+
});
364389
});

0 commit comments

Comments
 (0)