move shrinking functionality to own component

Author: haschek

CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ChatContent />`
     -   displays single chat contents in a bubble, including options to add status line and avatar
+-   `<ChatContentCollapsed />`
+    -   can collapse (and expand) `<ChatContent />` automatically for convenience
 -   `<ChatField />`
     -   let the user input texts, calls `onSubmit` handler on enter key and submit button
 -   `<ChatArea />`

src/components/Chat/ChatContent.tsx

@@ -4,11 +4,11 @@ import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { ContextMenuProps } from "./../ContextOverlay/ContextMenu";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
-import { IconButton } from "./../Icon/IconButton";
+import { IconButtonProps } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
-import { TextReducer } from "./../TextReducer/TextReducer";
 import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
@@ -44,27 +44,13 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     markdownProps?: Omit<MarkdownProps, "children">;
     /**
-     * Callback handler if content should be expanded.
-     * Button to shrink/expand is displayed, depending on `shrinked` value.
-     * If this handler is given then the component never will change the `shrinked` state automatically.
+     * Could be used to add some type of toggle button or to include a context menu.
      */
-    onToggleSize?: () => void;
-    /**
-     * Content should dislayed shrinked.
-     * Button to expand content is displayed.
-     * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
-     * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
-     */
-    shrinked?: boolean;
-    /**
-     * Children elements are automatically shrinked to one line.
-     * If `shrinked` are not given then `shrinked=true` is infered.
-     */
-    autoShrink?: boolean;
+    actionButton?: React.ReactElement<IconButtonProps> | React.ReactElement<ContextMenuProps>;
 }
 
 /**
- * Component to display singe chat contents, including avatar and status line.
+ * Component to display single chat contents, including avatar and status line.
  */
 export const ChatContent = ({
     className,
@@ -76,23 +62,9 @@ export const ChatContent = ({
     alignment = "left",
     limitHeight,
     markdownProps,
-    shrinked,
-    autoShrink,
-    onToggleSize,
+    actionButton,
     ...otherDivProps
 }: ChatContentProps) => {
-    const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
-        shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
-    );
-
-    const toggleSize = () => {
-        if (onToggleSize) {
-            onToggleSize();
-        } else {
-            setDispayShrinked(!displayShrinked);
-        }
-    };
-
     const content =
         markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
 
@@ -113,7 +85,7 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? <TextReducer useOverflowTextWrapper>{content}</TextReducer> : content}
+            {content}
         </div>
     );
 
@@ -142,17 +114,14 @@ export const ChatContent = ({
                     </FlexibleLayoutItem>
                 )}
                 <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
-                {(displayShrinked || onToggleSize || autoShrink) && (
+                {actionButton && (
                     <FlexibleLayoutItem
                         className={`${eccgui}-chat__content-sizetoggle`}
                         growFactor={0}
                         shrinkFactor={0}
                         style={alignment === "right" ? { order: -1 } : undefined}
                     >
-                        <IconButton
-                            name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
-                            onClick={() => toggleSize()}
-                        />
+                        {actionButton}
                     </FlexibleLayoutItem>
                 )}
             </FlexibleLayoutContainer>

src/components/Chat/ChatContentCollapsed.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { IconButton } from "../Icon/IconButton";
+import { TextReducer, TextReducerProps } from "../TextReducer/TextReducer";
+
+import { ChatContentProps } from "./ChatContent";
+
+export interface ChatContentCollapsedProps {
+    children: React.ReactElement<ChatContentProps>;
+    /**
+     * Set this to `false` if the compoment should initally start in an expanded state.
+     */
+    collapsed?: boolean;
+    /**
+     * Use this to set extra `TextReducer` properties.
+     * This is used to create the collapsed variant of the given content.
+     */
+    textReducerProps?: Omit<TextReducerProps, "children">;
+    /**
+     * Text for collapse button.
+     */
+    textCollapse?: string;
+    /**
+     * Text for expand button.
+     */
+    textExpand?: string;
+}
+
+/**
+ * Adds an auto collapsing feature for convenience to `ChatContent`.
+ */
+export const ChatContentCollapsed = ({
+    children,
+    collapsed = true,
+    textReducerProps = {},
+    textCollapse = "Collapse",
+    textExpand = "Expand",
+}: ChatContentCollapsedProps) => {
+    const [displayCollapsed, setDispayCollapsed] = React.useState<boolean>(collapsed);
+
+    const childrenAsTextline = (
+        <TextReducer useOverflowTextWrapper {...textReducerProps}>
+            {typeof children.props.children === "string" ? (
+                <Markdown>{children.props.children}</Markdown>
+            ) : (
+                children.props.children
+            )}
+        </TextReducer>
+    );
+
+    return React.cloneElement(children, {
+        children: displayCollapsed ? childrenAsTextline : children.props.children,
+        actionButton: (
+            <IconButton
+                text={displayCollapsed ? textExpand : textCollapse}
+                name={displayCollapsed ? "toggler-showmore" : "toggler-showless"}
+                onClick={() => setDispayCollapsed(!displayCollapsed)}
+            />
+        ),
+    });
+};
+
+export default ChatContentCollapsed;

src/components/Chat/index.ts

@@ -1,3 +1,4 @@
 export * from "./ChatArea";
 export * from "./ChatContent";
+export * from "./ChatContentCollapsed";
 export * from "./ChatField";

src/components/Chat/stories/ChatArea.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatArea, ChatContent, ChatField } from "../../../index";
+import { ChatArea, ChatContent, ChatContentCollapsed, ChatField } from "../../../index";
 
 import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
 import { Default as ChatFieldExample } from "./ChatField.stories";
@@ -26,7 +26,9 @@ Default.args = {
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
-        <ChatContent {...LongChatBubble.args} autoShrink />,
+        <ChatContentCollapsed>
+            <ChatContent {...LongChatBubble.args} />
+        </ChatContentCollapsed>,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} />,
     ],

src/components/Chat/stories/ChatContent.stories.tsx

@@ -45,12 +45,13 @@ Default.args = {
             <strong>Username</strong> 25 minutes ago
         </OverflowText>
     ),
-    onToggleSize: undefined,
 };
 
 export const LongChatBubble = TemplateFull.bind({});
 LongChatBubble.args = {
     ...Default.args,
+    avatar: undefined,
+    displayType: "simple",
     children: (
         <HtmlContentBlock>
             <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />

src/components/Chat/stories/ChatContentCollapsed.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, ChatContentCollapsed } from "../../../index";
+
+import { LongChatBubble } from "./ChatContent.stories";
+
+export default {
+    title: "Components/Chat/ChatContentCollapsed",
+    component: ChatContentCollapsed,
+    argTypes: {},
+} as Meta<typeof ChatContentCollapsed>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContentCollapsed> = (args) => (
+    <div key={update++}>
+        <ChatContentCollapsed {...args} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: <ChatContent {...LongChatBubble.args} />,
+};