feat: add empty component (#226)

* feat: add empty component

* feat: update review comment

* feat: update empty __snapshots__

src/components/empty/__tests__/empty.test.tsx

@@ -0,0 +1,41 @@
+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', () => {
+    test('should support empty success render', () => {
+        const wrapper = render(<Empty />)
+        expect(wrapper).toMatchSnapshot();
+    })
+    it('should support empty image size should change', () => {
+        const { container } = render(<Empty imageStyle={{ height: 20 }} />);
+        expect(
+            container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height
+        ).toBe('20px');
+    });
+
+    it('should support empty description can be false', () => {
+        const { container } = render(<Empty description={false} />);
+        expect(container.querySelector('.ant-empty-description')).toBeFalsy();
+    });
+
+    it('should support empty render correct img for default type', () => {
+        const { container } = render(<Empty />);
+        const srcValue = container.querySelector('img').getAttribute('src');
+        expect(srcValue).toEqual(DEFAULT_BASE64);
+    })
+
+    it('should support empty render correct img for grey type', () => {
+        const { container } = render(<Empty type='grey' />);
+        const srcValue = container.querySelector('img').getAttribute('src');
+        expect(srcValue).toEqual(GREY_BASE64);
+    })
+
+    it('should support empty render correct img when have image props', () => {
+        const { container } = render(<Empty image="public/iamges/drag-drawer-icon.png" type="grey" />);
+        const srcValue = container.querySelector('img').getAttribute('src');
+        expect(srcValue).toEqual('public/iamges/drag-drawer-icon.png');
+    })
+});

src/components/empty/style.scss

@@ -0,0 +1,11 @@
+.dtc-empty{
+    .ant-empty {
+        .ant-empty-description {
+            color: #8b8fa8;
+            line-height: 20px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, 'PingFang SC';
+            font-weight: 400;
+        }
+    }
+}

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'
 

src/stories/empty.stories.tsx

@@ -0,0 +1,84 @@
+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);
+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: <a target="_blank" rel="noopener noreferrer" href="https://ant.design/components/empty-cn/#API">继承antd4.x的Empty</a>,
+    defaultValue: ''
+}]
+
+const otherDependencies = `import { Empty } from 'dt-react-component';`
+
+const basicFunctionCode = ``
+
+const basicEmpty = `<Empty />`
+
+const basicGreyEmpty = `<Empty type="grey" />`
+
+const customizeImage = `<Empty image="https://user-images.githubusercontent.com/38368040/195246598-5adf8985-3f78-48b1-8116-bc4d78982df8.jpeg" />`
+
+const moreSettingImage = `<Empty description="自定义的文案" imageStyle={{ height: 60 }}/>`
+
+stories.add('Empty 空状态', () => (
+    <div className='story_wrapper'>
+        <h2>何时使用</h2>
+        <p>{`当目前没有数据时，用于显式的用户提示。初始化场景时的引导创建流程`}</p>
+        <h2>1、使用默认空状态</h2>
+        <ExampleContainer otherDependencies={otherDependencies} code={basicEmpty} functionCode={basicFunctionCode} hasCodeSandBox={true}>
+            <Empty />
+        </ExampleContainer>
+        <h2>2、使用灰色空状态</h2>
+        <ExampleContainer otherDependencies={otherDependencies} code={basicGreyEmpty} functionCode={basicFunctionCode} hasCodeSandBox={true}>
+            <Empty type="grey" />
+        </ExampleContainer>
+        <h2>3、使用自定义图片</h2>
+        <ExampleContainer otherDependencies={otherDependencies} code={customizeImage} functionCode={basicFunctionCode} hasCodeSandBox={true}>
+            <Empty image="https://user-images.githubusercontent.com/38368040/195246598-5adf8985-3f78-48b1-8116-bc4d78982df8.jpeg" />
+        </ExampleContainer>
+        <h2>4、更多配置</h2>
+        <ExampleContainer otherDependencies={otherDependencies} code={moreSettingImage} functionCode={basicFunctionCode} hasCodeSandBox={true}>
+            <Empty description="自定义的文案" imageStyle={{ height: 60 }}/>
+        </ExampleContainer>
+    </div>
+), {
+    info: {
+        text: `
+            代码示例：
+            ~~~js
+            <p style={style}>1、使用默认空状态</p>
+            <Empty />
+
+            <p style={style}>2、使用灰色空状态</p>
+            <Empty type="grey" />
+
+            <p style={style}>3、使用自定义图片</p>
+            <Empty image="https://user-images.githubusercontent.com/38368040/195246598-5adf8985-3f78-48b1-8116-bc4d78982df8.jpeg" />
+
+            <p style={style}>4、更多配置</p>
+            <Empty description="自定义的文案" imageStyle={{ height: 60 }}/>
+            ~~~
+        `,
+        TableComponent: () => PropsTable({ propDefinitions })
+    }
+});

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) {