feat: schema editor support json to schema (#639)

welkang · web-flow · commit 8c4782ab32a1 · 2020-02-06T10:33:31.000+08:00
diff --git a/packages/react-schema-editor/README.md b/packages/react-schema-editor/README.md
@@ -14,46 +14,47 @@ import { SchemaEditor } from './src'
 
 function SchemaEditorDemo() {
   const [schema, setSchema] = React.useState({
-  title: '动态表单示例',
-  type: 'object',
-  "properties": {
-    "username": {
-      "title": "用户名",
-      "type": "string",
-      "x-component-props": {
-        "placeholder": "请输入用户名",
-        "onChange": "function(value) \n{console.log('input onChange', value, this.field, this.field.getValue('note'))"
-      }
-    },
-    "password": {
-      "title": "密码",
-      "type": "string",
-      "x-component": "Input",
-      "x-component-props": {
-        "htmlType": "password",
-        "placeholder": "请输入密码"
-      } 
-    },
-    "note": {
-      "title": "备注",
-      "type": "string",
-      "x-component": "TextArea",
-      "x-component-props": {
-        "placeholder": "something"
-      } 
-    },
-    "agreement": {
-      "title": "同意",
-      "type": "string",
-      "x-component": "Checkbox",
-      "x-component-props": {
-        "disabled": "{{!this.field.getValue('username')}}",
-        "defaultChecked": true
+    title: '动态表单示例',
+    type: 'object',
+    "properties": {
+      "username": {
+        "title": "用户名",
+        "type": "string",
+        "x-component-props": {
+          "placeholder": "请输入用户名",
+          "onChange": "function(value) \n{console.log('input onChange', value, this.field, this.field.getValue('note'))"
+        }
+      },
+      "password": {
+        "title": "密码",
+        "type": "string",
+        "x-component": "Input",
+        "x-component-props": {
+          "htmlType": "password",
+          "placeholder": "请输入密码"
+        }
+      },
+      "note": {
+        "title": "备注",
+        "type": "string",
+        "x-component": "TextArea",
+        "x-component-props": {
+          "placeholder": "something"
+        }
+      },
+      "agreement": {
+        "title": "同意",
+        "type": "string",
+        "x-component": "Checkbox",
+        "x-component-props": {
+          "disabled": "{{!this.field.getValue('username')}}",
+          "defaultChecked": true
+        }
       }
     }
-  }
-})
+  })
 
+  // return <div>Hello</div>
   return <SchemaEditor schema={schema} onChange={setSchema} />
 }
 
diff --git a/packages/react-schema-editor/src/__tests__/index.spec.ts b/packages/react-schema-editor/src/__tests__/index.spec.ts
@@ -23,24 +23,24 @@ describe('json object transform', () => {
     const validResult = {
       title: '',
       type: 'object',
-      properties: [
-        {
+      properties: {
+        string: {
           title: '',
           type: 'string',
           example: 'input test',
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        boolean: {
           title: '',
           type: 'boolean',
           example: true,
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        checkbox: {
           title: '',
           type: 'array',
           items: {
@@ -54,15 +54,15 @@ describe('json object transform', () => {
           description: '',
           'x-component': 'Input'
         },
-        {
+        date: {
           title: '',
           type: 'string',
           example: '2019-12-12',
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        daterange: {
           title: '',
           type: 'array',
           items: {
@@ -76,55 +76,55 @@ describe('json object transform', () => {
           description: '',
           'x-component': 'Input'
         },
-        {
+        number: {
           title: '',
           type: 'number',
           example: 1,
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        radio: {
           title: '',
           type: 'string',
           example: '2',
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        rating: {
           title: '',
           type: 'number',
           example: 4,
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        select: {
           title: '',
           type: 'string',
           example: '1',
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        textarea: {
           title: '',
           type: 'string',
           example: 'test text',
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        time: {
           title: '',
           type: 'string',
           example: '00:00:04',
           enum: [],
           description: '',
           'x-component': 'Input'
         },
-        {
+        transfer: {
           title: '',
           type: 'array',
           items: {
@@ -138,15 +138,15 @@ describe('json object transform', () => {
           description: '',
           'x-component': 'Input'
         },
-        {
+        year: {
           title: '',
           type: 'string',
           example: '2013-01-01 00:00:00',
           enum: [],
           description: '',
           'x-component': 'Input'
         }
-      ],
+      },
       description: ''
     }
 
diff --git a/packages/react-schema-editor/src/components/JsonDialog.tsx b/packages/react-schema-editor/src/components/JsonDialog.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { Input, Modal, Button } from 'antd'
+import { json2schema } from '../utils/json2schema'
+
+const { TextArea } = Input
+
+interface IJsonDialogProps {
+  onChange: (schema: any) => void
+}
+
+const JsonDialog: React.FC<IJsonDialogProps> = ({ onChange }) => {
+  const [jsonDialogVisible, setJsonDialogVisible] = useState(false)
+  const [json, setJson] = useState('')
+
+  const handleShowJsonDialog = () => {
+    setJsonDialogVisible(true)
+  }
+
+  const handleHideJsonDialog = () => {
+    setJsonDialogVisible(false)
+  }
+
+  const handleJsonChange = e => {
+    const { value } = e.target
+    setJson(value)
+  }
+
+  const handleOk = () => {
+    try {
+      if (!json) {
+        return
+      }
+      const jsonSchema = json2schema(JSON.parse(json))
+      handleHideJsonDialog()
+      onChange(jsonSchema)
+    } catch (err) {
+      // console.log(err)
+    }
+  }
+
+  return (
+    <div>
+      <Button type="primary" onClick={handleShowJsonDialog}>
+        快速生成
+      </Button>
+      <Modal
+        title="请输入JSON"
+        visible={jsonDialogVisible}
+        onOk={handleOk}
+        onCancel={handleHideJsonDialog}
+      >
+        <TextArea
+          value={json}
+          onChange={handleJsonChange}
+          placeholder=""
+          autoSize={{ minRows: 10, maxRows: 10 }}
+        />
+      </Modal>
+    </div>
+  )
+}
+
+export default JsonDialog
diff --git a/packages/react-schema-editor/src/index.tsx b/packages/react-schema-editor/src/index.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
-import { Button, Radio, Tabs } from 'antd'
+import { Radio, Tabs } from 'antd'
 import * as fp from 'lodash/fp'
 import _ from 'lodash'
 import { SchemaTree } from './components/SchemaTree'
 import FieldEditor from './components/FieldEditor'
 import { SchemaCode } from './components/SchemaCode'
+import JsonDialog from './components/JsonDialog'
 // import { SchemaPreview } from './components/SchemaPreview'
 import { ComponentTypes } from './utils/types'
 import {
@@ -32,7 +33,7 @@ export const SchemaEditor: React.FC<{
   const [componentType, setComponentType] = useState(
     getDefaultComponentType({ showAntdComponents, showFusionComponents })
   )
-  const [selectedPath, setSelectedPath] = React.useState(null)
+  const [selectedPath, setSelectedPath] = useState(null)
 
   const selectedPaths = (selectedPath && selectedPath.split('.')) || []
   const fieldKey =
@@ -48,6 +49,10 @@ export const SchemaEditor: React.FC<{
 
   const handleCodeChange = () => {}
 
+  const handleSchemaChange = (schema: string) => {
+    onChange(schema)
+  }
+
   const isRoot = selectedPath === 'root'
 
   const selectedSchema =
@@ -56,7 +61,7 @@ export const SchemaEditor: React.FC<{
   return (
     <div className={`schema-editor ${className}`}>
       <div className="schema-menus">
-        <Button type="primary">快速生成</Button>
+        <JsonDialog onChange={handleSchemaChange} />
         {(showAntdComponents || showFusionComponents) && (
           <span className="select-component-type">
             选择组件类型：
diff --git a/packages/react-schema-editor/src/utils/json2schema.ts b/packages/react-schema-editor/src/utils/json2schema.ts
@@ -13,9 +13,10 @@ export function json2schema(json: any, parentsPath?: string) {
     schema = schema || {
       title: '',
       type,
-      properties: Object.keys(json).map(key =>
-        json2schema(json[key], newParentsPath + '.' + key)
-      ),
+      properties: Object.keys(json).reduce((result, key) => {
+        result[key] = json2schema(json[key], newParentsPath + '.' + key)
+        return result
+      }, {}),
       description: ''
     }
   } else if (type === 'array') {
