import React from 'react' ; import { MapkitContext , MapkitProvider } from './MapkitProvider' ; import { useMap } from './useMap' ; import { MapOptions } from './utils' ; type MapRef = React . RefObject < HTMLDivElement > ; type MapContextType = { map ? : mapkit . Map ; mapkit ? : typeof mapkit ; } ; export const MapContext = React . createContext < MapContextType > ( { map : undefined , mapkit : undefined , } ) ; const MapProvider = ( { children , context , } ) => { return < MapContext . Provider value = { context } children = { children } / > ; } ; const MapContainer = ( { children , mapRef } ) => { return ( < div ref = { mapRef } style = { { width : '100%' , height : '100%' } } children = { children } / > ) ; } ; const CreateMap = ( { children , ... defaultOptions } ) => { const { mapProps : { mapkit , map , mapRef } , } = useMap ( defaultOptions ) ; return ( < MapProvider context = { { mapkit , map } } > < MapContainer mapRef = { mapRef } children = { children } / > < /MapProvider>); } ; export const Map = ( { tokenOrCallback , language = 'en' , mapkit , map , mapRef , ... props } ) => { let context = React . useContext ( MapkitContext ) ; if ( mapRef ) { return ( < MapProvider context = { { mapkit , map } } > < MapContainer mapRef = { mapRef } { ... props } /> < /MapProvider>); } const mapBox = < CreateMap { ... props } / > ; if ( context . isInProvider ) { return mapBox ; } if ( ! tokenOrCallback ) { throw new Error ( '`tokenOrCallback` is required. Either add it to this `Map` component or to a `MapkitProvider` parent of this component.' ) ; } return ( < MapkitProvider tokenOrCallback = { tokenOrCallback } language = { language } children = { mapBox } / > ) ; } ;