groovinads-ui 1.2.51 → 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.51",
+	"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,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react'
+import { format } from 'date-fns';
 
 // COMPONENTS
 import { Dropdown } from 'react-bootstrap'
@@ -17,24 +18,18 @@ export default function DropdownSimpleDatePicker({
     overflow = false,
     date,
     setDate,
-	handleClear,
+    handleClear,
 }) {
-    
+
     const [internalShow, setInternalShow] = useState(!!show);
     const dropdownRef = useRef(null);
-    
-    const handleGlobalToggle = (event) => {
-        if (event.detail !== inputLabel) {
-            closeDropdown();
-        }
-    };
 
     const internalToggle = () => {
         const newShowState = !internalShow;
         setInternalShow(newShowState);
 
-        if (newShowState)  window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
-        
+        if (newShowState) window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
+
         try {
             onToggle();
         } catch (error) { }
@@ -54,8 +49,8 @@ export default function DropdownSimpleDatePicker({
         }, 200);
     };
 
-   
-	const clearDate = () => {
+
+    const clearDate = () => {
         closeDropdown();
 
         if (handleClear) {
@@ -95,7 +90,7 @@ 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' className={'caret'} />
@@ -142,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,
 };