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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import PlotlyFold from"./PlotlyFold";import{LayoutPanel}from"./derived";import{connectImageToLayout}from"../../lib";import{PanelMessage}from"./PanelEmpty";import{EDITOR_ACTIONS}from"../../lib/constants";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ImageFold=connectImageToLayout(PlotlyFold);const ImageAccordion=(_ref,_ref2)=>{let{canAdd,children,canReorder}=_ref;let{layout:{images=[]},localize:_}=_ref2;const content=images.length&&images.map((img,i)=>_jsx(ImageFold,{imageIndex:i,name:`${_("Image")} ${i+1}`,canDelete:canAdd,children:children},i));const addAction={label:_("Image"),handler:_ref3=>{let{layout,updateContainer}=_ref3;let imageIndex;if(Array.isArray(layout.images)){imageIndex=layout.images.length}else{imageIndex=0}const key=`images[${imageIndex}]`;const value={sizex:0.1,sizey:0.1,x:0.5,y:0.5};if(updateContainer){updateContainer({[key]:value},false,EDITOR_ACTIONS.ADD_IMAGE)}}};return _jsx(LayoutPanel,{addAction:canAdd?addAction:null,canReorder:canReorder,children:content?content:_jsxs(PanelMessage,{heading:_("Logos, watermarks and more."),children:[_jsx("p",{children:_("Embed images in your figure to make the data more readable or to brand your content.")}),_jsx("p",{children:_("Click on the + button above to add an image.")})]})})};ImageAccordion.contextTypes={layout:PropTypes.object,localize:PropTypes.func};ImageAccordion.propTypes={children:PropTypes.node,canAdd:PropTypes.bool,canReorder:PropTypes.bool};export default ImageAccordion;
//# sourceMappingURL=ImageAccordion.js.map