feat(@uform/react-form-editor): add schema code editor, edit copy and…

… download (#469)

package.json

@@ -101,12 +101,14 @@
     "majo": "^0.7.1",
     "markdown-toc": "^1.2.0",
     "moment": "^2.24.0",
+    "monaco-editor": "^0.18.1",
     "onchange": "^5.2.0",
     "prettier": "^1.18.2",
     "pretty-format": "^24.0.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-eva": "^1.1.7",
+    "react-monaco-editor": "^0.32.1",
     "react-test-renderer": "^16.11.0",
     "remark-parse": "^6.0.3",
     "remark-stringify": "^6.0.4",

packages/react-schema-editor/src/components/SchemaCode.tsx

@@ -1,24 +1,97 @@
-import React from 'react'
-// import MonacoEditor from 'react-monaco-editor'
+import React, { useState } from 'react'
+import { Button, Drawer, Icon, Tooltip, notification } from 'antd';
+import MonacoEditor from 'react-monaco-editor'
+import moment from 'moment';
 import { ISchemaCodeProps } from '../utils/types'
 
+const options = {
+  selectOnLineNumbers: true
+};
+
+const styles = {
+  icon: {
+    fontSize: '24px',
+    color: '#fff',
+    marginBottom: '15px'
+  }
+};
+
 export const SchemaCode: React.FC<ISchemaCodeProps> = ({
   schema,
   onChange
 }) => {
+  const [showDrawer, setShowDrawer] = useState(false);
+
   if (typeof schema === 'object') {
     schema = JSON.stringify(schema, null, '\t')
   }
 
+  const copySchema = () => {
+    const oEle = document.createElement('textarea');
+    oEle.value = schema;
+    document.body.appendChild(oEle);
+    oEle.select();
+    document.execCommand('Copy'); 
+    oEle.style.display = 'none';
+    notification
+    notification.open({
+      message: 'shcema复制成功',
+      duration: 2,
+    });
+  }
+
+  const downloadSchema = () => {
+    const aEle = document.createElement('a');
+    aEle.download = `${moment().format('YYYYMMDD-HHmmss')}schema.json`;
+    aEle.style.display = 'none';
+    var blob = new Blob([schema], {type:'application/json,charset=utf-8;'});
+    aEle.href = URL.createObjectURL(blob);
+    document.body.appendChild(aEle);
+    aEle.click();
+    document.body.removeChild(aEle);
+  }
+
+  const aside = (
+    <div style={{ width: '28px', padding: '5px 0', textAlign: 'center', background: '#1890ff' }}>
+      <Tooltip placement="left" title="预览、编辑协议">
+        <Icon type="codepen" onClick={() => { setShowDrawer(true) }} style={styles.icon} />
+      </Tooltip>
+      <Tooltip placement="left" title="复制协议">
+        <Icon type="copy" onClick={copySchema} style={styles.icon} />
+      </Tooltip>
+      <Tooltip placement="left" title="下载协议">
+        <Icon type="download" onClick={downloadSchema} style={styles.icon} />
+      </Tooltip>
+    </div>
+  );
+
   return (
-    <div>
-      {/* <MonacoEditor
-        width="500"
-        height="500"
-        language="json"
-        theme="vs-dark"
-        value={schema}
-      /> */}
+    <div style={{ height: '100%', }}>
+      {
+        !showDrawer ? aside : null
+      }
+
+      <Drawer
+        width="840"
+        placement="right"
+        visible={showDrawer}
+        closable={false}
+        hasMask={false}
+        bodyStyle={{ padding: 0, height: '100%' }}
+        onClose={() => setShowDrawer(false)} >
+        <div style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>
+          <MonacoEditor
+            style={{ flexGrow: '1' }}
+            language="json"
+            theme="vs-dark"
+            onChange={(schema) => onChange(JSON.parse(schema))}
+            value={schema}
+          />
+          {
+            showDrawer ? aside : null
+          }
+        </div>
+      </Drawer>
     </div>
   )
 }

packages/react-schema-editor/src/index.tsx

@@ -17,11 +17,14 @@ export const SchemaEditor: React.FC<{
           <Icon type="success"></Icon>预览
         </Button>
       </div>
-      <Row className="schema-editor-main">
-        <Col span={14} className="schema-col schema-tree splitter">
+      <Row className="schema-editor-main" style={{ minHeight: '350px' }}>
+        <Col span={24} className="schema-col schema-tree splitter">
           <SchemaTree schema={schema} onChange={onChange} />
         </Col>
-        <Col span={10} className="schema-col schema-code">
+        <Col
+          className="schema-col schema-code"
+          style={{ position: 'absolute', right: '0px', height: '100%' }}
+        >
           <SchemaCode schema={schema} onChange={onChange}></SchemaCode>
         </Col>
       </Row>

packages/react-schema-editor/src/main.scss

@@ -29,7 +29,10 @@
     .schema-tree {}
 
     /* 代码编辑 */
-    .schema-code {}
+    .schema-code {
+      position: absolute;
+      right: 0;
+    }
   }
 
   .field-editor {