qwc2/components/AppMenu.js

QGIS Web Client

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 _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}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 2016-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{connect}from"react-redux";import classnames from"classnames";import{remove as removeDiacritics}from"diacritics";import isEmpty from"lodash.isempty";import isEqual from"lodash.isequal";import mousetrap from"mousetrap";import PropTypes from"prop-types";import{setCurrentTask}from"../actions/task";import{setMenuMargin}from"../actions/windows";import InputContainer from"../components/widgets/InputContainer";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import MiscUtils from"../utils/MiscUtils";import Icon from"./Icon";import"./style/AppMenu.css";var AppMenu=/*#__PURE__*/function(_React$Component){function AppMenu(props){var _this;_classCallCheck(this,AppMenu);_this=_callSuper(this,AppMenu,[props]);_defineProperty(_this,"state",{menuVisible:false,filter:"",submenusVisible:[],curEntry:null,keyNav:false});_defineProperty(_this,"addKeyBindings",function(items){items.forEach(function(item){if(item.subitems){_this.addKeyBindings(item.subitems)}else if(item.shortcut){mousetrap.bind(item.shortcut,function(){_this.onMenuitemClicked(item);return false});_this.boundShortcuts.push(item.shortcut)}})});_defineProperty(_this,"onKeyPress",function(ev){if(ev.key==="Enter"||ev.key==="ArrowLeft"||ev.key==="ArrowUp"||ev.key==="ArrowRight"||ev.key==="ArrowDown"){if(!_this.state.curEntry){if(ev.key==="ArrowUp"||ev.key==="ArrowDown"){_this.setState({curEntry:[ev.key==="ArrowUp"?_this.props.menuItems.length-1:0]})}}else{var curEntry=_toConsumableArray(_this.state.curEntry);var stack=[_this.props.menuItems];_this.state.curEntry.forEach(function(entry){stack.push(stack[stack.length-1][entry].subitems)});stack.pop();var leaf=curEntry.pop();var level=stack.length-1;if(ev.key==="Enter"){if(!isEmpty(stack[stack.length-1][leaf].subitems)){_this.onSubmenuClicked(stack[stack.length-1][leaf].key,level)}else{_this.onMenuitemClicked(stack[stack.length-1][leaf])}}else if(ev.key==="ArrowLeft"){if(!isEmpty(stack[stack.length-1][leaf].subitems)&&_this.state.submenusVisible[level]===stack[stack.length-1][leaf].key){_this.onSubmenuClicked(stack[stack.length-1][leaf].key,level)}}else if(ev.key==="ArrowUp"){leaf-=1;if(leaf>=0&&!isEmpty(stack[stack.length-1][leaf].subitems)&&_this.state.submenusVisible[level]===stack[stack.length-1][leaf].key){curEntry.push(leaf);leaf=stack[stack.length-1][leaf].subitems.length-1}else{while(leaf<0&&curEntry.length>0){leaf=curEntry.pop()}if(leaf<0){leaf=_this.props.menuItems.length-1}}}else if(ev.key==="ArrowRight"){if(!isEmpty(stack[stack.length-1][leaf].subitems)&&!_this.state.submenusVisible[level]){_this.onSubmenuClicked(stack[stack.length-1][leaf].key,level)}}else if(ev.key==="ArrowDown"){if(!isEmpty(stack[stack.length-1][leaf].subitems)&&_this.state.submenusVisible[level]===stack[stack.length-1][leaf].key){curEntry.push(leaf);leaf=0}else{leaf+=1;while(leaf>stack[stack.length-1].length-1&&curEntry.length>0){leaf=curEntry.pop()+1;stack.pop()}if(leaf>_this.props.menuItems.length-1){leaf=0}}}_this.setState({curEntry:[].concat(_toConsumableArray(curEntry),[leaf]),keyNav:true})}MiscUtils.killEvent(ev)}else if(ev.key==="Escape"){_this.toggleMenu();MiscUtils.killEvent(ev)}});_defineProperty(_this,"onMouseMove",function(ev){if(_this.state.keyNav){_this.setState({keyNav:false})}MiscUtils.killEvent(ev)});_defineProperty(_this,"toggleMenu",function(){if(!_this.state.menuVisible&&_this.props.currentTaskBlocked){return}if(!_this.state.menuVisible&&_this.props.appMenuClearsTask){_this.props.setCurrentTask(null)}if(!_this.props.keepMenuOpen){if(!_this.state.menuVisible){document.addEventListener("click",_this.checkCloseMenu);document.addEventListener("keydown",_this.onKeyPress,true);document.addEventListener("mousemove",_this.onMouseMove,true)}else{document.removeEventListener("click",_this.checkCloseMenu);document.removeEventListener("keydown",_this.onKeyPress,true);document.removeEventListener("mousemove",_this.onMouseMove,true)}}_this.props.onMenuToggled(!_this.state.menuVisible);if(_this.props.menuCompact){_this.props.setMenuMargin(!_this.state.menuVisible?MiscUtils.convertEmToPx(3.75):0,0)}_this.setState(function(state){return{menuVisible:!state.menuVisible,submenusVisible:[],filter:""}})});_defineProperty(_this,"checkCloseMenu",function(ev){if(_this.menuEl&&!_this.menuEl.contains(ev.target)&&!_this.props.keepMenuOpen){_this.toggleMenu()}MiscUtils.killEvent(ev)});_defineProperty(_this,"onSubmenuClicked",function(key,level){var a=_this.state.submenusVisible[level]===key?[]:[key];_this.setState(function(state){return{submenusVisible:state.submenusVisible.slice(0,level).concat(a)}})});_defineProperty(_this,"onMenuitemClicked",function(item){if(!_this.props.keepMenuOpen&&_this.state.menuVisible){_this.toggleMenu()}if(item.url){var label=item.title?LocaleUtils.tr(item.title):LocaleUtils.tr("appmenu.items."+item.key+(item.mode||""));_this.props.openExternalUrl(item.url,item.target,label,item.icon)}else{_this.props.setCurrentTask(item.task||item.key,item.mode,item.mapClickAction||(item.identifyEnabled?"identify":null))}});_defineProperty(_this,"renderMenuItems",function(items,level,filter,path){if(items){return items.map(function(item,idx){var active=isEqual(_this.state.curEntry,[].concat(_toConsumableArray(path),[idx]));if(item.subitems){var _item$key;var subitems=_this.renderMenuItems(item.subitems,level+1,filter,[].concat(_toConsumableArray(path),[idx]));if(filter&&isEmpty(subitems)){return null}var visible=filter&&!isEmpty(subitems)||_this.state.submenusVisible[level]===item.key;var className=classnames({"appmenu-submenu":true,"appmenu-submenu-active":active,"appmenu-submenu-expanded":visible});return/*#__PURE__*/React.createElement("li",{className:className,key:(_item$key=item.key)!==null&&_item$key!==void 0?_item$key:item.title,onClick:function onClick(){return _this.onSubmenuClicked(item.key,level)},onMouseEnter:function onMouseEnter(){if(!_this.state.keyNav){_this.setState({curEntry:[].concat(_toConsumableArray(path),[idx])})}},onMouseLeave:function onMouseLeave(){if(!_this.state.keyNav){_this.setState({curEntry:null})}},ref:function ref(el){if(active&&el&&_this.state.keyNav){el.scrollIntoView(false)}}},/*#__PURE__*/React.createElement(Icon,{icon:item.icon,size:"xlarge"}),item.title?LocaleUtils.tr(item.title):LocaleUtils.tr("appmenu.items."+item.key),/*#__PURE__*/React.createElement("ul",null,subitems))}else{var trargs=item.trargs||[];var label=item.title?LocaleUtils.tr.apply(LocaleUtils,[item.title].concat(_toConsumableArray(trargs))):LocaleUtils.tr.apply(LocaleUtils,["appmenu.items."+item.key+(item.mode||"")].concat(_toConsumableArray(trargs)));var comment=item.comment?LocaleUtils.tr.apply(LocaleUtils,["appmenu.items."+item.key+(item.mode||"")+"_comment"].concat(_toConsumableArray(trargs))):"";if(!filter||removeDiacritics(label.toLowerCase()).match(filter)||comment&&removeDiacritics(comment.toLowerCase()).match(filter)){var _className=classnames({"appmenu-leaf":true,"appmenu-leaf-active":active});return/*#__PURE__*/React.createElement("li",{className:_className,key:item.key?item.key+(item.mode||""):item.title,onClick:function onClick(){return _this.onMenuitemClicked(item)},onMouseEnter:function onMouseEnter(){if(!_this.state.keyNav){_this.setState({curEntry:[].concat(_toConsumableArray(path),[idx])})}},onMouseLeave:function onMouseLeave(){if(!_this.state.keyNav){_this.setState({curEntry:null})}},ref:function ref(el){if(active&&el&&_this.state.keyNav){el.scrollIntoView(false)}}},/*#__PURE__*/React.createElement(Icon,{icon:item.icon,size:"xlarge"}),/*#__PURE__*/React.createElement("span",{className:"appmenu-leaf-label"},label,comment?/*#__PURE__*/React.createElement("div",{className:"appmenu-leaf-comment"},comment):null))}return null}}).filter(function(x){return x})}else{return null}});_defineProperty(_this,"setFilterField",function(el){_this.filterfield=el;if(_this.props.appMenuShortcut){mousetrap(el).bind(_this.props.appMenuShortcut,_this.toggleMenu)}});_this.menuEl=null;_this.filterfield=null;_this.boundShortcuts=[];return _this}_inherits(AppMenu,_React$Component);return _createClass(AppMenu,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.showOnStartup){this.toggleMenu()}this.addKeyBindings(this.props.menuItems);if(this.props.appMenuShortcut){mousetrap.bind(this.props.appMenuShortcut,this.toggleMenu)}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.state.menuVisible&&!prevState.menuVisible&&this.filterfield&&!this.props.menuCompact){// Need to wait until slide in transition is over
setTimeout(function(){_this2.filterfield.focus()},400)}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.boundShortcuts.forEach(function(shortcut){return mousetrap.unbind(shortcut)});if(this.props.appMenuShortcut){mousetrap.unbind(this.props.appMenuShortcut,this.toggleMenu)}if(this.state.menuVisible){document.removeEventListener("click",this.checkCloseMenu);document.removeEventListener("keydown",this.onKeyPress,true);document.removeEventListener("mousemove",this.onMouseMove,true)}}},{key:"render",value:function render(){var _this3=this;var isMobile=ConfigUtils.isMobile();var visible=!this.props.currentTaskBlocked&&this.state.menuVisible;var showLabel=!this.props.menuCompact&&!isMobile;var className=classnames({"AppMenu":true,"appmenu-blocked":this.props.currentTaskBlocked,"appmenu-visible":visible,"appmenu-compact":this.props.menuCompact,"appmenu-nolabel":!showLabel});var filter=this.state.filter?new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&"),"i"):null;return/*#__PURE__*/React.createElement("div",{className:className,ref:function ref(el){_this3.menuEl=el;MiscUtils.setupKillTouchEvents(el)}},/*#__PURE__*/React.createElement("div",{className:"appmenu-button",onMouseDown:this.toggleMenu,title:this.props.buttonLabel},showLabel?/*#__PURE__*/React.createElement("span",{className:"appmenu-label"},this.props.buttonLabel):null,/*#__PURE__*/React.createElement("span",{className:"appmenu-icon"},/*#__PURE__*/React.createElement(Icon,{icon:"menu-hamburger"}))),/*#__PURE__*/React.createElement("div",{className:"appmenu-menu-container"},/*#__PURE__*/React.createElement("ul",{className:"appmenu-menu"},this.props.showFilterField?/*#__PURE__*/React.createElement("li",{className:"appmenu-leaf"},/*#__PURE__*/React.createElement(Icon,{icon:"search",size:"xlarge"}),/*#__PURE__*/React.createElement(InputContainer,{className:"appmenu-filter"},/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return _this3.setState({filter:ev.target.value,curEntry:null})},placeholder:LocaleUtils.tr("appmenu.filter"),ref:this.setFilterField,role:"input",type:"text",value:this.state.filter}),/*#__PURE__*/React.createElement(Icon,{icon:"clear",onClick:function onClick(){return _this3.setState({filter:""})},role:"suffix"}))):null,this.renderMenuItems(this.props.menuItems,0,filter,[]))))}}])}(React.Component);_defineProperty(AppMenu,"propTypes",{appMenuClearsTask:PropTypes.bool,appMenuShortcut:PropTypes.string,buttonLabel:PropTypes.string,currentTaskBlocked:PropTypes.bool,keepMenuOpen:PropTypes.bool,menuCompact:PropTypes.bool,menuItems:PropTypes.array,onMenuToggled:PropTypes.func,openExternalUrl:PropTypes.func,setCurrentTask:PropTypes.func,setMenuMargin:PropTypes.func,showFilterField:PropTypes.bool,showOnStartup:PropTypes.bool});_defineProperty(AppMenu,"defaultProps",{onMenuToggled:function onMenuToggled(){}});export default connect(function(state){return{currentTaskBlocked:state.task.blocked}},{setCurrentTask:setCurrentTask,setMenuMargin:setMenuMargin})(AppMenu);