refactor: improve content/html interaction

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -30,8 +30,8 @@ const Tooltip = ({
   afterShow,
   afterHide,
   // props handled by controller
-  isHtmlContent = false,
   content,
+  html,
   isOpen,
   setIsOpen,
 }: ITooltip) => {
@@ -315,7 +315,18 @@ const Tooltip = ({
     return () => {
       mounted = false
     }
-  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy, position])
+  }, [
+    show,
+    isOpen,
+    anchorId,
+    activeAnchor,
+    content,
+    html,
+    place,
+    offset,
+    positionStrategy,
+    position,
+  ])
 
   useEffect(() => {
     return () => {
@@ -328,7 +339,7 @@ const Tooltip = ({
     }
   }, [])
 
-  const hasContentOrChildren = Boolean(content || children)
+  const hasContentOrChildren = Boolean(html || content || children)
 
   return (
     <WrapperElement
@@ -342,7 +353,8 @@ const Tooltip = ({
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >
-      {children || (isHtmlContent ? <TooltipContent content={content as string} /> : content)}
+      {/* content priority: children > html > content */}
+      {children || (html && <TooltipContent content={html} />) || content}
       <div
         className={classNames('react-tooltip-arrow', styles['arrow'], classNameArrow, {
           [styles['no-arrow']]: noArrow,

src/components/Tooltip/TooltipTypes.d.ts

@@ -40,7 +40,6 @@ export interface ITooltip {
   id?: string
   variant?: VariantType
   anchorId?: string
-  isHtmlContent?: boolean
   wrapper?: WrapperType
   children?: ChildrenType
   events?: EventsType[]

src/components/TooltipController/TooltipController.tsx

@@ -38,7 +38,8 @@ const TooltipController = ({
   afterShow,
   afterHide,
 }: ITooltipController) => {
-  const [tooltipContent, setTooltipContent] = useState(content || html)
+  const [tooltipContent, setTooltipContent] = useState(content)
+  const [tooltipHtml, setTooltipHtml] = useState(html)
   const [tooltipPlace, setTooltipPlace] = useState(place)
   const [tooltipVariant, setTooltipVariant] = useState(variant)
   const [tooltipOffset, setTooltipOffset] = useState(offset)
@@ -48,7 +49,6 @@ const TooltipController = ({
   const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
-  const [isHtmlContent, setIsHtmlContent] = useState(Boolean(html))
   const { anchorRefs, activeAnchor } = useTooltip()(id)
 
   const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
@@ -74,8 +74,7 @@ const TooltipController = ({
         setTooltipContent(value ?? content)
       },
       html: (value) => {
-        setIsHtmlContent(Boolean(value ?? html))
-        setTooltipContent(value ?? html ?? content)
+        setTooltipHtml(value ?? html)
       },
       variant: (value) => {
         setTooltipVariant((value as VariantType) ?? variant)
@@ -112,14 +111,12 @@ const TooltipController = ({
   }
 
   useEffect(() => {
-    setIsHtmlContent(false)
     setTooltipContent(content)
-    if (html) {
-      // html will take precedence
-      setIsHtmlContent(true)
-      setTooltipContent(html)
-    }
-  }, [content, html])
+  }, [content])
+
+  useEffect(() => {
+    setTooltipHtml(html)
+  }, [html])
 
   useEffect(() => {
     const elementRefs = new Set(anchorRefs)
@@ -176,7 +173,7 @@ const TooltipController = ({
     className,
     classNameArrow,
     content: tooltipContent,
-    isHtmlContent,
+    html: tooltipHtml,
     place: tooltipPlace,
     variant: tooltipVariant,
     offset: tooltipOffset,