fix(InlineEditor): add tooltip if the text on the Inline Editor overf…

…lows
lumada-design · Nov 8, 2024 · 3261229 · 3261229
1 parent 5c46d6b
commit 3261229
Showing 1 changed file with 43 additions and 27 deletions.
diff --git a/packages/core/src/InlineEditor/InlineEditor.tsx b/packages/core/src/InlineEditor/InlineEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Edit } from "@hitachivantara/uikit-react-icons";
 import {
   useDefaultProps,
@@ -10,6 +10,7 @@ import { HvButton, HvButtonProps } from "../Button";
 import { useControlled } from "../hooks/useControlled";
 import { useEnhancedEffect } from "../hooks/useEnhancedEffect";
 import { HvInput, HvInputProps } from "../Input";
+import { HvTooltip } from "../Tooltip";
 import {
   fixedForwardRef,
   PolymorphicComponentRef,
@@ -97,10 +98,20 @@ export const HvInlineEditor = fixedForwardRef(function HvInlineEditor<
   const [cachedValue, setCachedValue] = useState(value);
   const inputRef = useRef<HTMLInputElement>();
   const { activeTheme } = useTheme();
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
 
   const typographyStyles = activeTheme?.typography[variant] || {};
   const { lineHeight } = typographyStyles;
 
+  const checkOverflow = () => {
+    if (inputRef.current) {
+      setIsOverflowing(
+        inputRef.current.scrollWidth > inputRef.current.clientWidth,
+      );
+    }
+  };
+
   useEnhancedEffect(() => {
     const input = inputRef.current;
     if (editMode && input) {
@@ -128,12 +139,14 @@ export const HvInlineEditor = fixedForwardRef(function HvInlineEditor<
       newValue = cachedValue;
       setEditMode(false);
       setValue(newValue);
+      checkOverflow();
     }
     onKeyDown?.(event, newValue);
   };
 
   const handleChange: HvInputProps["onChange"] = (event, val) => {
     setValue(val);
+    checkOverflow();
     onChange?.(event, val);
   };
 
@@ -161,33 +174,36 @@ export const HvInlineEditor = fixedForwardRef(function HvInlineEditor<
           {...others}
         />
       ) : (
-        <HvButton
-          variant="secondaryGhost"
-          overrideIconColors={false}
-          endIcon={
-            <Edit
-              color="secondary_60"
-              className={cx(classes.icon, {
-                [classes.iconVisible]: showIcon,
-              })}
-            />
-          }
-          className={cx(classes.button, {
-            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,
-          })}
-          onClick={handleClick}
-          disabled={disabled}
-          {...buttonProps}
-        >
-          <HvTypography
-            variant={variant}
-            noWrap
-            className={cx(classes.text, { [classes.textEmpty]: !value })}
-            {...typographyProps}
+        <HvTooltip title={isOverflowing && value}>
+          <HvButton
+            ref={btnRef}
+            variant="secondaryGhost"
+            overrideIconColors={false}
+            endIcon={
+              <Edit
+                color="secondary_60"
+                className={cx(classes.icon, {
+                  [classes.iconVisible]: showIcon,
+                })}
+              />
+            }
+            className={cx(classes.button, {
+              [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,
+            })}
+            onClick={handleClick}
+            disabled={disabled}
+            {...buttonProps}
           >
-            {value || placeholder}
-          </HvTypography>
-        </HvButton>
+            <HvTypography
+              variant={variant}
+              noWrap
+              className={cx(classes.text, { [classes.textEmpty]: !value })}
+              {...typographyProps}
+            >
+              {value || placeholder}
+            </HvTypography>
+          </HvButton>
+        </HvTooltip>
       )}
     </div>
   );