59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
/**
|
|
* Created by jiangzhixiong on 2024/05/23
|
|
*/
|
|
import React, { forwardRef, useContext, useImperativeHandle } from 'react'
|
|
import {
|
|
Popup as MapboxPopUp,
|
|
PopupProps as MapboxPopupProps
|
|
} from 'react-map-gl'
|
|
import { ConfigProvider, Image } from '@zhst/meta'
|
|
import './index.less'
|
|
import classNames from 'classnames'
|
|
|
|
const { ConfigContext } = ConfigProvider
|
|
|
|
export interface PopUpProps extends MapboxPopupProps {
|
|
prefixCls?: string;
|
|
size?: number;
|
|
title?: string;
|
|
url?: string;
|
|
content?: string;
|
|
}
|
|
|
|
export interface PopUpRefProps {
|
|
}
|
|
|
|
const PopUp = forwardRef<PopUpRefProps, PopUpProps>((props, ref) => {
|
|
const {
|
|
longitude,
|
|
latitude,
|
|
onClose,
|
|
title,
|
|
content,
|
|
url,
|
|
prefixCls: customizePrefixCls
|
|
} = props
|
|
const { getPrefixCls } = useContext(ConfigContext)
|
|
const componentName = getPrefixCls('map-popup', customizePrefixCls);
|
|
|
|
useImperativeHandle(ref, () => ({}))
|
|
|
|
return (
|
|
<MapboxPopUp
|
|
anchor="top"
|
|
className={componentName}
|
|
longitude={Number(longitude)}
|
|
latitude={Number(latitude)}
|
|
onClose={onClose}
|
|
>
|
|
<div className={classNames(`${componentName}-container`)}>
|
|
{title && <h2>{title}</h2>}
|
|
{url && <Image src={url} />}
|
|
{content && <p>{content}</p>}
|
|
</div>
|
|
</MapboxPopUp>
|
|
)
|
|
})
|
|
|
|
export default PopUp
|