Browse Source

feat: add runCode UI

master
smallstonesk 4 years ago
parent
commit
feef2cedcf
  1. 8
      packages/core/src/global.index.less
  2. 4
      packages/core/src/mods/flowChart/contextMenu/menuConfig/node.tsx
  3. 5
      packages/core/src/mods/settingBar/components/code/index.module.less
  4. 5
      packages/core/src/mods/settingBar/components/json/index.module.less
  5. 6
      packages/core/src/mods/settingBar/index.tsx
  6. 9
      packages/core/src/mods/settingBar/mods/basic/index.tsx
  7. 17
      packages/core/src/mods/settingBar/mods/testCase/index.module.less
  8. 116
      packages/core/src/mods/settingBar/mods/testCase/index.tsx

8
packages/core/src/global.index.less

@ -1,3 +1,11 @@
.react-json-view {
.collapsed-icon, .expanded-icon {
svg {
vertical-align: middle !important;
}
}
}
.x6-node {
.x6-port-body {

4
packages/core/src/mods/flowChart/contextMenu/menuConfig/node.tsx

@ -65,8 +65,8 @@ const nodeMenuConfig = [
disabled(flowChart: Graph) {
return getSelectedNodes(flowChart).length !== 1;
},
handler() {
// TODO
handler(flowChart: Graph) {
flowChart.trigger('settingBar:runCode');
}
}
];

5
packages/core/src/mods/settingBar/components/code/index.module.less

@ -19,9 +19,4 @@
padding: 0;
}
}
.editor {
width: 100%;
height: 400;
}
}

5
packages/core/src/mods/settingBar/components/json/index.module.less

@ -19,9 +19,4 @@
padding: 0;
}
}
.editor {
width: 100%;
height: 400;
}
}

6
packages/core/src/mods/settingBar/index.tsx

@ -4,10 +4,11 @@ import 'antd/es/tabs/style';
import 'antd/es/empty/style';
import styles from './index.module.less';
import { Graph } from '@antv/x6';
import { Empty, Tabs } from 'antd';
import Basic from './mods/basic';
import Config from './mods/config';
import { Graph } from '@antv/x6';
import TestCase from './mods/testCase';
const { TabPane } = Tabs;
@ -41,6 +42,9 @@ const SettingBar: React.FC<IProps> = (props) => {
<TabPane tab={'投放配置'} key={'config'}>
<Config selectedCell={nodes[0]} />
</TabPane>
<TabPane tab={'测试用例'} key={'testCase'} forceRender>
<TestCase selectedCell={nodes[0]} flowChart={flowChart} />
</TabPane>
</Tabs>
</div>
);

9
packages/core/src/mods/settingBar/mods/basic/index.tsx

@ -28,7 +28,6 @@ const Basic: React.FC<IProps> = (props) => {
// life
useEffect(() => {
setData(selectedCell.getData());
}, [selectedCell]);
// events
@ -59,7 +58,13 @@ const Basic: React.FC<IProps> = (props) => {
onValueChange={onChangeTrigger}
/>
)}
<Code name={'code'} title={'代码'} value={code} onValueChange={onChangeCode} flowChart={flowChart} />
<Code
name={'code'}
title={'代码'}
value={code}
flowChart={flowChart}
onValueChange={onChangeCode}
/>
<Json
name={'configSchema'}
title={'投放配置schema'}

17
packages/core/src/mods/settingBar/mods/testCase/index.module.less

@ -0,0 +1,17 @@
.editModal {
.content {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 436px;
.half {
display: flex;
flex: 1;
flex-direction: column;
overflow: scroll;
}
}
}

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

@ -0,0 +1,116 @@
import React, {
useState,
useEffect,
useCallback
} from 'react';
import styles from './index.module.less';
import { Graph } from '@antv/x6';
import { Modal } from 'antd';
import JsonView from 'react-json-view';
import CodeEditor from '../../../../components/codeEditor';
interface IProps {
flowChart: Graph;
selectedCell: any;
}
const TestCase: React.FC<IProps> = (props) => {
const { flowChart } = props;
const [visible, setVisible] = useState(false);
useEffect(() => {
flowChart.on('settingBar:runCode', showModal);
return () => {
flowChart.off('settingBar:runCode', showModal);
};
}, [flowChart]);
const showModal = useCallback(() => setVisible(true), []);
const closeModal = useCallback(() => setVisible(false), []);
const runCode = useCallback(() => {
// TODO: 运行节点代码
}, []);
return (
<EditModal
visible={visible}
onOk={runCode}
onCancel={closeModal}
/>
);
};
interface IEditModalProps {
visible: boolean;
onOk: () => void;
onCancel: () => void;
}
// mock
const defaultInputData = `const inputData = {
// 上游数据
pipe: {
},
// 公用数据
context: {
},
// 通用数据
payload: {
}
}`;
const mockRunResult = {
pipe: {
success: false,
message: '未登录'
},
context: {
data: {
isLogin: false
}
}
}
const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => {
const { visible, onOk, onCancel } = props;
return (
<Modal
className={styles.editModal}
width={800}
title={'运行代码'}
visible={visible}
okText={'运行一次'}
cancelText={null}
onOk={onOk}
onCancel={onCancel}
>
<div className={styles.content}>
<div className={styles.half}>
<p></p>
<CodeEditor
width={'350px'}
height={'400px'}
value={defaultInputData}
/>
</div>
<div className={styles.half}>
<p></p>
<JsonView
name={null}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
src={mockRunResult}
/>
</div>
</div>
</Modal>
);
};
export default TestCase;
Loading…
Cancel
Save