Skip to content

Commit

Permalink
feat: schema editor support json to schema (#639)
Browse files Browse the repository at this point in the history
  • Loading branch information
welkang authored Feb 6, 2020
1 parent 112e304 commit 8c4782a
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 58 deletions.
75 changes: 38 additions & 37 deletions packages/react-schema-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
}

Expand Down
30 changes: 15 additions & 15 deletions packages/react-schema-editor/src/__tests__/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: ''
}

Expand Down
63 changes: 63 additions & 0 deletions packages/react-schema-editor/src/components/JsonDialog.tsx
Original file line number Diff line number Diff line change
@@ -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
11 changes: 8 additions & 3 deletions packages/react-schema-editor/src/index.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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 =
Expand All @@ -48,6 +49,10 @@ export const SchemaEditor: React.FC<{

const handleCodeChange = () => {}

const handleSchemaChange = (schema: string) => {
onChange(schema)
}

const isRoot = selectedPath === 'root'

const selectedSchema =
Expand All @@ -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">
选择组件类型:
Expand Down
7 changes: 4 additions & 3 deletions packages/react-schema-editor/src/utils/json2schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down

0 comments on commit 8c4782a

Please sign in to comment.