Merge branch 'bugfix/3202-change-constrainedText-tooltip-behavior' in…

…to q/1.0
scality · Feb 24, 2022 · 4079515 · 4079515
2 parents b7247ac + 813b8bb
commit 4079515
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/src/lib/components/constrainedtext/Constrainedtext.component.js b/src/lib/components/constrainedtext/Constrainedtext.component.js
@@ -1,9 +1,10 @@
 //@flow
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { Node } from 'react';
 import styled from 'styled-components';
 import Tooltip from '../tooltip/Tooltip.component.js';
 import type { Props as TooltipProps } from '../tooltip/Tooltip.component.js';
+
 type Props = {
   text: string,
   tooltipStyle?: $PropertyType<TooltipProps, 'overlayStyle'>,
@@ -26,7 +27,10 @@ const ConstrainedTextContainer = styled.div`
   -webkit-box-orient: vertical;
   `
       : `word-wrap: break-word;
-      white-space: nowrap;`}};
+      white-space: nowrap;`}
+}
+
+;
 `;
 
 const BlockTooltip = styled.div`
@@ -35,26 +39,50 @@ const BlockTooltip = styled.div`
   }
 `;
 
+function isEllipsisActive(element: HTMLDivElement) {
+  return element && element.offsetWidth < element.scrollWidth;
+}
+
+function getConstrainedTextContainer(constrainedTextRef, lineClamp, text) {
+  return (
+    <ConstrainedTextContainer
+      ref={constrainedTextRef}
+      className="sc-constrainedtext"
+      lineClamp={lineClamp}
+    >
+      {text}
+    </ConstrainedTextContainer>
+  );
+}
+
 function ConstrainedText({
   text,
   tooltipStyle,
   tooltipPlacement,
   lineClamp = 1,
 }: Props): Node {
+  const [displayToolTip, setDisplayToolTip] = useState(false);
+
+  const constrainedTextRef = useCallback(
+    (element) => {
+      element && setDisplayToolTip(isEllipsisActive(element) || lineClamp > 1);
+    },
+    [lineClamp],
+  );
+
   return (
     <BlockTooltip>
-      <Tooltip
-        overlay={text}
-        overlayStyle={tooltipStyle}
-        placement={tooltipPlacement}
-      >
-        <ConstrainedTextContainer
-          className="sc-constrainedtext"
-          lineClamp={lineClamp}
+      {displayToolTip ? (
+        <Tooltip
+          overlay={text}
+          overlayStyle={tooltipStyle}
+          placement={tooltipPlacement}
         >
-          {text}
-        </ConstrainedTextContainer>
-      </Tooltip>
+          {getConstrainedTextContainer(constrainedTextRef, lineClamp, text)}
+        </Tooltip>
+      ) : (
+        getConstrainedTextContainer(constrainedTextRef, lineClamp, text)
+      )}
     </BlockTooltip>
   );
 }

diff --git a/stories/constrainedtext.stories.js b/stories/constrainedtext.stories.js
@@ -22,6 +22,10 @@ export const Default = () => {
           text={'This is a long phrase'}
           tooltipStyle={{ width: '100px' }}
         />
+          <Constrainedtext
+              text={'This'}
+              tooltipStyle={{ width: '100px' }}
+          />
       </div>
       <Title>With the ability to customize the style of tooltip</Title>
       <div