@figlinq/react-chart-editor/lib/components/fields/Field.js

plotly.js chart editor react component UI

import{mdiClose}from"@mdi/js";import Icon from"@mdi/react";import PropTypes from"prop-types";import MenuPanel from"../containers/MenuPanel";import classnames from"classnames";import{bem}from"../../lib";import{getMultiValueText}from"../../lib/constants";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const FieldDelete=_ref=>{let{onClick}=_ref;return _jsx("div",{className:"field__delete",onClick:onClick,children:_jsx(Icon,{size:"24px",path:mdiClose})})};const Field=(_ref2,_ref3)=>{let{center,children,label,multiValued,suppressMultiValuedMessage,units,extraComponent,fieldContainerClassName,labelWidth}=_ref2;let{attr,description,showFieldTooltips,localize:_}=_ref3;const fieldClass=!label?classnames("field__no-title",{"field__no-title--center":center}):classnames("field__widget",{"field__widget--units":Boolean(units)});const tooltip=description?`${attr} – ${description.replace(/`/g,"\"").replace(/\*/g,"\"")}`:attr;const containerClassName=classnames(bem("field"),{[fieldContainerClassName]:Boolean(fieldContainerClassName)});return _jsxs("div",{className:containerClassName,children:[Boolean(label)&&_jsx("div",{className:bem("field","title"),style:labelWidth?{minWidth:labelWidth+"px"}:{},children:showFieldTooltips?_jsx("div",{className:bem("field","title-text"),"aria-label":tooltip,"data-microtip-position":"bottom-right","data-microtip-size":"large",role:"tooltip",children:label}):_jsx("div",{className:bem("field","title-text"),children:label})}),_jsxs("div",{className:fieldClass,children:[children,extraComponent||null,multiValued&&!suppressMultiValuedMessage&&_jsxs(MenuPanel,{label:getMultiValueText("title",_),ownline:true,question:true,children:[_jsx("div",{className:"info__title",children:getMultiValueText("title",_)}),_jsx("div",{className:"info__text",children:getMultiValueText("text",_)}),_jsx("div",{className:"info__sub-text",children:getMultiValueText("subText",_)})]})]}),Boolean(units)&&_jsx("div",{className:bem("field","units"),children:_jsx("div",{className:bem("field","units-text"),children:units})})]})};Field.propTypes={labelWidth:PropTypes.number,center:PropTypes.bool,label:PropTypes.any,units:PropTypes.string,multiValued:PropTypes.bool,suppressMultiValuedMessage:PropTypes.bool,children:PropTypes.node,extraComponent:PropTypes.any,fieldContainerClassName:PropTypes.string};Field.contextTypes={localize:PropTypes.func,description:PropTypes.string,attr:PropTypes.string,showFieldTooltips:PropTypes.bool};Field.defaultProps={center:false,multiValued:false};FieldDelete.propTypes={onClick:PropTypes.func};export default Field;
//# sourceMappingURL=Field.js.map