@soul-refiner/design-system 0.2.84 → 0.2.85

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

@@ -4,5 +4,6 @@ export interface AnimatedToastProps {
     message: string;
     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,23 @@
 import React from 'react';
 import { styled } from 'styled-components';
 import { Toast } from '../toast';
-export const AnimatedToast = ({ message, type, onClose, }) => {
+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);
-        }, 4000);
+            !!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, onClose: () => {
-                    !!onClose && onClose();
-                    setToastIsClosed(true);
-                }, isAnimated: true }))));
+            React.createElement(Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
 };
 const Container = styled.div `
-  display: flex;
-  row-gap: 12px;
   position: fixed;
   z-index: 9999;
   bottom: 16px;
@@ -31,7 +27,7 @@ const Container = styled.div `
 const ToastAnimation = styled.div `
   animation: slide-in 0.4s ease-in-out forwards;
 
-  .toast-closed {
+  &.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;
     isAnimated?: boolean;
+    animationDuration?: number;
 }
-export declare const Toast: ({ content, href, onClose, type, isAnimated, }: 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,7 +4,7 @@ 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, isAnimated = false, }) => {
+export const Toast = ({ content, href, onClose, type, isAnimated = false, animationDuration, }) => {
     const iconLookup = {
         error: React.createElement(AlertOctogon, { size: 24 }),
         info: React.createElement(Information, { size: 24 }),
@@ -15,8 +15,8 @@ export const Toast = ({ content, href, onClose, type, isAnimated = false, }) =>
         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: onClose, type: "special" }),
-        isAnimated && (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 `
@@ -29,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 {

package/package.json

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