@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.3 → 24.4.1-featurechatcomponentscmem6775.4

package/src/components/TextReducer/TextReducer.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { OverflowText, OverflowTextProps } from "./../Typography";
+
+export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Maximum number of nodes that are used from the HTML content.
+     * An HTML element with multiple sub elements is count as only 1 node.
+     */
+    maxNodes?: number;
+    /**
+     * Set maximum string length of returned content.
+     */
+    maxLength?: number;
+    /**
+     * Wrap returned content automatically in a `OverflowText` component.
+     * This way you always will get a element returned that displays only 1 single text line.
+     */
+    useOverflowTextWrapper?: boolean;
+    /**
+     * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
+     */
+    overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+}
+
+/**
+ * Component to reduce HTML markup content to simple text.
+ * Display can be wrapped easily in `OverflowText`.
+ */
+export const TextReducer = ({
+    children,
+    maxNodes,
+    maxLength,
+    useOverflowTextWrapper,
+    overflowTextProps,
+}: TextReducerProps) => {
+    const nodesCount = 0;
+
+    const onlyText = (children: React.ReactNode | React.ReactNode[], maxNodes?: number): string => {
+        if (typeof maxNodes !== "undefined" && nodesCount >= maxNodes) {
+            return "";
+        }
+
+        if (children instanceof Array) {
+            return children
+                .slice(0, maxNodes)
+                .map((child: React.ReactNode) => {
+                    return onlyText(child, maxNodes);
+                })
+                .join(" ");
+        }
+
+        return React.Children.toArray(children)
+            .slice(0, maxNodes)
+            .map((child) => {
+                if (ReactIs.isFragment(child)) {
+                    return onlyText(child.props?.children, maxNodes);
+                }
+                if (typeof child === "string") {
+                    return child;
+                }
+                if (typeof child === "number") {
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ")
+            .replaceAll("\n", " ");
+    };
+
+    const shrinkedContent = onlyText(children, maxNodes)
+        .replaceAll(/<[^\s][^>]*>/g, "")
+        .slice(0, maxLength);
+
+    return useOverflowTextWrapper ? (
+        <OverflowText
+            {...overflowTextProps}
+            className={
+                `${eccgui}-textreducer` +
+                (overflowTextProps && overflowTextProps.className ? ` ${overflowTextProps.className}` : "")
+            }
+        >
+            {shrinkedContent}
+        </OverflowText>
+    ) : (
+        <>{shrinkedContent}</>
+    );
+};
+
+export default TextReducer;

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import Tooltip from "./Tooltip";
+import { Default as TooltipStory } from "./Tooltip.stories";
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`).length).toBe(tobe);
+};
+
+describe("Tooltip", () => {
+    it("should render placeholder automatically for text tooltip", () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} content="this is a simple text tooltip" />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder automatically for html tooltip", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />
+        );
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `usePlaceholder===true`", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />
+        );
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder when `usePlaceholder===false`", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />
+        );
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should be displayed on first mouse hover when no placeholder is used", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={false} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+    });
+    it("should not be displayed on first mouse hover when placeholder is used but placeholder markup is swapped", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
+            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+            checkForPlaceholderClass(container, 0);
+        });
+    });
+    it("should be displayed on two continues mouse hover when placeholder is used", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        checkForPlaceholderClass(container, 1);
+        await waitFor(async () => {
+            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+            checkForPlaceholderClass(container, 0);
+            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+        });
+    });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -199,7 +199,9 @@ export const Tooltip = ({
             targetProps={
                 {
                     ...otherTooltipProps.targetProps,
-                    "data-postplaceholder": `id${eventMemory.current}${searchId.current}`,
+                    "data-postplaceholder": eventMemory.current
+                        ? `id${eventMemory.current}${searchId.current}`
+                        : undefined,
                 } as React.HTMLProps<HTMLElement>
             }
         >

package/src/components/index.ts

@@ -10,7 +10,7 @@ export * from "./Button/Button";
 export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
-export * from "./ContentShrinker/ContentShrinker";
+export * from "./TextReducer/TextReducer";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";

package/dist/cjs/components/ContentShrinker/ContentShrinker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentShrinker.js","sourceRoot":"","sources":["../../../../src/components/ContentShrinker/ContentShrinker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,6CAAkD;AAClD,kDAAoC;AAEpC,6DAAsE;AAEtE,6DAA0D;AAC1D,gDAAkE;AAIlE;;;GAGG;AACI,MAAM,eAAe,GAAG,CAAC,EAAoE,EAAE,EAAE;QAAxE,EAAE,SAAS,EAAE,QAAQ,OAA+C,EAA1C,kBAAkB,cAA5C,yBAA8C,CAAF;IACxE,MAAM,QAAQ,GAAG,CAAC,QAA6C,EAAU,EAAE;QACvE,IAAI,QAAQ,YAAY,KAAK,EAAE,CAAC;YAC5B,OAAO,QAAQ;iBACV,GAAG,CAAC,CAAC,KAAsB,EAAE,EAAE;gBAC5B,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAClC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;;YACX,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC,CAAC;YAC3C,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC;YACjB,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,mFAAmF;gBACnF,OAAO,IAAA,uBAAc,EAAC,4CAAO,KAAK,CAAQ,CAAC,CAAC;YAChD,CAAC;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC;aACT,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,yBAAY,kBACT,SAAS,EAAE,GAAG,uBAAM,kBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IACvE,kBAAkB;QAEtB,8BAAC,mBAAQ,IAAC,YAAY,QAAC,YAAY,QAAC,eAAe,EAAE,EAAE,IAClD,QAAQ,CAAC,QAAQ,CAAC,CACZ,CACA,CAClB,CAAC;AACN,CAAC,CAAC;AAzCW,QAAA,eAAe,mBAyC1B;AAEF,kBAAe,uBAAe,CAAC"}

package/dist/esm/components/ContentShrinker/ContentShrinker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentShrinker.js","sourceRoot":"","sources":["../../../../src/components/ContentShrinker/ContentShrinker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAC;AAIlE;;;GAGG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAAoE;IAAlE,IAAA,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAK,kBAAkB,cAA5C,yBAA8C,CAAF;IACxE,IAAM,QAAQ,GAAG,UAAC,QAA6C;QAC3D,IAAI,QAAQ,YAAY,KAAK,EAAE,CAAC;YAC5B,OAAO,QAAQ;iBACV,GAAG,CAAC,UAAC,KAAsB;gBACxB,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aAClC,GAAG,CAAC,UAAC,KAAK;;YACP,IAAI,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC,CAAC;YAC3C,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC;YACjB,CAAC;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,mFAAmF;gBACnF,OAAO,cAAc,CAAC,kCAAO,KAAK,CAAQ,CAAC,CAAC;YAChD,CAAC;YACD,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC;aACT,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,YAAY,aACT,SAAS,EAAE,UAAG,MAAM,qBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IACvE,kBAAkB;QAEtB,oBAAC,QAAQ,IAAC,YAAY,QAAC,YAAY,QAAC,eAAe,EAAE,EAAE,IAClD,QAAQ,CAAC,QAAQ,CAAC,CACZ,CACA,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/types/components/ContentShrinker/ContentShrinker.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import { OverflowTextProps } from "./../Typography";
-export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
-/**
- * Component to shrink HTML markup content to 1 single text line.
- * Display is based on `OverflowText`.
- */
-export declare const ContentShrinker: ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => React.JSX.Element;
-export default ContentShrinker;

package/src/components/ContentShrinker/ContentShrinker.stories.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { LoremIpsum } from "react-lorem-ipsum";
-import { Meta, StoryFn } from "@storybook/react";
-
-import { ContentShrinker, HtmlContentBlock } from "../../../index";
-
-export default {
-    title: "Components/ContentShrinker",
-    component: ContentShrinker,
-    argTypes: {},
-} as Meta<typeof ContentShrinker>;
-
-const TemplateFull: StoryFn<typeof ContentShrinker> = (args) => <ContentShrinker {...args} />;
-
-export const Default = TemplateFull.bind({});
-Default.args = {
-    children: (
-        <>
-            simple text child http://example.com/
-            <HtmlContentBlock>
-                <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
-            </HtmlContentBlock>
-        </>
-    ),
-};

package/src/components/ContentShrinker/ContentShrinker.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import { renderToString } from "react-dom/server";
-import * as ReactIs from "react-is";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-
-import { Markdown } from "./../../cmem/markdown/Markdown";
-import { OverflowText, OverflowTextProps } from "./../Typography";
-
-export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
-
-/**
- * Component to shrink HTML markup content to 1 single text line.
- * Display is based on `OverflowText`.
- */
-export const ContentShrinker = ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => {
-    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
-        if (children instanceof Array) {
-            return children
-                .map((child: React.ReactNode) => {
-                    return onlyText(child);
-                })
-                .join(" ");
-        }
-
-        return React.Children.toArray(children)
-            .map((child) => {
-                if (ReactIs.isFragment(child)) {
-                    return onlyText(child.props?.children);
-                }
-                if (typeof child === "string") {
-                    return child;
-                }
-                if (typeof child === "number") {
-                    return child.toString();
-                }
-                if (ReactIs.isElement(child)) {
-                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
-                    return renderToString(<span>{child}</span>);
-                }
-                return "";
-            })
-            .join(" ")
-            .replaceAll("\n", " ");
-    };
-
-    return (
-        <OverflowText
-            className={`${eccgui}-contentshrinker` + (className ? ` ${className}` : "")}
-            {...otherOverflowProps}
-        >
-            <Markdown removeMarkup inheritBlock allowedElements={[]}>
-                {onlyText(children)}
-            </Markdown>
-        </OverflowText>
-    );
-};
-
-export default ContentShrinker;