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/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..a8cfbd653 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 {