From 55b72e1a72ce7a973f3c71428845a9ee35d5a094 Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Thu, 23 Jan 2025 17:07:02 +0800 Subject: [PATCH 1/2] fix(empty): fix active search empty will flush --- src/empty/index.md | 9 +++- src/empty/index.tsx | 25 +++++---- src/empty/style.scss | 117 ++++++++++++++++++++++++++++++++----------- 3 files changed, 112 insertions(+), 39 deletions(-) diff --git a/src/empty/index.md b/src/empty/index.md index 9c105c7d7..b7f7eb819 100644 --- a/src/empty/index.md +++ b/src/empty/index.md @@ -167,7 +167,14 @@ import { Empty } from 'dt-react-component'; import { Space } from 'antd'; export default () => { - return ; + return ( + <> + + + + + + ); }; ``` diff --git a/src/empty/index.tsx b/src/empty/index.tsx index f2a43027a..57ee9f0ba 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -30,7 +30,6 @@ const Empty = (props: EmptyProps) => { active = false, children, image, - imageStyle, extra, className, style, @@ -39,10 +38,10 @@ const Empty = (props: EmptyProps) => { const img = () => { if (type === 'search' && active) { return ( -
+ <> -
+ ); } else if (IMG_MAP[type]) { return ; @@ -54,14 +53,20 @@ const Empty = (props: EmptyProps) => { let newImage: ReactNode = img() || null; if (image) newImage = image as ReactNode; - const height = size === 'default' ? 80 : 100; - return showEmpty ? ( -
- - {extra} - -
+ + {extra} + ) : ( <>{children} ); diff --git a/src/empty/style.scss b/src/empty/style.scss index 8355bef7c..1c66de4d0 100644 --- a/src/empty/style.scss +++ b/src/empty/style.scss @@ -1,42 +1,51 @@ -.dtc-empty { - .ant-empty { +$defaultSize: 80px; +$largeSize: 100px; + +.ant-empty.dtc-empty { + .ant-empty-image { + display: flex; + justify-content: center; + width: $defaultSize; + height: $defaultSize; + font-size: $defaultSize; + margin: 0 auto 8px; + } + .ant-empty-description { + color: #8B8FA8; + line-height: 20px; + font-size: 14px; + font-family: PingFangSC-Regular, "PingFang SC"; + font-weight: 400; + } + &__active { .ant-empty-image { - display: flex; - justify-content: center; - margin-bottom: 8px; - } - .ant-empty-description { - color: #8B8FA8; - line-height: 20px; - font-size: 14px; - font-family: PingFangSC-Regular, "PingFang SC"; - font-weight: 400; + position: relative; } } -} - -.dtc-empty__container { - position: relative; - width: 80px; - height: 80px; - bottom: 8px; .dtc-empty__search { - font-size: 80px; - position: absolute; - top: 0; - left: 0; - width: 80px; - height: 80px; + line-height: 0; + font-size: 100%; } .dtc-empty__loupe { - font-size: 38px; + line-height: 0; position: absolute; - width: 38px; - height: 38px; + font-size: 38px; + right: 10px; + bottom: 2px; animation: animY 1s cubic-bezier(0.36, 0, 0.64, 1) 0.5s infinite alternate, animX 1s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate; } + &__large { + .ant-empty-image { + width: $largeSize; + height: $largeSize; + font-size: $largeSize; + } + .dtc-empty__loupe { + font-size: 48px; + } + } } @keyframes animX { @@ -56,3 +65,55 @@ bottom: 17px; } } + +// .dtc-empty { +// .ant-empty { +// .ant-empty-image { +// display: flex; +// justify-content: center; +// margin-bottom: 8px; +// } +// .ant-empty-description { +// color: #8b8fa8; +// line-height: 20px; +// font-size: 14px; +// font-family: PingFangSC-Regular, 'PingFang SC'; +// font-weight: 400; +// } +// } +// } + +// .dtc-empty-container { +// position: relative; +// width: 80px; +// height: 80px; +// .dtc-empty__search { +// font-size: 80px; +// line-height: 0; +// position: absolute; +// top: 0; +// left: 0; +// } +// .dtc-empty__loupe { +// font-size: 38px; +// position: absolute; +// bottom: 2px; +// right: 10px; +// line-height: 0; +// animation: animY 1s cubic-bezier(0.36, 0, 0.64, 1) 0.5s infinite alternate, +// animX 1s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate; +// } + +// &__large { +// width: 100px; +// height: 100px; + +// .dtc-empty__search { +// font-size: 100px; +// } + +// .dtc-empty__loupe { +// font-size: 48px; +// } +// } +// } From 9cdf28176b95eaff6dbbd78bd2ec3bfcb5c0280e Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Thu, 23 Jan 2025 18:00:47 +0800 Subject: [PATCH 2/2] test(empty): update unit tests --- .../__snapshots__/empty.test.tsx.snap | 135 +++++------------- src/empty/__tests__/empty.test.tsx | 18 ++- src/empty/style.scss | 52 ------- 3 files changed, 44 insertions(+), 161 deletions(-) diff --git a/src/empty/__tests__/__snapshots__/empty.test.tsx.snap b/src/empty/__tests__/__snapshots__/empty.test.tsx.snap index acf607f1e..fd15c2c53 100644 --- a/src/empty/__tests__/__snapshots__/empty.test.tsx.snap +++ b/src/empty/__tests__/__snapshots__/empty.test.tsx.snap @@ -1,106 +1,43 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Empty should support empty success render 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
-
-
- -
-
- No Data -
-
-
+exports[`Empty match snapshots 1`] = ` + +
+
+ +
+
+ No Data +
+
+ +`; + +exports[`Empty match snapshots 2`] = ` + +
+
+
- , - "container":
-
-
- -
-
- No Data -
-
+ No Data
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} +
+ `; diff --git a/src/empty/__tests__/empty.test.tsx b/src/empty/__tests__/empty.test.tsx index 29986bb41..367753a2f 100644 --- a/src/empty/__tests__/empty.test.tsx +++ b/src/empty/__tests__/empty.test.tsx @@ -5,15 +5,9 @@ import '@testing-library/jest-dom/extend-expect'; import Empty, { IMG_MAP } from '..'; describe('Empty', () => { - test('should support empty success render', () => { - const wrapper = render(); - expect(wrapper).toMatchSnapshot(); - }); - it('should support empty image default size', () => { - const { container } = render(); - expect(container.querySelector('.ant-empty-image')?.style.height).toBe( - '100px' - ); + test('match snapshots', () => { + expect(render().asFragment()).toMatchSnapshot(); + expect(render().asFragment()).toMatchSnapshot(); }); it('should support empty image size should change', () => { const { container } = render(); @@ -21,6 +15,10 @@ describe('Empty', () => { '20px' ); }); + it('should render nothing for incorrect type', () => { + const { container } = render(); + expect(container.querySelector('.ant-empty-image')?.innerHTML).toBe(''); + }); it('should support empty image size from iamgeStyle', () => { const { container } = render(); @@ -74,7 +72,7 @@ describe('Empty', () => {
show data
 ); - expect(container.querySelector('.dtc-empty')?.children[0].classList).toContain('ant-empty'); + expect(container.querySelector('.dtc-empty')?.classList).toContain('ant-empty'); }); it('should show correct antd empty children', () => { diff --git a/src/empty/style.scss b/src/empty/style.scss index 1c66de4d0..a8cfbd653 100644 --- a/src/empty/style.scss +++ b/src/empty/style.scss @@ -65,55 +65,3 @@ $largeSize: 100px; bottom: 17px; } } - -// .dtc-empty { -// .ant-empty { -// .ant-empty-image { -// display: flex; -// justify-content: center; -// margin-bottom: 8px; -// } -// .ant-empty-description { -// color: #8b8fa8; -// line-height: 20px; -// font-size: 14px; -// font-family: PingFangSC-Regular, 'PingFang SC'; -// font-weight: 400; -// } -// } -// } - -// .dtc-empty-container { -// position: relative; -// width: 80px; -// height: 80px; -// .dtc-empty__search { -// font-size: 80px; -// line-height: 0; -// position: absolute; -// top: 0; -// left: 0; -// } -// .dtc-empty__loupe { -// font-size: 38px; -// position: absolute; -// bottom: 2px; -// right: 10px; -// line-height: 0; -// animation: animY 1s cubic-bezier(0.36, 0, 0.64, 1) 0.5s infinite alternate, -// animX 1s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate; -// } - -// &__large { -// width: 100px; -// height: 100px; - -// .dtc-empty__search { -// font-size: 100px; -// } - -// .dtc-empty__loupe { -// font-size: 48px; -// } -// } -// }