groovinads-ui 1.2.74 → 1.9.0

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

@@ -1,313 +0,0 @@
-import React, { useEffect, 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';
-
-// HOOKS
-import { useTextFormatter } from '../../../hooks';
-
-const DropdownDatePicker = ({
-	className = '',
-	variant = 'input',
-	show,
-	setShow,
-	onToggle,
-	inputLabel = 'period',
-	locked = false,
-	overflow = false,
-	onRemoveFilter,
-	dateFrom,
-	setDateFrom,
-	dateTo,
-	setDateTo,
-	dateFrom2,
-	setDateFrom2,
-	dateTo2,
-	setDateTo2,
-	minDate,
-	maxDate,
-}) => {
-	// const [activeTab, setActiveTab] = useState(1);
-
-	const [compareDates, setCompareDates] = useState(true);
-
-	/* 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 [editingDateFrom, setEditingDateFrom] = useState(dateFrom);
-	const [editingDateTo, setEditingDateTo] = useState(dateTo);
-
-	const [internalShow, setInternalShow] = useState(!!show);
-
-	const { capitalice } = useTextFormatter();
-
-	const isMobile = window?.innerWidth < 500;
-
-	const onChangeDate1 = (dates) => {
-		const [start, end] = dates;
-		setEditingDateFrom(start);
-		setEditingDateTo(end);
-	};
-
-	const internalToggle = () => {
-		setInternalShow((prevShow) => !prevShow);
-		try {
-			onToggle();
-		} catch (error) {}
-	};
-
-	const closeDropdown = () => {
-		setInternalShow(false);
-		try {
-			setShow(false);
-		} catch (error) {}
-	};
-
-	const updateDateFilters = () => {
-		setDateFrom(editingDateFrom?.toString());
-
-		if (editingDateTo === null) {
-			setDateTo(editingDateFrom?.toString());
-		} else {
-			setDateTo(editingDateTo?.toString());
-		}
-		if (setDateFrom2) setDateFrom2(dateFrom2?.toString());
-		if (setDateTo2) setDateTo2(dateTo2?.toString());
-
-		closeDropdown();
-	};
-
-	useEffect(() => {
-		setInternalShow(!!show);
-	}, [show]);
-
-	return (
-		<Dropdown
-			show={internalShow}
-			className={`${variant === 'filter' ? 'dropdown-filter' : ''} ${className}`}
-		>
-			<Dropdown.Toggle
-				variant='toggle-filter'
-				onClick={internalToggle}
-				className={`${variant === 'input' ? 'btn btn-input' : ''}`}
-			>
-				{variant === 'input' ? (
-					<>
-						{(editingDateFrom || editingDateTo) && (
-							<span className={'wrapper'}>
-								<strong>
-									{editingDateFrom
-										? editingDateFrom.toString().split('00')[0]
-										: ''}
-								</strong>
-								to
-								<strong>
-									{editingDateTo ? editingDateTo.toString().split('00')[0] : ''}
-								</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={'chevron-down'}
-								scale={1}
-								className='caret'
-							/>
-						</div>
-						<div className='filter-values'>
-							{editingDateFrom || editingDateTo ? (
-								<>
-									<strong>
-										{editingDateFrom
-											? editingDateFrom.toString().split('00')[0]
-											: ''}
-									</strong>
-									to{' '}
-									<strong>
-										{editingDateTo
-											? editingDateTo.toString().split('00')[0]
-											: ''}
-									</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={editingDateFrom}
-						onChange={onChangeDate1}
-						startDate={editingDateFrom}
-						endDate={editingDateTo}
-						monthsShown={isMobile ? 1 : 2}
-						selectsRange
-						inline
-						minDate={minDate}
-						maxDate={maxDate}
-					/>
-
-					<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,
-	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/components/Dropdowns/DropdownsDatePicker/PeriodAndDetailDropdowns.tsx

@@ -1,351 +0,0 @@
-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

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

package/src/components/Dropdowns/index.js

@@ -1,7 +0,0 @@
-import DropdownComponent from './DropdownComponent';
-import DropdownFilter from './DropdownFilter';
-import DropdownMultiSelect from './DropdownMultiSelect';
-import DropdownSimpleDatePicker from './DropdownSimpleDatePicker';
-import { DropdownDatePicker } from './DropdownsDatePicker/index';
-
-export { DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker }