Browse Source

feat: add running code status

master
smallstonesk 4 years ago
parent
commit
da47fb4336
  1. 14
      packages/core/src/components/codeRun/index.module.less
  2. 23
      packages/core/src/components/codeRun/index.tsx

14
packages/core/src/components/codeRun/index.module.less

@ -1,19 +1,19 @@
.container {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
.runWrapper {
position: absolute;
top: 0;
right: 0;
}
.pane {
position: relative;
display: flex;
flex: 1;
.runWrapper {
position: absolute;
top: 0;
right: 0;
}
}
}

23
packages/core/src/components/codeRun/index.tsx

@ -12,7 +12,7 @@ import Console from '../console';
import InputPanel from './inputPanel';
import JsonView from 'react-json-view';
import { executeScript } from '../../utils';
import { PlayCircleFilled } from '@ant-design/icons';
import { PlayCircleFilled, LoadingOutlined } from '@ant-design/icons';
import { compileForOnline } from '@imove/compile-code';
import { toSelectedCellsJSON } from '../../utils/flowChartUtils';
@ -53,12 +53,14 @@ interface ICodeRunProps {
const CodeRun: React.FC<ICodeRunProps> = (props) => {
const {flowChart} = props;
const [isRunning, setIsRunning] = useState(false);
const [input, setInput] = useState(defaultInput);
const [output, setOutput] = useState({});
useEffect(() => {
// NOTE: listen the event that iMove online exec ends
const handler = (data: any) => {
setIsRunning(false);
setOutput(data.detail || {});
};
window.addEventListener('iMoveOnlineExecEnds', handler);
@ -68,6 +70,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
}, []);
const onClickRun = useCallback(() => {
setIsRunning(true);
const selectedCelssJson = toSelectedCellsJSON(flowChart);
const compiledCode = compileForOnline(selectedCelssJson, input);
executeScript(compiledCode);
@ -79,15 +82,21 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
return (
<div className={styles.container}>
<div className={styles.runWrapper}>
<Button size={'large'} type={'link'} onClick={onClickRun}>
<PlayCircleFilled />
</Button>
</div>
<SplitPane split={'horizontal'}>
<Pane initialSize={'380px'} minSize={'43px'}>
<SplitPane split={'vertical'}>
<Pane className={styles.pane} minSize={'360px'} maxSize={'660px'}>
<div className={styles.runWrapper}>
{isRunning ? (
<Button size={'large'} type={'link'}>
<LoadingOutlined /> ...
</Button>
) : (
<Button size={'large'} type={'link'} onClick={onClickRun}>
<PlayCircleFilled />
</Button>
)}
</div>
<Card title={'输入'}>
<InputPanel
data={input}
@ -109,7 +118,7 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
</Pane>
</SplitPane>
</Pane>
<Pane className={styles.pane} minSize={'43px'}>
<Pane className={styles.pane} minSize={'40px'}>
<Console />
</Pane>
</SplitPane>

Loading…
Cancel
Save