Merge branch 'yili' of http://gogsb.soaringnova.com/ylproj/jupyterlab into yili

packages/yili-dag/src/ScriptEditor.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import CodeMirror from "codemirror";
+import 'codemirror/lib/codemirror.css' // CodeMirrory原生样式
+import 'codemirror/mode/sql/sql'
+import 'codemirror/mode/python/python'
+import 'codemirror/mode/shell/shell'
+import 'codemirror/addon/display/placeholder' 
+import 'codemirror/addon/hint/show-hint.css' // 用来做代码提示
+import 'codemirror/addon/hint/show-hint.js' // 用来做代码提示
+import 'codemirror/addon/hint/sql-hint.js' // 用来做代码提示
+
+export default class ScriptEditor extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+    const editor = CodeMirror.fromTextArea(document.querySelector('.editor') as any, {
+      lineNumbers: true,
+      mode: 'python',
+    })
+    editor.setSize(null, '100%')
+  }
+
+  render () {
+    return (
+      <textarea className="editor"></textarea>
+    )
+  }
+}

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { MinusCircleOutlined, PlusCircleOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Space, Select, Modal, Collapse, Table} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-
+import ScriptEditor from './ScriptEditor';
 
 const { Panel } = Collapse;
 
@@ -214,12 +214,15 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           title="编辑脚本"
           open={this.state.scriptModalVisible}
           onOk={this.submitScriptEdit}
-          okText="确认修改"
           className='script-modal'
-          cancelText="取消"
           width={'90%'}
           style={{ top: 20 }}
           onCancel={() => {this.setState({scriptModalVisible: false})}}
+          footer={[
+            <Button key="back" onClick={() => {this.setState({scriptModalVisible: false})}}>取消</Button>,
+            <Button key="check" type='primary' onClick={() => {console.log('代码校验');}}>代码校验</Button>,
+            <Button key="submit" type='primary' onClick={this.submitScriptEdit}>确定修改</Button>
+          ]}
         >
           <div className='modal-container'>
             {/* 数据表展示 */}
@@ -237,6 +240,7 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
             {/* 脚本编辑 */}
             <div className='modal-script'>
               <div className='script-header'></div>
+              <ScriptEditor />
               {/* <CodeMirror
                 style={{flex: 1}}
                 height='100%'

packages/yili-dag/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module 'codemirror/mode/sql/sql'
+declare module 'codemirror/mode/python/python'
+declare module 'codemirror/mode/shell/shell'
+declare module 'codemirror/addon/hint/sql-hint.js'

packages/yili-dag/style/ScriptNodeInfo.css

@@ -8,6 +8,9 @@
   background-color: #F7F7F7;
   border-bottom: 1px solid #ddd;;
   height: 5%;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
 }
 
 .modal-table {