feat(statustag): support statusTag without icon (#523)

* feat(statustag): support statusTag without icon

* feat(statustag): support custom style

Author: LuckyFBB

src/statusTag/__tests__/index.test.tsx

@@ -55,4 +55,9 @@ describe('test StatusTag suite', () => {
         const loadingWarper = container.querySelector(`.ant-spin-spinning`)!;
         expect(loadingWarper).toBeInTheDocument();
     });
+    test('should render StatusTag no icon', () => {
+        const { container } = render(<StatusTag icon={false}>自定义文案</StatusTag>);
+        const loadingWarper = container.querySelector(`.${prefixCls}--icon`)!;
+        expect(loadingWarper).not.toBeInTheDocument();
+    });
 });

src/statusTag/demos/noIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Space } from 'antd';
+import { StatusTag } from 'dt-react-component';
+
+export default () => {
+    const presets = ['blue', 'yellow', 'green', 'gray', 'red', 'purple', 'cyan', 'pink'];
+
+    return (
+        <Space direction="vertical">
+            {presets.map((preset) => (
+                <StatusTag key={preset} type="fill" color={preset} icon={false}>
+                    {preset}
+                </StatusTag>
+            ))}
+        </Space>
+    );
+};

src/statusTag/index.md

@@ -19,7 +19,8 @@ StatusTag 组件作用于任务运行状态效果展示
 <code src="./demos/basic.tsx" description="内置6种不同的`color`，三种类型`default | outline | fill`，同时我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">基础使用</code>
 <code src="./demos/status.tsx" description="用于表示状态的小圆点">状态点</code>
 <code src="./demos/loading.tsx" description="通过设置 `loading` 可以设置加载中的状态标签">加载中</code>
-<code src="./demos/icon.tsx" description="可以通过`icon`自定义图标">加载中</code>
+<code src="./demos/icon.tsx" description="可以通过`icon`自定义图标">自定义图标</code>
+<code src="./demos/noIcon.tsx" description="icon设置为除undefined之外假值等不展示图标">不展示图标</code>
 
 ## API
 

src/statusTag/index.tsx

@@ -70,10 +70,13 @@ const StatusTag: React.FC<IStatusTagProps> = function StatusTag(props) {
         color = 'green',
         loading = false,
         background,
+        style,
         ...other
     } = props;
     const prefixCls = 'dtc-statusTag';
 
+    const showDefaultIcon = icon === undefined;
+
     const classes = classNames(`${prefixCls}`, className, {
         [`${prefixCls}--border`]: type === 'outline',
         [`${prefixCls}--fill`]: type === 'fill',
@@ -100,13 +103,19 @@ const StatusTag: React.FC<IStatusTagProps> = function StatusTag(props) {
     };
 
     return (
-        <div {...other} className={classes} style={tagStyle}>
+        <div {...other} className={classes} style={{ ...tagStyle, ...style }}>
             {loading ? (
-                <Spin spinning indicator={<LoadingOutlined />} size="small" />
+                <Spin
+                    spinning
+                    indicator={<LoadingOutlined className={`${prefixCls}__icon`} />}
+                    size="small"
+                />
             ) : (
-                <div className={`${prefixCls}__icon`}>
-                    <span {...getIconStyleAndClass()}>{icon ?? <></>}</span>
-                </div>
+                (icon || showDefaultIcon) && (
+                    <div className={`${prefixCls}__icon`}>
+                        <span {...getIconStyleAndClass()}>{icon ?? <></>}</span>
+                    </div>
+                )
             )}
             <span className={`${prefixCls}__text`}>{props.children}</span>
         </div>

src/statusTag/style.scss

@@ -58,6 +58,7 @@ $colors: (
         display: flex;
         align-items: center;
         font-size: 16px;
+        margin-right: 8px;
         &--default {
             display: inline-block;
             width: 6px;
@@ -68,7 +69,6 @@ $colors: (
     &__text {
         font-size: 12px;
         font-weight: 400;
-        margin-left: 8px;
         line-height: 22px;
         white-space: nowrap;
     }