318 lines
9.9 KiB
JavaScript
318 lines
9.9 KiB
JavaScript
import React, { Component } from "react";
|
||
import { getImageUrl } from "educoder";
|
||
import { Form, Input, Button, Radio, Icon, Spin } from "antd";
|
||
import { Link } from "react-router-dom";
|
||
import "./index.css";
|
||
import { turnbar , returnbar } from 'educoder';
|
||
import { Base64 } from 'js-base64';
|
||
import FP from '../Component/FileName/index';
|
||
|
||
import axios from "axios";
|
||
const TextArea = Input.TextArea;
|
||
|
||
class UserSubmitComponent extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
submitType: "0",
|
||
filename: "",
|
||
isSpin: false,
|
||
empty:false,
|
||
};
|
||
}
|
||
|
||
componentDidMount=()=>{
|
||
const { descName , empty , filename} = this.props;
|
||
if(descName){
|
||
this.props.form.setFieldsValue({
|
||
desc:descName
|
||
})
|
||
}
|
||
this.setState({
|
||
empty,filename
|
||
})
|
||
}
|
||
|
||
|
||
componentDidUpdate=(preProps)=>{
|
||
const { descName ,empty,filename} = this.props;
|
||
const nowempty= this.state.empty;
|
||
const nowfilename = this.state.filename;
|
||
if(preProps && descName && preProps.descName !== descName ){
|
||
this.props.form.setFieldsValue({
|
||
desc:descName
|
||
})
|
||
}
|
||
if(empty !== undefined && empty !== nowempty){
|
||
this.setState({
|
||
empty
|
||
})
|
||
}
|
||
if(filename !== "" && filename!==nowfilename){
|
||
this.setState({
|
||
filename
|
||
})
|
||
}
|
||
}
|
||
|
||
changeSubmittype = (e) => {
|
||
this.setState({
|
||
submitType: e.target.value,
|
||
});
|
||
};
|
||
|
||
onEmpty=(value)=>{
|
||
this.setState({
|
||
empty:value
|
||
})
|
||
}
|
||
|
||
// 提交变更
|
||
subMitFrom = () => {
|
||
const { filepath, content, editor_type , checkName , onEmpty , checkContent} = this.props;
|
||
const { branch, projectsId , owner } = this.props.match.params;
|
||
const { submitType, filename , empty } = this.state;
|
||
if(editor_type==="upload" && checkContent && !content){
|
||
checkContent(true);
|
||
return;
|
||
}
|
||
if(!filename || empty){
|
||
onEmpty ? onEmpty(true) : this.onEmpty(true);
|
||
onEmpty && window.scrollTo(0,0);
|
||
return;
|
||
}
|
||
|
||
let path = filepath + filename;
|
||
this.setState({ isSpin: true });
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
if (!err && !checkName) {
|
||
const url = `/${owner}/${projectsId}/create_file.json`;
|
||
axios.post(url, {
|
||
filepath: path.substr(1),
|
||
base64_filepath:Base64.encode(path.substr(1)),
|
||
branch: returnbar(branch),
|
||
new_branch: submitType === "1" ? values.branchname : undefined,
|
||
content:content ? (editor_type === "upload" ? content : Base64.encode(content)):"",
|
||
message: values.desc,
|
||
})
|
||
.then((result) => {
|
||
this.setState({ isSpin: false });
|
||
if (result.data && result.data.name) {
|
||
this.props.showNotification("文件新建成功!");
|
||
if(submitType === "1"){
|
||
const { getDetail } = this.props;
|
||
getDetail && getDetail();
|
||
}
|
||
window.scrollTo(0,0);
|
||
let url = `/${owner}/${projectsId}${values.branchname ? `/tree/${turnbar(values.branchname)}`: (branch ? `/tree/${turnbar(branch)}` : "")}`;
|
||
this.props.history.push(url);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.setState({ isSpin : false });
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
this.setState({ isSpin: false });
|
||
}
|
||
});
|
||
};
|
||
|
||
// 确认修改文件
|
||
UpdateFile = () => {
|
||
this.setState({ isSpin: true });
|
||
const { branch, detail, content , currentBranch ,checkName } = this.props;
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const { submitType } = this.state;
|
||
const url = `/${owner}/${projectsId}/update_file.json`;
|
||
let b = currentBranch || branch;
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
if (!err && !checkName) {
|
||
axios
|
||
.put(url, {
|
||
filepath: detail.path,
|
||
base64_filepath:Base64.encode(detail.path),
|
||
branch: submitType === "1" ? undefined : returnbar(b),
|
||
new_branch: submitType === "1" ? values.branchname : undefined,
|
||
content: content,
|
||
sha: detail.sha,
|
||
message: values.desc,
|
||
})
|
||
.then((result) => {
|
||
this.setState({ isSpin: false });
|
||
if (result.data && result.data.status === 1) {
|
||
let b = currentBranch || branch;
|
||
window.scrollTo(0,0);
|
||
let url = `/${owner}/${projectsId}${(values.branchname ? `/tree/${turnbar(values.branchname)}` : (b ? `/tree/${turnbar(b)}`:""))}`;
|
||
this.props.history.push(url);
|
||
this.props.showNotification("文件修改成功!");
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.setState({ isSpin: false });
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
this.setState({ isSpin: false });
|
||
}
|
||
});
|
||
};
|
||
|
||
checkBranchName=(rule, value, callback)=>{
|
||
if(!value){
|
||
callback();
|
||
}
|
||
if (value) {
|
||
const str = '^*/';
|
||
let reg = /\\/g;
|
||
if(reg.test(value)){
|
||
callback(<span>分支名不能包含下列任何字符：^*\/</span>);
|
||
}else{
|
||
for(var i=0;i<str.length;i++){
|
||
let s = str[i];
|
||
if(value.indexOf(s) > -1){
|
||
callback(<span>分支名不能包含下列任何字符：^*\/</span>);
|
||
return;
|
||
}else{
|
||
continue;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
callback();
|
||
}
|
||
|
||
onChangeFile=(value)=>{
|
||
const { changeName } = this.props;
|
||
this.setState({
|
||
filename:value
|
||
})
|
||
changeName && changeName(value);
|
||
}
|
||
|
||
render() {
|
||
const { submitType, filename, isSpin , empty } = this.state;
|
||
const { getFieldDecorator } = this.props.form;
|
||
|
||
const { branch, projectsId , owner } = this.props.match.params;
|
||
|
||
const { current_user, filepath, projectDetail , currentBranch , loadName } = this.props;
|
||
const { editor_type } = this.props;
|
||
let b = currentBranch || branch;
|
||
|
||
return (
|
||
<div>
|
||
<span className="df" style={{ alignItems: "center" }}>
|
||
<Link to={`/${current_user && current_user.login}`} className="show-user-link" >
|
||
<img
|
||
src={getImageUrl(`/${current_user && current_user.image_url}`)}
|
||
alt=""
|
||
className="screwImg"
|
||
/>
|
||
<span className="color-grey-3 ver-middle">
|
||
{current_user && current_user.username}：
|
||
</span>
|
||
</Link>
|
||
<span className="color-grey-8">提交变更</span>
|
||
</span>
|
||
<Spin spinning={isSpin}>
|
||
<div className="userScrew">
|
||
<div className="screwPanel">
|
||
<Form>
|
||
<div className="mb20" style={{
|
||
display: editor_type === "upload" ? "block" : "none",
|
||
}}>
|
||
<FP
|
||
addonBefore={`${ projectDetail && projectDetail.identifier }${returnbar(filepath)}`}
|
||
onChangeFile={this.onChangeFile}
|
||
empty={empty}
|
||
name={loadName}
|
||
onEmpty={(v)=>this.onEmpty(v)}
|
||
/>
|
||
</div>
|
||
<Form.Item>
|
||
{getFieldDecorator("desc", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请添加描述信息",
|
||
},
|
||
],
|
||
})(
|
||
<TextArea
|
||
placeholder={`必填,描述主要修改类型和内容`}
|
||
authSize={{ minRows: 3, maxRows: 5 }}
|
||
/>
|
||
)}
|
||
</Form.Item>
|
||
<Radio.Group
|
||
value={submitType}
|
||
onChange={this.changeSubmittype}
|
||
>
|
||
<Radio value="0" className="mb10">
|
||
<i className="iconfont icon-banbenku font-16 mr5"></i>
|
||
直接提交至<span className="color-orange">{returnbar(b)}</span>分支
|
||
</Radio>
|
||
<Radio value="1">
|
||
<Icon type="pull-request" className="mr5" />
|
||
为此提交创建一个<span className="font-bd">新的分支</span>并发起合并请求
|
||
</Radio>
|
||
</Radio.Group>
|
||
{
|
||
submitType === "1" ?
|
||
<div className="mt15">
|
||
<Form.Item style={{ paddingLeft: "24px" }}>
|
||
{getFieldDecorator("branchname", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请输入分支名称",
|
||
},
|
||
{
|
||
validator:this.checkBranchName
|
||
}
|
||
],
|
||
})(
|
||
<Input
|
||
placeholder={`请输入分支名称`}
|
||
style={{ width: "220px" }}
|
||
maxLength={100}
|
||
/>
|
||
)}
|
||
</Form.Item>
|
||
</div>:""
|
||
}
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
<div className="mt20">
|
||
<Button
|
||
type="primary"
|
||
onClick={
|
||
editor_type === "update" ? this.UpdateFile : this.subMitFrom
|
||
}
|
||
className="mr30"
|
||
>
|
||
提交变更
|
||
</Button>
|
||
<Button
|
||
type="primary grey"
|
||
onClick={() => {
|
||
this.props.history.push(`/${owner}/${projectsId}`);
|
||
window.scrollTo(0,0);
|
||
}}
|
||
className="mr20"
|
||
>
|
||
取消
|
||
</Button>
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
const WrappedUserSubmitForm = Form.create({ name: "UserSubmitForm" })(
|
||
UserSubmitComponent
|
||
);
|
||
export default WrappedUserSubmitForm;
|