From 5834e5328b75d3e5355d0ac3a8b6b7cc511bd6d3 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Wed, 12 Oct 2022 12:01:38 +0800 Subject: [PATCH 1/3] feat: add empty component --- src/components/empty/__tests__/empty.test.tsx | 37 ++++++++++++ src/components/empty/index.tsx | 20 +++++++ src/components/empty/style.scss | 9 +++ src/components/index.tsx | 1 + src/stories/empty.stories.tsx | 58 +++++++++++++++++++ src/styles/index.scss | 1 + 6 files changed, 126 insertions(+) create mode 100644 src/components/empty/__tests__/empty.test.tsx create mode 100644 src/components/empty/index.tsx create mode 100644 src/components/empty/style.scss create mode 100644 src/stories/empty.stories.tsx diff --git a/src/components/empty/__tests__/empty.test.tsx b/src/components/empty/__tests__/empty.test.tsx new file mode 100644 index 000000000..5597cee03 --- /dev/null +++ b/src/components/empty/__tests__/empty.test.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; + +import Empty, { DEFAULT_BASE64, GREY_BASE64 } from '../index'; + +describe('Empty', () => { + it('image size should change', () => { + const { container } = render(); + expect( + container.querySelector('.ant-empty-image')?.style.height + ).toBe('20px'); + }); + + it('description can be false', () => { + const { container } = render(); + expect(container.querySelector('.ant-empty-description')).toBeFalsy(); + }); + + it('render correct img for default type', () => { + const { container } = render(); + const srcValue = container.querySelector('img').getAttribute('src'); + expect(srcValue).toEqual(DEFAULT_BASE64); + }) + + it('render correct img for grey type', () => { + const { container } = render(); + const srcValue = container.querySelector('img').getAttribute('src'); + expect(srcValue).toEqual(GREY_BASE64); + }) + + it('render correct img when have image props', () => { + const { container } = render(); + const srcValue = container.querySelector('img').getAttribute('src'); + expect(srcValue).toEqual('public/iamges/drag-drawer-icon.png'); + }) +}); diff --git a/src/components/empty/index.tsx b/src/components/empty/index.tsx new file mode 100644 index 000000000..684c6762b --- /dev/null +++ b/src/components/empty/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Empty as AntdEmpty, EmptyProps } from 'antd'; + +interface IProps { + type?: 'default' | 'grey'; +} + +export const DEFAULT_BASE64 = + 'data:image/png;base64,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'; +export const GREY_BASE64 = + 'data:image/png;base64,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'; + +const Empty = (props: EmptyProps & IProps) => { + const { type = 'default', image, ...rest } = props; + let newImage: React.ReactNode = type === 'default' ? DEFAULT_BASE64 : GREY_BASE64; + if (image) newImage = image as React.ReactNode; + return ; +}; + +export default Empty; diff --git a/src/components/empty/style.scss b/src/components/empty/style.scss new file mode 100644 index 000000000..d8041450b --- /dev/null +++ b/src/components/empty/style.scss @@ -0,0 +1,9 @@ +.ant-empty { + .ant-empty-description { + color: #8b8fa8; + line-height: 20px; + font-size: 14px; + font-family: PingFangSC-Regular, 'PingFang SC'; + font-weight: 400; + } +} diff --git a/src/components/index.tsx b/src/components/index.tsx index 7e77a65a0..347ac9209 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -35,4 +35,5 @@ export { default as TableCell } from './tableCell'; export { default as TextMark } from './textMark'; export { default as ToolModal } from './toolModal'; export { default as ProgressLine } from './progressLine' +export { default as Empty } from './empty' diff --git a/src/stories/empty.stories.tsx b/src/stories/empty.stories.tsx new file mode 100644 index 000000000..e57fdd2e2 --- /dev/null +++ b/src/stories/empty.stories.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import { storiesOf } from '@storybook/react'; +import { withKnobs } from '@storybook/addon-knobs'; +import { PropsTable } from './components/propsTable'; +import Empty from '../components/empty'; + +const stories = storiesOf('Empty 空状态', module); +stories.addDecorator(withKnobs) + +const propDefinitions = [{ + property: 'type', + propType: 'string', + required: false, + description: '默认展示图片的类型', + defaultValue: 'default' +}, { + property: 'image', + propType: 'React.Node', + required: false, + description: '自定义图片(设置该参数时,默认的图片不生效)', + defaultValue: '' +}, { + property: '其他参数', + propType: '', + required: false, + description: 继承antd4.x的Empty, + defaultValue: '' +}] + +stories.add('Empty 空状态', () => ( + + 何时使用 + {`当目前没有数据时,用于显式的用户提示。初始化场景时的引导创建流程`} + 1、使用默认空状态 + + 2、使用灰色空状态 + + 3、使用自定义图片 + + +), { + info: { + text: ` + 代码示例: + ~~~js + 1、使用默认空状态 + + + 2、使用灰色空状态 + + + 3、使用自定义图片 + + ~~~ + `, + TableComponent: () => PropsTable({ propDefinitions }) + } +}); diff --git a/src/styles/index.scss b/src/styles/index.scss index b3a45df9c..dbf526269 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -18,6 +18,7 @@ @import "../components/spreadSheet/style.scss"; @import "../components/toolModal/style.scss"; @import "../components/mxGraph/style.scss"; +@import "../components/empty/style.scss"; .sb-show-main{ #root>div:nth-child(3) { From 90370b796519599115e950ed8f2ce4595a3c3374 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Wed, 12 Oct 2022 16:58:41 +0800 Subject: [PATCH 2/3] feat: update review comment --- .../__snapshots__/empty.test.tsx.snap | 98 +++++++++++++++++++ src/components/empty/__tests__/empty.test.tsx | 14 ++- src/components/empty/index.tsx | 4 +- src/components/empty/style.scss | 16 +-- src/stories/empty.stories.tsx | 32 +++++- 5 files changed, 148 insertions(+), 16 deletions(-) create mode 100644 src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap diff --git a/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap b/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap new file mode 100644 index 000000000..43fbd07ad --- /dev/null +++ b/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap @@ -0,0 +1,98 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Empty success render 1`] = ` +Object { + "asFragment": [Function], + "baseElement": + + + + + + + No Data + + + + , + "container": + + + + + + 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/components/empty/__tests__/empty.test.tsx b/src/components/empty/__tests__/empty.test.tsx index 5597cee03..32589fc2a 100644 --- a/src/components/empty/__tests__/empty.test.tsx +++ b/src/components/empty/__tests__/empty.test.tsx @@ -5,31 +5,35 @@ import '@testing-library/jest-dom/extend-expect'; import Empty, { DEFAULT_BASE64, GREY_BASE64 } from '../index'; describe('Empty', () => { - it('image size should change', () => { + test('should support empty success render', () => { + const wrapper = render() + expect(wrapper).toMatchSnapshot(); + }) + it('should support empty image size should change', () => { const { container } = render(); expect( container.querySelector('.ant-empty-image')?.style.height ).toBe('20px'); }); - it('description can be false', () => { + it('should support empty description can be false', () => { const { container } = render(); expect(container.querySelector('.ant-empty-description')).toBeFalsy(); }); - it('render correct img for default type', () => { + it('should support empty render correct img for default type', () => { const { container } = render(); const srcValue = container.querySelector('img').getAttribute('src'); expect(srcValue).toEqual(DEFAULT_BASE64); }) - it('render correct img for grey type', () => { + it('should support empty render correct img for grey type', () => { const { container } = render(); const srcValue = container.querySelector('img').getAttribute('src'); expect(srcValue).toEqual(GREY_BASE64); }) - it('render correct img when have image props', () => { + it('should support empty render correct img when have image props', () => { const { container } = render(); const srcValue = container.querySelector('img').getAttribute('src'); expect(srcValue).toEqual('public/iamges/drag-drawer-icon.png'); diff --git a/src/components/empty/index.tsx b/src/components/empty/index.tsx index 684c6762b..9e992aa1d 100644 --- a/src/components/empty/index.tsx +++ b/src/components/empty/index.tsx @@ -14,7 +14,9 @@ const Empty = (props: EmptyProps & IProps) => { const { type = 'default', image, ...rest } = props; let newImage: React.ReactNode = type === 'default' ? DEFAULT_BASE64 : GREY_BASE64; if (image) newImage = image as React.ReactNode; - return ; + return + + }; export default Empty; diff --git a/src/components/empty/style.scss b/src/components/empty/style.scss index d8041450b..df729b23b 100644 --- a/src/components/empty/style.scss +++ b/src/components/empty/style.scss @@ -1,9 +1,11 @@ -.ant-empty { - .ant-empty-description { - color: #8b8fa8; - line-height: 20px; - font-size: 14px; - font-family: PingFangSC-Regular, 'PingFang SC'; - font-weight: 400; +.dtc-empty{ + .ant-empty { + .ant-empty-description { + color: #8b8fa8; + line-height: 20px; + font-size: 14px; + font-family: PingFangSC-Regular, 'PingFang SC'; + font-weight: 400; + } } } diff --git a/src/stories/empty.stories.tsx b/src/stories/empty.stories.tsx index e57fdd2e2..348a1f3e6 100644 --- a/src/stories/empty.stories.tsx +++ b/src/stories/empty.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import { PropsTable } from './components/propsTable'; +import ExampleContainer from './components/exampleCode'; import Empty from '../components/empty'; const stories = storiesOf('Empty 空状态', module); @@ -27,16 +28,38 @@ const propDefinitions = [{ defaultValue: '' }] +const otherDependencies = `import { Empty } from 'dt-react-component';` + +const basicFunctionCode = `` + +const basicEmpty = `` + +const basicGreyEmpty = `` + +const customizeImage = `` + +const moreSettingImage = `` + stories.add('Empty 空状态', () => ( 何时使用 {`当目前没有数据时,用于显式的用户提示。初始化场景时的引导创建流程`} 1、使用默认空状态 - + + + 2、使用灰色空状态 - + + + 3、使用自定义图片 - + + + + 4、更多配置 + + + ), { info: { @@ -51,6 +74,9 @@ stories.add('Empty 空状态', () => ( 3、使用自定义图片 + + 4、更多配置 + ~~~ `, TableComponent: () => PropsTable({ propDefinitions }) From db3ce219066685dc44f7518212b385b8f59a1996 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Wed, 12 Oct 2022 20:38:45 +0800 Subject: [PATCH 3/3] feat: update empty __snapshots__ --- .../__snapshots__/empty.test.tsx.snap | 48 +++++++++++-------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap b/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap index 43fbd07ad..6b1905439 100644 --- a/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap +++ b/src/components/empty/__tests__/__snapshots__/empty.test.tsx.snap @@ -1,10 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Empty success render 1`] = ` +exports[`Empty should support empty success render 1`] = ` Object { "asFragment": [Function], "baseElement": + + + + + + + No Data + + + + + , + "container": + @@ -23,25 +50,6 @@ Object { -
{`当目前没有数据时,用于显式的用户提示。初始化场景时的引导创建流程`}
1、使用默认空状态
2、使用灰色空状态
3、使用自定义图片
4、更多配置