1 | import * as React from 'react';
|
2 | import ProjectedLayer from './projected-layer';
|
3 | import * as GeoJSON from 'geojson';
|
4 | import { getClassName } from './util/classname';
|
5 | import { Point } from 'mapbox-gl';
|
6 | import { Anchor } from './util/types';
|
7 |
|
8 | export interface Props {
|
9 | coordinates: GeoJSON.Position;
|
10 | anchor?: Anchor;
|
11 | offset?: number | number[] | Point;
|
12 | onClick?: React.MouseEventHandler<HTMLDivElement>;
|
13 | onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
|
14 | onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
|
15 | onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
|
16 | onScroll?: React.UIEventHandler<HTMLDivElement>;
|
17 | onWheel?: React.MouseEventHandler<HTMLDivElement>;
|
18 | style?: React.CSSProperties;
|
19 | className?: string;
|
20 | tabIndex?: number;
|
21 | }
|
22 |
|
23 | export const defaultClassName = ['mapboxgl-popup'];
|
24 |
|
25 | export default class Popup extends React.Component<Props> {
|
26 | public render() {
|
27 | const { children, className } = this.props;
|
28 | const props = { ...this.props, children: undefined };
|
29 | const childrenClassName = getClassName(defaultClassName, className);
|
30 |
|
31 | return (
|
32 | <ProjectedLayer {...props} type="popup" className={childrenClassName}>
|
33 | <div className="mapboxgl-popup-tip" />
|
34 | <div className="mapboxgl-popup-content">{children}</div>
|
35 | </ProjectedLayer>
|
36 | );
|
37 | }
|
38 | }
|