feat: new render prop

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
 import classNames from 'classnames'
 import debounce from 'utils/debounce'
-import { TooltipContent } from 'components/TooltipContent'
 import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { computeTooltipPosition } from '../../utils/compute-positions'
@@ -22,7 +21,6 @@ const Tooltip = ({
   positionStrategy = 'absolute',
   middlewares,
   wrapper: WrapperElement,
-  children = null,
   delayShow = 0,
   delayHide = 0,
   float = false,
@@ -35,7 +33,6 @@ const Tooltip = ({
   afterHide,
   // props handled by controller
   content,
-  html,
   isOpen,
   setIsOpen,
   activeAnchor,
@@ -469,7 +466,7 @@ const Tooltip = ({
       }
       setActualPlacement(computedStylesData.place as PlacesType)
     })
-  }, [show, activeAnchor, content, html, place, offset, positionStrategy, position])
+  }, [show, activeAnchor, content, place, offset, positionStrategy, position])
 
   useEffect(() => {
     const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
@@ -512,8 +509,7 @@ const Tooltip = ({
     }
   }, [id, anchorSelect])
 
-  const hasContentOrChildren = Boolean(html || content || children)
-  const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0
+  const canShow = content && show && Object.keys(inlineStyles).length > 0
 
   return rendered ? (
     <WrapperElement
@@ -534,11 +530,7 @@ const Tooltip = ({
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >
-      {/**
-       * content priority: html > content > children
-       * children should be last so that it can be used as the "default" content
-       */}
-      {(html && <TooltipContent content={html} />) || content || children}
+      {content}
       <WrapperElement
         className={classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
           /**

src/components/Tooltip/TooltipTypes.d.ts

@@ -39,8 +39,7 @@ export interface IPosition {
 export interface ITooltip {
   className?: string
   classNameArrow?: string
-  content?: string
-  html?: string
+  content?: ChildrenType
   place?: PlacesType
   offset?: number
   id?: string
@@ -52,7 +51,6 @@ export interface ITooltip {
   anchorId?: string
   anchorSelect?: string
   wrapper: WrapperType
-  children?: ChildrenType
   events?: EventsType[]
   positionStrategy?: PositionStrategy
   middlewares?: Middleware[]

src/components/TooltipController/TooltipController.tsx

@@ -8,8 +8,10 @@ import type {
   WrapperType,
   DataAttribute,
   ITooltip,
+  ChildrenType,
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
+import { TooltipContent } from 'components/TooltipContent'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = ({
@@ -18,6 +20,7 @@ const TooltipController = ({
   anchorSelect,
   content,
   html,
+  render,
   className,
   classNameArrow,
   variant = 'dark',
@@ -196,14 +199,27 @@ const TooltipController = ({
     }
   }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
 
+  /**
+   * content priority: children < renderContent or content < html
+   * children should be lower priority so that it can be used as the "default" content
+   */
+  let renderedContent: ChildrenType = children
+  if (render) {
+    renderedContent = render({ content: tooltipContent ?? null, activeAnchor })
+  } else if (tooltipContent) {
+    renderedContent = tooltipContent
+  }
+  if (tooltipHtml) {
+    renderedContent = <TooltipContent content={tooltipHtml} />
+  }
+
   const props: ITooltip = {
     id,
     anchorId,
     anchorSelect,
     className,
     classNameArrow,
-    content: tooltipContent,
-    html: tooltipHtml,
+    content: renderedContent,
     place: tooltipPlace,
     variant: tooltipVariant,
     offset: tooltipOffset,
@@ -227,7 +243,7 @@ const TooltipController = ({
     setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor),
   }
 
-  return children ? <Tooltip {...props}>{children}</Tooltip> : <Tooltip {...props} />
+  return <Tooltip {...props} />
 }
 
 export default TooltipController

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -15,7 +15,11 @@ export interface ITooltipController {
   className?: string
   classNameArrow?: string
   content?: string
+  /**
+   * @deprecated Use `children` or `render` instead
+   */
   html?: string
+  render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
   place?: PlacesType
   offset?: number
   id?: string