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

plotly.js chart editor react component UI

import{mdiChevronDown,mdiClose}from"@mdi/js";import Icon from"@mdi/react";import FoldEmpty from"./FoldEmpty";import PropTypes from"prop-types";import{Children,Component}from"react";import classnames from"classnames";import{unpackPlotProps,containerConnectedContextTypes,striptags}from"../../lib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export class Fold extends Component{constructor(){super();this.foldVisible=true}getChildContext(){return{foldInfo:this.props.foldInfo?this.props.foldInfo:null}}render(){if(!this.foldVisible&&!this.props.messageIfEmpty){return null}const{deleteContainer,moveContainer}=this.context;const{canDelete,children,className,folded,foldInfo,toggleFold,hideHeader,icon:PlotlyIcon,messageIfEmpty,name,canMoveUp,canMoveDown}=this.props;return _jsxs("div",{className:`fold${className?" "+className:""}`,children:[!hideHeader&&_jsxs("div",{className:classnames("fold__top",{"fold__top--open":!folded}),onClick:toggleFold,children:[_jsxs("div",{className:"fold__top__arrow-title",children:[_jsx("div",{className:classnames("fold__top__arrow",{"fold__top__arrow--open":!folded}),children:_jsx("div",{className:"fold__top__arrow__wrapper",children:_jsx(Icon,{path:mdiChevronDown})})}),PlotlyIcon&&_jsx(PlotlyIcon,{className:"fold__top__icon"}),_jsx("div",{className:"fold__top__title",children:striptags(name)})]}),(canMoveDown||canMoveUp)&&_jsxs("div",{className:"fold__top__moving-controls",children:[_jsx("span",{className:`fold__top__moving-controls--up${canMoveUp?"":"--disabled"}`,onClick:e=>{e.stopPropagation();if(canMoveUp){if(!moveContainer||typeof moveContainer!=="function"){throw new Error("moveContainer must be a function")}moveContainer("up")}},children:_jsx(Icon,{path:mdiChevronDown})}),_jsx("span",{className:`fold__top__moving-controls--down${canMoveDown?"":"--disabled"}`,onClick:e=>{e.stopPropagation();if(canMoveDown){if(!moveContainer||typeof moveContainer!=="function"){throw new Error("moveContainer must be a function")}moveContainer("down")}},children:_jsx(Icon,{path:mdiChevronDown})})]}),canDelete&&typeof deleteContainer==="function"&&_jsx("div",{className:"fold__top__delete js-fold__delete",onClick:e=>{e.stopPropagation();deleteContainer(foldInfo)},children:_jsx(Icon,{path:mdiClose})})]}),folded?null:_jsx("div",{className:classnames("fold__content",{"fold__content--noheader":hideHeader}),children:this.foldVisible?children:_jsx(FoldEmpty,{icon:Icon,messagePrimary:messageIfEmpty})})]})}}Fold.plotly_editor_traits={foldable:true};Fold.propTypes={canDelete:PropTypes.bool,children:PropTypes.node,className:PropTypes.string,folded:PropTypes.bool,foldInfo:PropTypes.object,toggleFold:PropTypes.func,hideHeader:PropTypes.bool,icon:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),messageIfEmpty:PropTypes.string,name:PropTypes.string,canMoveUp:PropTypes.bool,canMoveDown:PropTypes.bool};Fold.contextTypes={deleteContainer:PropTypes.func};Fold.childContextTypes={foldInfo:PropTypes.object};class PlotlyFold extends Fold{constructor(props,context){super(props,context);this.foldVisible=false;this.determineVisibility(props,context)}UNSAFE_componentWillReceiveProps(nextProps,nextContext){this.determineVisibility(nextProps,nextContext)}determineVisibility(nextProps,nextContext){this.foldVisible=false;Children.forEach(nextProps.children,child=>{if(!child||this.foldVisible){return}if(child.props.attr){const plotProps=unpackPlotProps(child.props,nextContext);if(child.type.modifyPlotProps){child.type.modifyPlotProps(child.props,nextContext,plotProps)}this.foldVisible=this.foldVisible||plotProps.isVisible;return}if(!(child.type.plotly_editor_traits||{}).no_visibility_forcing){this.foldVisible=true;return}})}}PlotlyFold.plotly_editor_traits={foldable:true};PlotlyFold.contextTypes=Object.assign({deleteContainer:PropTypes.func,moveContainer:PropTypes.func},containerConnectedContextTypes);export default PlotlyFold;
//# sourceMappingURL=PlotlyFold.js.map