refactor(CTooltip): improve className handling; improve props interface; make visible property reactive

Author: mrholek

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -1,16 +1,17 @@
-import React, { FC, ReactNode, useRef, useState } from 'react'
+import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
 import { Triggers, triggerPropType } from '../Types'
 
-export interface CTooltipProps {
-  // TODO: find solution to not use any
-  children: any
+export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
   /**
    * Content node for your component.
    */
@@ -45,6 +46,7 @@ export interface CTooltipProps {
 
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  className,
   content,
   offset = [0, 0],
   onHide,
@@ -73,6 +75,10 @@ export const CTooltip: FC<CTooltipProps> = ({
     placement: placement,
   })
 
+  useEffect(() => {
+    setVisible(visible)
+  }, [visible])
+
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'
@@ -85,7 +91,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 
   return (
     <>
-      {React.cloneElement(children, {
+      {React.cloneElement(children as React.ReactElement<any>, {
         ref: setReferenceElement,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
@@ -121,6 +127,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                     `tooltip bs-tooltip-${
                       placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
                     }`,
+                    className,
                     transitionClass,
                   )}
                   ref={setPopperElement}
@@ -142,7 +149,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 }
 
 CTooltip.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,