feat: #337 add statusTag loading (#341)

* feat: #337 add statusTag loading

* fix: statusTag unit test

* refactor: optimized statusTag loading

Author: kongshan-zhuyu

src/statusTag/__tests__/index.test.tsx

@@ -15,16 +15,21 @@ describe('test StatusTag suite', () => {
     });
     test('should render StatusTag render correct type', () => {
         const { container } = render(<StatusTag type="run">完成</StatusTag>);
-        expect(container.firstChild!.firstChild).toHaveClass(`${prefixCls}__run`);
+        expect(container.querySelector(`.${prefixCls}__run`)).toBeInTheDocument();
     });
     test('should render StatusTag render correct color', () => {
         const { container } = render(<StatusTag color="#2177b8">完成</StatusTag>);
-        const textWapper = container.firstChild!.firstChild;
+        const textWapper = container.querySelector(`.${prefixCls}__default`);
         expect(textWapper).toHaveStyle({ background: '#2177b8' });
     });
     test('should render StatusTag render correct text', () => {
         const { container } = render(<StatusTag>自定义文案</StatusTag>);
         const textWapper = container.querySelector(`.${prefixCls}__text`)!;
         expect(textWapper.innerHTML).toEqual('自定义文案');
     });
+    test('should render StatusTag loading', () => {
+        const { container } = render(<StatusTag loading>自定义文案</StatusTag>);
+        const loadingWapper = container.querySelector(`.ant-spin-spinning`)!;
+        expect(loadingWapper).toBeInTheDocument();
+    });
 });

src/statusTag/demos/loading.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Space } from 'antd';
+import { StatusTag } from 'dt-react-component';
+
+export default () => {
+    return (
+        <Space direction="vertical">
+            <StatusTag type="success" showBorder={false} loading>
+                成功
+            </StatusTag>
+            <StatusTag type="run" loading>
+                运行中
+            </StatusTag>
+        </Space>
+    );
+};

src/statusTag/index.md

@@ -18,8 +18,9 @@ StatusTag 组件作用于任务运行状态效果展示
 
 <code src="./demos/basic.tsx" description="内置五种不同的 `type` ">基础使用</code>
 <code src="./demos/status.tsx" description="用于表示状态的小圆点">状态点</code>
-<code src="./demos/colorful.tsx" description="我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">自定义状态</code>
 <code src="./demos/border.tsx" description="通过设置 `showBorder={false}` 可以隐藏外边框，默认为存在外边框">外边框</code>
+<code src="./demos/colorful.tsx" description="我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">自定义状态</code>
+<code src="./demos/loading.tsx" description="通过设置 `loading` 可以设置加载中的状态标签">加载中</code>
 
 ## API
 
@@ -31,3 +32,4 @@ StatusTag 组件作用于任务运行状态效果展示
 | showBorder | 是否展示外面的 border                                    | `boolean`                                                 | `true`      |
 | color      | 自定义颜色(当 type 所支持的颜色不满足时可用，优先级更高) | `string`                                                  | -           |
 | onClick    | 点击事件                                                 | `() => void`                                              | -           |
+| loading    | 设置状态标签载入状态                                     | `boolean`                                                 | `false`     |

src/statusTag/index.tsx

@@ -1,4 +1,6 @@
 import React, { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import { Spin } from 'antd';
 import classNames from 'classnames';
 import './style.scss';
 
@@ -9,12 +11,20 @@ export interface IStatusTagProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     showBorder?: boolean;
     color?: string;
+    loading?: boolean;
     children?: ReactNode;
     onClick?: () => void;
 }
 
 const StatusTag: React.FC<IStatusTagProps> = function StatusTag(props) {
-    const { className, type = 'success', showBorder = true, color, ...other } = props;
+    const {
+        className,
+        type = 'success',
+        showBorder = true,
+        color,
+        loading = false,
+        ...other
+    } = props;
     const prefixCls = 'dtc-statusTag';
 
     const classes = classNames(`${prefixCls}`, className, {
@@ -27,7 +37,11 @@ const StatusTag: React.FC<IStatusTagProps> = function StatusTag(props) {
 
     return (
         <div {...other} className={classes}>
-            <div className={statusClass} style={style} />
+            {loading ? (
+                <Spin spinning indicator={<LoadingOutlined />} size="small" />
+            ) : (
+                <div className={statusClass} style={style} />
+            )}
             <span className={`${prefixCls}__text`}>{props.children}</span>
         </div>
     );