feat(Truncate): add true calculated middle truncate

Author: mfrances17

packages/react-core/src/components/Truncate/Truncate.tsx

@@ -22,7 +22,8 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   className?: string;
   /** Text to truncate */
   content: string;
-  /** The number of characters displayed in the second half of the truncation */
+  /** The number of characters displayed in the second half of the truncation. When using middle truncation, set this to 0 for true middle truncation.
+   */
   trailingNumChars?: number;
   /** Where the text will be truncated */
   position?: 'start' | 'middle' | 'end';
@@ -44,7 +45,15 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'right-end';
 }
 
-const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
+const sliceContent = (content: string, trailingChars: number) => {
+  if (trailingChars === 0) {
+    const middle = Math.floor(content.length / 2);
+    const left = content.slice(0, middle);
+    const right = content.slice(middle);
+    return [left, right];
+  }
+  return [content.slice(0, content.length - trailingChars), content.slice(-trailingChars)];
+};
 
 export const Truncate: React.FunctionComponent<TruncateProps> = ({
   className,
@@ -116,21 +125,34 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
           {position === TruncatePosition.start && <React.Fragment>&lrm;</React.Fragment>}
         </span>
       )}
-      {position === TruncatePosition.middle && content.length - trailingNumChars > minWidthCharacters && (
-        <React.Fragment>
-          <span ref={textRef} className={styles.truncateStart}>
-            {sliceContent(content, trailingNumChars)[0]}
-          </span>
-          <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
-        </React.Fragment>
-      )}
-      {position === TruncatePosition.middle && content.length - trailingNumChars <= minWidthCharacters && (
+
+      {position === TruncatePosition.middle && trailingNumChars === 0 && (
         <React.Fragment>
           <span ref={textRef} className={styles.truncateStart}>
-            {content}
+            {sliceContent(content, 0)[0]}
           </span>
+          <span className={styles.truncateEnd}>{sliceContent(content, 0)[1]}</span>
         </React.Fragment>
       )}
+      {position === TruncatePosition.middle &&
+        trailingNumChars > 0 &&
+        content.length - trailingNumChars > minWidthCharacters && (
+          <React.Fragment>
+            <span ref={textRef} className={styles.truncateStart}>
+              {sliceContent(content, trailingNumChars)[0]}
+            </span>
+            <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
+          </React.Fragment>
+        )}
+      {position === TruncatePosition.middle &&
+        trailingNumChars > 0 &&
+        content.length - trailingNumChars <= minWidthCharacters && (
+          <React.Fragment>
+            <span ref={textRef} className={styles.truncateStart}>
+              {content}
+            </span>
+          </React.Fragment>
+        )}
     </span>
   );
 

packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -113,6 +113,24 @@ test('renders different content when trailingNumChars is passed with middle trun
   expect(end).toHaveClass(styles.truncateEnd);
 });
 
+test('renders different content when trailingNumChars is passed 0 for true middle truncation', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} // 75 chars
+      trailingNumChars={0}
+      position="middle"
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim fau');
+
+  expect(start).toHaveClass(styles.truncateStart);
+
+  const end = screen.getByText('cibus, sit amet molestie est accumsan.');
+
+  expect(end).toHaveClass(styles.truncateEnd);
+});
+
 test('renders full content when trailingNumChars exceeds the length of the original string using middle truncate', () => {
   render(
     <Truncate

packages/react-core/src/components/Truncate/examples/Truncate.md

@@ -28,8 +28,8 @@ import { Truncate } from '@patternfly/react-core';
 
 <div className="truncate-example-resize">
   <Truncate
-    content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
-    trailingNumChars={10}
+    content={'rh_logo_black_and_white_reversed_fedora_container.zip'}
+    trailingNumChars={0}
     position={'middle'}
   />
 </div>