@figlinq/react-chart-editor/lib/components/containers/MenuPanel.js

plotly.js chart editor react component UI

import{mdiCog,mdiHelpCircle}from"@mdi/js";import Icon from"@mdi/react";import ModalBox from"./ModalBox";import PropTypes from"prop-types";import{useState}from"react";import classnames from"classnames";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MenuPanel=_ref=>{let{show,ownline,label,children,question,icon:PlotlyIcon}=_ref;const[isOpen,setIsOpen]=useState(false);const getIcon=()=>{if(question){return{icon:_jsx(Icon,{path:mdiHelpCircle,className:"menupanel__icon"}),spanClass:`menupanel__icon-span menupanel__icon-span--question`}}if(PlotlyIcon){return{icon:_jsx(PlotlyIcon,{className:"menupanel__icon"}),spanClass:`menupanel__icon-span`}}return{icon:_jsx(Icon,{Icon:true,path:mdiCog,className:"menupanel__icon"}),spanClass:"menupanel__icon-span menupanel__icon-span--cog"}};const togglePanel=()=>{setIsOpen(!isOpen)};const isModalOpen=show||isOpen;const containerClass=classnames("menupanel",{"menupanel--ownline":ownline});const{icon,spanClass}=getIcon();return _jsxs("div",{className:containerClass,children:[_jsxs("div",{className:spanClass,children:[_jsx("div",{className:"menupanel__label",children:label}),_jsx("div",{className:"menupanel__icon__wrapper",onClick:togglePanel,children:icon})]}),isModalOpen&&_jsx(ModalBox,{onClose:togglePanel,children:children})]})};export default MenuPanel;MenuPanel.propTypes={children:PropTypes.node,icon:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),label:PropTypes.string,ownline:PropTypes.bool,question:PropTypes.bool,show:PropTypes.bool};
//# sourceMappingURL=MenuPanel.js.map