From 99b5fd30ed42b3f7933c9cd1984b4bdab7656c13 Mon Sep 17 00:00:00 2001 From: beier Date: Mon, 11 Nov 2024 10:25:12 +0800 Subject: [PATCH 1/6] feat(tinytag): replace svg to render --- src/tinyTag/index.tsx | 58 ++++++++++++++++++++++++++++++++++++------ src/tinyTag/style.scss | 15 ++--------- 2 files changed, 52 insertions(+), 21 deletions(-) diff --git a/src/tinyTag/index.tsx b/src/tinyTag/index.tsx index 04f49a9b2..eaa49a0b5 100644 --- a/src/tinyTag/index.tsx +++ b/src/tinyTag/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import classNames from 'classnames'; import './style.scss'; @@ -8,14 +8,56 @@ interface ITinyTag extends React.HTMLAttributes { color?: string; } -export default function TinyTag({ color, value, className, ...restProps }: ITinyTag) { +const DEFAULT_COLOR = '#1D78FF'; + +export default function TinyTag({ + color = DEFAULT_COLOR, + value, + className, + ...restProps +}: ITinyTag) { + const domRef = useRef(null); + const [width, setWidth] = useState(0); + + const getTextWidth = () => { + const text = domRef?.current?.getElementsByTagName('text')?.[0]; + const paddingWidth = 9; + if (!text) return; + const widthSvg = text.getBoundingClientRect()?.width + paddingWidth; + setWidth(widthSvg); + }; + useEffect(() => { + getTextWidth(); + }, []); return ( - - {value} + + + + + + {value} + + + ); } diff --git a/src/tinyTag/style.scss b/src/tinyTag/style.scss index 639dc8cd8..690d5f404 100644 --- a/src/tinyTag/style.scss +++ b/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); } From 745940a4fa81691ce7fad85fd6f626ff4b4fb4ac Mon Sep 17 00:00:00 2001 From: beier Date: Mon, 11 Nov 2024 10:53:59 +0800 Subject: [PATCH 2/6] test(tinytag): update tinyTag snapshots --- .../__snapshots__/tinyTag.test.tsx.snap | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap b/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap index 43b7be2ff..d139f958e 100644 --- a/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap +++ b/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap @@ -5,7 +5,36 @@ exports[`test StatusTag should match snapshot 1`] = ` - 完成 + + + + + 完成 + + + `; From 5ed4de02c5c0f57762905e01b79b49a1361438ff Mon Sep 17 00:00:00 2001 From: beier Date: Mon, 11 Nov 2024 19:20:13 +0800 Subject: [PATCH 3/6] feat(tinytag): remove default font-family && currentColor in svg --- .../__snapshots__/tinyTag.test.tsx.snap | 5 ++--- src/tinyTag/demos/basic.tsx | 8 ++++--- src/tinyTag/demos/style.scss | 10 +++++++++ src/tinyTag/index.md | 9 ++++---- src/tinyTag/index.tsx | 22 ++++--------------- 5 files changed, 25 insertions(+), 29 deletions(-) create mode 100644 src/tinyTag/demos/style.scss diff --git a/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap b/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap index d139f958e..265267524 100644 --- a/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap +++ b/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap @@ -14,15 +14,14 @@ exports[`test StatusTag should match snapshot 1`] = ` { return ( - - - + + + ); }; diff --git a/src/tinyTag/demos/style.scss b/src/tinyTag/demos/style.scss new file mode 100644 index 000000000..618f278ef --- /dev/null +++ b/src/tinyTag/demos/style.scss @@ -0,0 +1,10 @@ +.data-tag { + color: #D1D1D1; + &:hover { + color: #D56161; + } +} + +.ued-tag { + color: #D56161; +} diff --git a/src/tinyTag/index.md b/src/tinyTag/index.md index 9dd5d8535..2efa4256f 100644 --- a/src/tinyTag/index.md +++ b/src/tinyTag/index.md @@ -19,8 +19,7 @@ TinyTag 组件通常用于在某些文案后面，用于标识当前行数据的 ### TinyTag -| 参数 | 说明 | 类型 | 默认值 | -| --------- | ---------- | -------- | --------- | -| value | 标签文案 | `string` | | -| color | 颜色 | `string` | `#1D78FF` | -| className | class 名称 | `string` | | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ---------- | -------- | ------ | +| value | 标签文案 | `string` | | +| className | class 名称 | `string` | | diff --git a/src/tinyTag/index.tsx b/src/tinyTag/index.tsx index eaa49a0b5..1ea669a94 100644 --- a/src/tinyTag/index.tsx +++ b/src/tinyTag/index.tsx @@ -4,18 +4,10 @@ import classNames from 'classnames'; import './style.scss'; interface ITinyTag extends React.HTMLAttributes { - value?: string; - color?: string; + value: string; } -const DEFAULT_COLOR = '#1D78FF'; - -export default function TinyTag({ - color = DEFAULT_COLOR, - value, - className, - ...restProps -}: ITinyTag) { +export default function TinyTag({ value, className, ...restProps }: ITinyTag) { const domRef = useRef(null); const [width, setWidth] = useState(0); @@ -43,16 +35,10 @@ export default function TinyTag({ width={width - 1} height="14" rx="1.5" - stroke={color} + stroke="currentColor" strokeLinejoin="bevel" /> - + {value} From 0e672a214637c76de289b15457feeedf5e7917ca Mon Sep 17 00:00:00 2001 From: beier Date: Wed, 13 Nov 2024 17:24:28 +0800 Subject: [PATCH 4/6] fix(tinytag): compute padding error && change height 15px --- .../__tests__/__snapshots__/tinyTag.test.tsx.snap | 11 ++++++----- src/tinyTag/index.tsx | 14 ++++++++------ 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap b/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap index 265267524..edfec6d98 100644 --- a/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap +++ b/src/tinyTag/__tests__/__snapshots__/tinyTag.test.tsx.snap @@ -7,8 +7,9 @@ exports[`test StatusTag should match snapshot 1`] = ` > 完成 diff --git a/src/tinyTag/index.tsx b/src/tinyTag/index.tsx index 1ea669a94..a7bda2ab0 100644 --- a/src/tinyTag/index.tsx +++ b/src/tinyTag/index.tsx @@ -13,9 +13,10 @@ export default function TinyTag({ value, className, ...restProps }: ITinyTag) { const getTextWidth = () => { const text = domRef?.current?.getElementsByTagName('text')?.[0]; - const paddingWidth = 9; + const paddingWidth = 8; if (!text) return; - const widthSvg = text.getBoundingClientRect()?.width + paddingWidth; + const textWidth = Math.round(text.getBoundingClientRect()?.width); + const widthSvg = textWidth + paddingWidth; setWidth(widthSvg); }; useEffect(() => { @@ -24,14 +25,15 @@ export default function TinyTag({ value, className, ...restProps }: ITinyTag) { return ( - + {value} From ad66bf1495b81d0b475f8377b0e7fec15beb3d52 Mon Sep 17 00:00:00 2001 From: beier Date: Wed, 13 Nov 2024 19:40:51 +0800 Subject: [PATCH 5/6] feat(tinytag): add useSvgWidth --- src/tinyTag/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/tinyTag/index.tsx b/src/tinyTag/index.tsx index a7bda2ab0..53d70560c 100644 --- a/src/tinyTag/index.tsx +++ b/src/tinyTag/index.tsx @@ -7,21 +7,28 @@ interface ITinyTag extends React.HTMLAttributes { value: string; } -export default function TinyTag({ value, className, ...restProps }: ITinyTag) { - const domRef = useRef(null); +const useSvgWidth = (domRef: React.RefObject) => { const [width, setWidth] = useState(0); const getTextWidth = () => { const text = domRef?.current?.getElementsByTagName('text')?.[0]; - const paddingWidth = 8; if (!text) return; + const paddingWidth = 8; const textWidth = Math.round(text.getBoundingClientRect()?.width); const widthSvg = textWidth + paddingWidth; setWidth(widthSvg); }; + useEffect(() => { getTextWidth(); }, []); + + return { width }; +}; + +export default function TinyTag({ value, className, ...restProps }: ITinyTag) { + const domRef = useRef(null); + const { width } = useSvgWidth(domRef); return ( Date: Thu, 14 Nov 2024 11:45:48 +0800 Subject: [PATCH 6/6] feat(tinytag): update useSvgWidth hooks && change ref binding dom --- src/tinyTag/index.tsx | 50 ++++++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/src/tinyTag/index.tsx b/src/tinyTag/index.tsx index 53d70560c..8e8f3ac15 100644 --- a/src/tinyTag/index.tsx +++ b/src/tinyTag/index.tsx @@ -1,53 +1,63 @@ -import React, { useEffect, useRef, useState } 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 { value: string; } -const useSvgWidth = (domRef: React.RefObject) => { - const [width, setWidth] = useState(0); +const useSvgWidth = (): UseSvgWidthResult => { + const [element, ref] = useState(null); + const [svgWidth, setSvgWidth] = useState(0); + const [rectWidth, setRectWidth] = useState(0); - const getTextWidth = () => { - const text = domRef?.current?.getElementsByTagName('text')?.[0]; - if (!text) return; + const getWidth = useCallback(() => { + if (!element) return; const paddingWidth = 8; - const textWidth = Math.round(text.getBoundingClientRect()?.width); - const widthSvg = textWidth + paddingWidth; - setWidth(widthSvg); - }; + const textWidth = Math.round(element.getBoundingClientRect()?.width); + const svgWidth = textWidth + paddingWidth; + setSvgWidth(svgWidth); + setRectWidth(Math.max(svgWidth - 1, 0)); + }, [element]); useEffect(() => { - getTextWidth(); - }, []); + getWidth(); + }, [element]); - return { width }; + return [ref, svgWidth, rectWidth]; }; export default function TinyTag({ value, className, ...restProps }: ITinyTag) { - const domRef = useRef(null); - const { width } = useSvgWidth(domRef); + const [ref, svgWidth, rectWidth] = useSvgWidth(); return ( - + - + {value}