Browse Source

feat: add codeRun's runBtn and output displaying

master
smallstonesk 4 years ago
parent
commit
b64baa6e61
  1. 7
      packages/core/src/components/codeRun/index.module.less
  2. 39
      packages/core/src/components/codeRun/index.tsx
  3. 32
      packages/core/src/mods/settingBar/mods/testCase/index.tsx

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

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

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

@ -1,13 +1,20 @@
import React, {
useState,
useEffect,
useCallback,
} from 'react';
import styles from './index.module.less';
import { Button } from 'antd';
import { Graph } from '@antv/x6';
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 { compileForOnline } from '@imove/compile-code';
import { toSelectedCellsJSON } from '../../utils/flowChartUtils';
// FIXME: https://github.com/tomkp/react-split-pane/issues/541
// @ts-ignore
@ -27,7 +34,7 @@ interface ICardProps {
}
const Card: React.FC<ICardProps> = (props) => {
const {title} = props;
const { title } = props;
return (
<div className={styles.card}>
@ -40,19 +47,43 @@ const Card: React.FC<ICardProps> = (props) => {
};
interface ICodeRunProps {
flowChart: Graph;
}
const CodeRun: React.FC<ICodeRunProps> = (props) => {
const {flowChart} = props;
const [input, setInput] = useState(defaultInput);
const [output, setOutput] = useState({});
useEffect(() => {
// NOTE: listen the event that iMove online exec ends
const handler = (data: any) => {
setOutput(data.detail || {});
};
window.addEventListener('iMoveOnlineExecEnds', handler);
return () => {
window.removeEventListener('iMoveOnlineExecEnds', handler);
};
}, []);
const onClickRun = useCallback(() => {
const selectedCelssJson = toSelectedCellsJSON(flowChart);
const compiledCode = compileForOnline(selectedCelssJson);
executeScript(compiledCode);
}, [flowChart]);
const onChangeInput = useCallback((val: any) => {
setInput(val);
}, []);
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'}>
@ -72,13 +103,13 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={{}}
src={output}
/>
</Card>
</Pane>
</SplitPane>
</Pane>
<Pane className={styles.pane} minSize={'150px'}>
<Pane className={styles.pane} minSize={'43px'}>
<Card title={'控制台'}>
<Console />
</Card>

32
packages/core/src/mods/settingBar/mods/testCase/index.tsx

@ -6,10 +6,7 @@ import React, {
import { Modal } from 'antd';
import { Graph } from '@antv/x6';
import { executeScript } from '../../../../utils';
import CodeRun from '../../../../components/codeRun';
import { compileForOnline } from '@imove/compile-code';
import { toSelectedCellsJSON } from '../../../../utils/flowChartUtils';
interface IProps {
flowChart: Graph;
@ -29,47 +26,36 @@ const TestCase: React.FC<IProps> = (props) => {
const showModal = useCallback(() => setVisible(true), []);
const closeModal = useCallback(() => setVisible(false), []);
const runCode = useCallback(() => {
// TODO: 展示运行结果
const compiledCode = compileForOnline(toSelectedCellsJSON(flowChart));
executeScript(compiledCode);
}, []);
return (
<EditModal
visible={visible}
onOk={runCode}
onCancel={closeModal}
flowChart={flowChart}
onClose={closeModal}
/>
);
};
interface IEditModalProps {
visible: boolean;
onOk: () => void;
onCancel: () => void;
flowChart: Graph;
onClose: () => void;
}
const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
const { visible, onOk, onCancel } = props;
const onChange = (value: any) => {
// console.log({ value })
}
const { visible, flowChart, onClose } = props;
return (
<Modal
width={1000}
centered={true}
bodyStyle={{ padding: 0, height: 600 }}
bodyStyle={{ padding: 0, height: 650 }}
title={'执行代码'}
visible={visible}
okText={'运行'}
cancelText={'取消'}
onOk={onOk}
onCancel={onCancel}
footer={null}
onCancel={onClose}
>
<CodeRun />
<CodeRun flowChart={flowChart}/>
</Modal>
);
};

Loading…
Cancel
Save