BLUE
PHP 7.4.33
Path:
/var/www/sitesecurity.bitkit.dk/httpdocs/node_modules/@react-google-maps/api/src/components/addons
Run
Logout
Edit File
Size: 12.70 KB
Close
/var/www/sitesecurity.bitkit.dk/httpdocs/node_modules/@react-google-maps/api/src/components/addons/InfoBox.tsx
Text
Base64
/* global google */ import { memo, useRef, Children, useState, useEffect, useContext, PureComponent, type ReactNode, type ReactPortal, type ContextType, } from 'react' import { createPortal } from 'react-dom' import invariant from 'invariant' import { InfoBox as GoogleMapsInfoBox, type InfoBoxOptions, } from '@react-google-maps/infobox' import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents, } from '../../utils/helper.js' import MapContext from '../../map-context.js' const eventMap = { onCloseClick: 'closeclick', onContentChanged: 'content_changed', onDomReady: 'domready', onPositionChanged: 'position_changed', onZindexChanged: 'zindex_changed', } const updaterMap = { options(instance: GoogleMapsInfoBox, options: InfoBoxOptions): void { instance.setOptions(options) }, position( instance: GoogleMapsInfoBox, position: google.maps.LatLng | google.maps.LatLngLiteral ): void { if (position instanceof google.maps.LatLng) { instance.setPosition(position) } else { instance.setPosition(new google.maps.LatLng(position.lat, position.lng)) } }, visible(instance: GoogleMapsInfoBox, visible: boolean): void { instance.setVisible(visible) }, zIndex(instance: GoogleMapsInfoBox, zIndex: number): void { instance.setZIndex(zIndex) }, } type InfoBoxState = { infoBox: GoogleMapsInfoBox | null } export type InfoBoxProps = { children?: ReactNode | undefined /** Can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset. The anchorPoint is the offset from the anchor's position to the tip of the InfoBox. */ anchor?: google.maps.MVCObject | undefined options?: InfoBoxOptions | undefined /** The LatLng at which to display this InfoBox. If the InfoBox is opened with an anchor, the anchor's position will be used instead. */ position?: google.maps.LatLng | undefined /** All InfoBoxes are displayed on the map in order of their zIndex, with higher values displaying in front of InfoBoxes with lower values. By default, InfoBoxes are displayed according to their latitude, with InfoBoxes of lower latitudes appearing in front of InfoBoxes at higher latitudes. InfoBoxes are always displayed in front of markers. */ zIndex?: number | undefined /** This event is fired when the close button was clicked. */ onCloseClick?: (() => void) | undefined /** This event is fired when the <div> containing the InfoBox's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically. */ onDomReady?: (() => void) | undefined /** This event is fired when the content property changes. */ onContentChanged?: (() => void) | undefined /** This event is fired when the position property changes. */ onPositionChanged?: (() => void) | undefined /** This event is fired when the InfoBox's zIndex changes. */ onZindexChanged?: (() => void) | undefined /** This callback is called when the infoBox instance has loaded. It is called with the infoBox instance. */ onLoad?: ((infoBox: GoogleMapsInfoBox) => void) | undefined /** This callback is called when the component unmounts. It is called with the infoBox instance. */ onUnmount?: ((infoBox: GoogleMapsInfoBox) => void) | undefined } const defaultOptions: InfoBoxOptions = {} function InfoBoxFunctional({ children, anchor, options, position, zIndex, onCloseClick, onDomReady, onContentChanged, onPositionChanged, onZindexChanged, onLoad, onUnmount, }: InfoBoxProps): ReactPortal | null { const map = useContext<google.maps.Map | null>(MapContext) const [instance, setInstance] = useState<GoogleMapsInfoBox | null>(null) const [closeClickListener, setCloseClickListener] = useState<google.maps.MapsEventListener | null>(null) const [domReadyClickListener, setDomReadyClickListener] = useState<google.maps.MapsEventListener | null>(null) const [contentChangedClickListener, setContentChangedClickListener] = useState<google.maps.MapsEventListener | null>(null) const [positionChangedClickListener, setPositionChangedClickListener] = useState<google.maps.MapsEventListener | null>(null) const [zIndexChangedClickListener, setZindexChangedClickListener] = useState<google.maps.MapsEventListener | null>(null) const containerElementRef = useRef<HTMLDivElement | null>(null) // Order does matter useEffect(() => { if (map && instance !== null) { instance.close() if (anchor) { instance.open(map, anchor) } else if (instance.getPosition()) { instance.open(map) } } }, [map, instance, anchor]) useEffect(() => { if (options && instance !== null) { instance.setOptions(options) } }, [instance, options]) useEffect(() => { if (position && instance !== null) { const positionLatLng = position instanceof google.maps.LatLng ? position : // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore new google.maps.LatLng(position.lat, position.lng) instance.setPosition(positionLatLng) } }, [position]) useEffect(() => { if (typeof zIndex === 'number' && instance !== null) { instance.setZIndex(zIndex) } }, [zIndex]) useEffect(() => { if (instance && onCloseClick) { if (closeClickListener !== null) { google.maps.event.removeListener(closeClickListener) } setCloseClickListener( google.maps.event.addListener(instance, 'closeclick', onCloseClick) ) } }, [onCloseClick]) useEffect(() => { if (instance && onDomReady) { if (domReadyClickListener !== null) { google.maps.event.removeListener(domReadyClickListener) } setDomReadyClickListener( google.maps.event.addListener(instance, 'domready', onDomReady) ) } }, [onDomReady]) useEffect(() => { if (instance && onContentChanged) { if (contentChangedClickListener !== null) { google.maps.event.removeListener(contentChangedClickListener) } setContentChangedClickListener( google.maps.event.addListener( instance, 'content_changed', onContentChanged ) ) } }, [onContentChanged]) useEffect(() => { if (instance && onPositionChanged) { if (positionChangedClickListener !== null) { google.maps.event.removeListener(positionChangedClickListener) } setPositionChangedClickListener( google.maps.event.addListener( instance, 'position_changed', onPositionChanged ) ) } }, [onPositionChanged]) useEffect(() => { if (instance && onZindexChanged) { if (zIndexChangedClickListener !== null) { google.maps.event.removeListener(zIndexChangedClickListener) } setZindexChangedClickListener( google.maps.event.addListener( instance, 'zindex_changed', onZindexChanged ) ) } }, [onZindexChanged]) useEffect(() => { if (map) { const { position, ...infoBoxOptions }: InfoBoxOptions = options || defaultOptions let positionLatLng: google.maps.LatLng | undefined if (position && !(position instanceof google.maps.LatLng)) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore positionLatLng = new google.maps.LatLng(position.lat, position.lng) } const infoBox = new GoogleMapsInfoBox({ ...infoBoxOptions, ...(positionLatLng ? { position: positionLatLng } : {}), }) containerElementRef.current = document.createElement('div') setInstance(infoBox) if (onCloseClick) { setCloseClickListener( google.maps.event.addListener(infoBox, 'closeclick', onCloseClick) ) } if (onDomReady) { setDomReadyClickListener( google.maps.event.addListener(infoBox, 'domready', onDomReady) ) } if (onContentChanged) { setContentChangedClickListener( google.maps.event.addListener( infoBox, 'content_changed', onContentChanged ) ) } if (onPositionChanged) { setPositionChangedClickListener( google.maps.event.addListener( infoBox, 'position_changed', onPositionChanged ) ) } if (onZindexChanged) { setZindexChangedClickListener( google.maps.event.addListener( infoBox, 'zindex_changed', onZindexChanged ) ) } infoBox.setContent(containerElementRef.current) if (anchor) { infoBox.open(map, anchor) } else if (infoBox.getPosition()) { infoBox.open(map) } else { invariant( false, 'You must provide either an anchor or a position prop for <InfoBox>.' ) } if (onLoad) { onLoad(infoBox) } } return () => { if (instance !== null) { if (closeClickListener) { google.maps.event.removeListener(closeClickListener) } if (contentChangedClickListener) { google.maps.event.removeListener(contentChangedClickListener) } if (domReadyClickListener) { google.maps.event.removeListener(domReadyClickListener) } if (positionChangedClickListener) { google.maps.event.removeListener(positionChangedClickListener) } if (zIndexChangedClickListener) { google.maps.event.removeListener(zIndexChangedClickListener) } if (onUnmount) { onUnmount(instance) } instance.close() } } }, []) return containerElementRef.current ? createPortal(Children.only(children), containerElementRef.current) : null } export const InfoBoxF = memo(InfoBoxFunctional) export class InfoBoxComponent extends PureComponent< InfoBoxProps, InfoBoxState > { static override contextType = MapContext declare context: ContextType<typeof MapContext> registeredEvents: google.maps.MapsEventListener[] = [] containerElement: HTMLElement | null = null override state: InfoBoxState = { infoBox: null, } open = (infoBox: GoogleMapsInfoBox, anchor?: google.maps.MVCObject): void => { if (anchor) { if (this.context !== null) { infoBox.open(this.context, anchor) } } else if (infoBox.getPosition()) { if (this.context !== null) { infoBox.open(this.context) } } else { invariant( false, 'You must provide either an anchor or a position prop for <InfoBox>.' ) } } setInfoBoxCallback = (): void => { if (this.state.infoBox !== null && this.containerElement !== null) { this.state.infoBox.setContent(this.containerElement) this.open(this.state.infoBox, this.props.anchor) if (this.props.onLoad) { this.props.onLoad(this.state.infoBox) } } } override componentDidMount(): void { const { position, ...infoBoxOptions }: InfoBoxOptions = this.props.options || {} let positionLatLng: google.maps.LatLng | undefined if (position && !(position instanceof google.maps.LatLng)) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore positionLatLng = new google.maps.LatLng(position.lat, position.lng) } const infoBox = new GoogleMapsInfoBox({ ...infoBoxOptions, ...(positionLatLng ? { position: positionLatLng } : {}), }) this.containerElement = document.createElement('div') this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({ updaterMap, eventMap, prevProps: {}, nextProps: this.props, instance: infoBox, }) this.setState({ infoBox }, this.setInfoBoxCallback) } override componentDidUpdate(prevProps: InfoBoxProps): void { const { infoBox } = this.state if (infoBox !== null) { unregisterEvents(this.registeredEvents) this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({ updaterMap, eventMap, prevProps, nextProps: this.props, instance: infoBox, }) } } override componentWillUnmount(): void { const { onUnmount } = this.props const { infoBox } = this.state if (infoBox !== null) { if (onUnmount) { onUnmount(infoBox) } unregisterEvents(this.registeredEvents) infoBox.close() } } override render(): ReactPortal | null { return this.containerElement ? createPortal(Children.only(this.props.children), this.containerElement) : null } } export default InfoBoxComponent
Save
Close
Exit & Reset
Text mode: syntax highlighting auto-detects file type.
Directory Contents
Dirs: 0 × Files: 8
Delete Selected
Select All
Select None
Sort:
Name
Size
Modified
Enable drag-to-move
Name
Size
Perms
Modified
Actions
GoogleMarkerClusterer.stories.tsx
3.29 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
GoogleMarkerClusterer.tsx
1.78 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
InfoBox.md
873 B
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
InfoBox.tsx
12.70 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
MarkerClusterer.md
2.09 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
MarkerClusterer.stories.tsx
4.23 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
MarkerClusterer.tsx
19.01 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
MarkerClustererF.stories.tsx
4.29 KB
lrw-r--r--
2026-04-28 09:11:40
Edit
Download
Rename
Chmod
Change Date
Delete
OK
Cancel
recursive
OK
Cancel
recursive
OK
Cancel
Zip Selected
If ZipArchive is unavailable, a
.tar
will be created (no compression).