177 lines
5.1 KiB
JavaScript
177 lines
5.1 KiB
JavaScript
"use strict";
|
|
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
// flowlint sketchy-null-string:off
|
|
import React, { Component } from 'react';
|
|
import warning from 'warning';
|
|
import { LeafletProvider, withLeaflet } from './context';
|
|
import { addClassName, removeClassName } from './utils/updateClassName';
|
|
import omit from './utils/omit';
|
|
var idCounter = 0;
|
|
|
|
var uniqueId = function uniqueId() {
|
|
return ++idCounter;
|
|
};
|
|
|
|
var LEAFLET_PANES = ['tile', 'shadow', 'overlay', 'map', 'marker', 'tooltip', 'popup'];
|
|
var PANE_RE = /-*pane/gi;
|
|
|
|
var isLeafletPane = function isLeafletPane(name) {
|
|
return LEAFLET_PANES.indexOf(name.replace(PANE_RE, '')) !== -1;
|
|
};
|
|
|
|
var paneStyles = {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
};
|
|
|
|
var Pane = /*#__PURE__*/function (_Component) {
|
|
_inheritsLoose(Pane, _Component);
|
|
|
|
function Pane() {
|
|
var _this;
|
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
name: undefined,
|
|
context: undefined
|
|
});
|
|
|
|
_defineProperty(_assertThisInitialized(_this), "setStyle", function (_temp) {
|
|
var _ref = _temp === void 0 ? _this.props : _temp,
|
|
style = _ref.style,
|
|
className = _ref.className;
|
|
|
|
var pane = _this.getPane(_this.state.name);
|
|
|
|
if (pane) {
|
|
if (className) {
|
|
addClassName(pane, className);
|
|
}
|
|
|
|
if (style) {
|
|
// Without the cast, Flow throws this error:
|
|
// Cannot assign style[key] to pane.style[key] because string
|
|
// is incompatible with number.
|
|
Object.keys(style).forEach(function (key) {
|
|
pane.style[key] = style[key];
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Pane.prototype;
|
|
|
|
_proto.componentDidMount = function componentDidMount() {
|
|
this.createPane(this.props);
|
|
};
|
|
|
|
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
if (!this.state.name) {
|
|
// Do nothing if this.state.name is undefined due to errors or
|
|
// an invalid props.name value
|
|
return;
|
|
} // If the 'name' prop has changed the current pane is unmounted and a new
|
|
// pane is created.
|
|
|
|
|
|
if (this.props.name !== prevProps.name) {
|
|
this.removePane();
|
|
this.createPane(this.props);
|
|
} else {
|
|
// Remove the previous css class name from the pane if it has changed.
|
|
// setStyle() will take care of adding in the updated className
|
|
if (prevProps.className && this.props.className !== prevProps.className) {
|
|
var pane = this.getPane(this.state.name);
|
|
|
|
if (pane != null && prevProps.className != null) {
|
|
removeClassName(pane, prevProps.className);
|
|
}
|
|
} // Update the pane's DOM node style and class
|
|
|
|
|
|
this.setStyle(this.props);
|
|
}
|
|
};
|
|
|
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
this.removePane();
|
|
};
|
|
|
|
_proto.createPane = function createPane(props) {
|
|
var map = props.leaflet.map;
|
|
var name = props.name || "pane-" + uniqueId();
|
|
|
|
if (map != null && map.createPane != null) {
|
|
var isDefault = isLeafletPane(name);
|
|
var existing = isDefault || this.getPane(name);
|
|
|
|
if (existing == null) {
|
|
map.createPane(name, this.getParentPane());
|
|
} else {
|
|
var message = isDefault ? "You must use a unique name for a pane that is not a default leaflet pane (" + name + ")" : "A pane with this name already exists. (" + name + ")";
|
|
process.env.NODE_ENV !== "production" ? warning(false, message) : void 0;
|
|
}
|
|
|
|
this.setState({
|
|
name: name,
|
|
context: _extends({}, props.leaflet, {
|
|
pane: name
|
|
})
|
|
}, this.setStyle);
|
|
}
|
|
};
|
|
|
|
_proto.removePane = function removePane() {
|
|
// Remove the created pane
|
|
var name = this.state.name;
|
|
|
|
if (name != null) {
|
|
var pane = this.getPane(name);
|
|
if (pane != null && pane.remove) pane.remove();
|
|
var map = this.props.leaflet.map;
|
|
|
|
if (map != null && map._panes != null) {
|
|
map._panes = omit(map._panes, name);
|
|
map._paneRenderers = omit(map._paneRenderers, name);
|
|
}
|
|
}
|
|
};
|
|
|
|
_proto.getParentPane = function getParentPane() {
|
|
return this.getPane(this.props.pane || this.props.leaflet.pane);
|
|
};
|
|
|
|
_proto.getPane = function getPane(name) {
|
|
if (name != null && this.props.leaflet.map != null) {
|
|
return this.props.leaflet.map.getPane(name);
|
|
}
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var context = this.state.context;
|
|
return context ? /*#__PURE__*/React.createElement(LeafletProvider, {
|
|
value: context
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: paneStyles
|
|
}, this.props.children)) : null;
|
|
};
|
|
|
|
return Pane;
|
|
}(Component);
|
|
|
|
export default withLeaflet(Pane); |