From 1758f73ecd45f046c26694bf22eb2cdf49832c57 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Wed, 8 Apr 2020 07:52:10 +0800
Subject: [PATCH] feat(tooltip): append visible prop to control visible state
 manually

---
 components/tooltip/tooltip-content.tsx |  1 -
 components/tooltip/tooltip.tsx         | 11 +++++++++--
 pages/en-us/components/tooltip.mdx     |  1 +
 pages/zh-cn/components/tooltip.mdx     |  1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/tooltip/tooltip-content.tsx b/components/tooltip/tooltip-content.tsx
index a674959..a9aadbd 100644
--- a/components/tooltip/tooltip-content.tsx
+++ b/components/tooltip/tooltip-content.tsx
@@ -73,7 +73,6 @@ const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
 
   const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation()
-    event.preventDefault()
     event.nativeEvent.stopImmediatePropagation()
   }
 
diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx
index 97c9e9f..a7baa09 100644
--- a/components/tooltip/tooltip.tsx
+++ b/components/tooltip/tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import withDefaults from '../utils/with-defaults'
 import TooltipContent from './tooltip-content'
 import useClickAway from '../utils/use-click-away'
@@ -8,6 +8,7 @@ interface Props {
   text: string | React.ReactNode
   type?: SnippetTypes
   placement?: Placement
+  visible?: boolean
   initialVisible?: boolean
   hideArrow?: boolean
   trigger?: TriggerTypes
@@ -39,7 +40,7 @@ export type TooltipProps = Props & typeof defaultProps & NativeAttrs
 const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   children, initialVisible, text, offset, placement, portalClassName,
   enterDelay, leaveDelay, trigger, type, className, onVisibleChange,
-  hideArrow, ...props
+  hideArrow, visible: customVisible, ...props
 }) => {
   const timer = useRef<number>()
   const ref = useRef<HTMLDivElement>(null)
@@ -74,8 +75,14 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   
   const mouseEventHandler = (next: boolean) => trigger === 'hover' && changeVisible(next)
   const clickEventHandler = () => trigger === 'click' && changeVisible(!visible)
+  
   useClickAway(ref, () => trigger === 'click' && changeVisible(false))
   
+  useEffect(() => {
+    if (customVisible === undefined) return
+    changeVisible(customVisible)
+  }, [customVisible])
+  
   return (
     <div ref={ref} className={`tooltip ${className}`}
       onClick={clickEventHandler}
diff --git a/pages/en-us/components/tooltip.mdx b/pages/en-us/components/tooltip.mdx
index bd50fb7..d58ebcc 100644
--- a/pages/en-us/components/tooltip.mdx
+++ b/pages/en-us/components/tooltip.mdx
@@ -178,6 +178,7 @@ Displays additional information on hover.
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **text** | text of pop-up | `string` `React.ReactNode` | - | - |
+| **visible** | visible or not | `boolean` | - | `false` |
 | **initialVisible** | visible on initial | `boolean` | - | `false` |
 | **hideArrow** | hide arrow icon | `boolean` | - | `false` |
 | **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` |
diff --git a/pages/zh-cn/components/tooltip.mdx b/pages/zh-cn/components/tooltip.mdx
index 3f12164..cd2d26f 100644
--- a/pages/zh-cn/components/tooltip.mdx
+++ b/pages/zh-cn/components/tooltip.mdx
@@ -178,6 +178,7 @@ export const meta = {
 | 属性 | 描述 | 类型 | 推荐值 | 默认
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **text** | 弹出框文字 | `string` `React.ReactNode` | - | - |
+| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` |
 | **initialVisible** | 初始是否可见 | `boolean` | - | `false` |
 | **hideArrow** | 隐藏箭头 | `boolean` | - | `false` |
 | **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` |