feat(Truncate): improve truncate (#2305)

Author: Lisa18289

apps/docs/src/content/04-components/content/truncate/examples/offset.tsx

@@ -0,0 +1,5 @@
+import { Truncate } from "@mittwald/flow-react-components";
+
+<Truncate offset={9} ellipsis="[...]">
+  https://mittwald.github.io/flow/04-components/lorem/ipsum/dolor/sit/amet/consetetur/sadipscing/elitr/sed/diam/nonumy/eirmod/tempor/invidunt/ut/labore/et/dolore/content/truncate/overview
+</Truncate>;

apps/docs/src/content/04-components/content/truncate/overview.mdx

@@ -16,6 +16,15 @@ darzustellen.
 
 <LiveCodeEditor />
 
+# Mit Offset
+
+Um bei Pfaden sowohl den Anfang als auch das Ende sichtbar zu halten, kann über
+die Property `offset` festgelegt werden, wie viele Zeichen vom Ende angezeigt
+werden sollen. Zusätzlich lässt sich mit `ellipsis` ein individueller
+Platzhalter definieren.
+
+<LiveCodeEditor example="offset" editorCollapsed />
+
 ---
 
 # Kombiniere mit ...

packages/components/package.json

@@ -91,6 +91,7 @@
     "react-markdown": "^10.1.0",
     "react-stately": "^3.43.0",
     "react-syntax-highlighter": "^16.1.0",
+    "react-truncate-inside": "^1.0.3",
     "recharts": "3.7.0",
     "remark-gfm": "^4.0.1",
     "remeda": "^2.33.4",

packages/components/src/components/Truncate/Truncate.module.scss

@@ -1,6 +1,9 @@
 .truncate {
   display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+
+  &.ellipsis {
+    text-overflow: ellipsis;
+  }
 }

packages/components/src/components/Truncate/Truncate.tsx

@@ -2,19 +2,39 @@ import type { FC, PropsWithChildren } from "react";
 import type { PropsWithClassName } from "@/lib/types/props";
 import clsx from "clsx";
 import styles from "./Truncate.module.scss";
+import type { TruncateProps as ReactTruncateProps } from "react-truncate-inside";
+import ReactTruncate from "react-truncate-inside";
+import { extractTextFromFirstChild } from "@/lib/react/remote";
+import { useIsSSR } from "react-aria";
 
-export interface TruncateProps extends PropsWithChildren, PropsWithClassName {
+export interface TruncateProps
+  extends
+    PropsWithChildren,
+    PropsWithClassName,
+    Omit<ReactTruncateProps, "text" | "width"> {
   title?: string;
 }
 
 /** @flr-generate all */
 export const Truncate: FC<TruncateProps> = (props) => {
-  const { children, className, title } = props;
+  const { children, className, title, offset, ellipsis } = props;
 
   const rootClassName = clsx(styles.truncate, className);
 
+  const isSsr = useIsSSR();
+
+  if (!isSsr && (offset || ellipsis)) {
+    const text = extractTextFromFirstChild(children) ?? "";
+
+    return (
+      <span title={title} className={rootClassName}>
+        <ReactTruncate offset={offset} ellipsis={ellipsis} text={text} />
+      </span>
+    );
+  }
+
   return (
-    <span title={title} className={rootClassName}>
+    <span title={title} className={clsx(rootClassName, styles.ellipsis)}>
       {children}
     </span>
   );

packages/components/src/components/Truncate/stories/Default.stories.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { dummyText } from "@/lib/dev/dummyText";
 import { Heading } from "@/components/Heading";
 import { Text } from "@/components/Text";
+import { ColumnLayout } from "@/components/ColumnLayout";
 
 const meta: Meta<typeof Truncate> = {
   title: "Content/Truncate",
@@ -30,3 +31,21 @@ export const InHeading: Story = {
     </Heading>
   ),
 };
+
+export const Offset: Story = {
+  args: { offset: 10 },
+  render: (props) => (
+    <Text>
+      <Truncate {...props}>{dummyText.long}</Truncate>
+    </Text>
+  ),
+};
+
+export const CustomEllipsis: Story = {
+  args: { ellipsis: "[...]" },
+  render: (props) => (
+    <ColumnLayout>
+      <Truncate {...props}>{dummyText.long}</Truncate>
+    </ColumnLayout>
+  ),
+};

packages/remote-elements/src/auto-generated/RemoteTruncateElement.ts

@@ -12,6 +12,8 @@ export class RemoteTruncateElement extends FlowRemoteElement<RemoteTruncateEleme
   static override get remoteProperties() {
     return {
       className: {},
+      ellipsis: {},
+      offset: {},
       title: {},
     };
   }

packages/remote-react-components/src/tests/visual/Truncate.browser.test.tsx

@@ -35,6 +35,15 @@ test.each(testEnvironments)(
             Lorem ipsum dolor sit amet.
           </Truncate>
         </Heading>
+        <Text>
+          <Truncate offset={10} ellipsis="[...]">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet.
+          </Truncate>
+        </Text>
       </Flex>,
     );