From b4acb36e9057cc65bc705b09e709c8afb47869fc Mon Sep 17 00:00:00 2001 From: yangpei <2517625275@qq.com> Date: Tue, 12 Jan 2021 17:01:40 +0800 Subject: [PATCH] config visualization and code change concurrently --- .../components/configSchema/index.module.less | 16 +-- .../src/components/configSchema/index.tsx | 98 +++++++++---------- .../core/src/components/configSchema/json.ts | 45 --------- 3 files changed, 45 insertions(+), 114 deletions(-) diff --git a/packages/core/src/components/configSchema/index.module.less b/packages/core/src/components/configSchema/index.module.less index 5842fdd..29767c1 100644 --- a/packages/core/src/components/configSchema/index.module.less +++ b/packages/core/src/components/configSchema/index.module.less @@ -1,24 +1,10 @@ .tabPane{ - margin:0 20px; - .form{ height:600px; overflow-y: auto; + margin:0 20px; } .configInput{ - display: flex; - flex-direction: row; - justify-content: space-between; height: 600px; - - .left{ - height:100%; - flex:1; - } - - .right{ - height:100%; - flex:1; - } } } diff --git a/packages/core/src/components/configSchema/index.tsx b/packages/core/src/components/configSchema/index.tsx index 5bf68e1..05294c6 100644 --- a/packages/core/src/components/configSchema/index.tsx +++ b/packages/core/src/components/configSchema/index.tsx @@ -1,80 +1,70 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import Generator from 'fr-generator'; import { Tabs } from 'antd'; const { TabPane } = Tabs; import CodeEditor from '../codeEditor'; -import { defaultConfig, compData } from './json' +import { compData } from './json' import styles from './index.module.less'; -// import FormRender from 'form-render/lib/antd'; interface IProps { onChange: (value: object) => void } -interface FormValue { - children: object[], - parent: string, - schema: object -} - -const VisualTab: React.FC = (props) => { - const onChange = (value: FormValue) => { - props.onChange(value.schema) - } - return ( -
- -
- ) -} +const ConfigSchema: React.FC = (props) => { + const [code, setCode] = useState('') + const [schema, setSchema] = useState({}) + const formRef = useRef() -const ConfigTab: React.FC = (props) => { - const [jsonSchema, setJsonSchema] = useState(defaultConfig) + // 同步代码 + const tabChange = () => { + // 可视化同步到编辑器 + // @ts-ignore + const formSchema = formRef.current && formRef.current.getValue() + setSchema(formSchema) + setCode(JSON.stringify(formSchema)) - return ( -
-
-

输入

- -
-
-

表单可视化

- {/* */} -
-
- ); -} + // 编辑器同步到可视化 + try { + const codeObj = JSON.parse(code) + setSchema(codeObj) + // @ts-ignore + formRef.current.setValue(codeObj) + } catch (error) { + console.log('can\'t parse code string to form schema, the error is:', error.message); + } + } -interface ICodeRunProps { - onChange: (value: object) => void -} + const codeChange = (ev: any, newCode: any) => { + setCode(newCode) + } -const ConfigSchema: React.FC = (props) => { return ( - +
+ +
- +
+ +
) diff --git a/packages/core/src/components/configSchema/json.ts b/packages/core/src/components/configSchema/json.ts index 4bbdc4a..52ef4bd 100644 --- a/packages/core/src/components/configSchema/json.ts +++ b/packages/core/src/components/configSchema/json.ts @@ -1,47 +1,3 @@ -const defaultConfig = `{ - "schema": { - "type": "object", - "properties": { - "AllString": { - "title": "string类", - "type": "object", - "properties": { - "input": { - "title": "输入框", - "type": "string", - "ui:options": { - "placeholder": "商品名称" - } - } - } - }, - "allNumber": { - "title": "number类", - "type": "object", - "properties": { - "number": { - "title": "数字输入框", - "description": "1 - 1000", - "type": "number", - "min": 1, - "max": 1000 - } - } - }, - "allBoolean": { - "title": "boolean类", - "type": "object", - "properties": { - "radio": { - "title": "是否通过", - "type": "boolean" - } - } - } - } - } -}`; - const compData = [ { "text": '简单输入框', @@ -550,6 +506,5 @@ const compData = [ ] export { - defaultConfig, compData }