You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

83 lines
2.0 KiB

import React, { useState } from 'react';
import Generator from 'fr-generator';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import CodeEditor from '../codeEditor';
import { defaultConfig, 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 ConfigTab: React.FC<IProps> = (props) => {
const [jsonSchema, setJsonSchema] = useState(defaultConfig)
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>
);
}
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>
</Tabs>
)
}
export default ConfigSchema;