|
@ -1,4 +1,4 @@ |
|
|
import React, { useEffect } from 'react'; |
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
import Generator from 'fr-generator'; |
|
|
import Generator from 'fr-generator'; |
|
|
import JsonView from 'react-json-view'; |
|
|
import JsonView from 'react-json-view'; |
|
|
import { Terminal } from 'xterm'; |
|
|
import { Terminal } from 'xterm'; |
|
@ -8,25 +8,37 @@ import CodeEditor from '../codeEditor'; |
|
|
import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json' |
|
|
import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json' |
|
|
import styles from './index.module.less'; |
|
|
import styles from './index.module.less'; |
|
|
|
|
|
|
|
|
const VisualTab: React.FC = () => { |
|
|
interface IVisualrops { |
|
|
|
|
|
onChange: (value: object) => void |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
interface FormValue { |
|
|
|
|
|
children: object[], |
|
|
|
|
|
parent: string, |
|
|
|
|
|
schema: object |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const VisualTab: React.FC<IVisualrops> = (props) => { |
|
|
|
|
|
const onChange = (value: FormValue) => { |
|
|
|
|
|
props.onChange(value.schema) |
|
|
|
|
|
} |
|
|
return ( |
|
|
return ( |
|
|
<div> |
|
|
|
|
|
<Generator |
|
|
<Generator |
|
|
settings={[ |
|
|
settings={[{ |
|
|
{ |
|
|
|
|
|
title: '表单组件库', |
|
|
title: '表单组件库', |
|
|
widgets: compData, |
|
|
widgets: compData, |
|
|
}, |
|
|
}]} |
|
|
]} |
|
|
onChange={onChange} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
|
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const JsonTab: React.FC = () => { |
|
|
const JsonTab: React.FC = () => { |
|
|
|
|
|
const termRef = useRef(null); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
let term = new Terminal(); |
|
|
const term = new Terminal(); |
|
|
term.open(document.getElementById('terminal')); |
|
|
term.open(termRef.current); |
|
|
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ') |
|
|
term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ') |
|
|
}, []) |
|
|
}, []) |
|
|
|
|
|
|
|
@ -51,16 +63,14 @@ const JsonTab: React.FC = () => { |
|
|
src={formatJson} |
|
|
src={formatJson} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div className={styles.rightBottom}> |
|
|
<div className={styles.rightBottom} ref={termRef}></div> |
|
|
<div id="terminal"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
interface IConfigProps { |
|
|
interface IConfigProps { |
|
|
onChange?: (ev: any, newJson: string | undefined) => void |
|
|
onChange: (value: object) => void |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const ConfigTab: React.FC<IConfigProps> = (props) => { |
|
|
const ConfigTab: React.FC<IConfigProps> = (props) => { |
|
@ -93,7 +103,7 @@ const ConfigTab: React.FC<IConfigProps> = (props) => { |
|
|
|
|
|
|
|
|
interface ICodeRunProps { |
|
|
interface ICodeRunProps { |
|
|
isConfig?: boolean, |
|
|
isConfig?: boolean, |
|
|
onChange?: (ev: any, newJson: string | undefined) => void |
|
|
onChange: (value: object) => void |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const CodeRun: React.FC<ICodeRunProps> = (props) => { |
|
|
const CodeRun: React.FC<ICodeRunProps> = (props) => { |
|
@ -105,7 +115,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => { |
|
|
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }} |
|
|
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }} |
|
|
> |
|
|
> |
|
|
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}> |
|
|
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}> |
|
|
<VisualTab /> |
|
|
<VisualTab onChange={props.onChange} /> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> |
|
|
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> |
|
|
{props.isConfig ? <ConfigTab onChange={props.onChange} /> : <JsonTab />} |
|
|
{props.isConfig ? <ConfigTab onChange={props.onChange} /> : <JsonTab />} |
|
|