groovinads-ui 1.2.50 → 1.2.52

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.50",
+	"version": "1.2.52",
 	"keywords": [
 		"css",
 		"sass",
@@ -74,6 +74,7 @@
 		"build-lib": "rollup -c"
 	},
 	"dependencies": {
+		"date-fns": "^4.1.0",
 		"react-datepicker": "^7.3.0",
 		"react-responsive": "^10.0.0"
 	}

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react'
-
-// HOOKS
-import { useTextFormatter } from '../../hooks';
+import React, { useEffect, useRef, useState } from 'react'
+import { format } from 'date-fns';
 
 // COMPONENTS
 import { Dropdown } from 'react-bootstrap'
@@ -20,14 +18,18 @@ export default function DropdownSimpleDatePicker({
     overflow = false,
     date,
     setDate,
-	handleClear,
+    handleClear,
 }) {
 
     const [internalShow, setInternalShow] = useState(!!show);
-
+    const dropdownRef = useRef(null);
 
     const internalToggle = () => {
-        setInternalShow((prevShow) => !prevShow);
+        const newShowState = !internalShow;
+        setInternalShow(newShowState);
+
+        if (newShowState) window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
+
         try {
             onToggle();
         } catch (error) { }
@@ -41,22 +43,36 @@ export default function DropdownSimpleDatePicker({
     };
 
     const updateDateFilters = (newDate) => {
+        setDate(newDate?.toString());
         setTimeout(() => {
-            setDate(newDate?.toString());
             closeDropdown();
-        }, 100);
+        }, 200);
     };
 
-   
-	const clearDate = () => {
+
+    const clearDate = () => {
+        closeDropdown();
+
         if (handleClear) {
             handleClear()
             return
         }
         setDate(null);
-        closeDropdown();
     }
 
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                closeDropdown();
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+
     useEffect(() => {
         setInternalShow(!!show);
     }, [show]);
@@ -65,6 +81,7 @@ export default function DropdownSimpleDatePicker({
         <Dropdown
             show={internalShow}
             className={className}
+            ref={dropdownRef}
         >
             <Dropdown.Toggle
                 variant='toggle-filter'
@@ -73,10 +90,10 @@ export default function DropdownSimpleDatePicker({
             >
                 <span className='dropdown-label'>{inputLabel}</span>
                 <span>
-                    {(date || '').toString().split('00')[0]}
+                    {date ? format(new Date(date), 'EEE MMM dd yyyy') : ''}
                 </span>
 
-                <Icon iconName='angle-down' />
+                <Icon iconName='angle-down' className={'caret'} />
 
             </Dropdown.Toggle>
 
@@ -120,14 +137,14 @@ export default function DropdownSimpleDatePicker({
 }
 
 DropdownSimpleDatePicker.propTypes = {
-	className: PropTypes.string,
-	show: PropTypes.bool,
-	setShow: PropTypes.func,
-	onToggle: PropTypes.func,
-	inputLabel: PropTypes.string,
-	overflow: PropTypes.bool,
-	date: PropTypes.string,
-	setDate: PropTypes.func,
-	clearDate: PropTypes.func,
-	handleClear: PropTypes.func,
+    className: PropTypes.string,
+    show: PropTypes.bool,
+    setShow: PropTypes.func,
+    onToggle: PropTypes.func,
+    inputLabel: PropTypes.string,
+    overflow: PropTypes.bool,
+    date: PropTypes.string,
+    setDate: PropTypes.func,
+    clearDate: PropTypes.func,
+    handleClear: PropTypes.func,
 };

package/src/stories/DropdownComponent.stories.jsx

@@ -55,7 +55,7 @@ const Template = (args) => {
 						className='dropdown-toggle'
 						// onClick={() => handleToggle()}
 					>
-						<span>Add filter</span>
+						<span>Add filters</span>
 						<Icon iconName='chevron-down' className='ms-2' />
 					</Button>
 

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -9,22 +9,45 @@ export default {
 const Template = (args) => {
 	const [show, setShow] = useState(false);
 
-	const [date, setDate] = useState('');
-
-	const clearData = () => {
-		console.log('afuera');
-	}
+	const [startDate, setStartDate] = useState('');
+	const [endDate, setEndDate] = useState('');
 
 	return (
+		// <>
+		// 	<button onClick={() => setShow(!show)}>Toggle</button>
+		// 	<div className='col-2'>
+		// 		<DropdownSimpleDatePicker
+		// 			{...args}
+		// 			dateFrom={dateFrom}
+		// 			setDateFrom={setDateFrom}
+		// 			date={dateTo}
+		// 			setDate={setDateTo}
+		// 		/>
+		// 	</div>
+		// </>
+
 		<>
-			<button onClick={() => setShow(!show)}>Toggle</button>
-			<div className='col-2 mt-3'>
-				<DropdownSimpleDatePicker
-					{...args}
-					date={date}
-					setDate={setDate}
-					handleClear={clearData}
-				/>
+			<div className='d-flex justify-content-between mt-3'>
+				{/* DROPDOWN TO TEST THE handleGlobalToggle */}
+
+				<div className='col-3'>
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel="Start Date"
+						date={startDate}
+						setDate={setStartDate}
+					/>
+				</div>
+				
+				<div className='col-3'>
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel="End Date"
+						date={endDate}
+						setDate={setEndDate}
+						handleClear={() => {console.log('Aqui');}}
+					/>
+				</div>
 			</div>
 		</>
 	);