Feature - Adds click to Tooltip.Hover (#78)

* feat: added click to Tooltip.Hover | added other useful props to Tooltip.Hover * test: added tests to Tooltip.Hover when gets clicked * docs: updated Tooltip.Hover story --------- Co-authored-by: Leandro Pedroso <lpedroso@meudroz.com>
droztech · Aug 11, 2023 · 695df35 · 695df35
1 parent 2f6f0cc
commit 695df35
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 4 deletions.
diff --git a/apps/docs/src/stories/Tooltip/Hover.stories.tsx b/apps/docs/src/stories/Tooltip/Hover.stories.tsx
@@ -23,6 +23,34 @@ const meta: Meta<TooltipHoverProps> = {
       },
       type: { name: 'string', required: false },
     },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Define se o Tooltip deve iniciar aberto ou fechado.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      type: { name: 'boolean', required: false },
+    },
+    delayDuration: {
+      control: 'number',
+      description:
+        'Define o tempo de delay em milissegundos para exibir o conteúdo do Tooltip.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '300' },
+      },
+      type: { name: 'number', required: false },
+    },
+    open: {
+      control: 'boolean',
+      description: 'Define se o conteúdo do Tooltip está visível ou não.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      type: { name: 'boolean', required: false },
+    },
     side: {
       control: { type: 'inline-radio' },
       description:
@@ -37,6 +65,15 @@ const meta: Meta<TooltipHoverProps> = {
       type: { name: 'string', required: false },
     },
 
+    onOpenChange: {
+      control: 'none',
+      description: 'Callback executado quando o estado de `open` é alterado.',
+      table: {
+        type: { summary: 'function' },
+      },
+      type: { name: 'function', required: false },
+    },
+
     /**
      * @deprecated - Deprecated props will be removed in the next major version.
      */
@@ -54,6 +91,9 @@ const meta: Meta<TooltipHoverProps> = {
   args: {
     children: '',
     content: 'Texto do tooltip',
+    defaultOpen: false,
+    delayDuration: 300,
+    open: false,
     side: 'bottom',
   },
   parameters: {

diff --git a/packages/visu/src/__tests__/Tooltip/Hover.test.tsx b/packages/visu/src/__tests__/Tooltip/Hover.test.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@library'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 // Testes limitados por conta do Radix
@@ -49,6 +49,45 @@ describe('TooltipHover tests', () => {
     })
   })
 
+  it('Should render content when trigger gets a click', async () => {
+    render(
+      <Tooltip.Hover content={<span data-testid="content">Text1</span>}>
+        <div data-testid="element">Hello</div>
+      </Tooltip.Hover>,
+    )
+    const element = screen.getByTestId('element')
+    fireEvent.click(element)
+
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip')).toContainHTML(
+        '<span data-testid="content">Text1</span>',
+      )
+    })
+  })
+
+  it('Should execute "onOpenChange" when "open" value changes', async () => {
+    const onOpenChange = jest.fn()
+    console.log(onOpenChange)
+    render(
+      <Tooltip.Hover
+        content={<span data-testid="content">Text1</span>}
+        onOpenChange={onOpenChange}
+      >
+        <div data-testid="element">Hello</div>
+      </Tooltip.Hover>,
+    )
+    const element = screen.getByTestId('element')
+    fireEvent.click(element)
+
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip')).toContainHTML(
+        '<span data-testid="content">Text1</span>',
+      )
+      expect(onOpenChange).toBeCalledTimes(1)
+      expect(onOpenChange).toBeCalledWith(true)
+    })
+  })
+
   /**
    * @deprecated - Teste para uma propriedade deprecated
    */

diff --git a/packages/visu/src/library/Tooltip/Hover.tsx b/packages/visu/src/library/Tooltip/Hover.tsx
@@ -1,13 +1,25 @@
 import * as RadixTooltip from '@radix-ui/react-tooltip'
 import { Position } from '@types'
 import { clsx } from 'clsx'
-import { FC, HTMLAttributes, ReactNode } from 'react'
+import {
+  FC,
+  HTMLAttributes,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 
 export interface TooltipHoverProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
   // Optional because we can't remove `text` until the next major release
   content?: ReactNode
+  defaultOpen?: boolean
+  delayDuration?: number
+  open?: boolean
   side?: Position
+
+  onOpenChange?: (open: boolean) => void
   /**
    * @deprecated Use `content` instead. Will be removed in the next major release
    */
@@ -18,14 +30,41 @@ const TooltipHover: FC<TooltipHoverProps> = ({
   children,
   className,
   content,
+  defaultOpen = false,
+  delayDuration = 300,
+  open = false,
+  onOpenChange,
   side,
   text,
   ...rest
 }) => {
+  const [tooltipOpen, setTooltipOpen] = useState(open)
+
+  const handleOpenChange = useCallback(
+    (value: boolean) => {
+      setTooltipOpen(value)
+      if (onOpenChange) onOpenChange(value)
+    },
+    [onOpenChange],
+  )
+
+  useEffect(() => {
+    setTooltipOpen(open)
+  }, [open])
+
   return (
     <RadixTooltip.Provider>
-      <RadixTooltip.Root>
-        <RadixTooltip.Trigger className="z-10" asChild>
+      <RadixTooltip.Root
+        defaultOpen={defaultOpen}
+        delayDuration={delayDuration}
+        open={tooltipOpen}
+        onOpenChange={(value) => handleOpenChange(value)}
+      >
+        <RadixTooltip.Trigger
+          className="z-10"
+          asChild
+          onClick={() => handleOpenChange(true)}
+        >
           {children}
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal className="hidden">