@heliux-org/design-system-core 0.0.136 → 0.0.137

package/src/components/ProcessingToast/ProcessingToast.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { FC, useCallback, useMemo, useState } from "react";
+import { FC, useCallback, useMemo, useRef, useState } from "react";
 import Button from "../../components/Button/Button";
 import Icon from "../Icon/Icon";
 import Text from "../Text/Text";
@@ -16,6 +16,7 @@ import Success from "../Icon/Icons/components/Success";
 import { Warning } from "../Icon/Icons";
 import Loader from "../Loader/Loader";
 import { ProcessingToastPositions } from "./ProcessingToastConstants";
+import ScrollableContainer from "../ScrollableContainer/ScrollableContainer";
 
 export interface ProcessingToastProps extends VibeComponentProps {
   closeable?: boolean;
@@ -26,6 +27,8 @@ export interface ProcessingToastProps extends VibeComponentProps {
   subHeading?: string;
   disableCancel?: boolean;
   disableCancelAll?: boolean;
+  maxHeight?: number;
+  titleWidth?: number;
   items?: {
     id: number;
     name: string;
@@ -44,6 +47,8 @@ const ProcessingToast: FC<ProcessingToastProps> & {
   closeable = true,
   onClose = NOOP,
   className,
+  maxHeight = 400,
+  titleWidth = 150,
   id,
   closeButtonAriaLabel = "Close",
   position = ProcessingToastPositions.TopRight,
@@ -61,6 +66,8 @@ const ProcessingToast: FC<ProcessingToastProps> & {
     [className]
   );
 
+  const contentRef = useRef<HTMLDivElement>(null);
+
   const handleClose = useCallback(() => {
     if (onClose) {
       onClose();
@@ -81,7 +88,7 @@ const ProcessingToast: FC<ProcessingToastProps> & {
         gap={7}
         style={{
           transition: "max-height 0.3s ease",
-          maxHeight: isExpanded ? "1000px" : "100px",
+          maxHeight: isExpanded ? `${maxHeight}px` : "100px",
           overflow: "hidden",
           padding: "0px",
         }}
@@ -113,7 +120,7 @@ const ProcessingToast: FC<ProcessingToastProps> & {
             )}
           </Flex>
         </Flex>
-        <div className={styles.content}>
+        <div ref={contentRef} className={styles.content}>
           <Flex
             justify={Flex.justify.SPACE_BETWEEN}
             style={{ marginBottom: "8px" }}
@@ -131,65 +138,78 @@ const ProcessingToast: FC<ProcessingToastProps> & {
               Cancel all
             </Button>
           </Flex>
-          {items.map((item) => (
-            <Flex
-              key={item.id}
-              justify={Flex.justify.SPACE_BETWEEN}
-              className={styles.cell}
-            >
-              <Flex direction={Flex.directions.COLUMN} align={Flex.align.START}>
-                <Text>{item.name}...</Text>
-                <Flex gap={5}>
-                  {item.progress === 0 && item.status === "in_progress" && (
-                    <Loader size={Loader.sizes.SMALL} />
-                  )}
-                  {item.status === "in_progress" && item.progress > 0 && (
-                    <ProgressRing
-                      value={item.progress}
-                      size={ProgressRing.sizes.MEDIUM}
-                    />
-                  )}
-                  {item.status === "completed" && (
-                    <Icon
-                      icon={Success}
-                      style={{ color: "#076B4D" }}
-                      clickable={false}
-                    />
-                  )}
-                  {item.status === "failed" && (
-                    <Icon
-                      icon={Warning}
-                      style={{ color: "#E17037" }}
-                      clickable={false}
-                    />
-                  )}
-                  <Text color={Text.colors.SECONDARY}>{item.message}</Text>
-                </Flex>
-              </Flex>
-              {item.status === "in_progress" && item.progress > 0 && (
-                <Button
-                  size={Button.sizes.SMALL}
-                  kind={Button.kinds.TERTIARY}
-                  style={{ color: "#375D81" }}
-                  onClick={() => onCancel(item.id)}
-                  disabled={disableCancel}
+          <ScrollableContainer
+            allowVerticalScrolling
+            style={{
+              scrollbarWidth: "none",
+              maxHeight: isExpanded ? `${maxHeight - 100}px` : "0px",
+            }}
+          >
+            {items.map((item) => (
+              <Flex
+                key={item.id}
+                justify={Flex.justify.SPACE_BETWEEN}
+                className={styles.cell}
+              >
+                <Flex
+                  direction={Flex.directions.COLUMN}
+                  align={Flex.align.START}
                 >
-                  Cancel
-                </Button>
-              )}
+                  <Text style={{ maxWidth: `${titleWidth}px` }}>
+                    {item.name}
+                  </Text>
+                  <Flex gap={5}>
+                    {item.progress === 0 && item.status === "in_progress" && (
+                      <Loader size={Loader.sizes.SMALL} />
+                    )}
+                    {item.status === "in_progress" && item.progress > 0 && (
+                      <ProgressRing
+                        value={item.progress}
+                        size={ProgressRing.sizes.MEDIUM}
+                      />
+                    )}
+                    {item.status === "completed" && (
+                      <Icon
+                        icon={Success}
+                        style={{ color: "#076B4D" }}
+                        clickable={false}
+                      />
+                    )}
+                    {item.status === "failed" && (
+                      <Icon
+                        icon={Warning}
+                        style={{ color: "#E17037" }}
+                        clickable={false}
+                      />
+                    )}
+                    <Text color={Text.colors.SECONDARY}>{item.message}</Text>
+                  </Flex>
+                </Flex>
+                {item.status === "in_progress" && item.progress > 0 && (
+                  <Button
+                    size={Button.sizes.SMALL}
+                    kind={Button.kinds.TERTIARY}
+                    style={{ color: "#375D81" }}
+                    onClick={() => onCancel(item.id)}
+                    disabled={disableCancel}
+                  >
+                    Cancel
+                  </Button>
+                )}
 
-              {item.status === "failed" && (
-                <Button
-                  size={Button.sizes.SMALL}
-                  kind={Button.kinds.TERTIARY}
-                  style={{ color: "#375D81" }}
-                  onClick={() => onRetry(item.id)}
-                >
-                  Retry
-                </Button>
-              )}
-            </Flex>
-          ))}
+                {item.status === "failed" && (
+                  <Button
+                    size={Button.sizes.SMALL}
+                    kind={Button.kinds.TERTIARY}
+                    style={{ color: "#375D81" }}
+                    onClick={() => onRetry(item.id)}
+                  >
+                    Retry
+                  </Button>
+                )}
+              </Flex>
+            ))}
+          </ScrollableContainer>
         </div>
       </Flex>
     </>

package/src/components/ProcessingToast/__stories__/ProcessingToast.stories.tsx

@@ -6,7 +6,7 @@ const ProcessingToastTemplate = (args) => {
   const [items, setItems] = useState([
     {
       id: 1,
-      name: "Item 1",
+      name: "Item 1 - long item name",
       progress: 24,
       status: "in_progress",
       message: "Downloading",
@@ -39,6 +39,146 @@ const ProcessingToastTemplate = (args) => {
       status: "completed",
       message: "Downloaded",
     },
+    {
+      id: 6,
+      name: "Item 6",
+      progress: 30,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 7,
+      name: "Item 7",
+      progress: 100,
+      status: "completed",
+      message: "Downloaded",
+    },
+    {
+      id: 8,
+      name: "Item 8",
+      progress: 45,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 9,
+      name: "Item 9",
+      progress: 20,
+      status: "failed",
+      message: "Download Failed",
+    },
+    {
+      id: 10,
+      name: "Item 10",
+      progress: 80,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 11,
+      name: "Item 11",
+      progress: 100,
+      status: "completed",
+      message: "Downloaded",
+    },
+    {
+      id: 12,
+      name: "Item 12",
+      progress: 5,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 13,
+      name: "Item 13",
+      progress: 70,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 14,
+      name: "Item 14",
+      progress: 100,
+      status: "completed",
+      message: "Downloaded",
+    },
+    {
+      id: 15,
+      name: "Item 15",
+      progress: 0,
+      status: "failed",
+      message: "Download Failed",
+    },
+    {
+      id: 16,
+      name: "Item 16",
+      progress: 25,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 17,
+      name: "Item 17",
+      progress: 100,
+      status: "completed",
+      message: "Downloaded",
+    },
+    {
+      id: 18,
+      name: "Item 18",
+      progress: 50,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 19,
+      name: "Item 19",
+      progress: 35,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 20,
+      name: "Item 20",
+      progress: 90,
+      status: "completed",
+      message: "Downloaded",
+    },
+    {
+      id: 21,
+      name: "Item 21",
+      progress: 15,
+      status: "failed",
+      message: "Download Failed",
+    },
+    {
+      id: 22,
+      name: "Item 22",
+      progress: 60,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 23,
+      name: "Item 23",
+      progress: 40,
+      status: "in_progress",
+      message: "Downloading",
+    },
+    {
+      id: 24,
+      name: "Item 24",
+      progress: 100,
+      status: "completed",
+      message: "Downloaded",
+    },
+    {
+      id: 25,
+      name: "Item 25",
+      progress: 10,
+      status: "failed",
+      message: "Download Failed",
+    },
   ]);
 
   useEffect(() => {
@@ -111,6 +251,8 @@ const ProcessingToastTemplate = (args) => {
       onCancel={handleCancel}
       onRetry={handleRetry}
       onCancelAll={handleCancelAll}
+      maxHeight={400}
+      titleWidth={150}
     />
   );
 };