dsa
unknown
jsx
21 days ago
4.4 kB
2
Indexable
Never
import React, { memo, useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { PROFILE_SUBMODULE, useAccess } from 'hooks/useAccess'; import EmptyContentSelect from 'components/EmptyContentSelect'; import IncidentCard from 'components/emergency-cards/DispatchDashboardMulticorporation'; import './index.scss'; const ITEM_SIZE_WIDTH = 290; const ITEM_SIZE_HEIGHT = 140; const ITEM_HORIZONTAL_SEPARATION = 5; const CardLista = ({ visible, emergenciesDispatch = [], openTabItemHandler, blinkEmergencyIds = [], loadingEmergencies, onClickEmergencyItem, filterClosedCorporationsInCard, className, onContextMenu = () => {}, emptyResultMsg = 'despacho_card.mensaje' }) => { const { assignedCorporation } = useSelector((state) => state.CadSession); const { complementedEmergencyIds } = useSelector((state) => state.emergencyComplements); const { hasAccess } = useAccess(); const { t } = useTranslation('translations'); const containerRef = useRef(null); const [containerSize, setContainerSize] = useState({ width: 0, height: 0 }); useEffect(() => { function updateSize() { if (containerRef.current) { setContainerSize({ width: containerRef.current.clientWidth, height: containerRef.current.clientHeight }); } } window.addEventListener('resize', updateSize); updateSize(); // Initial size update return () => window.removeEventListener('resize', updateSize); }, []); const itemsPerRow = Math.floor(containerSize.width / (ITEM_SIZE_WIDTH + ITEM_HORIZONTAL_SEPARATION * 2)); const visibleRows = Math.ceil(containerSize.height / ITEM_SIZE_HEIGHT); const visibleItemCount = itemsPerRow * visibleRows; const [visibleStartIndex, setVisibleStartIndex] = useState(0); const handleScroll = () => { const scrollTop = containerRef.current.scrollTop; const startRow = Math.floor(scrollTop / ITEM_SIZE_HEIGHT); setVisibleStartIndex(startRow * itemsPerRow); }; useEffect(() => { const list = containerRef.current; list.addEventListener('scroll', handleScroll); return () => list.removeEventListener('scroll', handleScroll); }, [itemsPerRow, containerSize.height]); if (!visible) { return null; } const totalHeight = Math.ceil(emergenciesDispatch.length / itemsPerRow) * ITEM_SIZE_HEIGHT; const visibleItems = emergenciesDispatch.slice(visibleStartIndex, visibleStartIndex + visibleItemCount); return ( <div ref={containerRef} className={`card-list-dispatcher ${className ?? ''}`} style={{ height: '100%', overflowY: 'auto' }} > <div className="cards-container" style={{ height: totalHeight, position: 'relative' }}> {visibleItems.map((emergency, index) => { const row = Math.floor((visibleStartIndex + index) / itemsPerRow); const col = (visibleStartIndex + index) % itemsPerRow; return ( <div key={emergency.id} style={{ position: 'absolute', top: row * ITEM_SIZE_HEIGHT, left: col * (ITEM_SIZE_WIDTH + ITEM_HORIZONTAL_SEPARATION), width: ITEM_SIZE_WIDTH }} > <IncidentCard emergency={emergency} showAssignedUnitCount={hasAccess(PROFILE_SUBMODULE.CAN_SHOW_ASSIGNED_UNIT_FORCES_IDENTIFIER)} profileAssignedCorporations={assignedCorporation} blinkAnimation={blinkEmergencyIds.includes(emergency.id)} onClickPreviewEmergency={openTabItemHandler} showAddress={hasAccess(PROFILE_SUBMODULE.N089_MODULO_DENUNCIAS_ASIGNADAS)} showChronometer={!hasAccess(PROFILE_SUBMODULE.N089_MODULO_DENUNCIAS_ASIGNADAS)} filterClosedCorporations={filterClosedCorporationsInCard} onClick={(ev, em) => onClickEmergencyItem(ev, em)} isComplemented={complementedEmergencyIds.includes(emergency.id)} onContextMenu={onContextMenu} /> </div> ); })} </div> </div> ); }; export default memo(CardLista);
Leave a Comment