Browse Source

config visualization and code change concurrently

master
yangpei 4 years ago
parent
commit
b4acb36e90
  1. 16
      packages/core/src/components/configSchema/index.module.less
  2. 98
      packages/core/src/components/configSchema/index.tsx
  3. 45
      packages/core/src/components/configSchema/json.ts

16
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;
}
}
}

98
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<IProps> = (props) => {
const onChange = (value: FormValue) => {
props.onChange(value.schema)
}
return (
<div className={styles.form}>
<Generator
settings={[{
title: '表单组件库',
widgets: compData,
}]}
onChange={onChange}
/>
</div>
)
}
const ConfigSchema: React.FC<IProps> = (props) => {
const [code, setCode] = useState('')
const [schema, setSchema] = useState({})
const formRef = useRef<HTMLDivElement>()
const ConfigTab: React.FC<IProps> = (props) => {
const [jsonSchema, setJsonSchema] = useState(defaultConfig)
// 同步代码
const tabChange = () => {
// 可视化同步到编辑器
// @ts-ignore
const formSchema = formRef.current && formRef.current.getValue()
setSchema(formSchema)
setCode(JSON.stringify(formSchema))
return (
<div className={styles.configInput}>
<div className={styles.left}>
<p></p>
<CodeEditor
width={'100%'}
language={'json'}
value={jsonSchema}
onChange={props.onChange}
/>
</div>
<div className={styles.right}>
<p></p>
{/* <FormRender
schema={schema}
onChange={onChange}
/> */}
</div>
</div>
);
}
// 编辑器同步到可视化
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<ICodeRunProps> = (props) => {
return (
<Tabs
type="card"
tabBarGutter={0}
defaultActiveKey={'basic'}
onChange={tabChange}
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}>
<VisualTab onChange={props.onChange} />
<div className={styles.form}>
<Generator
ref={formRef}
settings={[{
title: '表单组件库',
widgets: compData,
}]}
/>
</div>
</TabPane>
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}>
<ConfigTab onChange={props.onChange} />
<div className={styles.configInput}>
<CodeEditor
width={'100%'}
language={'json'}
value={code}
onChange={codeChange}
/>
</div>
</TabPane>
</Tabs>
)

45
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
}

Loading…
Cancel
Save