qwc2
Version:
QGIS Web Client
212 lines (211 loc) • 12.5 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* Copyright 2024 Sourcepole AG
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import isEmpty from 'lodash.isempty';
import PropTypes from 'prop-types';
import MiscUtils from '../../utils/MiscUtils';
import './style/PopupMenu.css';
var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
function PopupMenu(props) {
var _this;
_classCallCheck(this, PopupMenu);
_this = _callSuper(this, PopupMenu, [props]);
_defineProperty(_this, "setFocus", function (el) {
var _this$props$anchor;
_this.menuEl = el;
if (el && ((_this$props$anchor = _this.props.anchor) === null || _this$props$anchor === void 0 ? void 0 : _this$props$anchor.nodeName) !== "INPUT") {
_this.menuEl.focus();
}
});
_defineProperty(_this, "clearFocus", function () {
var _this$props$anchor2;
if (((_this$props$anchor2 = _this.props.anchor) === null || _this$props$anchor2 === void 0 ? void 0 : _this$props$anchor2.nodeName) === "INPUT") {
_this.props.anchor.focus();
} else {
_this.menuEl.focus();
}
});
_defineProperty(_this, "keyNav", function (ev) {
if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
var childCount = _this.menuEl.children.length;
var delta = ev.key === 'ArrowUp' ? -1 : 1;
var currentIndex = Array.from(_this.menuEl.children).findIndex(function (el) {
return document.activeElement === el || el.contains(document.activeElement);
});
if (currentIndex === -1) {
currentIndex = delta === 1 ? childCount - 1 : 0;
}
var next = (currentIndex + childCount + delta) % childCount;
while (_this.menuEl.children[next].tabIndex !== 0 && next !== currentIndex) {
next = (next + childCount + delta) % childCount;
}
if (next !== currentIndex) {
_this.menuEl.children[next].focus();
}
MiscUtils.killEvent(ev);
} else if (ev.key === 'Escape') {
var _this$props$onClose, _this$props, _this$props$anchor3, _this$props$anchor3$f;
(_this$props$onClose = (_this$props = _this.props).onClose) === null || _this$props$onClose === void 0 || _this$props$onClose.call(_this$props);
(_this$props$anchor3 = _this.props.anchor) === null || _this$props$anchor3 === void 0 || (_this$props$anchor3$f = _this$props$anchor3.focus) === null || _this$props$anchor3$f === void 0 || _this$props$anchor3$f.call(_this$props$anchor3);
MiscUtils.killEvent(ev);
} else if (ev.key === 'Enter' || ev.key === ' ') {
MiscUtils.killEvent(ev);
} else if (ev.key !== 'Tab' && ev.key !== 'Shift') {
var _this$props$anchor4, _this$props$anchor4$f;
(_this$props$anchor4 = _this.props.anchor) === null || _this$props$anchor4 === void 0 || (_this$props$anchor4$f = _this$props$anchor4.focus) === null || _this$props$anchor4$f === void 0 || _this$props$anchor4$f.call(_this$props$anchor4);
}
});
_this.container = document.createElement("div");
_this.container.id = 'popup-container';
_this.container.style.position = 'fixed';
_this.container.style.left = 0;
_this.container.style.right = 0;
_this.container.style.top = 0;
_this.container.style.bottom = 0;
_this.container.style.zIndex = 100000;
if (_this.props.anchor) {
_this.shields = [];
var _loop = function _loop(i) {
_this.shields[i] = document.createElement("div");
_this.shields[i].style.position = 'absolute';
_this.shields[i].style.left = "0px";
_this.shields[i].style.right = "0px";
_this.shields[i].style.top = "0px";
_this.shields[i].style.bottom = "0px";
_this.shields[i].style.pointerEvents = 'initial';
_this.shields[i].style.zIndex = 0;
setTimeout(function () {
return _this.shields[i].addEventListener('click', function () {
var _this$props$onClose2, _this$props2;
(_this$props$onClose2 = (_this$props2 = _this.props).onClose) === null || _this$props$onClose2 === void 0 || _this$props$onClose2.call(_this$props2);
});
}, 0);
_this.container.appendChild(_this.shields[i]);
};
for (var i = 0; i < 4; ++i) {
_loop(i);
}
_this.container.style.pointerEvents = 'none';
}
_this.menuEl = null;
setTimeout(function () {
return _this.container.addEventListener('click', function () {
var _this$props$onClose3, _this$props3;
(_this$props$onClose3 = (_this$props3 = _this.props).onClose) === null || _this$props$onClose3 === void 0 || _this$props$onClose3.call(_this$props3);
});
}, 0);
document.body.appendChild(_this.container);
return _this;
}
_inherits(PopupMenu, _React$PureComponent);
return _createClass(PopupMenu, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this$props$anchor5;
if (((_this$props$anchor5 = this.props.anchor) === null || _this$props$anchor5 === void 0 ? void 0 : _this$props$anchor5.nodeName) === "INPUT") {
this.props.anchor.addEventListener('keydown', this.keyNav);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var _this$props$anchor6, _this$props$anchor7, _this$props$anchor7$f;
document.body.removeChild(this.container);
if (((_this$props$anchor6 = this.props.anchor) === null || _this$props$anchor6 === void 0 ? void 0 : _this$props$anchor6.nodeName) === "INPUT") {
this.props.anchor.removeEventListener('keydown', this.keyNav);
}
(_this$props$anchor7 = this.props.anchor) === null || _this$props$anchor7 === void 0 || (_this$props$anchor7$f = _this$props$anchor7.focus) === null || _this$props$anchor7$f === void 0 || _this$props$anchor7$f.call(_this$props$anchor7);
}
}, {
key: "render",
value: function render() {
var _rect$left, _rect, _rect$bottom, _rect2, _ref, _rect$width, _rect3, _this$props$disabledI;
if (isEmpty(this.props.children)) {
return null;
}
var rect = null;
if (this.props.anchor) {
if ((this.props.anchor.parentElement.className || "").includes("input-container")) {
rect = this.props.anchor.parentElement.getBoundingClientRect();
} else {
rect = this.props.anchor.getBoundingClientRect();
}
this.shields[0].style.height = rect.top + "px";
this.shields[0].style.bottom = 0;
this.shields[1].style.width = rect.left + "px";
this.shields[1].style.right = 0;
this.shields[2].style.left = rect.right + "px";
this.shields[3].style.top = rect.bottom + "px";
}
var x = (_rect$left = (_rect = rect) === null || _rect === void 0 ? void 0 : _rect.left) !== null && _rect$left !== void 0 ? _rect$left : this.props.x;
var y = ((_rect$bottom = (_rect2 = rect) === null || _rect2 === void 0 ? void 0 : _rect2.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : this.props.y) - 1;
var minWidth = (_ref = (_rect$width = (_rect3 = rect) === null || _rect3 === void 0 ? void 0 : _rect3.width) !== null && _rect$width !== void 0 ? _rect$width : this.props.width) !== null && _ref !== void 0 ? _ref : 0;
var style = {
position: 'absolute',
left: x + 'px',
top: y + 'px',
minWidth: minWidth + 'px',
maxHeight: window.innerHeight - y - 5 + 'px',
overflowY: 'auto',
zIndex: 1,
pointerEvents: 'initial'
};
if (this.props.setMaxWidth) {
style.maxWidth = minWidth + 'px';
}
var disabledItemClass = (_this$props$disabledI = this.props.disabledItemClass) !== null && _this$props$disabledI !== void 0 ? _this$props$disabledI : "popup-menu-item-disabled";
var children = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
className: "popup-menu " + this.props.className,
onKeyDown: this.keyNav,
onMouseLeave: this.clearFocus,
ref: this.setFocus,
style: style,
tabIndex: 0
}, children.flat(Infinity).filter(Boolean).map(function (child) {
var className = classnames(_defineProperty(_defineProperty({}, disabledItemClass, child.props.disabled), child.props.className, !!child.props.className));
return /*#__PURE__*/React.cloneElement(child, {
className: className,
tabIndex: child.props.disabled ? undefined : 0,
onKeyDown: child.props.disabled ? undefined : MiscUtils.checkKeyActivate,
onMouseOver: child.props.disabled ? undefined : function (ev) {
return ev.target.focus();
}
});
})), this.container);
}
}]);
}(React.PureComponent);
_defineProperty(PopupMenu, "propTypes", {
anchor: PropTypes.object,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
className: PropTypes.string,
disabledItemClass: PropTypes.string,
onClose: PropTypes.func,
setMaxWidth: PropTypes.bool,
width: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number
});
export { PopupMenu as default };