diff --git a/pc4mobx/hrmSalary/components/excelEditor/index.js b/pc4mobx/hrmSalary/components/excelEditor/index.js index 6d9db2d2..6f69e51c 100644 --- a/pc4mobx/hrmSalary/components/excelEditor/index.js +++ b/pc4mobx/hrmSalary/components/excelEditor/index.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { Button } from "antd"; -import { UnControlled as CodeMirror } from "react-codemirror2"; +import { Controlled as CodeMirror } from "react-codemirror2"; import { keyboardBaseBtns } from "./constants"; import cs from "classnames"; import "./index.less"; @@ -8,7 +8,6 @@ import "./index.less"; import "codemirror/lib/codemirror.css"; import "codemirror/lib/codemirror.js"; -import "codemirror/theme/dracula.css"; //主题 //代码折叠 import "codemirror/addon/fold/foldgutter.css"; import "codemirror/addon/lint/lint.css"; @@ -30,24 +29,102 @@ class ExcelEditor extends Component { constructor(props) { super(props); this.state = { - value: "" + value: "", + widgets: [] }; + this.editorRef = null; } + replaceToWidget = (editor, data, value, inlineWidgetOpts) => { + editor.getAllMarks().forEach(m => m.clear()); + let posInfos = _.flatMap(_.keys(inlineWidgetOpts), widgetName => { + let { regex, render } = inlineWidgetOpts[widgetName]; + let res = [], newRe = new RegExp(regex, "g"), m; + do { + m = newRe.exec(value); + if (m) { + const mountToDom = document.createElement("span"); + let text = m[0]; + res.push({ + widgetName, + text, + startAt: m.index, + endAt: m.index + text.length, + render: () => { + let x = `((...args) => args)${text.replace(new RegExp(`^${widgetName}`), "")}`; + let args = eval(x); + return render(...args); + }, + mountToDom: mountToDom + }); + } + } while (m); + return res; + }); + posInfos.forEach(posInfo => { + let from = { line: 0, ch: posInfo.startAt }; + let to = { line: 0, ch: posInfo.endAt }; + editor.markText(from, to, { + replacedWith: posInfo.mountToDom, + clearWhenEmpty: false + }); + }); + this.setState({ + widgets: posInfos + }, () => { + editor.refresh(); + editor.focus(); + }); + }; + /* + * Author: 黎永顺 + * Description:格式化 + * Params: + * Date: 2023/4/13 + */ + autoFormatSelection = () => { + let editor = this.editorRef.editor; + if (this.props.type != "sql") { + const script_length = editor.getValue().length; + const startPos = { line: 0, ch: 0, sticky: null }; + const endPos = editor.doc.posFromIndex(script_length); + // editor.setSelection(startPos, endPos); + // editor.autoFormatRange(startPos, endPos); + // editor.commentRange(false, startPos, endPos); + } else { + let splCont = ""; + splCont = editor.getValue(); + // editor.setValue(sqlFormatter.format(splCont)); + } + }; render() { + const inlineWidgetOpts = { + useObject: { + regex: /useObject\("[^)]+"\)/, + render: (objId) => { + return ( +
alert(objId)} + >{objId}
+ ); + } + } + }; return (
this.editorRef = editor} value={this.state.value} onBeforeChange={(editor, data, value) => { this.setState({ value }); }} - onChange={(editor, value) => { - console.log("controlled", { value }); + onChange={(editor, data, value) => { + this.replaceToWidget(editor, data, value, inlineWidgetOpts); }} options={{ lineNumbers: false, diff --git a/pc4mobx/hrmSalary/components/excelEditor/index.less b/pc4mobx/hrmSalary/components/excelEditor/index.less index 0cb45a6b..964e9395 100644 --- a/pc4mobx/hrmSalary/components/excelEditor/index.less +++ b/pc4mobx/hrmSalary/components/excelEditor/index.less @@ -11,9 +11,20 @@ box-sizing: content-box; border: 1px solid #e5e5e5; - .esb-algorithm-sourceContent { - .CodeMirror { - } + .CodeMirror-scroll { + overflow-x: visible !important; + padding: 4px; + } + + .CodeMirror-sizer { + margin-left: 0 !important; + } + + .CodeMirror-gutters { + border-right: none; + background-color: #f7f7f7; + opacity: 0; + display: none; } } @@ -97,354 +108,3 @@ } } } -// -///* BASICS */ -// -//.CodeMirror { -// /* Set height, width, borders, and global font properties here */ -// font-family: monospace; -// height: 300px; -// color: black; -// direction: ltr; -//} -// -///* PADDING */ -// -//.CodeMirror-lines { -// padding: 4px 0; /* Vertical padding around content */ -//} -//.CodeMirror pre.CodeMirror-line, -//.CodeMirror pre.CodeMirror-line-like { -// padding: 0 4px; /* Horizontal padding of content */ -//} -// -//.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { -// background-color: white; /* The little square between H and V scrollbars */ -//} -// -///* GUTTER */ -// -//.CodeMirror-gutters { -// border-right: 1px solid #ddd; -// background-color: #f7f7f7; -// white-space: nowrap; -//} -//.CodeMirror-linenumbers {} -//.CodeMirror-linenumber { -// padding: 0 3px 0 5px; -// min-width: 20px; -// text-align: right; -// color: #999; -// white-space: nowrap; -//} -// -//.CodeMirror-guttermarker { color: black; } -//.CodeMirror-guttermarker-subtle { color: #999; } -// -///* CURSOR */ -// -//.CodeMirror-cursor { -// border-left: 1px solid black; -// border-right: none; -// width: 0; -//} -///* Shown when moving in bi-directional text */ -//.CodeMirror div.CodeMirror-secondarycursor { -// border-left: 1px solid silver; -//} -//.cm-fat-cursor .CodeMirror-cursor { -// width: auto; -// border: 0 !important; -// background: #7e7; -//} -//.cm-fat-cursor div.CodeMirror-cursors { -// z-index: 1; -//} -//.cm-fat-cursor-mark { -// background-color: rgba(20, 255, 20, 0.5); -// -webkit-animation: blink 1.06s steps(1) infinite; -// -moz-animation: blink 1.06s steps(1) infinite; -// animation: blink 1.06s steps(1) infinite; -//} -//.cm-animate-fat-cursor { -// width: auto; -// border: 0; -// -webkit-animation: blink 1.06s steps(1) infinite; -// -moz-animation: blink 1.06s steps(1) infinite; -// animation: blink 1.06s steps(1) infinite; -// background-color: #7e7; -//} -//@-moz-keyframes blink { -// 0% {} -// 50% { background-color: transparent; } -// 100% {} -//} -//@-webkit-keyframes blink { -// 0% {} -// 50% { background-color: transparent; } -// 100% {} -//} -//@keyframes blink { -// 0% {} -// 50% { background-color: transparent; } -// 100% {} -//} -// -///* Can style cursor different in overwrite (non-insert) mode */ -//.CodeMirror-overwrite .CodeMirror-cursor {} -// -//.cm-tab { display: inline-block; text-decoration: inherit; } -// -//.CodeMirror-rulers { -// position: absolute; -// left: 0; right: 0; top: -50px; bottom: 0; -// overflow: hidden; -//} -//.CodeMirror-ruler { -// border-left: 1px solid #ccc; -// top: 0; bottom: 0; -// position: absolute; -//} -// -///* DEFAULT THEME */ -// -//.cm-s-default .cm-header {color: blue;} -//.cm-s-default .cm-quote {color: #090;} -//.cm-negative {color: #d44;} -//.cm-positive {color: #292;} -//.cm-header, .cm-strong {font-weight: bold;} -//.cm-em {font-style: italic;} -//.cm-link {text-decoration: underline;} -//.cm-strikethrough {text-decoration: line-through;} -// -//.cm-s-default .cm-keyword {color: #708;} -//.cm-s-default .cm-atom {color: #219;} -//.cm-s-default .cm-number {color: #164;} -//.cm-s-default .cm-def {color: #00f;} -//.cm-s-default .cm-variable, -//.cm-s-default .cm-punctuation, -//.cm-s-default .cm-property, -//.cm-s-default .cm-operator {} -//.cm-s-default .cm-variable-2 {color: #05a;} -//.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;} -//.cm-s-default .cm-comment {color: #a50;} -//.cm-s-default .cm-string {color: #a11;} -//.cm-s-default .cm-string-2 {color: #f50;} -//.cm-s-default .cm-meta {color: #555;} -//.cm-s-default .cm-qualifier {color: #555;} -//.cm-s-default .cm-builtin {color: #30a;} -//.cm-s-default .cm-bracket {color: #997;} -//.cm-s-default .cm-tag {color: #170;} -//.cm-s-default .cm-attribute {color: #00c;} -//.cm-s-default .cm-hr {color: #999;} -//.cm-s-default .cm-link {color: #00c;} -// -//.cm-s-default .cm-error {color: #f00;} -//.cm-invalidchar {color: #f00;} -// -//.CodeMirror-composing { border-bottom: 2px solid; } -// -///* Default styles for common addons */ -// -//div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;} -//div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} -//.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } -//.CodeMirror-activeline-background {background: #e8f2ff;} -// -///* STOP */ -// -///* The rest of this file contains styles related to the mechanics of -// the editor. You probably shouldn't touch them. */ -// -//.CodeMirror { -// position: relative; -// overflow: hidden; -// background: white; -//} -// -//.CodeMirror-scroll { -// overflow: scroll !important; /* Things will break if this is overridden */ -// /* 50px is the magic margin used to hide the element's real scrollbars */ -// /* See overflow: hidden in .CodeMirror */ -// margin-bottom: -50px; margin-right: -50px; -// padding-bottom: 50px; -// height: 100%; -// outline: none; /* Prevent dragging from highlighting the element */ -// position: relative; -//} -//.CodeMirror-sizer { -// position: relative; -// border-right: 50px solid transparent; -//} -// -///* The fake, visible scrollbars. Used to force redraw during scrolling -// before actual scrolling happens, thus preventing shaking and -// flickering artifacts. */ -//.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { -// position: absolute; -// z-index: 6; -// display: none; -// outline: none; -//} -//.CodeMirror-vscrollbar { -// right: 0; top: 0; -// overflow-x: hidden; -// overflow-y: scroll; -//} -//.CodeMirror-hscrollbar { -// bottom: 0; left: 0; -// overflow-y: hidden; -// overflow-x: scroll; -//} -//.CodeMirror-scrollbar-filler { -// right: 0; bottom: 0; -//} -//.CodeMirror-gutter-filler { -// left: 0; bottom: 0; -//} -// -//.CodeMirror-gutters { -// position: absolute; left: 0; top: 0; -// min-height: 100%; -// z-index: 3; -//} -//.CodeMirror-gutter { -// white-space: normal; -// height: 100%; -// display: inline-block; -// vertical-align: top; -// margin-bottom: -50px; -//} -//.CodeMirror-gutter-wrapper { -// position: absolute; -// z-index: 4; -// background: none !important; -// border: none !important; -//} -//.CodeMirror-gutter-background { -// position: absolute; -// top: 0; bottom: 0; -// z-index: 4; -//} -//.CodeMirror-gutter-elt { -// position: absolute; -// cursor: default; -// z-index: 4; -//} -//.CodeMirror-gutter-wrapper ::selection { background-color: transparent } -//.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } -// -//.CodeMirror-lines { -// cursor: text; -// min-height: 1px; /* prevents collapsing before first draw */ -//} -//.CodeMirror pre.CodeMirror-line, -//.CodeMirror pre.CodeMirror-line-like { -// /* Reset some styles that the rest of the page might have set */ -// -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -// border-width: 0; -// background: transparent; -// font-family: inherit; -// font-size: inherit; -// margin: 0; -// white-space: pre; -// word-wrap: normal; -// line-height: inherit; -// color: inherit; -// z-index: 2; -// position: relative; -// overflow: visible; -// -webkit-tap-highlight-color: transparent; -// -webkit-font-variant-ligatures: contextual; -// font-variant-ligatures: contextual; -//} -//.CodeMirror-wrap pre.CodeMirror-line, -//.CodeMirror-wrap pre.CodeMirror-line-like { -// word-wrap: break-word; -// white-space: pre-wrap; -// word-break: normal; -//} -// -//.CodeMirror-linebackground { -// position: absolute; -// left: 0; right: 0; top: 0; bottom: 0; -// z-index: 0; -//} -// -//.CodeMirror-linewidget { -// position: relative; -// z-index: 2; -// padding: 0.1px; /* Force widget margins to stay inside of the container */ -//} -// -//.CodeMirror-widget {} -// -//.CodeMirror-rtl pre { direction: rtl; } -// -//.CodeMirror-code { -// outline: none; -//} -// -///* Force content-box sizing for the elements where we expect it */ -//.CodeMirror-scroll, -//.CodeMirror-sizer, -//.CodeMirror-gutter, -//.CodeMirror-gutters, -//.CodeMirror-linenumber { -// -moz-box-sizing: content-box; -// box-sizing: content-box; -//} -// -//.CodeMirror-measure { -// position: absolute; -// width: 100%; -// height: 0; -// overflow: hidden; -// visibility: hidden; -//} -// -//.CodeMirror-cursor { -// position: absolute; -// pointer-events: none; -//} -//.CodeMirror-measure pre { position: static; } -// -//div.CodeMirror-cursors { -// visibility: hidden; -// position: relative; -// z-index: 3; -//} -//div.CodeMirror-dragcursors { -// visibility: visible; -//} -// -//.CodeMirror-focused div.CodeMirror-cursors { -// visibility: visible; -//} -// -//.CodeMirror-selected { background: #d9d9d9; } -//.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } -//.CodeMirror-crosshair { cursor: crosshair; } -//.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } -//.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } -// -//.cm-searching { -// background-color: #ffa; -// background-color: rgba(255, 255, 0, .4); -//} -// -///* Used to force a border model for a node */ -//.cm-force-border { padding-right: .1px; } -// -//@media print { -// /* Hide the cursor when printing */ -// .CodeMirror div.CodeMirror-cursors { -// visibility: hidden; -// } -//} -// -///* See issue #2901 */ -//.cm-tab-wrap-hack:after { content: ''; } -// -///* Help users use markselection to safely style text background */ -//span.CodeMirror-selectedtext { background: none; }