groovinads-ui 1.2.49 → 1.2.51

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

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -1,8 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react'
-
-// HOOKS
-import { useTextFormatter } from '../../hooks';
+import React, { useEffect, useRef, useState } from 'react'
 
 // COMPONENTS
 import { Dropdown } from 'react-bootstrap'
@@ -12,116 +9,136 @@ import DatePicker from 'react-datepicker';
 
 
 export default function DropdownSimpleDatePicker({
-	className = '',
-	show,
-	setShow,
-	onToggle,
-	inputLabel = 'period',
-	overflow = false,
-	date,
-	setDate
+    className = '',
+    show,
+    setShow,
+    onToggle,
+    inputLabel = 'period',
+    overflow = false,
+    date,
+    setDate,
+	handleClear,
 }) {
-
-	const [editingDate, setEditingDate] = useState(date);
-
-	const [internalShow, setInternalShow] = useState(!!show);
-
-	const { capitalice } = useTextFormatter();
-
-	const isMobile = window?.innerWidth < 500;
-
-
-	const internalToggle = () => {
-		setInternalShow((prevShow) => !prevShow);
-		try {
-			onToggle();
-		} catch (error) { }
-	};
-
-	const closeDropdown = () => {
-		setInternalShow(false);
-		try {
-			setShow(false);
-		} catch (error) { }
-	};
-
-	const updateDateFilters = (date) => {
-		setEditingDate(date);
-		setTimeout(() => {
-			setDate(editingDate?.toString());
-			closeDropdown();
-		}, 100);
-	};
-
+    
+    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 }));
+        
+        try {
+            onToggle();
+        } catch (error) { }
+    };
+
+    const closeDropdown = () => {
+        setInternalShow(false);
+        try {
+            setShow(false);
+        } catch (error) { }
+    };
+
+    const updateDateFilters = (newDate) => {
+        setDate(newDate?.toString());
+        setTimeout(() => {
+            closeDropdown();
+        }, 200);
+    };
+
+   
 	const clearDate = () => {
-		setEditingDate(null);
-		setDate(null);
-		closeDropdown();
-
-	}
-
-	useEffect(() => {
-		setInternalShow(!!show);
-	}, [show]);
-
-	return (
-		<Dropdown
-			show={internalShow}
-			className={className}
-		>
-			<Dropdown.Toggle
-				variant='toggle-filter'
-				onClick={internalToggle}
-				className={`btn-input w-100`}
-			>
-				<span className='dropdown-label'>{capitalice(inputLabel)}</span>
-				{editingDate ?
-					<span>
-						{editingDate.toString().split('00')[0]}
-					</span> :
-				<span></span>
-				}
-				<Icon iconName='angle-down' />
-
-			</Dropdown.Toggle>
-
-			<Dropdown.Menu
-				popperConfig={
-					overflow
-						? {
-							strategy: 'fixed',
-							onFirstUpdate: () =>
-								window.dispatchEvent(new CustomEvent('scroll')),
-						}
-						: undefined
-				}
-			>
-				<Dropdown.Item as={'div'}>
-
-					<DatePicker
-						className='form-control form-search'
-						selected={editingDate}
-						onChange={updateDateFilters}
-						startDate={editingDate}
-						monthsShown={1}
-						inline
-					/>
-
-					<div className='px-2 w-100'>
-						<Button
-							onClick={clearDate}
-							icon='calendar-circle-minus'
-							size='xs'
-							variant='terciary'
-							className='w-100'
-						>
-							Clear
-						</Button>
-					</div>
-				</Dropdown.Item>
-			</Dropdown.Menu>
-		</Dropdown>
-	)
+        closeDropdown();
+
+        if (handleClear) {
+            handleClear()
+            return
+        }
+        setDate(null);
+    }
+
+    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]);
+
+    return (
+        <Dropdown
+            show={internalShow}
+            className={className}
+            ref={dropdownRef}
+        >
+            <Dropdown.Toggle
+                variant='toggle-filter'
+                onClick={internalToggle}
+                className={`btn-input w-100`}
+            >
+                <span className='dropdown-label'>{inputLabel}</span>
+                <span>
+                    {(date || '').toString().split('00')[0]}
+                </span>
+
+                <Icon iconName='angle-down' className={'caret'} />
+
+            </Dropdown.Toggle>
+
+            <Dropdown.Menu
+                popperConfig={
+                    overflow
+                        ? {
+                            strategy: 'fixed',
+                            onFirstUpdate: () =>
+                                window.dispatchEvent(new CustomEvent('scroll')),
+                        }
+                        : undefined
+                }
+            >
+                <Dropdown.Item as={'div'}>
+
+                    <DatePicker
+                        className='form-control form-search'
+                        selected={date || ''}
+                        onChange={updateDateFilters}
+                        startDate={date || ''}
+                        monthsShown={1}
+                        inline
+                    />
+
+                    <div className='px-2 w-100'>
+                        <Button
+                            onClick={clearDate}
+                            icon='calendar-circle-minus'
+                            size='xs'
+                            variant='terciary'
+                            className='w-100'
+                        >
+                            Clear
+                        </Button>
+                    </div>
+                </Dropdown.Item>
+            </Dropdown.Menu>
+        </Dropdown>
+    )
 }
 
 DropdownSimpleDatePicker.propTypes = {
@@ -133,4 +150,6 @@ DropdownSimpleDatePicker.propTypes = {
 	overflow: PropTypes.bool,
 	date: PropTypes.string,
 	setDate: PropTypes.func,
+	clearDate: PropTypes.func,
+	handleClear: PropTypes.func,
 };

package/src/components/index.js

@@ -0,0 +1,49 @@
+// Buttons
+import Button from "./Button/Button";
+
+// Dropdowns
+import { DropdownComponent, DropdownMultiSelect, DropdownDatePicker, DropdownFilter, DropdownSimpleDatePicker } from './Dropdowns';
+
+// Inputs
+import { Checkbox, Input, Radio, Switch, Textarea } from './Inputs';
+
+// Labels
+import { Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon } from './Labels';
+
+// Toasts
+import {ToastComponent, ToastProgress} from './Toasts';
+
+// Navigation
+import {Navbar, Stepper, Tabnav, Sidebar}  from './Navigation';
+
+export {
+    // Buttons
+    Button,
+    // Dropdowns
+    DropdownComponent,
+    DropdownFilter,
+    DropdownMultiSelect,
+    DropdownSimpleDatePicker,
+    DropdownDatePicker,
+    // Inputs
+    Checkbox,
+    Input,
+    Radio,
+    Switch,
+    Textarea,
+    // Labels
+    Alert,
+    Icon,
+    LoginSource,
+    PillComponent,
+    Spinner,
+    StatusIcon,
+    // Toasts
+    ToastComponent,
+    ToastProgress,
+    // Navigation
+    Navbar,
+    Stepper,
+    Tabnav,
+    Sidebar
+}

package/src/index.js

@@ -2,36 +2,19 @@
 import Button from "./components/Button/Button";
 
 // Dropdowns
-import DropdownComponent from './components/Dropdowns/DropdownComponent';
-import DropdownFilter from './components/Dropdowns/DropdownFilter';
-import DropdownMultiSelect from './components/Dropdowns/DropdownMultiSelect';
-import DropdownDatePicker from './components/Dropdowns/DropdownsDatePicker/DropdownDatePicker';
-import DropdownSimpleDatePicker from './components/Dropdowns/DropdownSimpleDatePicker';
+import {DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker} from './components/Dropdowns';
 
 // Inputs
-import Checkbox from './components/Inputs/Checkbox';
-import Input from './components/Inputs/Input';
-import Radio from './components/Inputs/Radio';
-import Switch from './components/Inputs/Switch';
-import Textarea from './components/Inputs/Textarea';
+import {Checkbox, Input, Radio, Switch, Textarea} from './components/Inputs';
 
 // Labels
-import Alert from './components/Labels/Alert';
-import Icon from './components/Labels/Icon';
-import LoginSource from './components/Labels/LoginSource';
-import PillComponent from './components/Labels/PillComponent';
-import Spinner from './components/Labels/Spinner';
-import StatusIcon from './components/Labels/StatusIcon';
+import {Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon} from './components/Labels';
 
 // Toasts
-import ToastComponent from './components/Toasts/ToastComponent';
-import ToastProgress from './components/Toasts/ToastProgress';
+import {ToastComponent, ToastProgress} from './components/Toasts';
 
 // Navigation
-import Navbar from './components/Navigation/Navbar';
-import Stepper from './components/Navigation/Stepper';
-import Tabnav from './components/Navigation/Tabnav';
-import Sidebar from './components/Navigation/Sidebar';
+import {Navbar, Stepper, Tabnav, Sidebar} from './components/Navigation';
 
 export {
     // Buttons

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,21 +9,45 @@ export default {
 const Template = (args) => {
 	const [show, setShow] = useState(false);
 
-	const [dateFrom, setDateFrom] = useState('');
-	const [dateTo, setDateTo] = useState('');
-	
+	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'>
-				<DropdownSimpleDatePicker
-					{...args}
-					dateFrom={dateFrom}
-					setDateFrom={setDateFrom}
-					date={dateTo}
-					setDate={setDateTo}
-				/>
+			<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>
 		</>
 	);