groovinads-ui 1.2.21 → 1.2.23

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

package/src/components/Dropdowns/DropdownComponent.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 // BOOTSTRAP
@@ -16,9 +16,18 @@ const DropdownComponent = ({
 	align = 'start',
 	show,
 }) => {
+	const [innerShow, setInnerShow] = useState(false);
+
 	const [Toggle, Menu] = children;
 
-	const modifiedToggle = { ...Toggle, align }; // Al toggle le agrega el align
+	const modifiedToggle = React.cloneElement(Toggle, {
+        align,
+        onClick: () => {
+            Toggle.props && Toggle.props.onClick
+                ? Toggle.props.onClick()
+                : setInnerShow(!innerShow);;
+        },
+    });
 
 	const modifiedMenu = React.cloneElement(Menu, {
 		as: 'ul',

package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker.jsx

@@ -6,8 +6,8 @@ import Dropdown from 'react-bootstrap/Dropdown';
 // COMPONENTS
 import { Icon } from '../../Labels';
 import { Button } from '../../Button';
-// import { Switch } from '../../Inputs';
-// import { Tabnav } from '../../Navigation';
+import { Switch } from '../../Inputs';
+import { Tabnav } from '../../Navigation';
 // import PeriodAndDetailDropdowns from './PeriodAndDetailDropdowns';
 
 // HOOKS
@@ -20,21 +20,17 @@ const DropdownDatePicker = ({
 	setShow,
 	onToggle,
 	inputLabel = 'period',
+	locked = false,
+	overflow = false,
+	onRemoveFilter,
 	dateFrom,
 	setDateFrom,
 	dateTo,
 	setDateTo,
-	locked = false,
-	overflow = false,
-	onRemoveFilter,
-	fromDate1,
-	setFromDate1,
-	toDate1,
-	setToDate1,
-	fromDate2,
-	setFromDate2,
-	toDate2,
-	setToDate2,
+	dateFrom2,
+	setDateFrom2,
+	dateTo2,
+	setDateTo2,
 }) => {
 	const [activeTab, setActiveTab] = useState(1);
 
@@ -50,30 +46,28 @@ const DropdownDatePicker = ({
 	/* We have a 'local' state for datepickers inside the dropdown, so the user can cancel the dropdown and go back to previous values. */
 	/* When user confirms selected values, the 'local' state replaces the values previously stored in the DateFilters component. */
 	/* ========== STATE FOR DATEPCIKER 1 ========== */
-	const [editingFromDate1, setEditingFromDate1] = useState(fromDate1);
-	const [editingToDate1, setEditingToDate1] = useState(toDate1);
+	const [editingDateFrom, setEditingDateFrom] = useState(dateFrom);
+	const [editingDateTo, setEditingDateTo] = useState(dateTo);
 
-	const [editingFromDate2, setEditingFromDate2] = useState(fromDate2);
-	const [editingToDate2, setEditingToDate2] = useState(toDate2);
+	const [editingDateFrom2, setEditingDateFrom2] = useState(dateFrom2);
+	const [editingDateTo2, setEditingDateTo2] = useState(dateTo2);
 
 	const [internalShow, setInternalShow] = useState(!!show);
 
 	const { capitalice } = useTextFormatter();
 
-	const dropdown = useRef(null);
-
 	const isMobile = window?.innerWidth < 500;
 
-	const onChangeDDDate1 = (dates) => {
+	const onChangeDate1 = (dates) => {
 		const [start, end] = dates;
-		setEditingFromDate1(start);
-		setEditingToDate1(end);
+		setEditingDateFrom(start);
+		setEditingDateTo(end);
 	};
 
-	const onChangeDDDate2 = (dates) => {
+	const onChangeDate2 = (dates) => {
 		const [start, end] = dates;
-		setEditingFromDate2(start);
-		setEditingToDate2(end);
+		setEditingDateFrom2(start);
+		setEditingDateTo2(end);
 	};
 
 	const internalToggle = () => {
@@ -91,15 +85,15 @@ const DropdownDatePicker = ({
 	};
 
 	const updateDateFilters = () => {
-		setFromDate1(editingFromDate1);
+		setDateFrom(editingDateFrom.toString());
 
-		if (editingToDate1 === null) {
-			setToDate1(editingFromDate1);
+		if (editingDateTo === null) {
+			setDateTo(editingDateFrom.toString());
 		} else {
-			setToDate1(editingToDate1);
+			setDateTo(editingDateTo.toString());
 		}
-		setFromDate2(fromDate2);
-		setToDate2(toDate2);
+		setDateFrom2(dateFrom2.toString());
+		setDateTo2(dateTo2.toString());
 
 		closeDropdown();
 	};
@@ -108,10 +102,6 @@ const DropdownDatePicker = ({
 		setInternalShow(!!show);
 	}, [show]);
 
-	useEffect(() => {
-		console.log('internalShow', internalShow);
-	}, []);
-
 	return (
 		<Dropdown
 			show={internalShow}
@@ -124,9 +114,13 @@ const DropdownDatePicker = ({
 			>
 				{variant === 'input' ? (
 					<>
-						{(dateFrom || dateTo) && (
+						{(editingDateFrom || editingDateTo) && (
 							<span className={'wrapper'}>
-								<strong>{dateFrom}</strong> to <strong>{dateTo}</strong>
+								<strong>
+									{editingDateFrom ? editingDateFrom.toString().split('00')[0] : ''}
+								</strong>
+								to
+								<strong>{editingDateTo ? editingDateTo.toString().split('00')[0] : ''}</strong>
 							</span>
 						)}
 						<span className='label'>{capitalice(inputLabel)}</span>
@@ -149,9 +143,10 @@ const DropdownDatePicker = ({
 							/>
 						</div>
 						<div className='filter-values'>
-							{dateFrom || dateTo ? (
+							{editingDateFrom || editingDateTo ? (
 								<>
-									<strong>{dateFrom}</strong> to <strong>{dateTo}</strong>
+									<strong>{editingDateFrom}</strong> to{' '}
+									<strong>{editingDateTo}</strong>
 								</>
 							) : (
 								<>None</>
@@ -252,10 +247,10 @@ const DropdownDatePicker = ({
 
 					<DatePicker
 						className='form-control form-search'
-						selected={editingFromDate1}
-						onChange={onChangeDDDate1}
-						startDate={editingFromDate1}
-						endDate={editingToDate1}
+						selected={editingDateFrom}
+						onChange={onChangeDate1}
+						startDate={editingDateFrom}
+						endDate={editingDateTo}
 						monthsShown={isMobile ? 1 : 2}
 						selectsRange
 						inline
@@ -307,14 +302,14 @@ DropdownDatePicker.propTypes = {
 	locked: PropTypes.bool,
 	overflow: PropTypes.bool,
 	onRemoveFilter: PropTypes.func,
-	editingFromDate1: PropTypes.string,
-	setEditingFromDate1: PropTypes.string,
-	editingToDate1: PropTypes.string,
-	setEditingToDate1: PropTypes.string,
-	EditingFromDate2: PropTypes.string,
-	setEditingFromDate2: PropTypes.string,
-	EditingFoDate2: PropTypes.string,
-	setEditingToDate2: PropTypes.string,
+	editingDateFrom: PropTypes.string,
+	setEditingDateFrom: PropTypes.string,
+	editingDateTo1: PropTypes.string,
+	setEditingDateTo1: PropTypes.string,
+	EditingDateFrom2: PropTypes.string,
+	setEditingDateFrom2: PropTypes.string,
+	EditingDateTo2: PropTypes.string,
+	setEditingDateTo2: PropTypes.string,
 };
 
 export default DropdownDatePicker;

package/src/stories/DropdownDatePicker.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { DropdownDatePicker } from '../components/Dropdowns';
 
 export default {
@@ -9,22 +9,21 @@ export default {
 const Template = (args) => {
 	const [show, setShow] = useState(false);
 
-	const [fromDate1, setFromDate1] = useState('');
-	const [toDate1, setToDate1] = useState('');
+	const [dateFrom, setDateFrom] = useState('');
+	const [dateTo, setDateTo] = useState('');
 
-	const [fromDate2, setFromDate2] = useState('');
-	const [toDate2, setToDate2] = useState('');
+	const [dateFrom2, setDateFrom2] = useState('');
+	const [dateTo2, setDateTo2] = useState('');
 
 	const handleToggle = () => setShow((prevShow) => !prevShow);
 
-	// const [dateFrom, setDateFrom] = useState();
-	// const [dateTo, setDateTo] = useState();
-
-	// const [datePicker1StartDate, setDatePicker1StartDate] = useState();
-	// const [datePicker1EndDate, setDatePicker1EndDate] = useState();
-	// const [datePicker2StartDate, setDatePicker2StartDate] = useState();
-	// const [datePicker2EndDate, setDatePicker2EndDate] = useState();
-	// const [tableQueryObj, setTableQueryObj] = useState();
+	useEffect(() => {
+		console.log('dates From:', dateFrom);
+	}, [dateFrom]);
+	
+	useEffect(() => {
+		console.log('dates To:', dateTo);
+	}, [ dateTo ]);
 
 	return (
 		<>
@@ -35,29 +34,14 @@ const Template = (args) => {
 					show={show}
 					setShow={setShow}
 					onToggle={handleToggle}
-					fromDate1={fromDate1}
-					setFromDate1={setFromDate1}
-					toDate1={toDate1}
-					setToDate1={setToDate1}
-					fromDate2={fromDate2}
-					setFromDate2={setFromDate2}
-					toDate2={toDate2}
-					setToDate2={setToDate2}
-					// dateFrom={dateFrom}
-					// setDateFrom={setDateFrom}
-					// dateTo={dateTo}
-					// setDateTo={setDateTo}
-					// datePicker1StartDate={datePicker1StartDate}
-					// setDatePicker1StartDate={setDatePicker1StartDate}
-					// datePicker1EndDate={datePicker1EndDate}
-					// setDatePicker1EndDate={setDatePicker1EndDate}
-					// datePicker2StartDate={datePicker2StartDate}
-					// setDatePicker2StartDate={setDatePicker2StartDate}
-					// datePicker2EndDate={datePicker2EndDate}
-					// setDatePicker2EndDate={setDatePicker2EndDate}
-					// tableQueryObj={tableQueryObj}
-					// setTableQueryObj={setTableQueryObj}
-					// fetchData={() => {}}
+					dateFrom={dateFrom}
+					setDateFrom={setDateFrom}
+					dateTo={dateTo}
+					setDateTo={setDateTo}
+					dateFrom2={dateFrom2}
+					setDateFrom2={setDateFrom2}
+					dateTo2={dateTo2}
+					setDateTo2={setDateTo2}
 				/>
 			</div>
 		</>