Skip to content

Commit 46e31f1

Browse files
mortalYoungmortalYoung
authored
fix(empty): fix active search empty will flush (#542)
* fix(empty): fix active search empty will flush * test(empty): update unit tests
1 parent 06f233b commit 46e31f1

File tree

5 files changed

+104
-148
lines changed

5 files changed

+104
-148
lines changed

‎src/empty/__tests__/__snapshots__/empty.test.tsx.snap

+36-99
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,43 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Empty should support empty success render 1`] = `
4-
{
5-
"asFragment": [Function],
6-
"baseElement": <body>
7-
<div>
8-
<div
9-
class="dtc-empty"
10-
>
11-
<div
12-
class="ant-empty"
13-
>
14-
<div
15-
class="ant-empty-image"
16-
style="height: 80px;"
17-
>
18-
<img
19-
src="empty_default.png"
20-
/>
21-
</div>
22-
<div
23-
class="ant-empty-description"
24-
>
25-
No Data
26-
</div>
27-
</div>
28-
</div>
3+
exports[`Empty match snapshots 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="ant-empty dtc-empty"
7+
>
8+
<div
9+
class="ant-empty-image"
10+
>
11+
<img
12+
src="empty_default.png"
13+
/>
14+
</div>
15+
<div
16+
class="ant-empty-description"
17+
>
18+
No Data
19+
</div>
20+
</div>
21+
</DocumentFragment>
22+
`;
23+
24+
exports[`Empty match snapshots 2`] = `
25+
<DocumentFragment>
26+
<div
27+
class="ant-empty dtc-empty dtc-empty__large"
28+
>
29+
<div
30+
class="ant-empty-image"
31+
>
32+
<img
33+
src="empty_default.png"
34+
/>
2935
</div>
30-
</body>,
31-
"container": <div>
3236
<div
33-
class="dtc-empty"
37+
class="ant-empty-description"
3438
>
35-
<div
36-
class="ant-empty"
37-
>
38-
<div
39-
class="ant-empty-image"
40-
style="height: 80px;"
41-
>
42-
<img
43-
src="empty_default.png"
44-
/>
45-
</div>
46-
<div
47-
class="ant-empty-description"
48-
>
49-
No Data
50-
</div>
51-
</div>
39+
No Data
5240
</div>
53-
</div>,
54-
"debug": [Function],
55-
"findAllByAltText": [Function],
56-
"findAllByDisplayValue": [Function],
57-
"findAllByLabelText": [Function],
58-
"findAllByPlaceholderText": [Function],
59-
"findAllByRole": [Function],
60-
"findAllByTestId": [Function],
61-
"findAllByText": [Function],
62-
"findAllByTitle": [Function],
63-
"findByAltText": [Function],
64-
"findByDisplayValue": [Function],
65-
"findByLabelText": [Function],
66-
"findByPlaceholderText": [Function],
67-
"findByRole": [Function],
68-
"findByTestId": [Function],
69-
"findByText": [Function],
70-
"findByTitle": [Function],
71-
"getAllByAltText": [Function],
72-
"getAllByDisplayValue": [Function],
73-
"getAllByLabelText": [Function],
74-
"getAllByPlaceholderText": [Function],
75-
"getAllByRole": [Function],
76-
"getAllByTestId": [Function],
77-
"getAllByText": [Function],
78-
"getAllByTitle": [Function],
79-
"getByAltText": [Function],
80-
"getByDisplayValue": [Function],
81-
"getByLabelText": [Function],
82-
"getByPlaceholderText": [Function],
83-
"getByRole": [Function],
84-
"getByTestId": [Function],
85-
"getByText": [Function],
86-
"getByTitle": [Function],
87-
"queryAllByAltText": [Function],
88-
"queryAllByDisplayValue": [Function],
89-
"queryAllByLabelText": [Function],
90-
"queryAllByPlaceholderText": [Function],
91-
"queryAllByRole": [Function],
92-
"queryAllByTestId": [Function],
93-
"queryAllByText": [Function],
94-
"queryAllByTitle": [Function],
95-
"queryByAltText": [Function],
96-
"queryByDisplayValue": [Function],
97-
"queryByLabelText": [Function],
98-
"queryByPlaceholderText": [Function],
99-
"queryByRole": [Function],
100-
"queryByTestId": [Function],
101-
"queryByText": [Function],
102-
"queryByTitle": [Function],
103-
"rerender": [Function],
104-
"unmount": [Function],
105-
}
41+
</div>
42+
</DocumentFragment>
10643
`;

‎src/empty/__tests__/empty.test.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,20 @@ import '@testing-library/jest-dom/extend-expect';
55
import Empty, { IMG_MAP } from '..';
66

77
describe('Empty', () => {
8-
test('should support empty success render', () => {
9-
const wrapper = render(<Empty />);
10-
expect(wrapper).toMatchSnapshot();
11-
});
12-
it('should support empty image default size', () => {
13-
const { container } = render(<Empty size="large" />);
14-
expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe(
15-
'100px'
16-
);
8+
test('match snapshots', () => {
9+
expect(render(<Empty />).asFragment()).toMatchSnapshot();
10+
expect(render(<Empty size="large" />).asFragment()).toMatchSnapshot();
1711
});
1812
it('should support empty image size should change', () => {
1913
const { container } = render(<Empty imageStyle={{ height: 20 }} />);
2014
expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe(
2115
'20px'
2216
);
2317
});
18+
it('should render nothing for incorrect type', () => {
19+
const { container } = render(<Empty type={'test' as any} />);
20+
expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.innerHTML).toBe('');
21+
});
2422

2523
it('should support empty image size from iamgeStyle', () => {
2624
const { container } = render(<Empty imageStyle={{ height: 40 }} size="large" />);
@@ -74,7 +72,7 @@ describe('Empty', () => {
7472
<div className="data">show data</div>
7573
</Empty>
7674
);
77-
expect(container.querySelector('.dtc-empty')?.children[0].classList).toContain('ant-empty');
75+
expect(container.querySelector('.dtc-empty')?.classList).toContain('ant-empty');
7876
});
7977

8078
it('should show correct antd empty children', () => {

‎src/empty/index.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,14 @@ import { Empty } from 'dt-react-component';
167167
import { Space } from 'antd';
168168

169169
export default () => {
170-
return <Empty description="搜索无数据" type="search" active={true} />;
170+
return (
171+
<>
172+
<Empty description="搜索无数据" type="search" active={true} />
173+
<Empty description="搜索无数据" type="search" />
174+
<Empty description="搜索无数据" size="large" type="search" active={true} />
175+
<Empty description="搜索无数据" size="large" type="search" />
176+
</>
177+
);
171178
};
172179
```
173180

‎src/empty/index.tsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const Empty = (props: EmptyProps) => {
3030
active = false,
3131
children,
3232
image,
33-
imageStyle,
3433
extra,
3534
className,
3635
style,
@@ -39,10 +38,10 @@ const Empty = (props: EmptyProps) => {
3938
const img = () => {
4039
if (type === 'search' && active) {
4140
return (
42-
<div className="dtc-empty__container">
41+
<>
4342
<SearchIcon className="dtc-empty__search" />
4443
<LoupeIcon className="dtc-empty__loupe" />
45-
</div>
44+
</>
4645
);
4746
} else if (IMG_MAP[type]) {
4847
return <img src={require(`./emptyImg/${IMG_MAP[type]}`)} />;
@@ -54,14 +53,20 @@ const Empty = (props: EmptyProps) => {
5453
let newImage: ReactNode = img() || null;
5554
if (image) newImage = image as ReactNode;
5655

57-
const height = size === 'default' ? 80 : 100;
58-
5956
return showEmpty ? (
60-
<div className={classNames('dtc-empty', className)} style={style}>
61-
<AntdEmpty {...restProps} image={newImage} imageStyle={{ height, ...imageStyle }}>
62-
{extra}
63-
</AntdEmpty>
64-
</div>
57+
<AntdEmpty
58+
className={classNames(
59+
'dtc-empty',
60+
size === 'large' && 'dtc-empty__large',
61+
active && 'dtc-empty__active',
62+
className
63+
)}
64+
style={style}
65+
image={newImage}
66+
{...restProps}
67+
>
68+
{extra}
69+
</AntdEmpty>
6570
) : (
6671
<>{children}</>
6772
);

‎src/empty/style.scss

+37-28
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
1-
.dtc-empty {
2-
.ant-empty {
1+
$defaultSize: 80px;
2+
$largeSize: 100px;
3+
4+
.ant-empty.dtc-empty {
5+
.ant-empty-image {
6+
display: flex;
7+
justify-content: center;
8+
width: $defaultSize;
9+
height: $defaultSize;
10+
font-size: $defaultSize;
11+
margin: 0 auto 8px;
12+
}
13+
.ant-empty-description {
14+
color: #8B8FA8;
15+
line-height: 20px;
16+
font-size: 14px;
17+
font-family: PingFangSC-Regular, "PingFang SC";
18+
font-weight: 400;
19+
}
20+
&__active {
321
.ant-empty-image {
4-
display: flex;
5-
justify-content: center;
6-
margin-bottom: 8px;
7-
}
8-
.ant-empty-description {
9-
color: #8B8FA8;
10-
line-height: 20px;
11-
font-size: 14px;
12-
font-family: PingFangSC-Regular, "PingFang SC";
13-
font-weight: 400;
22+
position: relative;
1423
}
1524
}
16-
}
17-
18-
.dtc-empty__container {
19-
position: relative;
20-
width: 80px;
21-
height: 80px;
22-
bottom: 8px;
2325
.dtc-empty__search {
24-
font-size: 80px;
25-
position: absolute;
26-
top: 0;
27-
left: 0;
28-
width: 80px;
29-
height: 80px;
26+
line-height: 0;
27+
font-size: 100%;
3028
}
3129
.dtc-empty__loupe {
32-
font-size: 38px;
30+
line-height: 0;
3331
position: absolute;
34-
width: 38px;
35-
height: 38px;
32+
font-size: 38px;
33+
right: 10px;
34+
bottom: 2px;
3635
animation:
3736
animY 1s cubic-bezier(0.36, 0, 0.64, 1) 0.5s infinite alternate,
3837
animX 1s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate;
3938
}
39+
&__large {
40+
.ant-empty-image {
41+
width: $largeSize;
42+
height: $largeSize;
43+
font-size: $largeSize;
44+
}
45+
.dtc-empty__loupe {
46+
font-size: 48px;
47+
}
48+
}
4049
}
4150

4251
@keyframes animX {

0 commit comments

Comments
 (0)