Fix Alto de Lista de Selector Carousel

This commit is contained in:
2025-10-24 12:19:00 -03:00
parent 70069d46f7
commit 21002445b2

View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select, { type SingleValue } from 'react-select'; import Select, { type SingleValue, type StylesConfig } from 'react-select';
import { getHomeResumen, getProvincias } from '../../../apiService'; import { getHomeResumen, getProvincias } from '../../../apiService';
import type { CatalogoItem } from '../../../types/types'; import type { CatalogoItem } from '../../../types/types';
import { ImageWithFallback } from '../../../components/common/ImageWithFallback'; import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
@@ -30,6 +30,13 @@ interface OptionType {
const PROVINCIAS_QUE_RENUEVAN_SENADORES = new Set(['01', '06', '08', '15', '16', '17', '22', '24']); const PROVINCIAS_QUE_RENUEVAN_SENADORES = new Set(['01', '06', '08', '15', '16', '17', '22', '24']);
const CATEGORIA_SENADORES = 2; const CATEGORIA_SENADORES = 2;
const customSelectStyles: StylesConfig<OptionType, false> = {
menuList: (provided) => ({
...provided,
maxHeight: '180px',
}),
};
const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`; const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
const formatNumber = (num: number) => num.toLocaleString('es-AR'); const formatNumber = (num: number) => num.toLocaleString('es-AR');
const formatDateTime = (dateString: string | undefined | null) => { const formatDateTime = (dateString: string | undefined | null) => {
@@ -48,7 +55,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
}; };
export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo }: Props) => { export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
const [selectedProvince, setSelectedProvince] = useState<OptionType | null>(null); const [selectedProvince, setSelectedProvince] = useState<OptionType | null>({ value: '01', label: 'Capital Federal' });
const { data: provincias = [], isLoading: isLoadingProvincias } = useQuery<CatalogoItem[]>({ const { data: provincias = [], isLoading: isLoadingProvincias } = useQuery<CatalogoItem[]>({
queryKey: ['provincias'], queryKey: ['provincias'],
@@ -57,7 +64,6 @@ export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo }
const provinceOptions: OptionType[] = useMemo(() => { const provinceOptions: OptionType[] = useMemo(() => {
const allOptions = provincias.map(p => ({ value: p.id, label: p.nombre })); const allOptions = provincias.map(p => ({ value: p.id, label: p.nombre }));
if (Number(categoriaId) === CATEGORIA_SENADORES) { if (Number(categoriaId) === CATEGORIA_SENADORES) {
return allOptions.filter(opt => PROVINCIAS_QUE_RENUEVAN_SENADORES.has(opt.value)); return allOptions.filter(opt => PROVINCIAS_QUE_RENUEVAN_SENADORES.has(opt.value));
} }
@@ -101,6 +107,7 @@ export const HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo }
isLoading={isLoadingProvincias} isLoading={isLoadingProvincias}
isSearchable={true} isSearchable={true}
placeholder="Seleccionar provincia..." placeholder="Seleccionar provincia..."
styles={customSelectStyles}
/> />
</div> </div>
</div> </div>