diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx index 3a8df9ce..a50f9764 100644 --- a/src/Components/Map/UtopiaMapInner.tsx +++ b/src/Components/Map/UtopiaMapInner.tsx @@ -1,11 +1,6 @@ /* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/restrict-template-expressions */ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-argument */ import { LatLng } from 'leaflet' import { Children, @@ -47,6 +42,7 @@ import { SelectPosition } from './Subcomponents/SelectPosition' import type { ItemFormPopupProps } from '#types/ItemFormPopupProps' import type { UtopiaMapProps } from '#types/UtopiaMapProps' import type { Feature, Geometry as GeoJSONGeometry } from 'geojson' +import type { MutableRefObject, SetStateAction } from 'react' const mapDivRef = createRef() @@ -154,7 +150,7 @@ export function UtopiaMapInner({ url='https://tile.osmand.net/hd/{z}/{x}/{y}.png' /> setClusterRef(r)} + ref={(r: SetStateAction>) => setClusterRef(r)} showCoverageOnHover chunkedLoading maxClusterRadius={50} @@ -164,7 +160,7 @@ export function UtopiaMapInner({ isValidElement<{ setItemFormPopup: React.Dispatch> itemFormPopup: ItemFormPopupProps | null - clusterRef: React.MutableRefObject + clusterRef: React.MutableRefObject }>(child) ? cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef }) : child, diff --git a/src/Components/Map/hooks/useClusterRef.tsx b/src/Components/Map/hooks/useClusterRef.tsx index a445dd90..9dd0464c 100644 --- a/src/Components/Map/hooks/useClusterRef.tsx +++ b/src/Components/Map/hooks/useClusterRef.tsx @@ -1,23 +1,26 @@ /* eslint-disable react/prop-types */ /* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ -/* eslint-disable @typescript-eslint/no-explicit-any */ import { createContext, useContext, useState } from 'react' +import type MarkerClusterGroup from 'react-leaflet-cluster' + type UseClusterRefManagerResult = ReturnType +type ClusterRef = React.MutableRefObject + const ClusterRefContext = createContext({ - clusterRef: {} as React.MutableRefObject, + clusterRef: {} as typeof MarkerClusterGroup, setClusterRef: () => {}, }) function useClusterRefManager(): { - clusterRef: any - setClusterRef: React.Dispatch>> + clusterRef: typeof MarkerClusterGroup + setClusterRef: React.Dispatch< + React.SetStateAction> + > } { - const [clusterRef, setClusterRef] = useState>( - {} as React.MutableRefObject, - ) + const [clusterRef, setClusterRef] = useState({} as React.MutableRefObject) return { clusterRef, setClusterRef } } @@ -28,7 +31,7 @@ export const ClusterRefProvider: React.FunctionComponent<{ {children} ) -export const useClusterRef = (): any => { +export const useClusterRef = (): typeof MarkerClusterGroup => { const { clusterRef } = useContext(ClusterRefContext) return clusterRef } diff --git a/types/LayerProps.d.ts b/types/LayerProps.d.ts index 7d742d5e..aedcf271 100644 --- a/types/LayerProps.d.ts +++ b/types/LayerProps.d.ts @@ -2,6 +2,7 @@ import type { Item } from './Item' import type { ItemFormPopupProps } from './ItemFormPopupProps' import type { ItemsApi } from './ItemsApi' import type { ItemType } from './ItemType' +import type MarkerClusterGroup from 'react-leaflet-cluster' export interface LayerProps { id?: string @@ -37,6 +38,5 @@ export interface LayerProps { item_presets?: Record setItemFormPopup?: React.Dispatch> itemFormPopup?: ItemFormPopupProps | null - // eslint-disable-next-line @typescript-eslint/no-explicit-any - clusterRef?: any + clusterRef?: React.MutableRefObject[] }