rlayers
Version:
React Components for OpenLayers
99 lines • 3.52 kB
JavaScript
import { ROverlayBase } from './ROverlay';
/**
* Popup component
*
* `Popup` extends `Overlay` and implements an automatic popup
*
* Requires a location context
*
* (ie it must be descendant of a `RFeature`)
*/
export default class RPopup extends ROverlayBase {
constructor(props, context) {
super(props, context);
/**
* Toggle the state
*/
this.toggle = () => {
this.visible = !this.visible;
this.setPosition();
};
/**
* Show the popup
*/
this.show = () => {
var _a, _b;
if (this.showing)
return;
if (this.hiding)
window.clearTimeout(this.hiding);
this.showing = window.setTimeout(() => {
this.visible = true;
this.setPosition();
this.hiding = this.showing = undefined;
}, (_b = (_a = this.props.delay) === null || _a === void 0 ? void 0 : _a.show) !== null && _b !== void 0 ? _b : 250);
};
/**
* Hide the popup
*/
this.hide = () => {
var _a, _b;
if (this.hiding)
return;
if (this.showing)
window.clearTimeout(this.showing);
this.hiding = window.setTimeout(() => {
this.visible = false;
this.setPosition();
this.hiding = this.showing = undefined;
}, (_b = (_a = this.props.delay) === null || _a === void 0 ? void 0 : _a.hide) !== null && _b !== void 0 ? _b : 50);
};
this.visible = false;
}
componentWillUnmount() {
super.componentWillUnmount();
this.unregister();
}
setPosition() {
this.ol.setPosition(this.visible ? this.context.location : undefined);
}
unregister(prevProps) {
if (!prevProps)
return;
switch (prevProps.trigger) {
default:
case 'click':
this.context.rFeature.un('click', this.toggle);
break;
case 'hover':
this.context.rFeature.un('pointerenter', this.show);
this.context.rFeature.un('pointerhide', this.hide);
break;
}
}
refresh(prevProps) {
this.ol.setElement(this.containerRef.current);
if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.trigger) !== this.props.trigger) {
this.unregister(prevProps);
switch (this.props.trigger) {
default:
case 'click':
if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.trigger) === 'hover') {
this.context.rFeature.un('pointerenter', this.show);
this.context.rFeature.un('pointerhide', this.hide);
}
this.context.rFeature.on('click', this.toggle);
break;
case 'hover':
if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.trigger) === 'click') {
this.context.rFeature.un('click', this.toggle);
}
this.context.rFeature.on('pointerenter', this.show);
this.context.rFeature.on('pointerleave', this.hide);
break;
}
}
this.setPosition();
}
}
//# sourceMappingURL=RPopup.js.map