refactor: update link display logic in tooltip

affects: @gio-design/components, website
growingio · Jul 21, 2020 · fc6b207 · fc6b207
1 parent e220f5c
commit fc6b207
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/packages/components/src/components/tooltip/index.tsx b/packages/components/src/components/tooltip/index.tsx
@@ -21,9 +21,9 @@ const Tooltip = (props: TooltipProps) => {
   const defaultOverlay = () => (
     <>
       <span className={`${prefixCls}-inner-title`}>{title}</span>
-      {tooltipLink && (
+      {tooltipLink?.link && (
         <Link component='a' to={tooltipLink.link}>
-          {tooltipLink.name}
+          {tooltipLink.name || tooltipLink.link}
         </Link>
       )}
     </>

diff --git a/packages/components/src/components/tooltip/interface.ts b/packages/components/src/components/tooltip/interface.ts
@@ -2,7 +2,7 @@ import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 
 export type ReactRender = () => React.ReactNode;
 export interface TooltipLink {
-  name: string;
+  name?: string;
   link: string;
 }
 export interface TooltipProps extends Partial<RcTooltipProps> {

diff --git a/packages/website/src/components/basic/tooltip/demo/link.tsx b/packages/website/src/components/basic/tooltip/demo/link.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Tooltip } from '@gio-design/components';
+import '@gio-design/components/es/components/tooltip/style/index.css';
+
+export default () => (
+  <>
+    <Tooltip
+      title="这里是提示文案。"
+      tooltipLink={{ name: '点击这里', link: 'www.growingio.com' }}
+    >
+      <span className="tooltipSpan" style={{ margin: '0 10px' }}>
+        TopLeft
+      </span>
+    </Tooltip>
+    <Tooltip
+      title="这里是提示文案。"
+      tooltipLink={{ link: 'www.growingio.com' }}
+    >
+      <span className="tooltipSpan" style={{ margin: '0 10px' }}>
+        TopLeft
+      </span>
+    </Tooltip>
+    <Tooltip title="这里是提示文案。" tooltipLink={{ name: '点击这里' }}>
+      <span className="tooltipSpan" style={{ margin: '0 10px' }}>
+        TopLeft
+      </span>
+    </Tooltip>
+  </>
+);
diff --git a/packages/website/src/components/basic/tooltip/index.zh-CN.md b/packages/website/src/components/basic/tooltip/index.zh-CN.md
@@ -17,21 +17,20 @@ group:
 
 <code src='./demo/base.tsx' title='位置' desc='位置有12个方向' >
 <code src='./demo/maxLength.tsx' title='多行' desc='最大宽度为500px，超出换行。'  >
+<code src='./demo/link.tsx' title='链接' desc='支持设置提示尾部链接，其中name字段可缺省。缺省name字段将直接显示链接，缺省link链接不显示。'  >
 
 ## 参数说明
 
-###
-
-| 参数                     | 说明                                                        | 类型                                   | 默认值                |
-| ------------------------ | ----------------------------------------------------------- | -------------------------------------- | --------------------- |
-| **title**                | 提示文字                                                    | string \| ReactNode \| () => ReactNode |                       |
-| **tooltipLink**          | 设置头像的链接以及链接的文字                                | { name: string, link: string }         |                       |
-| **getPopupContainer**    | 浮层渲染父节点，默认渲染到 body 上                          | function(triggerNode)                  | `() => document.body` |
-| **overlayClassName**     | 添加 className                                              | string                                 | `''`                  |
-| **placement**            | 气泡框位置                                                  | string                                 | `'top'`               |
-| **trigger**              | 触发行为，可选 hover,focus,click,contextMenu                | string\|string[]                       | `hover`               |
-| **visible**              | 用于手动控制浮层显隐                                        | boolean                                | `false`               |
-| **onVisibleChange**      | 显示隐藏的回调                                              | (visible) => void                      |                       |
-| **destroyTooltipOnHide** | 关闭后是否销毁 Tooltip，当 keepParent 为 false 时销毁父容器 | boolean\|{ keepParent?: boolean }      | `false`               |
+| 参数                     | 说明                                                                                                                                           | 类型                                   | 默认值                |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------------- |
+| **title**                | 提示文字                                                                                                                                       | string \| ReactNode \| () => ReactNode |                       |
+| **tooltipLink**          | 设置头像的链接以及链接的文字                                                                                                                   | { name?: string, link: string }        |                       |
+| **getPopupContainer**    | 浮层渲染父节点，默认渲染到 body 上                                                                                                             | function(triggerNode)                  | `() => document.body` |
+| **overlayClassName**     | 添加 className                                                                                                                                 | string                                 | `''`                  |
+| **placement**            | 气泡框位置, 可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string                                 | `'top'`               |
+| **trigger**              | 触发行为，可选 hover,focus,click,contextMenu                                                                                                   | string\|string[]                       | `hover`               |
+| **visible**              | 用于手动控制浮层显隐                                                                                                                           | boolean                                | `false`               |
+| **onVisibleChange**      | 显示隐藏的回调                                                                                                                                 | (visible) => void                      |                       |
+| **destroyTooltipOnHide** | 关闭后是否销毁 Tooltip，当 keepParent 为 false 时销毁父容器                                                                                    | boolean\|{ keepParent?: boolean }      | `false`               |
 
 更多参数请参考 [rc-tooltip](https://github.com/react-component/tooltip)