From 7e98e46994575c62416285f43f577063b0db0759 Mon Sep 17 00:00:00 2001 From: ruixue Date: Wed, 4 Dec 2024 18:20:22 +0800 Subject: [PATCH 1/7] fix: the style of no data in empty --- src/components/icon.tsx | 101 ++++++++++++++++++++++++++++ src/empty/emptyImg/empty_loupe.svg | 5 ++ src/empty/emptyImg/empty_search.svg | 15 +++++ src/empty/index.tsx | 20 ++++-- src/empty/style.scss | 47 +++++++++++++ 5 files changed, 184 insertions(+), 4 deletions(-) create mode 100644 src/components/icon.tsx create mode 100644 src/empty/emptyImg/empty_loupe.svg create mode 100644 src/empty/emptyImg/empty_search.svg diff --git a/src/components/icon.tsx b/src/components/icon.tsx new file mode 100644 index 000000000..e3f39edf4 --- /dev/null +++ b/src/components/icon.tsx @@ -0,0 +1,101 @@ +import React, { CSSProperties } from 'react'; + +interface IIconProps extends React.HTMLAttributes { + title?: string; + className?: string; + style?: CSSProperties; + onClick?: () => void; +} + +export function DeleteIcon({ title, style, className }: IIconProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} +export function ReloadIcon({ title, style, className }: IIconProps) { + return ( + + + + + + + + ); +} diff --git a/src/empty/emptyImg/empty_loupe.svg b/src/empty/emptyImg/empty_loupe.svg new file mode 100644 index 000000000..a08c4bd0b --- /dev/null +++ b/src/empty/emptyImg/empty_loupe.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/empty/emptyImg/empty_search.svg b/src/empty/emptyImg/empty_search.svg new file mode 100644 index 000000000..2773dfcd7 --- /dev/null +++ b/src/empty/emptyImg/empty_search.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/empty/index.tsx b/src/empty/index.tsx index a7b644978..43c0d3077 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -1,12 +1,12 @@ import React, { ReactNode } from 'react'; import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd'; +import { DeleteIcon, ReloadIcon } from 'dt-react-component/components/icon'; import './style.scss'; export const IMG_MAP = { default: 'empty_default.png', project: 'empty_project.png', - search: 'empty_search.png', chart: 'empty_chart.png', overview: 'empty_overview.png', permission: 'empty_permission.png', @@ -30,10 +30,22 @@ const Empty = (props: EmptyProps) => { extra, ...restProps } = props; + const img = () => { + if (type === 'search') { + return ( +
+ + +
+ ); + } else if (IMG_MAP[type]) { + return ; + } - let newImage: ReactNode = IMG_MAP[type] ? ( - - ) : null; + return null; + }; + + let newImage: ReactNode = img() || null; if (image) newImage = image as ReactNode; const height = size === 'default' ? 80 : 100; diff --git a/src/empty/style.scss b/src/empty/style.scss index 9282d02a2..202607a64 100644 --- a/src/empty/style.scss +++ b/src/empty/style.scss @@ -1,5 +1,10 @@ .dtc-empty { .ant-empty { + .ant-empty-image { + display: flex; + justify-content: center; + margin-bottom: 8px; + } .ant-empty-description { color: #8B8FA8; line-height: 20px; @@ -9,3 +14,45 @@ } } } + +.dtc-empty-search-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; + } + .dtc-empty-loupe { + font-size: 38px; + position: absolute; + width: 38px; + height: 38px; + 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; + } +} + +@keyframes animX { + 0% { + right: 0; + } + 100% { + right: 20px; + } +} + +@keyframes animY { + 0% { + bottom: 0; + } + 100% { + bottom: 20px; + } +} From c41d51062d4645dd1c12f4899b123b3689a97669 Mon Sep 17 00:00:00 2001 From: ruixue Date: Tue, 10 Dec 2024 15:01:37 +0800 Subject: [PATCH 2/7] feat: update the empty --- src/components/icon.tsx | 4 ++-- src/empty/index.md | 14 ++++++++++++++ src/empty/index.tsx | 11 +++++++---- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/icon.tsx b/src/components/icon.tsx index e3f39edf4..acb96617a 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -7,7 +7,7 @@ interface IIconProps extends React.HTMLAttributes { onClick?: () => void; } -export function DeleteIcon({ title, style, className }: IIconProps) { +export function SearchIcon({ title, style, className }: IIconProps) { return ( ); } -export function ReloadIcon({ title, style, className }: IIconProps) { +export function LoupeIcon({ title, style, className }: IIconProps) { return ( { }; ``` +```jsx +/** + * title: "使用动态的搜索图片" + */ +import React, { useState } from 'react'; +import { Empty } from 'dt-react-component'; +import { Space } from 'antd'; + +export default () => { + return ; +}; +``` + ## API | 参数 | 说明 | 类型 | 默认值 | @@ -167,6 +180,7 @@ export default () => { | showEmpty | 是否展示 Empty 组件 | `boolean` | `true` | | children | 展示内容 | `React.ReactNode` | - | | extra | 替换 antd Empty 的 children | ` React.ReactNode` | - | +| active | 是否展示动态的图片 | `boolean` | `true` | :::info 其余属性[继承 antd4.x 的 Empty](https://ant.design/components/empty-cn/#API) diff --git a/src/empty/index.tsx b/src/empty/index.tsx index 43c0d3077..2bc0c0f41 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -1,12 +1,13 @@ import React, { ReactNode } from 'react'; import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd'; -import { DeleteIcon, ReloadIcon } from 'dt-react-component/components/icon'; +import { LoupeIcon, SearchIcon } from 'dt-react-component/components/icon'; import './style.scss'; export const IMG_MAP = { default: 'empty_default.png', project: 'empty_project.png', + search: 'empty_search.png', chart: 'empty_chart.png', overview: 'empty_overview.png', permission: 'empty_permission.png', @@ -17,6 +18,7 @@ export interface EmptyProps extends AntdEmptyProps { size?: 'default' | 'large'; showEmpty?: boolean; extra?: ReactNode; + active?: boolean; } const Empty = (props: EmptyProps) => { @@ -24,6 +26,7 @@ const Empty = (props: EmptyProps) => { type = 'default', size = 'default', showEmpty = true, + active = false, children, image, imageStyle, @@ -31,11 +34,11 @@ const Empty = (props: EmptyProps) => { ...restProps } = props; const img = () => { - if (type === 'search') { + if (type === 'search' && active) { return (
- - + +
); } else if (IMG_MAP[type]) { From 512069dc9000ae87a3aff36b2d92114098e25ce2 Mon Sep 17 00:00:00 2001 From: ruixue Date: Tue, 10 Dec 2024 16:19:54 +0800 Subject: [PATCH 3/7] feat: update the classname in empty --- src/empty/index.tsx | 6 +++--- src/empty/style.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/empty/index.tsx b/src/empty/index.tsx index 2bc0c0f41..603ba1313 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -36,9 +36,9 @@ const Empty = (props: EmptyProps) => { const img = () => { if (type === 'search' && active) { return ( -
- - +
+ +
); } else if (IMG_MAP[type]) { diff --git a/src/empty/style.scss b/src/empty/style.scss index 202607a64..75721aa04 100644 --- a/src/empty/style.scss +++ b/src/empty/style.scss @@ -15,12 +15,12 @@ } } -.dtc-empty-search-container { +.dtc-empty__container { position: relative; width: 80px; height: 80px; bottom: 8px; - .dtc-empty-search { + .dtc-empty__search { font-size: 80px; position: absolute; top: 0; @@ -28,7 +28,7 @@ width: 80px; height: 80px; } - .dtc-empty-loupe { + .dtc-empty__loupe { font-size: 38px; position: absolute; width: 38px; From df15ce681a388a5bc96325c30413bd77c0b846ce Mon Sep 17 00:00:00 2001 From: ruixue Date: Fri, 27 Dec 2024 15:57:17 +0800 Subject: [PATCH 4/7] fix: fix file paths and delete unused file --- src/empty/emptyImg/empty_loupe.svg | 5 ----- src/empty/emptyImg/empty_search.svg | 15 --------------- src/empty/index.tsx | 2 +- 3 files changed, 1 insertion(+), 21 deletions(-) delete mode 100644 src/empty/emptyImg/empty_loupe.svg delete mode 100644 src/empty/emptyImg/empty_search.svg diff --git a/src/empty/emptyImg/empty_loupe.svg b/src/empty/emptyImg/empty_loupe.svg deleted file mode 100644 index a08c4bd0b..000000000 --- a/src/empty/emptyImg/empty_loupe.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/empty/emptyImg/empty_search.svg b/src/empty/emptyImg/empty_search.svg deleted file mode 100644 index 2773dfcd7..000000000 --- a/src/empty/emptyImg/empty_search.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/empty/index.tsx b/src/empty/index.tsx index 603ba1313..abe1dc22f 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -1,7 +1,7 @@ import React, { ReactNode } from 'react'; import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd'; -import { LoupeIcon, SearchIcon } from 'dt-react-component/components/icon'; +import { LoupeIcon, SearchIcon } from '../components/icon'; import './style.scss'; export const IMG_MAP = { From 00b90482d204576dc2bfd4ffd8d643cd6476ff57 Mon Sep 17 00:00:00 2001 From: ruixue Date: Mon, 6 Jan 2025 19:43:28 +0800 Subject: [PATCH 5/7] fix: add unit test --- src/empty/__tests__/empty.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/empty/__tests__/empty.test.tsx b/src/empty/__tests__/empty.test.tsx index 269c4897e..10f66bc94 100644 --- a/src/empty/__tests__/empty.test.tsx +++ b/src/empty/__tests__/empty.test.tsx @@ -46,6 +46,12 @@ describe('Empty', () => { expect(srcValue).toEqual(IMG_MAP['project']); }); + it('should support empty render correct img for search type', () => { + const { container } = render(); + const srcValue = container.querySelector('img')!.getAttribute('src'); + expect(srcValue).toEqual(IMG_MAP['search']); + }); + it('should show correct content when not empty', () => { const { container } = render( From d3a8705e498f72abbcb57335f6a5714da728d0bf Mon Sep 17 00:00:00 2001 From: ruixue Date: Wed, 8 Jan 2025 11:21:08 +0800 Subject: [PATCH 6/7] fix: update unit test --- src/empty/__tests__/empty.test.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/empty/__tests__/empty.test.tsx b/src/empty/__tests__/empty.test.tsx index 10f66bc94..29986bb41 100644 --- a/src/empty/__tests__/empty.test.tsx +++ b/src/empty/__tests__/empty.test.tsx @@ -46,10 +46,16 @@ describe('Empty', () => { expect(srcValue).toEqual(IMG_MAP['project']); }); - it('should support empty render correct img for search type', () => { - const { container } = render(); - const srcValue = container.querySelector('img')!.getAttribute('src'); - expect(srcValue).toEqual(IMG_MAP['search']); + it('should render SearchIcon and LoupeIcon when type is search and active is true', () => { + const { container } = render(); + expect(container.querySelector('.dtc-empty__search')).toBeInTheDocument(); + expect(container.querySelector('.dtc-empty__loupe')).toBeInTheDocument(); + }); + + it('should render SearchIcon and LoupeIcon when type is search and active is false', () => { + const { container } = render(); + expect(container.querySelector('.dtc-empty__search')).toBeFalsy(); + expect(container.querySelector('.dtc-empty__loupe')).toBeFalsy(); }); it('should show correct content when not empty', () => { From 12cb5f6b3cfb21a41721a2beba2768aed3a2a673 Mon Sep 17 00:00:00 2001 From: ruixue Date: Wed, 8 Jan 2025 14:56:42 +0800 Subject: [PATCH 7/7] fix: fix the direction in which the icon moves --- src/empty/style.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/empty/style.scss b/src/empty/style.scss index 75721aa04..8355bef7c 100644 --- a/src/empty/style.scss +++ b/src/empty/style.scss @@ -34,25 +34,25 @@ width: 38px; height: 38px; 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; + 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; } } @keyframes animX { 0% { - right: 0; + right: 10px; } 100% { - right: 20px; + right: 25px; } } @keyframes animY { 0% { - bottom: 0; + bottom: 2px; } 100% { - bottom: 20px; + bottom: 17px; } }