Browse Source

feat: add running code status

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

Loading…
Cancel
Save