feat: dynamic tippy on truncate poc

Author: Elessar1802

src/Common/RJSF/constants.ts

@@ -21,8 +21,3 @@ export const PLACEHOLDERS = {
 }
 
 export const DEFAULT_FIELD_TITLE = 'Key not available'
-
-export const ADD_BUTTON_WIDTH = {
-    MAX_WIDTH_VALUE: 250,
-    MAX_WIDTH_CLASSNAME: 'dc__mxw-250',
-}

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -17,7 +17,6 @@
 import { IconButtonProps } from '@rjsf/utils'
 
 import Tippy from '../../../Tippy'
-import { ADD_BUTTON_WIDTH } from '../../constants'
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
 
 export const AddButton = ({
@@ -37,12 +36,11 @@ export const AddButton = ({
                 arrow={false}
                 placement="right"
                 content={content}
-                truncateWidth={ADD_BUTTON_WIDTH.MAX_WIDTH_VALUE}
             >
                 <button
                     {...props}
                     type="button"
-                    className={`dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor ${ADD_BUTTON_WIDTH.MAX_WIDTH_CLASSNAME}`}
+                    className="dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor dc__mxw-250"
                     title="Add"
                 >
                     <PlusIcon className="icon-dim-16 fcb-5" />

src/Common/RJSF/utils.tsx

@@ -138,16 +138,8 @@ export const getInferredTypeFromValueType = (value) => {
 }
 
 export const getTippyWrapperWithContent =
-    (content, placement?: React.ComponentProps<typeof Tippy>['placement'], truncateWidth = 0) =>
-    (children) => (
-        <Tippy
-            className="default-tt"
-            maxWidth={300}
-            arrow={false}
-            placement={placement || 'right'}
-            content={content}
-            truncateWidth={truncateWidth}
-        >
+    (content, placement?: React.ComponentProps<typeof Tippy>['placement']) => (children) => (
+        <Tippy className="default-tt" maxWidth={300} arrow={false} placement={placement || 'right'} content={content}>
             {children}
         </Tippy>
     )

src/Common/Tippy.tsx

@@ -1,24 +1,21 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useState, Children, cloneElement } from 'react'
 import TippyJS, { TippyProps as TippyJSProps } from '@tippyjs/react'
 
-// TODO: we should generalize this Tippy to work without sending in this truncateWidth
-const Tippy = ({ truncateWidth = 0, children, ...rest }: TippyJSProps & Record<'truncateWidth', number>) => {
-    // NOTE: if showOnTruncate is off then always showTippy
-    const [showTippy, setShowTippy] = useState(!!truncateWidth)
-    const ref = useRef(null)
+const Tippy = ({ children, ...rest }: TippyJSProps) => {
+    const [showTippy, setShowTippy] = useState(false)
 
-    useEffect(() => {
-        if (truncateWidth) {
-            setShowTippy(ref.current?.offsetWidth >= truncateWidth)
+    const refCallback = useCallback((node: HTMLDivElement) => {
+        if (node) {
+            setShowTippy(node.scrollWidth > node.clientWidth)
         }
-    }, [ref.current?.offsetWidth])
+    }, [])
+
+    const child = Children.only(children)
 
     return !showTippy ? (
-        children
+        cloneElement(child, { ...child.props, ref: refCallback })
     ) : (
-        <TippyJS {...rest}>
-            <span ref={ref}>{children}</span>
-        </TippyJS>
+        <TippyJS {...rest}>{cloneElement(child, { ...child.props, ref: refCallback })}</TippyJS>
     )
 }