forked from Gitlink/forgeplus-react
81 lines
2.6 KiB
React
81 lines
2.6 KiB
React
|
import React , { forwardRef , useCallback , useState } from 'react';
|
|||
|
|
import { Form , AutoComplete } from 'antd';
|
|||
|
|
import { Blueback } from '../Component/layout';
|
|||
|
|
import Editor from "react-monaco-editor";
|
|||
|
|
import Modals from './DisposeModal';
|
|||
|
|
|
|||
|
|
import docker from '../Images/docker.png';
|
|||
|
|
import gradle from '../Images/gradle.png';
|
|||
|
|
import java from '../Images/java.png';
|
|||
|
|
import js from '../Images/js.png';
|
|||
|
|
import php from '../Images/php.png';
|
|||
|
|
import python from '../Images/python.png';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const Option = AutoComplete.Option;
|
|||
|
|
export default Form.create()(
|
|||
|
|
forwardRef(({ form })=>{
|
|||
|
|
const [ visible , setVisible ] = useState(false);
|
|||
|
|
const { getFieldDecorator } = form;
|
|||
|
|
const helper = useCallback(
|
|||
|
|
(label, name, rules, widget, isRequired = false) => (
|
|||
|
|
<React.Fragment>
|
|||
|
|
<span required={isRequired}>{label}</span>
|
|||
|
|
<Form.Item>
|
|||
|
|
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
|||
|
|
</Form.Item>
|
|||
|
|
</React.Fragment>
|
|||
|
|
),
|
|||
|
|
[]
|
|||
|
|
)
|
|||
|
|
// 修改文件内容
|
|||
|
|
function changeEditor(){}
|
|||
|
|
|
|||
|
|
// 切换语言
|
|||
|
|
function changeAuto(){}
|
|||
|
|
return(
|
|||
|
|
<React.Fragment>
|
|||
|
|
<Modals visible={visible} closeFunc={(flag)=>setVisible(flag)}></Modals>
|
|||
|
|
<Form>
|
|||
|
|
<p>编程语言：</p>
|
|||
|
|
<ul className="language">
|
|||
|
|
<li><img alt="" src={docker} /></li>
|
|||
|
|
<li><img alt="" src={gradle} /></li>
|
|||
|
|
<li><img alt="" src={java} /></li>
|
|||
|
|
<li><img alt="" src={js} /></li>
|
|||
|
|
<li><img alt="" src={php} /></li>
|
|||
|
|
<li><img alt="" src={python} /></li>
|
|||
|
|
</ul>
|
|||
|
|
{helper(
|
|||
|
|
"",
|
|||
|
|
"tag_name",
|
|||
|
|
[{ required: true, message: "请选择语言" }],
|
|||
|
|
<AutoComplete
|
|||
|
|
placeholder="更多语言"
|
|||
|
|
onChange={changeAuto}
|
|||
|
|
style={{ width: "300px",margin:"15px 0px" }}
|
|||
|
|
>
|
|||
|
|
</AutoComplete>
|
|||
|
|
)}
|
|||
|
|
<p>配置脚本：</p>
|
|||
|
|
<div className="editorBody">
|
|||
|
|
<p className="editorHead">
|
|||
|
|
<span>trustie-pipeline.yml</span>
|
|||
|
|
<a><i className="iconfont icon-bianji6 font-14"></i></a>
|
|||
|
|
</p>
|
|||
|
|
<Editor
|
|||
|
|
height="300px"
|
|||
|
|
language={"plaintext"}
|
|||
|
|
theme={"vs-grey"}
|
|||
|
|
defaultValue="请输入内容"
|
|||
|
|
value={"editorValue"}
|
|||
|
|
options={"editor_options"}
|
|||
|
|
onChange={changeEditor}
|
|||
|
|
></Editor>
|
|||
|
|
</div>
|
|||
|
|
<Blueback>确定提交</Blueback>
|
|||
|
|
</Form>
|
|||
|
|
</React.Fragment>
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
)
|