Merge pull request #2683 from XiaoMi/feature/2678(tag)

feat(tag): 增加tooltipProps参数 (#2678)
XiaoMi · Dec 1, 2023 · 0f0c985 · 0f0c985
2 parents b82e0bf + faa5d6e
commit 0f0c985
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/.changeset/eighty-moons-rest.md b/.changeset/eighty-moons-rest.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(tag): 增加 tooltipProps 参数
diff --git a/.changeset/slow-tables-guess.md b/.changeset/slow-tables-guess.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/tag": minor
+---
+
+feat: 增加 tooltipProps 参数
diff --git a/packages/ui/tag/src/Tag.tsx b/packages/ui/tag/src/Tag.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useMemo, useState, useEffect, useRef } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { CloseOutlined } from '@hi-ui/icons'
 import { __DEV__, invariant } from '@hi-ui/env'
-import { Tooltip } from '@hi-ui/tooltip'
+import { Tooltip, TooltipProps } from '@hi-ui/tooltip'
 import { HiBaseHTMLProps } from '@hi-ui/core'
 
 const _role = 'tag'
@@ -36,6 +36,7 @@ export const Tag = forwardRef<HTMLDivElement | null, TagProps>(
       autoEditable = false,
       maxWidth,
       render = DEFAULT_RENDER,
+      tooltipProps,
       ...rest
     },
     ref
@@ -116,6 +117,7 @@ export const Tag = forwardRef<HTMLDivElement | null, TagProps>(
           ? {
               component: Tooltip,
               componentProps: {
+                ...tooltipProps,
                 title: render(children as React.ReactText),
                 trigger: 'hover',
               },
@@ -124,7 +126,7 @@ export const Tag = forwardRef<HTMLDivElement | null, TagProps>(
               component: React.Fragment,
               componentProps: {},
             },
-      [isShowPopover, children, isInEdit, render]
+      [isShowPopover, isInEdit, tooltipProps, render, children]
     )
 
     if (__DEV__) {
@@ -244,6 +246,11 @@ export interface TagProps extends HiBaseHTMLProps<'div'> {
    * @default 0 代表不限制宽度
    */
   maxWidth?: number
+  /**
+   * Tooltip 组件参数设置
+   * @private
+   */
+  tooltipProps?: Omit<TooltipProps, 'title'>
 }
 
 if (__DEV__) {

diff --git a/packages/ui/tag/stories/max-width.stories.tsx b/packages/ui/tag/stories/max-width.stories.tsx
@@ -14,7 +14,8 @@ export const MaxWidth = () => {
       <h1>Tag MaxWidth</h1>
       <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
         <Tag maxWidth={240}>max 240px (placeholder1 placeholder2 placeholder3 placeholder4)</Tag>
-        <Tag maxWidth={240} closeable>
+        {/* Tooltip 禁用 portal */}
+        <Tag maxWidth={240} closeable tooltipProps={{ disabledPortal: true }}>
           max 240px (placeholder1 placeholder2 placeholder3 placeholder4)
         </Tag>
         <Tag maxWidth={180} editable onEdit={setMaxEditableValue}>