@figlinq/react-chart-editor/lib/components/sidebar/SidebarGroup.js

plotly.js chart editor react component UI

import{mdiChevronRight}from"@mdi/js";import Icon from"@mdi/react";import PropTypes from"prop-types";import{Component}from"react";import{bem}from"../../lib";import SidebarItem from"./SidebarItem";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export default class SidebarGroup extends Component{constructor(props){super(props);this.state={expanded:this.props.group===this.props.selectedGroup};this.toggleExpanded=this.toggleExpanded.bind(this);this.onChangeGroup=this.onChangeGroup.bind(this);this.renderSubItem=this.renderSubItem.bind(this)}toggleExpanded(){this.setState({expanded:!this.state.expanded})}onChangeGroup(panel){this.props.onChangeGroup(this.props.group,panel)}renderSubItem(panel,i){const isActive=this.props.selectedPanel===panel&&this.props.group===this.props.selectedGroup;return _jsx(SidebarItem,{active:isActive,onClick:()=>this.onChangeGroup(panel),label:panel},"subitem-"+i)}render(){const{group,panels,selectedGroup}=this.props;const{expanded}=this.state;return _jsxs("div",{className:bem("sidebar__group",[expanded?"is-expanded":"",selectedGroup===group?"is-active":""]),children:[_jsxs("div",{onClick:this.toggleExpanded,className:bem("sidebar__group","title"),children:[_jsx("div",{className:bem("sidebar__group","title__icon"),children:_jsx(Icon,{path:mdiChevronRight,size:"24px"})}),_jsx("div",{className:bem("sidebar__group","title__label"),children:group})]}),expanded&&panels.map(this.renderSubItem)]})}}SidebarGroup.propTypes={group:PropTypes.string,onChangeGroup:PropTypes.func,panels:PropTypes.array,selectedGroup:PropTypes.string,selectedPanel:PropTypes.string};
//# sourceMappingURL=SidebarGroup.js.map