groovinads-ui 1.2.75 → 1.9.0

package/src/components/Dropdowns/DropdownMultiSelect.jsx

@@ -1,304 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-
-// BOOTSTRAP
-import Dropdown from 'react-bootstrap/Dropdown';
-
-// COMPONENTS
-import { Icon, PillComponent } from '../Labels';
-import { Checkbox, Input } from '../Inputs';
-
-// HOOKS
-import { useTextFormatter } from '../../hooks/index';
-
-const DropdownMultiSelect = ({
-	autoClose = false,
-	className = '',
-	drop,
-	inputLabel = '',
-	object = false,
-	nameKey,
-	customKey,
-	idKey,
-	searchLabel = 'Search',
-	onToggle,
-	overflow = false,
-	valuesSelected = [],
-	setValuesSelected,
-	values = [],
-	show,
-	setShow,
-	idInPill = false,
-	showStatus = '',
-	focus = false,
-	buttonVariant = 'input',
-	nowrap = false,
-	hasId = true,
-	validate = false,
-	requiredText = 'required',
-	errorRequired = false,
-	setErrorRequiered,
-}) => {
-	// STATES
-	const [query, setQuery] = useState('');
-	const [innerShow, setInnerShow] = useState(!!show);
-
-	const dropdownRef = useRef(null);
-	const toggleRef = useRef(null);
-	const menuRef = useRef(null);
-
-	const { highlightText } = useTextFormatter();
-
-	// FUNCTIONS
-	const handleCheckbox = (status, value) => {
-		const i = values.findIndex(
-			(item) =>
-				(object ? item[idKey] : item) === (object ? value[idKey] : value),
-		);
-		if (status) {
-			setValuesSelected((prevValues) => [...prevValues, values[i]]);
-		} else {
-			setValuesSelected((prevValues) =>
-				prevValues.filter(
-					(item) =>
-						(object ? item[idKey] : item) !==
-						(object ? values[i][idKey] : values[i]),
-				),
-			);
-		}
-	};
-
-	const handlePill = (index) => {
-		setValuesSelected((prevValues) =>
-			prevValues.filter((item, i) => i !== index),
-		);
-	};
-
-	const valuesFromSearch = () =>
-		values.filter(
-			(item) =>
-				(object ? `${item[idKey]} ${item[nameKey]} ${item[customKey]}` : item)
-					.toLowerCase()
-					.includes(query.toLowerCase()) &&
-				(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
-		);
-
-	const handleClickOutside = useCallback((event) => {
-		if (
-			dropdownRef?.current &&
-			!dropdownRef?.current.contains(event?.target) &&
-			(autoClose === true || autoClose === 'outside')
-		) {
-			setInnerShow(false);
-			setShow(false);
-		}
-	}, []);
-
-	// VALIDATION REQUIRED
-	const validateRequired = () => {
-		if (!valuesSelected.length) {
-			setTimeout(() => {
-				setErrorRequiered((prev) => !prev);
-			}, 2000);
-		}
-	};
-
-	useEffect(() => {
-		setInnerShow(show);
-	}, [show]);
-
-	useEffect(() => {
-		document.addEventListener('click', handleClickOutside);
-		return () => {
-			document.removeEventListener('click', handleClickOutside);
-		};
-	}, []);
-
-	useEffect(() => {
-		if (validate && errorRequired) validateRequired();
-	}, [validate, errorRequired]);
-
-	useEffect(() => {
-		if (overflow && menuRef.current && toggleRef.current) {
-			menuRef.current.style.width = `${toggleRef.current.offsetWidth}px`;
-		}
-	}, [innerShow, overflow]);
-
-	useEffect(() => {
-		function updateMenuWidth() {
-			if (overflow && menuRef.current && toggleRef.current) {
-				const width = toggleRef.current.offsetWidth;
-				menuRef.current.style.width = `${width}px`;
-				menuRef.current.style.minWidth = `${width}px`;
-				menuRef.current.style.maxWidth = `${width}px`;
-			}
-		}
-
-		if (innerShow) {
-			updateMenuWidth();
-			window.addEventListener('resize', updateMenuWidth);
-		}
-
-		return () => {
-			window.removeEventListener('resize', updateMenuWidth);
-		};
-	}, [innerShow, overflow]);
-
-	return (
-		<Dropdown
-			className={className}
-			autoClose={autoClose}
-			show={innerShow}
-			ref={dropdownRef}
-			onToggle={onToggle}
-			drop={drop}
-			data-error={requiredText}
-		>
-			<Dropdown.Toggle
-				as={'div'}
-				ref={toggleRef}
-				className={`btn btn-${buttonVariant} ${nowrap ? 'nowrap' : ''}${errorRequired && valuesSelected.length === 0 ? 'not-validated' : ''}`}
-				onClick={(e) => {
-					e.stopPropagation(); // Detiene la propagación del clic
-					setInnerShow((prevShow) => !prevShow); // Alterna el estado interno del dropdown
-					// setShow((prevShow) => !prevShow); // Alterna el estado del dropdown en el estado externo también
-				}}
-			>
-				{valuesSelected.length > 0 && buttonVariant === 'input' && (
-					<div className='wrapper'>
-						{valuesSelected.map((value, index) => {
-							return (
-								<PillComponent
-									color='neutral'
-									closeButton={true}
-									onClick={(event) => {
-										event.stopPropagation();
-										handlePill(index);
-									}}
-									key={'Dropdown.PillComponent' + index}
-								>
-									{customKey
-										? `${value[nameKey]} - ${value[customKey]}`
-										: idInPill
-											? `#${value[idKey]}`
-											: value[nameKey] || value}
-
-									{/* {idInPill ? `#${value[idKey]} - ` : ''}
-									<span>{object ? value[nameKey] : value}</span> */}
-								</PillComponent>
-							);
-						})}
-					</div>
-				)}
-				<span className='label'>{inputLabel}</span>
-				<Icon
-					style={'solid'}
-					iconName={'angle-down'}
-					scale={1}
-					className='caret'
-				/>
-			</Dropdown.Toggle>
-
-			<Dropdown.Menu
-				className='w-100'
-				ref={menuRef}
-				popperConfig={
-					overflow
-						? {
-								strategy: 'fixed',
-								onFirstUpdate: () =>
-									window.dispatchEvent(new CustomEvent('scroll')),
-							}
-						: undefined
-				}
-			>
-				<Dropdown.Item onClick={(e) => e.stopPropagation()} as={'div'}>
-					<Input
-						label={searchLabel}
-						value={query}
-						onChange={({ target }) => setQuery(target.value)}
-						icon={'magnifying-glass'}
-						size={'xs'}
-						className={'w-100'}
-						focus={focus}
-					/>
-				</Dropdown.Item>
-
-				<Dropdown.Item onClick={(e) => e.stopPropagation()} as={'div'}>
-					{valuesFromSearch().length > 0 ? (
-						<ul className='dropdown-checks'>
-							{/* List values */}
-							{valuesFromSearch().map((value, index) => {
-								return (
-									<Checkbox
-										setStatus={(status) => {
-											handleCheckbox(status, value);
-										}}
-										status={
-											object
-												? valuesSelected.some(
-														(item) => item[idKey] === value[idKey],
-													)
-												: valuesSelected.includes(value)
-										}
-										key={'Dropdown.Input.Checkbox' + index}
-									>
-										{highlightText(
-											object
-												? customKey
-													? `${value[nameKey]} - ${value[customKey]}`
-													: `${hasId ? `#${value[idKey]} - ` : ''}${value[nameKey]}`
-												: value[nameKey] || value,
-											query,
-										)}
-									</Checkbox>
-								);
-							})}
-						</ul>
-					) : (
-						<div className='not-matched'>
-							<p>No match found</p>
-						</div>
-					)}
-				</Dropdown.Item>
-			</Dropdown.Menu>
-		</Dropdown>
-	);
-};
-
-DropdownMultiSelect.propTypes = {
-	inputLabel: PropTypes.string,
-	searchLabel: PropTypes.string,
-	autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-	className: PropTypes.string,
-	drop: PropTypes.oneOf(['up', 'down']),
-	onToggle: PropTypes.func,
-	overflow: PropTypes.bool,
-	valuesSelected: PropTypes.array,
-	setValuesSelected: PropTypes.func,
-	values: PropTypes.array,
-	show: PropTypes.bool,
-	setShow: PropTypes.func,
-	object: PropTypes.bool,
-	nameKey: PropTypes.string,
-	customKey: PropTypes.string,
-	idKey: PropTypes.string,
-	idInPill: PropTypes.bool,
-	showStatus: PropTypes.string,
-	focus: PropTypes.bool,
-	buttonVariant: PropTypes.oneOf([
-		'input',
-		'primary',
-		'secondary',
-		'terciary',
-		'outline',
-	]),
-	nowrap: PropTypes.bool,
-	hasId: PropTypes.bool,
-	requiredText: PropTypes.string,
-	validate: PropTypes.bool,
-	errorRequired: PropTypes.bool,
-	setErrorRequiered: PropTypes.func,
-};
-
-export default DropdownMultiSelect;

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -1,175 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-import { format } from 'date-fns';
-
-// COMPONENTS
-import { Dropdown } from 'react-bootstrap';
-import { Icon } from '../Labels';
-import { Button } from '../Button';
-import DatePicker from 'react-datepicker';
-
-export default function DropdownSimpleDatePicker({
-	className = '',
-	show,
-	setShow,
-	onToggle,
-	inputLabel = 'period',
-	overflow = false,
-	date,
-	setDate,
-	handleClear,
-	minDate,
-	maxDate,
-	requiredText,
-	showError,
-}) {
-	const [internalShow, setInternalShow] = useState(!!show);
-	const dropdownRef = useRef(null);
-
-	const formatDate = (date) => {
-		if (!date) return null;
-
-		if (date instanceof Date) return date;
-
-		if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
-			return new Date(`${date}T00:00:00`);
-		}
-
-		return new Date(date);
-	};
-
-	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 = () => {
-		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}
-			data-error={requiredText}
-		>
-			<Dropdown.Toggle
-				variant='toggle-filter'
-				onClick={internalToggle}
-				className={`btn-input w-100 ${showError ? 'not-validated' : ''}`}
-			>
-				<span className='dropdown-label'>{inputLabel}</span>
-				<span>{date ? format(new Date(date), 'EEE MMM dd yyyy') : ''}</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
-						minDate={formatDate(minDate)}
-						maxDate={formatDate(maxDate)}
-						dayClassName={(date) =>
-							(minDate && date < minDate) ||
-							(maxDate && date > maxDate && date !== formatDate(maxDate))
-								? 'react-datepicker__day--disabled'
-								: ''
-						}
-					/>
-
-					<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 = {
-	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,
-	minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-	maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-	requiredText: PropTypes.string,
-	showError: PropTypes.bool,
-};