feat(Tooltip): implement afterHide callback

Author: Oupsla

src/App.tsx

@@ -167,11 +167,14 @@ function App() {
       </div>
 
       <div style={{ marginTop: '1rem' }}>
-        <button id="buttonAfterShow">Check the dev console</button>
+        <button id="buttonCallbacks">Check the dev console</button>
         <Tooltip
           place="bottom"
-          anchorId="buttonAfterShow"
-          afterShow={() => console.log('Hello world')}
+          anchorId="buttonCallbacks"
+          // eslint-disable-next-line no-console
+          afterShow={() => console.log('After show')}
+          // eslint-disable-next-line no-console
+          afterHide={() => console.log('After hide')}
           content="Showing tooltip and calling afterShow method"
         />
       </div>

src/components/Tooltip/Tooltip.tsx

@@ -28,6 +28,7 @@ const Tooltip = ({
   style: externalStyles,
   position,
   afterShow,
+  afterHide,
   // props handled by controller
   isHtmlContent = false,
   content,
@@ -54,9 +55,13 @@ const Tooltip = ({
       setShow(value)
     }
 
-    if (value && afterShow) {
+    // Callbacks
+    if (value === true && afterShow) {
       afterShow()
     }
+    if (value === false && afterHide) {
+      afterHide()
+    }
   }
 
   const handleShowTooltipDelayed = () => {

src/components/Tooltip/TooltipTypes.d.ts

@@ -55,4 +55,5 @@ export interface ITooltip {
   isOpen?: boolean
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
+  afterHide?: () => void
 }

src/components/TooltipController/TooltipController.tsx

@@ -36,6 +36,7 @@ const TooltipController = ({
   isOpen,
   setIsOpen,
   afterShow,
+  afterHide,
 }: ITooltipController) => {
   const [tooltipContent, setTooltipContent] = useState(content || html)
   const [tooltipPlace, setTooltipPlace] = useState(place)
@@ -192,6 +193,7 @@ const TooltipController = ({
     isOpen,
     setIsOpen,
     afterShow,
+    afterHide,
   }
 
   return children ? <Tooltip {...props}>{children}</Tooltip> : <Tooltip {...props} />

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -34,6 +34,7 @@ export interface ITooltipController {
   isOpen?: boolean
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
+  afterHide?: () => void
 }
 
 declare module 'react' {