diff --git a/packages/react-schema-editor/README.md b/packages/react-schema-editor/README.md
index fc0826cc636..159282f920e 100644
--- 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
Hello
return
}
diff --git a/packages/react-schema-editor/src/__tests__/index.spec.ts b/packages/react-schema-editor/src/__tests__/index.spec.ts
index 82d7b82e76a..ae6f5c59e6a 100644
--- a/packages/react-schema-editor/src/__tests__/index.spec.ts
+++ b/packages/react-schema-editor/src/__tests__/index.spec.ts
@@ -23,8 +23,8 @@ describe('json object transform', () => {
const validResult = {
title: '',
type: 'object',
- properties: [
- {
+ properties: {
+ string: {
title: '',
type: 'string',
example: 'input test',
@@ -32,7 +32,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ boolean: {
title: '',
type: 'boolean',
example: true,
@@ -40,7 +40,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ checkbox: {
title: '',
type: 'array',
items: {
@@ -54,7 +54,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ date: {
title: '',
type: 'string',
example: '2019-12-12',
@@ -62,7 +62,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ daterange: {
title: '',
type: 'array',
items: {
@@ -76,7 +76,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ number: {
title: '',
type: 'number',
example: 1,
@@ -84,7 +84,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ radio: {
title: '',
type: 'string',
example: '2',
@@ -92,7 +92,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ rating: {
title: '',
type: 'number',
example: 4,
@@ -100,7 +100,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ select: {
title: '',
type: 'string',
example: '1',
@@ -108,7 +108,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ textarea: {
title: '',
type: 'string',
example: 'test text',
@@ -116,7 +116,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ time: {
title: '',
type: 'string',
example: '00:00:04',
@@ -124,7 +124,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ transfer: {
title: '',
type: 'array',
items: {
@@ -138,7 +138,7 @@ describe('json object transform', () => {
description: '',
'x-component': 'Input'
},
- {
+ year: {
title: '',
type: 'string',
example: '2013-01-01 00:00:00',
@@ -146,7 +146,7 @@ describe('json object transform', () => {
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
index e69de29bb2d..ff790dff28b 100644
--- 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 = ({ 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 (
+
+
+
+
+
+
+ )
+}
+
+export default JsonDialog
diff --git a/packages/react-schema-editor/src/index.tsx b/packages/react-schema-editor/src/index.tsx
index 906ee9e59f7..95dcb18af08 100644
--- 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 (
-
+
{(showAntdComponents || showFusionComponents) && (
选择组件类型:
diff --git a/packages/react-schema-editor/src/utils/json2schema.ts b/packages/react-schema-editor/src/utils/json2schema.ts
index 9e118e6f3c6..c85ea5736b3 100644
--- 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') {