@eeacms/react-chart-editor
Version:
plotly.js chart editor react component UI
2 lines • 8.05 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _HTML=_interopRequireDefault(require("./HTML"));var _LaTeX=_interopRequireDefault(require("./LaTeX"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _RichText=_interopRequireDefault(require("./RichText"));var _convertFormats=require("./convertFormats");var _classnames=_interopRequireDefault(require("classnames"));var _Button=_interopRequireDefault(require("../Button"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};class MultiFormatTextEditor extends _react.Component{constructor(props,context){super(props,context);const _=context.localize;const editors=[{key:"RICH_TEXT",label:_("Rich Text"),component:_RichText.default},{key:"LATEX",label:_("LaTeX"),component:_LaTeX.default},{key:"HTML",label:_("Edit in HTML"),component:_HTML.default}];const startTab=(0,_convertFormats.isLaTeXExpr)(props.value)?"LATEX":"RICH_TEXT";this.state={nextTab:null,currentTab:startTab,messages:[]};this.onModeChange=this.onModeChange.bind(this);this.editors=editors}convertValue(value,editor){const{currentTab}=this.state;if(currentTab==="RICH_TEXT"&&editor==="LATEX"){return(0,_convertFormats.htmlToLaTeX)(value)}if(currentTab==="LATEX"&&editor==="RICH_TEXT"){return(0,_convertFormats.laTeXToHTML)(value)}if(currentTab==="HTML"&&editor==="LATEX"){return(0,_convertFormats.htmlToLaTeX)(value)}return value}onModeChange(nextTab){const{localize:_}=this.context;const{defaultValuePattern,value,onChange}=this.props;const{currentTab}=this.state;const trimmedValue=value.trim();const trimmedValueLength=trimmedValue.length;const convertedValue=this.convertValue(trimmedValue,nextTab);const isDefaultValue=(0,_convertFormats.isLaTeXExpr)(trimmedValue)?defaultValuePattern.test(convertedValue):defaultValuePattern.test(trimmedValue);const switchingBetweenRichAndHtml=currentTab==="RICH_TEXT"&&nextTab==="HTML"||currentTab==="HTML"&&nextTab==="RICH_TEXT";if(!isDefaultValue&&trimmedValueLength>0&&!switchingBetweenRichAndHtml){let messages;if(!(0,_convertFormats.isLaTeXExpr)(value)){messages=[_("LaTeX is a math typesetting language that doesn't work with rich text."),_("Continuing will convert your note to LaTeX-style text.")]}else if((0,_convertFormats.hasTextExpression)(value)){messages=[_("Rich text is incompatible with LaTeX."),_("Continuing will convert your LaTeX expression into raw text.")]}else{messages=[_("Rich text is incompatible with LaTeX."),_("Continuing will remove your expression.")]}this.setState({nextTab,messages});return}this.setState({currentTab:nextTab});onChange(convertedValue)}renderConfirmationPanel(render){if(!render){return null}const{localize:_}=this.context;const{messages}=this.state;const onCancel=()=>{this.setState({nextTab:null})};const onContinue=()=>{const{nextTab}=this.state;const{onChange,value}=this.props;this.setState({currentTab:nextTab,nextTab:null});const convertedValue=this.convertValue(value,nextTab);onChange(convertedValue)};return _react.default.createElement("div",{className:"multi-format-editor__confirmation-panel"},_react.default.createElement("div",{className:"multi-format-editor__confirmation-panel__content"},_react.default.createElement("h3",{className:"multi-format-editor__confirmation-panel__header"},_("Heads up!")),_react.default.createElement("div",{className:"multi-format-editor__confirmation-panel__message"},_react.default.createElement("p",{className:"multi-format-editor__confirmation-panel__message-primary"},messages[0]),_react.default.createElement("p",{className:"multi-format-editor__confirmation-panel__message-secondary"},messages[1]))),_react.default.createElement("div",{className:"multi-format-editor__confirmation-panel__actions"},_react.default.createElement(_Button.default,{variant:"default",className:"multi-format-editor__confirmation-panel__cancel-button",onClick:onCancel},_("Go back")),_react.default.createElement(_Button.default,{variant:"primary",className:"multi-format-editor__confirmation-panel__continue-button",onClick:onContinue},_("Continue"))))}renderEditor(render){if(!render){return null}const{localize:_}=this.context;const{onChange,placeholder,value}=this.props;const{currentTab}=this.state;const richTextClassNames=(0,_classnames.default)("multi-format-editor__tab","top-tab","left",{selected:currentTab==="RICH_TEXT"});const latexClassNames=(0,_classnames.default)("multi-format-editor__tab","top-tab","right",{selected:currentTab==="LATEX"});const bottomTabClassNames=(0,_classnames.default)("multi-format-editor__tab","bottom-tab");const Editor=this.editors.filter(editor=>editor.key===currentTab)[0].component;const ModeTabsText=this.editors.map(editor=>editor.label);const showBottomTab=currentTab==="HTML"||currentTab==="RICH_TEXT";const BottomTab=currentTab==="HTML"?_react.default.createElement("div",{className:bottomTabClassNames,onClick:()=>this.onModeChange("RICH_TEXT")},_("Edit in Rich Text")):_react.default.createElement("div",{className:bottomTabClassNames,onClick:()=>this.onModeChange("HTML")},_("Edit in HTML"));return _react.default.createElement("div",{className:"multi-format-editor__root__wrapper"},_react.default.createElement("div",{className:"multi-format-editor__tabs"},_react.default.createElement("div",{className:richTextClassNames,onClick:()=>this.onModeChange("RICH_TEXT")},ModeTabsText[0]),_react.default.createElement("div",{className:latexClassNames,onClick:()=>this.onModeChange("LATEX")},ModeTabsText[1])),_react.default.createElement("div",{className:"multi-format-editor__content__wrapper__".concat(currentTab.toLowerCase())},_react.default.createElement(Editor,{className:"multi-format-editor__".concat(currentTab.toLowerCase()),onChange:onChange,placeholder:placeholder,value:value,emptyValue:this.props.emptyValue})),showBottomTab?BottomTab:null)}render(){const{nextTab}=this.state;const content=this.renderConfirmationPanel(nextTab!==null)||this.renderEditor(nextTab===null);return _react.default.createElement("div",{className:"multi-format-editor__root"},content)}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}MultiFormatTextEditor.propTypes={defaultValuePattern:_propTypes.default.instanceOf(RegExp),onChange:_propTypes.default.func.isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.string,emptyValue:_propTypes.default.any};MultiFormatTextEditor.defaultProps={defaultValuePattern:/^$/,placeholder:"",value:"",emptyValue:null};MultiFormatTextEditor.contextTypes={localize:_propTypes.default.func};const _default=MultiFormatTextEditor;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(MultiFormatTextEditor,"MultiFormatTextEditor","/react-chart-editor/src/components/widgets/text_editors/MultiFormat.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/components/widgets/text_editors/MultiFormat.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=MultiFormat.js.map