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

plotly.js chart editor react component UI

import{mdiArrowCollapse,mdiArrowExpand,mdiPlus}from"@mdi/js";import Icon from"@mdi/react";import Button from"../widgets/Button";import PropTypes from"prop-types";import{useState}from"react";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const PanelHeader=(_ref,context)=>{let{children,addAction,allowCollapse,toggleFolds,hasOpen}=_ref;const[addPanelOpen,setAddPanelOpen]=useState(false);const togglePanel=()=>{setAddPanelOpen(!addPanelOpen)};const{localize:_}=context;return!children&&!addAction&&!allowCollapse?null:_jsxs("div",{className:"panel__header",children:[children&&children.length?_jsx("div",{className:"panel__header__content",children:children}):null,_jsxs("div",{className:"panel__header__actions__container",children:[allowCollapse&&_jsx("div",{className:"panel__header__collapse",onClick:toggleFolds,children:hasOpen?_jsxs(_Fragment,{children:[_jsx(Icon,{path:mdiArrowCollapse}),_("Collapse All")]}):_jsxs(_Fragment,{children:[_jsx(Icon,{path:mdiArrowExpand}),_("Expand All")]})}),Boolean(addAction)&&_jsxs("div",{className:"panel__header__action dropdown-container",children:[_jsx(Button,{variant:"primary",className:"js-add-button",onClick:Array.isArray(addAction.handler)?togglePanel:()=>addAction.handler(context),icon:mdiPlus,label:addAction.label}),addPanelOpen&&_jsx("div",{className:"Select",children:_jsx("div",{className:"Select-menu-outer",children:_jsx("div",{className:"Select-menu",children:addAction.handler.map(_ref2=>{let{label,handler}=_ref2;return _jsx("div",{className:"Select-option",onClick:()=>{handler(context);togglePanel()},children:label},label)})})})})]})]})]})};PanelHeader.contextTypes={layout:PropTypes.object,fullContainer:PropTypes.object,onUpdate:PropTypes.func,updateContainer:PropTypes.func,localize:PropTypes.func};PanelHeader.propTypes={addAction:PropTypes.object,allowCollapse:PropTypes.bool,children:PropTypes.node,hasOpen:PropTypes.bool,toggleFolds:PropTypes.func};export default PanelHeader;
//# sourceMappingURL=PanelHeader.js.map