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. 92
      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{ .tabPane{
margin:0 20px;
.form{ .form{
height:600px; height:600px;
overflow-y: auto; overflow-y: auto;
margin:0 20px;
} }
.configInput{ .configInput{
display: flex;
flex-direction: row;
justify-content: space-between;
height: 600px; height: 600px;
.left{
height:100%;
flex:1;
}
.right{
height:100%;
flex:1;
}
} }
} }

92
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 Generator from 'fr-generator';
import { Tabs } from 'antd'; import { Tabs } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import CodeEditor from '../codeEditor'; import CodeEditor from '../codeEditor';
import { defaultConfig, compData } from './json' import { compData } from './json'
import styles from './index.module.less'; import styles from './index.module.less';
// import FormRender from 'form-render/lib/antd';
interface IProps { interface IProps {
onChange: (value: object) => void onChange: (value: object) => void
} }
interface FormValue {
children: object[],
parent: string,
schema: object
}
const VisualTab: React.FC<IProps> = (props) => { const ConfigSchema: React.FC<IProps> = (props) => {
const onChange = (value: FormValue) => { const [code, setCode] = useState('')
props.onChange(value.schema) const [schema, setSchema] = useState({})
const formRef = useRef<HTMLDivElement>()
// 同步代码
const tabChange = () => {
// 可视化同步到编辑器
// @ts-ignore
const formSchema = formRef.current && formRef.current.getValue()
setSchema(formSchema)
setCode(JSON.stringify(formSchema))
// 编辑器同步到可视化
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);
}
}
const codeChange = (ev: any, newCode: any) => {
setCode(newCode)
} }
return ( 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'}>
<div className={styles.form}> <div className={styles.form}>
<Generator <Generator
ref={formRef}
settings={[{ settings={[{
title: '表单组件库', title: '表单组件库',
widgets: compData, widgets: compData,
}]} }]}
onChange={onChange}
/> />
</div> </div>
) </TabPane>
} <TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}>
const ConfigTab: React.FC<IProps> = (props) => {
const [jsonSchema, setJsonSchema] = useState(defaultConfig)
return (
<div className={styles.configInput}> <div className={styles.configInput}>
<div className={styles.left}>
<p></p>
<CodeEditor <CodeEditor
width={'100%'} width={'100%'}
language={'json'} language={'json'}
value={jsonSchema} value={code}
onChange={props.onChange} onChange={codeChange}
/> />
</div> </div>
<div className={styles.right}>
<p></p>
{/* <FormRender
schema={schema}
onChange={onChange}
/> */}
</div>
</div>
);
}
interface ICodeRunProps {
onChange: (value: object) => void
}
const ConfigSchema: React.FC<ICodeRunProps> = (props) => {
return (
<Tabs
type="card"
tabBarGutter={0}
defaultActiveKey={'basic'}
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}>
<VisualTab onChange={props.onChange} />
</TabPane>
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}>
<ConfigTab onChange={props.onChange} />
</TabPane> </TabPane>
</Tabs> </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 = [ const compData = [
{ {
"text": '简单输入框', "text": '简单输入框',
@ -550,6 +506,5 @@ const compData = [
] ]
export { export {
defaultConfig,
compData compData
} }

Loading…
Cancel
Save