groovinads-ui 1.2.19 → 1.2.21

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

@@ -0,0 +1,320 @@
+import React, { Children, useEffect, useRef, useState } from 'react';
+import DatePicker from 'react-datepicker'; // https://reactdatepicker.com
+import PropTypes from 'prop-types';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+// COMPONENTS
+import { Icon } from '../../Labels';
+import { Button } from '../../Button';
+// import { Switch } from '../../Inputs';
+// import { Tabnav } from '../../Navigation';
+// import PeriodAndDetailDropdowns from './PeriodAndDetailDropdowns';
+
+// HOOKS
+import { useTextFormatter } from '../../../hooks';
+
+const DropdownDatePicker = ({
+	className = '',
+	variant = 'input',
+	show,
+	setShow,
+	onToggle,
+	inputLabel = 'period',
+	dateFrom,
+	setDateFrom,
+	dateTo,
+	setDateTo,
+	locked = false,
+	overflow = false,
+	onRemoveFilter,
+	fromDate1,
+	setFromDate1,
+	toDate1,
+	setToDate1,
+	fromDate2,
+	setFromDate2,
+	toDate2,
+	setToDate2,
+}) => {
+	const [activeTab, setActiveTab] = useState(1);
+
+	const [compareDates, setCompareDates] = useState(true);
+
+	/* State for dropdowns only visible when selecting 'compare dates' option */
+	const [period1, setPeriod1] = useState('Custom range');
+	const [detailLevel1, setDetailLevel1] = useState('Daily');
+
+	const [period2, setPeriod2] = useState('Custom range');
+	const [detailLevel2, setDetailLevel2] = useState('Daily');
+
+	/* 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 [editingFromDate2, setEditingFromDate2] = useState(fromDate2);
+	const [editingToDate2, setEditingToDate2] = useState(toDate2);
+
+	const [internalShow, setInternalShow] = useState(!!show);
+
+	const { capitalice } = useTextFormatter();
+
+	const dropdown = useRef(null);
+
+	const isMobile = window?.innerWidth < 500;
+
+	const onChangeDDDate1 = (dates) => {
+		const [start, end] = dates;
+		setEditingFromDate1(start);
+		setEditingToDate1(end);
+	};
+
+	const onChangeDDDate2 = (dates) => {
+		const [start, end] = dates;
+		setEditingFromDate2(start);
+		setEditingToDate2(end);
+	};
+
+	const internalToggle = () => {
+		setInternalShow((prevShow) => !prevShow);
+		try {
+			onToggle();
+		} catch (error) {}
+	};
+
+	const closeDropdown = () => {
+		setInternalShow(false);
+		try {
+			setShow(false);
+		} catch (error) {}
+	};
+
+	const updateDateFilters = () => {
+		setFromDate1(editingFromDate1);
+
+		if (editingToDate1 === null) {
+			setToDate1(editingFromDate1);
+		} else {
+			setToDate1(editingToDate1);
+		}
+		setFromDate2(fromDate2);
+		setToDate2(toDate2);
+
+		closeDropdown();
+	};
+
+	useEffect(() => {
+		setInternalShow(!!show);
+	}, [show]);
+
+	useEffect(() => {
+		console.log('internalShow', internalShow);
+	}, []);
+
+	return (
+		<Dropdown
+			show={internalShow}
+			className={`${variant === 'filter' ? 'dropdown-filter' : ''}`}
+		>
+			<Dropdown.Toggle
+				variant='toggle-filter'
+				onClick={internalToggle}
+				className={`${variant === 'input' ? 'btn btn-input' : ''}`}
+			>
+				{variant === 'input' ? (
+					<>
+						{(dateFrom || dateTo) && (
+							<span className={'wrapper'}>
+								<strong>{dateFrom}</strong> to <strong>{dateTo}</strong>
+							</span>
+						)}
+						<span className='label'>{capitalice(inputLabel)}</span>
+						<Icon iconName='calendar-day' />
+					</>
+				) : (
+					<>
+						<div className='filter-heading'>
+							<div className='filter-title'>
+								<span>{capitalice(inputLabel)}</span>
+								{locked && (
+									<Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
+								)}
+							</div>
+							<Icon
+								style={'solid'}
+								iconName={'angle-down'}
+								scale={1}
+								className='caret'
+							/>
+						</div>
+						<div className='filter-values'>
+							{dateFrom || dateTo ? (
+								<>
+									<strong>{dateFrom}</strong> to <strong>{dateTo}</strong>
+								</>
+							) : (
+								<>None</>
+							)}
+						</div>
+					</>
+				)}
+			</Dropdown.Toggle>
+			{variant === 'filter' && !locked && (
+				<Button
+					variant='terciary'
+					icon='xmark-circle'
+					size='md'
+					className='remove-filter'
+					onClick={onRemoveFilter}
+				/>
+			)}
+
+			<Dropdown.Menu
+				popperConfig={
+					overflow
+						? {
+								strategy: 'fixed',
+								onFirstUpdate: () =>
+									window.dispatchEvent(new CustomEvent('scroll')),
+							}
+						: undefined
+				}
+			>
+				<Dropdown.Item as={'div'}>
+					{compareDates && (
+						<>
+							{/* DATE TABS */}
+							{/* <ul
+								className='nav nav-tabs'
+								id='dateComparisonTabs'
+								role='tablist'
+							>
+								<li
+									className='nav-item'
+									role='presentation'
+									onClick={() => setActiveTab(1)}
+								>
+									
+									<button
+										className='nav-link active'
+										id='date1ComparisonTab'
+										data-bs-toggle='tab'
+										data-bs-target='#date1ComparisonTabPane'
+										type='button'
+										role='tab'
+										aria-controls='date1ComparisonTabPane'
+										aria-selected='true'
+									>
+										Date 1
+									</button>
+								</li>
+
+								<li
+									className='nav-item'
+									role='presentation'
+									onClick={() => setActiveTab(2)}
+								>
+									<button
+										id='date2ComparisonTab'
+										data-bs-toggle='tab'
+										data-bs-target='#date2ComparisonTabPane'
+										type='button'
+										role='tab'
+										aria-controls='date2ComparisonTabPane'
+										aria-selected='false'
+									>
+										
+									</button>
+								</li>
+							</ul> */}
+
+							{/* <Tabnav
+								tabs={[{ tab: 'Date 1' }, { tab: 'Date 2' }]}
+								activeTab={1}
+								customFunction={true}
+							/> */}
+							{/* TO DO: permitir que TabNav maneje interna y externamente el estado de AtiveTab */}
+
+							{/* PERIOD AND DETAIL LEVEL DROPDOWNS */}
+							{/* <PeriodAndDetailDropdowns
+							DDPeriod1={DDPeriod1}
+							setDDPeriod1={setDDPeriod1}
+							DDDetailLevel1={DDDetailLevel1}
+							setDDDetailLevel1={setDDDetailLevel1}
+							DDPeriod2={DDPeriod2}
+							setDDPeriod2={setDDPeriod2}
+							DDDetailLevel2={DDDetailLevel2}
+							setDDDetailLevel2={setDDDetailLevel2}
+						/> */}
+						</>
+					)}
+
+					<DatePicker
+						className='form-control form-search'
+						selected={editingFromDate1}
+						onChange={onChangeDDDate1}
+						startDate={editingFromDate1}
+						endDate={editingToDate1}
+						monthsShown={isMobile ? 1 : 2}
+						selectsRange
+						inline
+					/>
+
+					<div className='datepicker-footer'>
+						{/* <Switch
+							status={compareDates}
+							setStatus={() => {
+								setCompareDates(!compareDates);
+							}}
+						>
+							Compare dates
+						</Switch> */}
+						<div className='datepicker-buttons-wrapper'>
+							<Button
+								onClick={() => closeDropdown()}
+								size='xs'
+								variant='terciary'
+							>
+								Cancel
+							</Button>
+
+							<Button
+								size='xs'
+								// disabled={!DDStartDate1 || !DDEndDate1} // Start and end dates must be selected
+								onClick={() => updateDateFilters()}
+							>
+								Set date
+							</Button>
+						</div>
+					</div>
+				</Dropdown.Item>
+			</Dropdown.Menu>
+		</Dropdown>
+	);
+};
+
+DropdownDatePicker.propTypes = {
+	className: PropTypes.string,
+	variant: PropTypes.oneOf(['input', 'filter']),
+	show: PropTypes.bool,
+	setShow: PropTypes.func,
+	onToggle: PropTypes.func,
+	dateFrom: PropTypes.string,
+	setDateFrom: PropTypes.func,
+	dateTo: PropTypes.string,
+	setDateTo: PropTypes.func,
+	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,
+};
+
+export default DropdownDatePicker;

package/src/components/Dropdowns/DropdownsDatePicker/PeriodAndDetailDropdowns.tsx

@@ -0,0 +1,351 @@
+import React, { useRef } from 'react';
+
+const PeriodAndDetailDropdowns = ({
+	DDPeriod1,
+	setDDPeriod1,
+	DDDetailLevel1,
+	setDDDetailLevel1,
+	DDPeriod2,
+	setDDPeriod2,
+	DDDetailLevel2,
+	setDDDetailLevel2,
+}) => {
+	const DDPeriod1Btn = useRef(null);
+	const DDPeriod1Dropwdown = useRef(null);
+	const DDDetailLevel1Btn = useRef(null);
+	const DDDetailLevel1Dropwdown = useRef(null);
+
+	const DDPeriod2Btn = useRef(null);
+	const DDPeriod2Dropwdown = useRef(null);
+	const DDDetailLevel2Btn = useRef(null);
+	const DDDetailLevel2Dropwdown = useRef(null);
+
+	const closeDropwdown = (DDRef, btnRef) => {
+		if (DDRef?.current?.className) {
+			DDRef.current.className = 'dropdown-menu dropdown-submenu shadow-2';
+		}
+		if (btnRef?.current?.className) {
+			btnRef.current.className = 'btn btn-input grey dropdown-toggle';
+		}
+	};
+
+	const updateDDPeriod1 = (value, dropdown) => {
+		setDDPeriod1(value);
+		closeDropwdown(dropdown, DDPeriod1Btn);
+	};
+
+	const updateDDDetailLevel1 = (value, dropdown) => {
+		setDDDetailLevel1(value);
+		closeDropwdown(dropdown, DDDetailLevel1Btn);
+	};
+
+	const updateDDPeriod2 = (value, dropdown) => {
+		setDDPeriod2(value);
+		closeDropwdown(dropdown, DDPeriod2Btn);
+	};
+
+	const updateDDDetailLevel2 = (value, dropdown) => {
+		setDDDetailLevel2(value);
+		closeDropwdown(dropdown, DDDetailLevel2Btn);
+	};
+
+	return (
+		<div className='tab-content' id='dateComparisonTabsContent'>
+			{/* DROPDOWNS FOR DATE 1 */}
+			<div
+				className='tab-pane fade show active'
+				id='date1ComparisonTabPane'
+				role='tabpanel'
+				aria-labelledby='date1ComparisonTab'
+				tabIndex={0}
+			>
+				<div className='d-flex gap-3 flex-column flex-md-row'>
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='periodDate1'>
+							Period
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='periodDate1'
+							ref={DDPeriod1Btn}
+						>
+							<span>{DDPeriod1}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDPeriod1Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('Custom range', DDPeriod1Dropwdown)
+									}
+								>
+									Custom range
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() => updateDDPeriod1('Today', DDPeriod1Dropwdown)}
+								>
+									Today
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('Yesterday', DDPeriod1Dropwdown)
+									}
+								>
+									Yesterday
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('Yesterday and today', DDPeriod1Dropwdown)
+									}
+								>
+									Yesterday and today
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('This week', DDPeriod1Dropwdown)
+									}
+								>
+									This week
+								</button>
+							</li>
+						</ul>
+					</div>
+
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='detailLevelDate1'>
+							Detail level
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='detailLevelDate1'
+							ref={DDDetailLevel1Btn}
+						>
+							<span>{DDDetailLevel1}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDDetailLevel1Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Hourly', DDDetailLevel1Dropwdown)
+									}
+								>
+									Hourly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Daily', DDDetailLevel1Dropwdown)
+									}
+								>
+									Daily
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Monthly', DDDetailLevel1Dropwdown)
+									}
+								>
+									Monthly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Total', DDDetailLevel1Dropwdown)
+									}
+								>
+									Total
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			{/* DROPDOWNS FOR DATE 2 */}
+			<div
+				className='tab-pane fade show'
+				id='date2ComparisonTabPane'
+				role='tabpanel'
+				aria-labelledby='date2ComparisonTab'
+				tabIndex={0}
+			>
+				<div className='d-flex gap-3 flex-column flex-md-row'>
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='periodDate2'>
+							Period
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='periodDate2'
+							ref={DDPeriod2Btn}
+						>
+							<span>{DDPeriod2}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDPeriod2Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('Custom range', DDPeriod2Dropwdown)
+									}
+								>
+									Custom range
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() => updateDDPeriod2('Today', DDPeriod2Dropwdown)}
+								>
+									Today
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('Yesterday', DDPeriod2Dropwdown)
+									}
+								>
+									Yesterday
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('Yesterday and today', DDPeriod2Dropwdown)
+									}
+								>
+									Yesterday and today
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('This week', DDPeriod2Dropwdown)
+									}
+								>
+									This week
+								</button>
+							</li>
+						</ul>
+					</div>
+
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='detailLevelDate2'>
+							Detail level
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='detailLevelDate2'
+							ref={DDDetailLevel2Btn}
+						>
+							<span>{DDDetailLevel2}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDDetailLevel2Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Hourly', DDDetailLevel2Dropwdown)
+									}
+								>
+									Hourly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Daily', DDDetailLevel2Dropwdown)
+									}
+								>
+									Daily
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Monthly', DDDetailLevel2Dropwdown)
+									}
+								>
+									Monthly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Total', DDDetailLevel2Dropwdown)
+									}
+								>
+									Total
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default PeriodAndDetailDropdowns;

package/src/components/Dropdowns/DropdownsDatePicker/index.js

@@ -0,0 +1,3 @@
+import DropdownDatePicker from "./DropdownDatePicker";
+
+export { DropdownDatePicker };

package/src/components/Dropdowns/index.js

@@ -1,5 +1,6 @@
 import DropdownComponent from './DropdownComponent';
 import DropdownFilter from './DropdownFilter';
-import DropdownInput from './DropdownInput';
+import DropdownMultiSelect from './DropdownMultiSelect';
+import { DropdownDatePicker } from './DropdownsDatePicker/index';
 
-export { DropdownComponent, DropdownFilter, DropdownInput }
+export { DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker }