From 047247cfcdc53c7adc43de9e9358ad13e68efbed Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Thu, 30 Jul 2020 22:20:04 +0800 Subject: [PATCH] fix: fix source edit bug --- packages/demo/public/schema.json | 466 +----------------- packages/plugin-source-editor/src/index.scss | 1 + packages/plugin-source-editor/src/index.tsx | 44 +- .../plugin-source-editor/src/transform.ts | 6 +- 4 files changed, 42 insertions(+), 475 deletions(-) diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json index 91880b822..3130a3921 100644 --- a/packages/demo/public/schema.json +++ b/packages/demo/public/schema.json @@ -1,465 +1 @@ -{ - "componentName":"Page", - "id":"node_dockcviv8fo1", - "props":{ - "ref":"outterView", - "autoLoading":true, - "style":{ - "padding":"0 5px 0 5px" - } - }, - "fileName":"test", - "dataSource":{ - "list":[ - ] - }, - "state":{ - "text":"outter", - "isShowDialog":false - }, - "css":"body {font-size: 12px;} .botton{width:100px;color:#ff00ff}", - "lifeCycles":{ - "componentDidMount":{ - "type":"JSFunction", - "value":"function() {\n console.log('did mount');\n }" - }, - "componentWillUnmount":{ - "type":"JSFunction", - "value":"function() {\n console.log('will umount');\n }" - } - }, - "methods":{ - "testFunc":{ - "type":"JSFunction", - "value":"function() {\n console.log('test func');\n }" - }, - "onClick":{ - "type":"JSFunction", - "value":"function(){\n this.setState({\n isShowDialog:true\n })\n\t}" - } - }, - "children":[ - { - "componentName":"Box", - "id":"node_dockcy8n9xed", - "props":{ - "style":{ - "backgroundColor":"rgba(31,56,88,0.1)", - "padding":"12px 12px 12px 12px" - } - }, - "children":[ - { - "componentName":"Box", - "id":"node_dockcy8n9xee", - "props":{ - "style":{ - "padding":"12px 12px 12px 12px", - "backgroundColor":"#ffffff" - } - }, - "children":[ - { - "componentName":"Breadcrumb", - "id":"node_dockcy8n9xef", - "props":{ - "prefix":"next-", - "maxNode":100, - "component":"nav" - }, - "children":[ - { - "componentName":"Breadcrumb.Item", - "id":"node_dockcy8n9xeg", - "props":{ - "prefix":"next-", - "children":[ - "首页"] - } - }, - { - "componentName":"Breadcrumb.Item", - "id":"node_dockcy8n9xei", - "props":{ - "prefix":"next-", - "children":[ - "品质中台"] - } - }, - { - "componentName":"Breadcrumb.Item", - "id":"node_dockcy8n9xek", - "props":{ - "prefix":"next-", - "children":[ - "商家品质页面管理"] - } - }, - { - "componentName":"Breadcrumb.Item", - "id":"node_dockcy8n9xem", - "props":{ - "prefix":"next-", - "children":[ - "质检知识条配置"] - } - }] - }] - }, - { - "componentName":"Box", - "id":"node_dockcy8n9xeo", - "props":{ - "style":{ - "marginTop":"12px", - "backgroundColor":"#ffffff" - } - }, - "children":[ - { - "componentName":"Form", - "id":"node_dockcy8n9xep", - "props":{ - "inline":true, - "style":{ - "marginTop":"12px", - "marginRight":"12px", - "marginLeft":"12px" - }, - "__events":[ - ] - }, - "children":[ - { - "componentName":"Form.Item", - "id":"node_dockcy8n9xeq", - "props":{ - "style":{ - "marginBottom":"0" - }, - "label":"类目名：" - }, - "children":[ - { - "componentName":"Select", - "id":"node_dockcy8n9xer", - "props":{ - "mode":"single", - "hasArrow":true, - "cacheValue":true, - "style":{ - "width":"150px" - } - } - }] - }, - { - "componentName":"Form.Item", - "id":"node_dockcy8n9xes", - "props":{ - "style":{ - "marginBottom":"0" - }, - "label":"项目类型：" - }, - "children":[ - { - "componentName":"Select", - "id":"node_dockcy8n9xet", - "props":{ - "mode":"single", - "hasArrow":true, - "cacheValue":true, - "style":{ - "width":"200px" - } - } - }] - }, - { - "componentName":"Form.Item", - "id":"node_dockcy8n9xeu", - "props":{ - "style":{ - "marginBottom":"0" - }, - "label":"项目 ID：" - }, - "children":[ - { - "componentName":"Input", - "id":"node_dockcy8n9xev", - "props":{ - "hasBorder":true, - "size":"medium", - "autoComplete":"off", - "style":{ - "width":"200px" - } - } - }] - }, - { - "componentName":"Button.Group", - "id":"node_dockcy8n9xew", - "props":{ - }, - "children":[ - { - "componentName":"Button", - "id":"node_dockcy8n9xex", - "props":{ - "type":"primary", - "style":{ - "margin":"0 5px 0 5px" - }, - "htmlType":"submit", - "children":[ - { - "componentName":"Icon", - "id":"node_dockcy8n9xey", - "props":{ - "type":"success" - } - }, - "搜索"] - } - }, - { - "componentName":"Button", - "id":"node_dockcy8n9xe10", - "props":{ - "type":"normal", - "style":{ - "margin":"0 5px 0 5px" - }, - "htmlType":"reset", - "children":[ - "清空"] - } - }] - }] - }] - }, - { - "componentName":"Box", - "id":"node_dockcy8n9xe12", - "props":{ - "style":{ - "justifyContent":"flex-end", - "display":"flex", - "backgroundColor":"#ffffff", - "flexDirection":"row", - "paddingRight":"24px" - } - }, - "children":[ - { - "componentName":"Button", - "id":"node_dockcy8n9xe13", - "props":{ - "prefix":"next-", - "type":"primary", - "size":"medium", - "htmlType":"button", - "component":"button", - "style":{ - "width":"100px" - }, - "children":["新建配置"], - "events":{ - "onClick":{ - "type":"JSFunction", - "value":"function(){ this.onClick() }", - "__eventData":{ - "type":"componentEvent", - "name":"onClick", - "relatedEventName":"onClick" - } - } - }, - "__events":[ - { - "type":"componentEvent", - "name":"onClick", - "relatedEventName":"onClick" - }], - "onClick":{ - "type":"JSFunction", - "value":"function(){ this.onClick() }" - } - } - }] - }, - { - "componentName":"Box", - "id":"node_dockcy8n9xe15", - "props":{ - "style":{ - "backgroundColor":"#ffffff" - } - }, - "children":[ - { - "componentName":"Table", - "id":"node_dockcy8n9xe16", - "props":{ - "dataSource":[ - { - "firstCategory":"其他", - "secondCategory":"新品预览", - "leafCategory":"", - "projectType":"标识判断", - "projectId":"", - "title":"其他类目->新品预览类目类型知识库", - "url":"其他", - "operation":"编辑" - }, - { - "firstCategory":"其他", - "secondCategory":"新品预览", - "leafCategory":"", - "projectType":"", - "projectId":"1", - "title":"其他类目->新品预览项目Id知识库", - "url":"其他", - "operation":"编辑" - }], - "size":"medium", - "prefix":"next-", - "hasBorder":true, - "hasHeader":true, - "isZebra":false, - "loading":false, - "expandedIndexSimulate":false, - "primaryKey":"id", - "locale":"zhCN.Table", - "crossline":false, - "style":{ - "margin":"24px 12px 24px 12px" - } - }, - "children":[ - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe17", - "props":{ - "title":"一级类目", - "dataIndex":"firstCategory" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe18", - "props":{ - "title":"二级类目", - "dataIndex":"secondCategory" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe19", - "props":{ - "title":"叶子类目", - "dataIndex":"leafCategory" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe1a", - "props":{ - "title":"项目类型", - "dataIndex":"projectType" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe1b", - "props":{ - "title":"项目 ID", - "dataIndex":"projectId" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe1c", - "props":{ - "title":"知识条标题", - "dataIndex":"title" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe1d", - "props":{ - "title":"知识条链接", - "dataIndex":"url" - } - }, - { - "componentName":"Table.Column", - "id":"node_dockcy8n9xe1e", - "props":{ - "title":"操作", - "dataIndex":"operation" - } - }] - }] - }, - { - "componentName":"Box", - "id":"node_dockcy8n9xe1f", - "props":{ - "style":{ - "backgroundColor":"#ffffff", - "paddingBottom":"24px" - } - }, - "children":[ - { - "componentName":"Pagination", - "id":"node_dockcy8n9xe1g", - "props":{ - "prefix":"next-", - "type":"normal", - "shape":"normal", - "size":"medium", - "defaultCurrent":1, - "total":100, - "pageShowCount":5, - "pageSize":10, - "pageSizePosition":"start", - "showJump":true, - "style":{ - "display":"flex", - "justifyContent":"flex-end" - } - } - }] - }] - }, - { - "componentName":"Dialog", - "id":"node_dockcy8n9xe1h", - "props":{ - "prefix":"next-", - "footerAlign":"right", - "footerActions":[ - "ok", - "cancel"], - "closeable":"esc,close", - "hasMask":true, - "align":"cc cc", - "minMargin":40, - "visible":{ - "type":"JSExpression", - "value":"this.state.isShowDialog" - }, - - "title":"标题", - - "events":[ - ] - } - }] -} +{"componentName":"Page","id":"node_dockcviv8fo1","props":{"ref":"outterView","autoLoading":true,"style":{"padding":"0 5px 0 5px"}},"fileName":"test","dataSource":{"list":[]},"state":{"text":"outter","isShowDialog":false},"css":"body {font-size: 12px;} .botton{width:100px;color:#ff00ff}","lifeCycles":{"componentDidMount":{"type":"JSFunction","value":"function() {\n console.log('did mount');\n }"},"componentWillUnmount":{"type":"JSFunction","value":"function() {\n console.log('will umount');\n }"}},"methods":{"testFunc":{"type":"JSFunction","value":"function() {\n console.log('test func');\n }"},"onClick":{"type":"JSFunction","value":"function() {\n this.setState({\n isShowDialog: true\n })\n }"},"closeDialog":{"type":"JSFunction","value":"function() {\n this.setState({\n isShowDialog: false\n })\n }"}},"children":[{"componentName":"Box","id":"node_dockcy8n9xed","props":{"style":{"backgroundColor":"rgba(31,56,88,0.1)","padding":"12px 12px 12px 12px"}},"children":[{"componentName":"Box","id":"node_dockcy8n9xee","props":{"style":{"padding":"12px 12px 12px 12px","backgroundColor":"#ffffff"}},"children":[{"componentName":"Breadcrumb","id":"node_dockcy8n9xef","props":{"prefix":"next-","maxNode":100,"component":"nav"},"children":[{"componentName":"Breadcrumb.Item","id":"node_dockcy8n9xeg","props":{"prefix":"next-","children":["首页"]}},{"componentName":"Breadcrumb.Item","id":"node_dockcy8n9xei","props":{"prefix":"next-","children":["品质中台"]}},{"componentName":"Breadcrumb.Item","id":"node_dockcy8n9xek","props":{"prefix":"next-","children":["商家品质页面管理"]}},{"componentName":"Breadcrumb.Item","id":"node_dockcy8n9xem","props":{"prefix":"next-","children":["质检知识条配置"]}}]}]},{"componentName":"Box","id":"node_dockcy8n9xeo","props":{"style":{"marginTop":"12px","backgroundColor":"#ffffff"}},"children":[{"componentName":"Form","id":"node_dockcy8n9xep","props":{"inline":true,"style":{"marginTop":"12px","marginRight":"12px","marginLeft":"12px"},"__events":[]},"children":[{"componentName":"Form.Item","id":"node_dockcy8n9xeq","props":{"style":{"marginBottom":"0"},"label":"类目名："},"children":[{"componentName":"Select","id":"node_dockcy8n9xer","props":{"mode":"single","hasArrow":true,"cacheValue":true,"style":{"width":"150px"}}}]},{"componentName":"Form.Item","id":"node_dockcy8n9xes","props":{"style":{"marginBottom":"0"},"label":"项目类型："},"children":[{"componentName":"Select","id":"node_dockcy8n9xet","props":{"mode":"single","hasArrow":true,"cacheValue":true,"style":{"width":"200px"}}}]},{"componentName":"Form.Item","id":"node_dockcy8n9xeu","props":{"style":{"marginBottom":"0"},"label":"项目 ID："},"children":[{"componentName":"Input","id":"node_dockcy8n9xev","props":{"hasBorder":true,"size":"medium","autoComplete":"off","style":{"width":"200px"}}}]},{"componentName":"Button.Group","id":"node_dockcy8n9xew","props":{},"children":[{"componentName":"Button","id":"node_dockcy8n9xex","props":{"type":"primary","style":{"margin":"0 5px 0 5px"},"htmlType":"submit","children":[{"componentName":"Icon","id":"node_dockcy8n9xey","props":{"type":"success"}},"搜索"]}},{"componentName":"Button","id":"node_dockcy8n9xe10","props":{"type":"normal","style":{"margin":"0 5px 0 5px"},"htmlType":"reset","children":["清空"]}}]}]}]},{"componentName":"Box","id":"node_dockcy8n9xe1f","props":{"style":{"backgroundColor":"#ffffff","paddingBottom":"24px","display":"flex","flexDirection":"row","justifyContent":"flex-end"}},"children":[{"componentName":"Button","id":"node_dockd5nrh9p4","props":{"type":"primary","size":"medium","htmlType":"button","component":"button","children":["新建配置"],"style":{},"__events":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}],"onClick":{"type":"JSFunction","value":"function(){ this.onClick() }"}}}]},{"componentName":"Box","id":"node_dockd5nrh9p5","props":{},"children":[{"componentName":"Table","id":"node_dockd5nrh9p6","props":{"dataSource":[{"id1":1,"id2":"2016","id3":"2013","id4":"2014","id5":"2015","id6":"2016","id7":"2017","id8":"2018"},{"id1":1,"id2":"2016","id3":"2016","id4":"2016","id5":"2016","id6":"2016","id7":"2016","id8":"2016"}],"size":"medium","prefix":"next-","hasBorder":true,"hasHeader":true,"isZebra":false,"loading":false,"expandedIndexSimulate":false,"primaryKey":"id","locale":"zhCN.Table","crossline":false,"__events":[]},"children":[{"componentName":"Table.Column","id":"node_dockd5nrh9p7","props":{"title":"一级类目","dataIndex":"id1"}},{"componentName":"Table.Column","id":"node_dockd5nrh9p8","props":{"title":"二级类目","dataIndex":"id2"}},{"componentName":"Table.Column","id":"node_dockd5nrh9p9","props":{"title":"叶子类目","dataIndex":"id3"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pa","props":{"title":"项目类型","dataIndex":"id4"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pb","props":{"title":"项目id","dataIndex":"id5"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pc","props":{"title":"知识条标题","dataIndex":"id6"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pd","props":{"title":"知识条链接","dataIndex":"id7"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pe","props":{"title":"操作","dataIndex":"id8"}}]},{"componentName":"Box","id":"node_dockd5nrh9pg","props":{"style":{"display":"flex","flexDirection":"row","justifyContent":"flex-end"}},"children":[{"componentName":"Pagination","id":"node_dockd5nrh9pf","props":{"prefix":"next-","type":"normal","shape":"normal","size":"medium","defaultCurrent":1,"total":100,"pageShowCount":5,"pageSize":10,"pageSizePosition":"start","showJump":true,"style":{}}}]}]}]},{"componentName":"Dialog","id":"node_dockcy8n9xe1h","props":{"prefix":"next-","footerAlign":"right","footerActions":["ok","cancel"],"closeable":"esc,close","hasMask":true,"align":"cc cc","minMargin":40,"visible":{"type":"JSExpression","value":"this.state.isShowDialog"},"title":"标题","events":[],"__events":[{"type":"componentEvent","name":"onCancel","relatedEventName":"closeDialog"},{"type":"componentEvent","name":"onClose","relatedEventName":"closeDialog"},{"type":"componentEvent","name":"onOk","relatedEventName":"testFunc"}],"onCancel":{"type":"JSFunction","value":"function(){ this.closeDialog() }"},"onClose":{"type":"JSFunction","value":"function(){ this.closeDialog() }"},"onOk":{"type":"JSFunction","value":"function(){ this.testFunc() }"}},"children":[{"componentName":"Form","id":"node_dockd5nrh9pi","props":{"inline":false,"labelAlign":"top","labelTextAlign":"right","size":"medium"},"children":[{"componentName":"Form.Item","id":"node_dockd5nrh9pj","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目"},"children":[{"componentName":"Select","id":"node_dockd5nrh9pk","props":{"mode":"single","hasArrow":true,"cacheValue":true}}]},{"componentName":"Form.Item","id":"node_dockd5nrh9pl","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目"},"children":[{"componentName":"Select","id":"node_dockd5nrh9pm","props":{"mode":"single","hasArrow":true,"cacheValue":true}}]},{"componentName":"Form.Item","id":"node_dockd5nrh9pn","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目","asterisk":true},"children":[{"componentName":"Select","id":"node_dockd5nrh9po","props":{"mode":"single","hasArrow":true,"cacheValue":true}}]},{"componentName":"Form.Item","id":"node_dockd5nrh9pp","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目"},"children":[{"componentName":"Input","id":"node_dockd5nrh9pr","props":{"hasBorder":true,"size":"medium","autoComplete":"off"}}]}]}]}]} diff --git a/packages/plugin-source-editor/src/index.scss b/packages/plugin-source-editor/src/index.scss index 2297b8e6f..020aad20f 100644 --- a/packages/plugin-source-editor/src/index.scss +++ b/packages/plugin-source-editor/src/index.scss @@ -23,6 +23,7 @@ .editor-context{ height: 100%; + width: 100%; } .next-tabs-tabpane.active { diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx index 9b8a4f434..5ee8296be 100644 --- a/packages/plugin-source-editor/src/index.tsx +++ b/packages/plugin-source-editor/src/index.tsx @@ -15,7 +15,7 @@ import transfrom from './transform'; const defaultEditorOption = { width: '100%', - height: '96%', + height: '100%', options: { readOnly: false, automaticLayout: true, @@ -54,7 +54,7 @@ export default class SourceEditor extends Component<{ private editorParentNode: Object; state = { - isShow: true, + isFullScreen:false, tabKey: TAB_KEY.JS_TAB, }; @@ -75,6 +75,13 @@ export default class SourceEditor extends Component<{ this.initCode(schema); } + + componentDidMount () { + this.editorNode = this.editorJsRef.current; //记录当前dom节点； + this.editorParentNode = this.editorNode.parentNode; //记录父节点; + + } + /** * 执行编辑器事件 */ @@ -170,7 +177,28 @@ export default class SourceEditor extends Component<{ } }; - fullScreen = () => {}; + fullScreen = () => { + document.body.appendChild(this.editorNode) + + const fullScreenOption = { + ...defaultEditorOption, + lineNumbers: 'on', + folding: true, + scrollBeyondLastLine: true, + minimap: { + enabled: true + } + } + + this.monocoEditor.updateOptions(fullScreenOption); + // if (this.editorParentNode) { + // if (this.editorParentNode.firstChild) { + // this.editorParentNode.insertBefore(this.editorNode, this.editorParentNode.firstChild); + // } else { + // this.editorParentNode.appendChild(this.editorNode); + // } + // } + }; onTabChange = (key) => { const { editor } = this.props; @@ -210,7 +238,7 @@ export default class SourceEditor extends Component<{ }; render() { - const { isShow, selectTab, jsCode, css } = this.state; + const { selectTab, jsCode, css } = this.state; const tabs = [ { tab: 'index.js', key: TAB_KEY.JS_TAB }, { tab: 'style.css', key: TAB_KEY.CSS_TAB }, @@ -224,9 +252,9 @@ export default class SourceEditor extends Component<{ ))} - {isShow && ( +
-
+
this.editorDidMount.call(this, editor, monaco, TAB_KEY.JS_TAB)} />
-
+
- )} +
diff --git a/packages/plugin-source-editor/src/transform.ts b/packages/plugin-source-editor/src/transform.ts index f6c3eaafc..1ff3c17b0 100644 --- a/packages/plugin-source-editor/src/transform.ts +++ b/packages/plugin-source-editor/src/transform.ts @@ -35,8 +35,10 @@ const transfrom = { functionNameList.map((functionName)=>{ if (functionName != 'constructor'){ - let functionCode = a[functionName].toString().replace(new RegExp(functionName),'function'); - functionMap[functionName] = functionCode; + if (a[functionName]){ + let functionCode = a[functionName].toString().replace(new RegExp(functionName),'function'); + functionMap[functionName] = functionCode; + } } })