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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import PlotlyFold from"./PlotlyFold";import{LayoutPanel}from"./derived";import{connectShapeToLayout}from"../../lib";import{COLORS,EDITOR_ACTIONS}from"../../lib/constants";import{PanelMessage}from"./PanelEmpty";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ShapeFold=connectShapeToLayout(PlotlyFold);const ShapeAccordion=(_ref,_ref2)=>{let{canAdd,children,canReorder}=_ref;let{layout:{shapes=[]},localize:_}=_ref2;const content=shapes.length&&shapes.map((shp,i)=>_jsx(ShapeFold,{shapeIndex:i,name:`${_("Shape")} ${i+1}`,canDelete:canAdd,children:children},i));const addAction={label:_("Shape"),handler:_ref3=>{let{layout,updateContainer}=_ref3;let shapeIndex;if(Array.isArray(layout.shapes)){shapeIndex=layout.shapes.length}else{shapeIndex=0}const key=`shapes[${shapeIndex}]`;const value={line:{color:COLORS.charcoal},fillcolor:COLORS.middleGray,opacity:0.3};if(updateContainer){updateContainer({[key]:value},false,EDITOR_ACTIONS.ADD_SHAPE)}}};return _jsx(LayoutPanel,{addAction:canAdd?addAction:null,canReorder:canReorder,children:content?content:_jsxs(PanelMessage,{heading:_("Lines, Rectangles and Ellipses."),children:[_jsx("p",{children:_("Add shapes to a figure to highlight points or periods in time, thresholds, or areas of interest.")}),_jsx("p",{children:_("Click on the + button above to add a shape.")})]})})};ShapeAccordion.contextTypes={layout:PropTypes.object,localize:PropTypes.func};ShapeAccordion.propTypes={children:PropTypes.node,canAdd:PropTypes.bool,canReorder:PropTypes.bool};export default ShapeAccordion;
//# sourceMappingURL=ShapeAccordion.js.map