From b64baa6e61c354521a00953c291ae4bb77abfcfd Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Sun, 17 Jan 2021 23:37:52 +0800 Subject: [PATCH] feat: add codeRun's runBtn and output displaying --- .../src/components/codeRun/index.module.less | 7 ++++ .../core/src/components/codeRun/index.tsx | 39 +++++++++++++++++-- .../mods/settingBar/mods/testCase/index.tsx | 32 +++++---------- 3 files changed, 51 insertions(+), 27 deletions(-) diff --git a/packages/core/src/components/codeRun/index.module.less b/packages/core/src/components/codeRun/index.module.less index 0c08793..9b4b5c0 100644 --- a/packages/core/src/components/codeRun/index.module.less +++ b/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; diff --git a/packages/core/src/components/codeRun/index.tsx b/packages/core/src/components/codeRun/index.tsx index 1d9306d..723a067 100644 --- a/packages/core/src/components/codeRun/index.tsx +++ b/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 = (props) => { - const {title} = props; + const { title } = props; return (
@@ -40,19 +47,43 @@ const Card: React.FC = (props) => { }; interface ICodeRunProps { + flowChart: Graph; } const CodeRun: React.FC = (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 (
+
+ +
@@ -72,13 +103,13 @@ const CodeRun: React.FC = (props) => { enableClipboard={false} displayDataTypes={false} displayObjectSize={false} - src={{}} + src={output} /> - + diff --git a/packages/core/src/mods/settingBar/mods/testCase/index.tsx b/packages/core/src/mods/settingBar/mods/testCase/index.tsx index 480f2a5..ca028ef 100644 --- a/packages/core/src/mods/settingBar/mods/testCase/index.tsx +++ b/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 = (props) => { const showModal = useCallback(() => setVisible(true), []); const closeModal = useCallback(() => setVisible(false), []); - const runCode = useCallback(() => { - // TODO: 展示运行结果 - const compiledCode = compileForOnline(toSelectedCellsJSON(flowChart)); - executeScript(compiledCode); - }, []); return ( ); }; interface IEditModalProps { visible: boolean; - onOk: () => void; - onCancel: () => void; + flowChart: Graph; + onClose: () => void; } const EditModal: React.FC = (props): JSX.Element => { - const { visible, onOk, onCancel } = props; - - const onChange = (value: any) => { - // console.log({ value }) - } + const { visible, flowChart, onClose } = props; return ( - + ); };