groovinads-ui 1.2.52 → 1.2.53

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.52",
+	"version": "1.2.53",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Toasts/Toast/ToastCardComponent.jsx

@@ -0,0 +1,49 @@
+import React, { children, useState } from 'react';
+import Toast from 'react-bootstrap/Toast';
+import { Icon } from '../../Labels';
+
+function ToastCardComponent({ variant, autoClose, children, className, position }) {
+	const [show, setShow] = useState(true);
+
+	const toggleShow = () => setShow(!show);
+
+	const variantIcons = {
+		info: 'circle-info',
+		success: 'circle-check',
+		warning: 'triangle-exclamation',
+		error: 'circle-xmark',
+	};
+
+	console.log('Hola');
+
+	return (
+		<Toast
+			onClose={toggleShow}
+			show={show}
+			delay={autoClose ? 3500 : null}
+			autohide={autoClose}
+			className={`${position} ${variant} ${className ? className : ''}`}
+		>
+			<Toast.Body>
+				<div className='toast-wrapper'>
+					<div className='toast-type'>
+						<Icon
+							style={'solid'}
+							iconName={variantIcons[variant]}
+							scale={1}
+							className={'icon'}
+						/>
+					</div>
+					<span>{children}</span>
+				</div>
+				{!autoClose && (
+					<button className='btn-close' onClick={toggleShow}>
+						<Icon style={'solid'} iconName={'xmark'} scale={1} />
+					</button>
+				)}
+			</Toast.Body>
+		</Toast>
+	);
+}
+
+export default ToastCardComponent;

package/src/components/Toasts/ToastComponent.jsx

@@ -1,82 +1,45 @@
-import React, { children, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // BOOTSTRAP
-import Toast from 'react-bootstrap/Toast';
 import { ToastContainer } from 'react-bootstrap';
 
 // COMPONENTS
-import Icon from '../Labels/Icon';
+import ToastCardComponent from './Toast/ToastCardComponent';
 
-const ToastComponent = ({
-	variant = 'info',
-	autoClose = true,
-	position = 'bottom-start',
-	children,
-	className,
-}) => {
-	const [show, setShow] = useState(true);
+const ToastComponent = ({ toast, position = 'bottom-end' }) => {
+	const [toastsHistory, setToastsHistory] = useState([]);
 
-	const toggleShow = () => setShow(!show);
-
-	const delay = autoClose ? 3500 : null;
-	const autohide = autoClose ? true : false;
-
-	const variantIcons = {
-		info: 'circle-info',
-		success: 'circle-check',
-		warning: 'triangle-exclamation',
-		error: 'circle-xmark',
-	};
-
-	const iconClass = variantIcons[variant];
+	useEffect(() => {
+		if (toast) setToastsHistory([...toastsHistory, toast]);
+	}, [toast]);
 
 	return (
 		<ToastContainer position={position}>
-			<Toast
-				onClose={toggleShow}
-				show={show}
-				delay={delay}
-				autohide={autohide}
-				className={`${position} ${variant} ${className ? className : ''}`}
-			>
-				<Toast.Body>
-					<div className='toast-wrapper'>
-						<div className='toast-type'>
-							<Icon
-								style={'solid'}
-								iconName={iconClass}
-								scale={1}
-								className={'icon'}
-							/>
-						</div>
-						<span>{children}</span>
-					</div>
-					{!autoClose && (
-						<button className='btn-close' onClick={toggleShow}>
-							<Icon
-								style={'solid'}
-								iconName={'xmark'}
-								scale={1}
-							/>
-						</button>
-					)}
-				</Toast.Body>
-			</Toast>
+			{toastsHistory.map(
+				({ variant = 'info', autoClose = true, children, className }, i) => (
+					<ToastCardComponent
+						variant={variant}
+						autoClose={autoClose}
+						children={children}
+						className={className}
+						position={position}
+						key={children + variant + i}
+					/>
+				),
+			)}
 		</ToastContainer>
 	);
 };
 
 ToastComponent.propTypes = {
-	variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
-	autoClose: PropTypes.bool,
+	toast: PropTypes.object,
 	position: PropTypes.oneOf([
 		'top-start',
 		'top-end',
 		'bottom-start',
 		'bottom-end',
 	]),
-	className: PropTypes.string,
 };
 
-export default ToastComponent;
+export default ToastComponent;

package/src/stories/ToastComponent.stories.jsx

@@ -1,11 +1,62 @@
 import React, { useState } from 'react';
 import ToastComponent from '../components/Toasts/ToastComponent';
 
+import Button from '../components/Button/Button';
+
 export default {
-  title: 'Toasts/ToastComponent',
-  component: ToastComponent,
+	title: 'Toasts/ToastComponent',
+	component: ToastComponent,
 };
 
-const Template = (args) => <ToastComponent {...args}>ToastComponent</ToastComponent>;
+const Template = (args) => {
+
+  const [selected, setSelected] = useState(null);
+
+  const toasts = [
+    {
+      variant: 'info',
+      autoClose: true,
+      children: 'Se eliminó',
+      // className,
+    },
+    {
+      variant: 'success',
+      autoClose: true,
+      children: 'Se guardó',
+      // className,
+    },
+    {
+      variant: 'warning',
+      autoClose: true,
+      children: 'Se modificó',
+      // className,
+    },
+    {
+      variant: 'error',
+      autoClose: true,
+      children: 'Error',
+      // className,
+    },
+    {
+      variant: 'info',
+      autoClose: false,
+      children: 'No se puede eliminar',
+      // className,
+    }
+  ]
+
+  const pushToast = () => {
+    setSelected(toasts[Math.floor(Math.random() * toasts.length)]);
+  }
+
+	return (
+		<>
+			<Button onClick={pushToast}>Nuevo toast</Button>
+			<ToastComponent toast={selected} {...args}>
+				ToastComponent
+			</ToastComponent>
+		</>
+	);
+};
 
-export const Default = Template.bind({});
+export const Default = Template.bind({});