Merge branch 'master' into 5.3.2

ant-design · Dec 11, 2024 · 0048960 · 0048960
2 parents cb43664 + 4da9dcd
commit 0048960
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git a/components/tooltip/PropsType.tsx b/components/tooltip/PropsType.tsx
@@ -39,6 +39,7 @@ export type TooltipProps = {
   content: ReactNode
   style?: StyleProp<ViewStyle>
   styles?: Partial<TooltipStyle>
+  crossOffset?: CrossOffset
 }
 
 export type TooltipRef = {
@@ -61,3 +62,8 @@ export type TooltipMenuProps = Omit<TooltipProps, 'content'> & {
   maxCount?: number
   onAction?: (item: Action) => void
 }
+
+export type CrossOffset = {
+  top: number
+  left: number
+}
diff --git a/components/tooltip/Tooltip.tsx b/components/tooltip/Tooltip.tsx
@@ -24,7 +24,7 @@ import AntmView from '../view'
 import useClickAway from '../_util/hooks/useClickAway'
 import useScroll from '../_util/hooks/useScroll'
 import Portal from '../portal'
-import { Placement, TooltipProps, TooltipRef } from './PropsType'
+import { CrossOffset, Placement, TooltipProps, TooltipRef } from './PropsType'
 import Wrapper from './Wrapper'
 import { normalizePlacement } from './normalize-placement'
 import TooltipStyles from './style'
@@ -34,6 +34,7 @@ const defaultProps = {
   defaultVisible: false,
   trigger: 'onPress',
   mode: 'light',
+  crossOffset: { top: StatusBar.currentHeight, left: 0 } as CrossOffset,
 }
 
 const InternalTooltip: React.ForwardRefRenderFunction<
@@ -44,6 +45,7 @@ const InternalTooltip: React.ForwardRefRenderFunction<
 
   const {
     mode,
+    crossOffset,
     styles,
     visible: pvisible,
     defaultVisible,
@@ -102,7 +104,6 @@ const InternalTooltip: React.ForwardRefRenderFunction<
   useEffect(update, [update, floatingStyles, content])
   // Replace `useLayoutEffect(update)` to improve performance
   useScroll(scrollProps.onScroll)
-
   const [{ stopPropagation }] = useClickAway(() => {
     setVisible(false)
   })
@@ -174,7 +175,10 @@ const InternalTooltip: React.ForwardRefRenderFunction<
         <Portal>
           <View
             ref={refs.offsetParent}
-            style={{ marginTop: StatusBar.currentHeight }}
+            style={{
+              marginTop: crossOffset.top,
+              marginLeft: crossOffset.left,
+            }}
             collapsable={false}>
             <View
               ref={refs.setFloating}

diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
@@ -18,6 +18,7 @@ If set mask prop, it is recommended to exit by clicking on any of the mask layer
 | content | The content of the Tooltip | `React.ReactNode` | - |
 | defaultVisible | Whether to show or hide by default | `boolean` | `false` |
 | mode | Set bright color mode or black mode | `'light' | 'dark'` | `'light'` |
+| crossOffset | Set the offset of the pop-up window position; Top: Additional offset applied along the main axis between the element and its triggering element. Left: Additional offset applied along the horizontal axis between the element and its triggering element.     | `{ top: number, left: number }`      | `'{ top: StatusBar.currentHeight, left: 0 } '` |
 | onVisibleChange | Callback when the visible prop is changed | `(visible: boolean) => void` | - |
 | placement | The position of the Tooltip | `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'` | `'top'` |
 | styles | Semantic DOM style | [TooltipStyle](#tooltipstyle-interface) | - |
@@ -95,7 +96,7 @@ const element = <Button>press</Button>
 <Tooltip
   content="Hello World"
   defaultVisible>
-  {element} // ❌ DO NOT USE       
+  {element} // ❌ DO NOT USE
   <Button>press</Button> // ✅ YES
 </Tooltip>
 ```
@@ -115,4 +116,4 @@ const CustomButton = (props: {
   defaultVisible>
   <CustomButton>press<CustomButton>
 </Tooltip>
-```
+```
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
@@ -13,17 +13,18 @@ version: 5.2.1
 
 ### Tooltip
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| children | 触发 `Tooltip` 的元素 | `React.ReactElement` | - |
-| content | 弹出内容 | `React.ReactNode` | - |
-| defaultVisible | 默认是否显隐 | `boolean` | `false` |
-| mode | 设置亮色模式或者黑色模式 | `'light' | 'dark'` | `'light'` |
-| onVisibleChange | 显示隐藏的回调 | `(visible: boolean) => void` | - |
-| placement | 气泡框位置 | `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'` | `'top'` |
-| styles | 语义化结构 style | [TooltipStyle](/#tooltipstyle-语义化样式) | - |
-| trigger | 触发方式 | `'onPress'` | - |
-| visible | 受控模式下，是否展示弹出内容 | `boolean` | - |
+| 属性 | 说明               | 类型                                   | 默认值 |
+| --- |------------------|--------------------------------------| --- |
+| children | 触发 `Tooltip` 的元素 | `React.ReactElement`                 | - |
+| content | 弹出内容             | `React.ReactNode`                    | - |
+| defaultVisible | 默认是否显隐           | `boolean`                            | `false` |
+| mode | 设置亮色模式或者黑色模式     | `'light'                             | 'dark'` | `'light'` |
+| crossOffset | 设置弹窗位置的偏移量；top: 沿元素和其触发元素之间的主轴应用的附加偏移。left: 沿元素和其触发元素之间的横轴应用的附加偏移。      | `{ top: number, left: number }`      | `'{ top: StatusBar.currentHeight, left: 0 } '` |
+| onVisibleChange | 显示隐藏的回调          | `(visible: boolean) => void`         | - |
+| placement | 气泡框位置            | `'top'                               | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'` | `'top'` |
+| styles | 语义化结构 style      | [TooltipStyle](/#tooltipstyle-语义化样式) | - |
+| trigger | 触发方式             | `'onPress'`                          | - |
+| visible | 受控模式下，是否展示弹出内容   | `boolean`                            | - |
 
 ### Ref
 
@@ -96,7 +97,7 @@ const element = <Button>press</Button>
 <Tooltip
   content="Hello World"
   defaultVisible>
-  {element} // ❌ DO NOT USE       
+  {element} // ❌ DO NOT USE
   <Button>press</Button> // ✅ YES
 </Tooltip>
 ```
@@ -116,4 +117,4 @@ const CustomButton = (props: {
   defaultVisible>
   <CustomButton>press<CustomButton>
 </Tooltip>
-```
+```