Fix Alto de Lista de Selector Carousel
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user