feat(tinytag): replace svg to render (#517)

* feat(tinytag): replace svg to render

* test(tinytag): update tinyTag snapshots

* feat(tinytag): remove default font-family && currentColor in svg

* fix(tinytag): compute padding error && change height 15px

* feat(tinytag): add useSvgWidth

* feat(tinytag): update useSvgWidth hooks && change ref binding dom

---------

Co-authored-by: beier <[email protected]>

Author: shiqiWang0

src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap

@@ -5,7 +5,36 @@ exports[`test StatusTag should match snapshot 1`] = `
   <span
     class="dtc-tinyTag dtc-test"
   >
-    完成
+    <svg
+      fill="none"
+      height="15"
+      viewBox="0 0 8 15"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        height="14"
+        rx="1.5"
+        stroke="currentColor"
+        stroke-linejoin="bevel"
+        width="7"
+        x="0.5"
+        y="0.5"
+      />
+      <text
+        fill="currentColor"
+        font-size="10"
+        letter-spacing="0px"
+        xml:space="preserve"
+      >
+        <tspan
+          x="4"
+          y="11.1"
+        >
+          完成
+        </tspan>
+      </text>
+    </svg>
   </span>
 </DocumentFragment>
 `;

src/tinyTag/demos/basic.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { Space } from 'antd';
 import { TinyTag } from 'dt-react-component';
 
+import './style.scss';
+
 export default () => {
     return (
         <Space size={6}>
-            <TinyTag value="袋鼠云" title="袋鼠云" />
-            <TinyTag color="#d1d1d1" value="数据驱动" role="tag" />
-            <TinyTag color="#d56161" value="UED" />
+            <TinyTag value="袋鼠云" />
+            <TinyTag className="data-tag" value="数据驱动" />
+            <TinyTag className="ued-tag" value="UED" />
         </Space>
     );
 };

src/tinyTag/demos/style.scss

@@ -0,0 +1,10 @@
+.data-tag {
+    color: #D1D1D1;
+    &:hover {
+        color: #D56161;
+    }
+}
+
+.ued-tag {
+    color: #D56161;
+}

src/tinyTag/index.md

@@ -19,8 +19,7 @@ TinyTag 组件通常用于在某些文案后面，用于标识当前行数据的
 
 ### TinyTag
 
-| 参数      | 说明       | 类型     | 默认值    |
-| --------- | ---------- | -------- | --------- |
-| value     | 标签文案   | `string` |           |
-| color     | 颜色       | `string` | `#1D78FF` |
-| className | class 名称 | `string` |           |
+| 参数      | 说明       | 类型     | 默认值 |
+| --------- | ---------- | -------- | ------ |
+| value     | 标签文案   | `string` |        |
+| className | class 名称 | `string` |        |

src/tinyTag/index.tsx

@@ -1,21 +1,68 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import classNames from 'classnames';
 
 import './style.scss';
 
+type UseSvgRef = (element: SVGTextElement) => void;
+type UseSvgWidthResult = [UseSvgRef, number, number];
+
 interface ITinyTag extends React.HTMLAttributes<HTMLSpanElement> {
-    value?: string;
-    color?: string;
+    value: string;
 }
 
-export default function TinyTag({ color, value, className, ...restProps }: ITinyTag) {
+const useSvgWidth = (): UseSvgWidthResult => {
+    const [element, ref] = useState<SVGTextElement | null>(null);
+    const [svgWidth, setSvgWidth] = useState(0);
+    const [rectWidth, setRectWidth] = useState(0);
+
+    const getWidth = useCallback(() => {
+        if (!element) return;
+        const paddingWidth = 8;
+        const textWidth = Math.round(element.getBoundingClientRect()?.width);
+        const svgWidth = textWidth + paddingWidth;
+        setSvgWidth(svgWidth);
+        setRectWidth(Math.max(svgWidth - 1, 0));
+    }, [element]);
+
+    useEffect(() => {
+        getWidth();
+    }, [element]);
+
+    return [ref, svgWidth, rectWidth];
+};
+
+export default function TinyTag({ value, className, ...restProps }: ITinyTag) {
+    const [ref, svgWidth, rectWidth] = useSvgWidth();
     return (
-        <span
-            className={classNames('dtc-tinyTag', className)}
-            style={{ borderColor: color, color }}
-            {...restProps}
-        >
-            {value}
+        <span className={classNames('dtc-tinyTag', className)} {...restProps}>
+            <svg
+                width={svgWidth}
+                height="15"
+                viewBox={`0 0 ${svgWidth} 15`}
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <rect
+                    x="0.5"
+                    y="0.5"
+                    width={rectWidth}
+                    height="14"
+                    rx="1.5"
+                    stroke="currentColor"
+                    strokeLinejoin="bevel"
+                />
+                <text
+                    ref={ref}
+                    fill="currentColor"
+                    xmlSpace="preserve"
+                    fontSize="10"
+                    letterSpacing="0px"
+                >
+                    <tspan x="4" y="11.1">
+                        {value}
+                    </tspan>
+                </text>
+            </svg>
         </span>
     );
 }

src/tinyTag/style.scss

@@ -1,16 +1,5 @@
-$primaryColor: #1D78FF;
-$factor: 0.83;
-
 .dtc-tinyTag {
-    border-radius: 2px;
-    border: 1px solid $primaryColor;
-    font-weight: 400;
-    color: $primaryColor;
-    line-height: calc(15px / $factor);
-    padding: 0 calc(4px / $factor);
-    font-size: 12px;
-    display: inline-block;
-    transform: scale($factor);
     user-select: none;
-    white-space: nowrap;
+    display: inline-block;
+    transform: translateY(3px);
 }