@soul-refiner/design-system 0.2.83 → 0.2.85

package/dist/components/feedback/animated_toast/animated_toast.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { ToastTypes } from '../toast/toast';
 export interface AnimatedToastProps {
     message: string;
-    onClose: () => void;
+    onClose?: () => void;
     type: ToastTypes;
+    animationDuration?: number;
 }
-export declare const AnimatedToast: ({ message, type, onClose, }: AnimatedToastProps) => React.JSX.Element;
+export declare const AnimatedToast: ({ message, type, onClose, animationDuration, }: AnimatedToastProps) => React.JSX.Element;

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -2,27 +2,32 @@
 import React from 'react';
 import { styled } from 'styled-components';
 import { Toast } from '../toast';
-export const AnimatedToast = ({ message, type, onClose, }) => {
-    const [dismissed, setDismissed] = React.useState(false);
-    const handleDismiss = () => {
-        setDismissed(true);
-    };
-    return (React.createElement(Wrapper, null,
-        React.createElement(Container, null,
-            React.createElement(Toast, { content: message, type: type, onClose: onClose, handleDismiss: handleDismiss }))));
+export const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
+    const [toastIsClosed, setToastIsClosed] = React.useState(false);
+    const timer = React.useRef(null);
+    React.useEffect(() => {
+        timer.current = setTimeout(() => {
+            setToastIsClosed(true);
+            !!onClose && onClose();
+        }, animationDuration * 1000);
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, [animationDuration, onClose]);
+    return (React.createElement(Container, null,
+        React.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
+            React.createElement(Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
 };
-const Wrapper = styled.div `
-  display: flex;
-  row-gap: 12px;
+const Container = styled.div `
   position: fixed;
   z-index: 9999;
   bottom: 16px;
   right: 16px;
 `;
-const Container = styled.div `
+const ToastAnimation = styled.div `
   animation: slide-in 0.4s ease-in-out forwards;
 
-  .toast-dismissed {
+  &.toast-closed {
     animation: slide-out 0.4s ease-in-out forwards;
   }
 

package/dist/components/feedback/toast/toast.d.ts

@@ -3,8 +3,9 @@ export type ToastTypes = 'error' | 'info' | 'success' | 'warning';
 export interface ToastProps {
     content: string;
     href?: string;
-    onClose: () => void;
+    onClose?: () => void;
     type: ToastTypes;
-    handleDismiss?: () => void;
+    isAnimated?: boolean;
+    animationDuration?: number;
 }
-export declare const Toast: ({ content, href, onClose, type, handleDismiss, }: ToastProps) => React.JSX.Element;
+export declare const Toast: ({ content, href, onClose, type, isAnimated, animationDuration, }: ToastProps) => React.JSX.Element;

package/dist/components/feedback/toast/toast.js

@@ -4,22 +4,19 @@ import styled from 'styled-components';
 import { Styles } from '../../../common';
 import { Button, P } from '../../';
 import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
-export const Toast = ({ content, href, onClose, type, handleDismiss, }) => {
+export const Toast = ({ content, href, onClose, type, isAnimated = false, animationDuration, }) => {
     const iconLookup = {
         error: React.createElement(AlertOctogon, { size: 24 }),
         info: React.createElement(Information, { size: 24 }),
         success: React.createElement(AlertCircle, { size: 24 }),
         warning: React.createElement(AlertTriangle, { size: 24 }),
     };
-    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type },
+    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type, "$isAnimated": isAnimated },
         iconLookup[type],
         React.createElement(P, { as: "span" }, content),
         href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
-        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: () => {
-                !!handleDismiss && handleDismiss();
-                onClose();
-            }, type: "special" }),
-        !!handleDismiss && (React.createElement(ToastProgress, null,
+        !isAnimated && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })),
+        isAnimated && (React.createElement(ToastProgress, { "$animationDuration": animationDuration || 4 },
             React.createElement("div", { className: `toast-progress-bar ${type}` })))));
 };
 const ToastProgress = styled.div `
@@ -32,7 +29,7 @@ const ToastProgress = styled.div `
 
   .toast-progress-bar {
     height: 100%;
-    animation: progress-bar 4s linear forwards;
+    ${({ $animationDuration }) => `animation: progress-bar ${$animationDuration}s linear forwards`};
   }
 
   .toast-progress-bar.success {
@@ -61,6 +58,12 @@ const ToastProgress = styled.div `
   }
 `;
 const Wrapper = styled.output `
+  ${({ $isAnimated }) => !$isAnimated &&
+    `
+      position: fixed;
+      bottom: 24px;
+      right: 24px;`}
+
   width: 99vw;
   max-width: 476px;
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.83",
+  "version": "0.2.85",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {