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

plotly.js chart editor react component UI

import PanelHeader from"./PanelHeader";import PanelEmpty from"./PanelEmpty";import PropTypes from"prop-types";import{Children,Component,cloneElement}from"react";import update from"immutability-helper";import{bem}from"../../lib";import{EmbedIcon}from"@figlinq/plotly-icons";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export class Panel extends Component{constructor(props){super(props);this.state={individualFoldStates:[],hasError:false};this.toggleFolds=this.toggleFolds.bind(this);this.toggleFold=this.toggleFold.bind(this)}getChildContext(){return{deleteContainer:this.props.deleteAction||null}}componentDidCatch(){this.setState({hasError:true})}toggleFolds(){const{individualFoldStates}=this.state;const hasOpen=individualFoldStates.length>0&&individualFoldStates.some(s=>s!==true);this.setState({individualFoldStates:individualFoldStates.map(()=>hasOpen)})}toggleFold(index){this.setState(update(this.state,{individualFoldStates:{$toggle:[index]}}))}calculateFolds(){let numFolds=0;Children.forEach(this.props.children,child=>{if((child?.type?.plotly_editor_traits||{}).foldable){numFolds++}});if(this.state.individualFoldStates.length!==numFolds){const newFoldStates=new Array(numFolds).fill(this.props.collapsedOnStart);this.setState({individualFoldStates:this.props.addAction?newFoldStates.map((e,i)=>i!==numFolds-1):newFoldStates})}}componentDidUpdate(){this.calculateFolds()}componentDidMount(){this.calculateFolds()}render(){const{individualFoldStates,hasError}=this.state;const{canReorder}=this.props;const{localize:_}=this.context;return hasError?_jsx(PanelEmpty,{icon:EmbedIcon,heading:_("Well this is embarrassing."),children:_jsx("p",{children:_("This panel could not be displayed due to an error.")})}):_jsxs("div",{className:`panel${this.props.noPadding?" panel--no-padding":""}`,children:[this.context?.customConfig?.panelTopItem||null,_jsx(PanelHeader,{addAction:this.props.addAction,allowCollapse:this.props.showExpandCollapse&&individualFoldStates.length>1,toggleFolds:this.toggleFolds,hasOpen:individualFoldStates.some(s=>s===false)}),_jsx("div",{className:bem("panel","content"),children:Children.map(this.props.children,(child,index)=>(child?.type?.plotly_editor_traits||{}).foldable?cloneElement(child,{key:index,folded:individualFoldStates[index]||false,toggleFold:()=>this.toggleFold(index),canMoveUp:canReorder&&individualFoldStates.length>1&&index>0,canMoveDown:canReorder&&individualFoldStates.length>1&&index!==individualFoldStates.length-1}):child)})]})}}Panel.propTypes={addAction:PropTypes.object,children:PropTypes.node,deleteAction:PropTypes.func,noPadding:PropTypes.bool,showExpandCollapse:PropTypes.bool,canReorder:PropTypes.bool,collapsedOnStart:PropTypes.bool};Panel.defaultProps={showExpandCollapse:true,collapsedOnStart:false};Panel.contextTypes={localize:PropTypes.func,customConfig:PropTypes.object};Panel.childContextTypes={deleteContainer:PropTypes.func};class PlotlyPanel extends Panel{}PlotlyPanel.plotly_editor_traits={no_visibility_forcing:true};export default PlotlyPanel;
//# sourceMappingURL=PlotlyPanel.js.map