feat(Tooltip): implement afterShow callback

Author: Oupsla

src/App.tsx

@@ -165,6 +165,16 @@ function App() {
           />
         </div>
       </div>
+
+      <div style={{ marginTop: '1rem' }}>
+        <button id="buttonAfterShow">Check the dev console</button>
+        <Tooltip
+          place="bottom"
+          anchorId="buttonAfterShow"
+          afterShow={() => console.log('Hello world')}
+          content="Showing tooltip and calling afterShow method"
+        />
+      </div>
     </main>
   )
 }

src/components/Tooltip/Tooltip.tsx

@@ -27,6 +27,7 @@ const Tooltip = ({
   clickable = false,
   style: externalStyles,
   position,
+  afterShow,
   // props handled by controller
   isHtmlContent = false,
   content,
@@ -52,6 +53,10 @@ const Tooltip = ({
     } else if (isOpen === undefined) {
       setShow(value)
     }
+
+    if (value && afterShow) {
+      afterShow()
+    }
   }
 
   const handleShowTooltipDelayed = () => {

src/components/Tooltip/TooltipTypes.d.ts

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

src/components/TooltipController/TooltipController.tsx

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

src/components/TooltipController/TooltipControllerTypes.d.ts

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