groovinads-ui 1.2.63 → 1.2.65

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.63",
+	"version": "1.2.65",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownComponent.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Dropdown from 'react-bootstrap/Dropdown';
-import { DropdownItem } from 'react-bootstrap';
 
 const DropdownComponent = ({
 	autoClose = false,
@@ -25,7 +24,7 @@ const DropdownComponent = ({
 		// Cierra el dropdown solo si autoClose es 'true' o 'inside'
 		if (autoClose === true || autoClose === 'inside') {
 			setInnerShow(false);
-			setShow(false);
+			if (setShow) setShow(false);
 		}
 	};
 
@@ -40,8 +39,7 @@ const DropdownComponent = ({
 		},
 	});
 
-	const modifiedMenu = React.cloneElement(Menu, 
-		{
+	const modifiedMenu = React.cloneElement(Menu, {
 		as: 'ul',
 		align,
 		className: fullWidth ? 'w-100' : '',
@@ -65,19 +63,21 @@ const DropdownComponent = ({
 						},
 					}),
 				)
-			: React.cloneElement(Menu.props.children, {
-					as: 'li',
-					key: `${child}${i}`,
-					onClick: () => {
-						if (
-							Menu.props.children.props &&
-							Menu.props.children.props.onClick
-						) {
-							Menu.props.children.props.onClick();
-						}
-						onAutoclose();
-					},
-				}),
+			: Menu.props.children.map((child, i) =>
+					React.cloneElement(Menu.props.children, {
+						as: 'li',
+						key: `${child}${i}`,
+						onClick: () => {
+							if (
+								Menu.props.children.props &&
+								Menu.props.children.props.onClick
+							) {
+								Menu.props.children.props.onClick();
+							}
+							onAutoclose();
+						},
+					}),
+				),
 	});
 
 	useEffect(() => {

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -24,6 +24,18 @@ export default function DropdownSimpleDatePicker({
 	const [internalShow, setInternalShow] = useState(!!show);
 	const dropdownRef = useRef(null);
 
+	const formatDate = (date) => {
+		if (!date) return null;
+		
+		if (date instanceof Date) return date;
+		
+		if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
+			return new Date(`${date}T00:00:00`);
+		}
+		
+		return new Date(date);
+	};
+
 	const internalToggle = () => {
 		const newShowState = !internalShow;
 		setInternalShow(newShowState);
@@ -78,7 +90,6 @@ export default function DropdownSimpleDatePicker({
 	useEffect(() => {
 		setInternalShow(!!show);
 	}, [show]);
-
 	return (
 		<Dropdown show={internalShow} className={className} ref={dropdownRef}>
 			<Dropdown.Toggle
@@ -111,8 +122,14 @@ export default function DropdownSimpleDatePicker({
 						startDate={date || ''}
 						monthsShown={1}
 						inline
-						minDate={minDate}
-						maxDate={maxDate}
+						minDate={formatDate(minDate)}
+						maxDate={formatDate(maxDate)}
+						dayClassName={(date) =>
+							(minDate && date < minDate) ||
+							(maxDate && date > maxDate && date !== formatDate(maxDate))
+								? 'react-datepicker__day--disabled'
+								: ''
+						}
 					/>
 
 					<div className='px-2 w-100'>
@@ -143,6 +160,6 @@ DropdownSimpleDatePicker.propTypes = {
 	setDate: PropTypes.func,
 	clearDate: PropTypes.func,
 	handleClear: PropTypes.func,
-	minDate: PropTypes.object,
-	maxDate: PropTypes.object,
+	minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
 };

package/src/components/Inputs/InputEmail.jsx

@@ -33,6 +33,7 @@ const InputEmail = ({
 	const fetchNotifications = async () => {
 		const resp = await ComponentsService.getInfo(apiGetEmail);
 		setNotifications(resp || []);
+		
 	};
 
 	// POST, Receives a list of emails
@@ -92,7 +93,11 @@ const InputEmail = ({
 	};
 
 	useEffect(() => {
-		if (showModal) fetchNotifications();
+		if (showModal) {
+			fetchNotifications();
+		} else if(notifications.length){
+			setNotifications([]);
+		}
 	}, [showModal]);
 	return (
 		<>
@@ -157,7 +162,7 @@ InputEmail.propTypes = {
 	apiGetEmail: PropTypes.string.isRequired,
 	apiPostEmail: PropTypes.string.isRequired,
 	apiDeleteEmail: PropTypes.string.isRequired,
-	titleList: PropTypes.string.isRequired,
+	titleList: PropTypes.string,
 	label: PropTypes.string,
 	textButton: PropTypes.string,
 	textError: PropTypes.string,

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import DropdownSimpleDatePicker from '../components/Dropdowns/DropdownSimpleDatePicker';
 
+
 export default {
 	title: 'Dropdown/DropdownSimpleDatePicker',
 	component: DropdownSimpleDatePicker,
@@ -15,30 +16,35 @@ const Template = (args) => {
 	return (
 		<>
 			<div className='d-flex justify-content-between mt-3'>
-				{/* DROPDOWN TO TEST THE handleGlobalToggle */}
-				<div className='col-3'>
+				<div className='col-3 mb-3'>
+					{/* MAX Y MIN POR PARAMS STATE */}
 					<DropdownSimpleDatePicker
 						{...args}
 						inputLabel='Start Date'
 						date={startDate}
 						setDate={setStartDate}
+						maxDate={endDate}
 					/>
-				</div>
-
-				<div className='col-3'>
 					<DropdownSimpleDatePicker
 						{...args}
 						inputLabel='End Date'
 						date={endDate}
 						setDate={setEndDate}
+						minDate={startDate}
+					/>
+				</div>
+				{/* PRUEBA CON MAXN Y MIN HARCODEADO */}
+				<div className='col-3 mb-3'> 
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel='Start Date'
+						date={startDate}
+						setDate={setStartDate}
 						handleClear={() => {
 							console.log('Aqui');
 						}}
+						maxDate={'2025-01-20'}
 					/>
-				</div>
-
-				<div className='col-3'>
-					<p>minmax</p>
 					<DropdownSimpleDatePicker
 						{...args}
 						inputLabel='End Date'
@@ -47,8 +53,7 @@ const Template = (args) => {
 						handleClear={() => {
 							console.log('Aqui');
 						}}
-						minDate={new Date('2025-01-01')}
-						maxDate={new Date('2025-01-31')}
+						minDate={'2025-01-15'}
 					/>
 				</div>
 			</div>

package/src/stories/InputEmail.stories.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 // COMPONENTS
 import { InputEmail } from '../components';
+import { Button } from 'react-bootstrap';
 
 export default {
 	title: 'Inputs/InputEmail',
@@ -12,7 +13,7 @@ const Template = (args) => {
 	// const [showModal, setShowModal] = useState(false);
 	return (
 		<>
-			{/* <Button onClick={() => setShowModal(!showModal)}>Cambiar show</Button> */}
+			{/* <Button size='lg' onClick={() => setShowModal(!showModal)}>Cambiar</Button> */}
 			<InputEmail
 				{...args}
 				apiGetEmail={'v2/retail-media/retailers/settings/notifications'}