forgeplus-react/src/forge/Newfile/UserSubmitComponent.js

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 axios from "axios";
const TextArea = Input.TextArea;


function turnbar(str){
  if(str && str.length>0 && str.indexOf("/")>-1){
    return str.replaceAll('/','%2F');
  }
  return str;
}
function returnbar(str){
  if(str && str.length>0 && str.indexOf("%2F")>-1){
    return str.replaceAll('%2F','/');
  }
  return str;
}
class UserSubmitComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitType: "0",
      filename: "",
      isSpin: false,
    };
  }

  componentDidMount=()=>{
    const { descName } = this.props;
    if(descName){
      this.props.form.setFieldsValue({
        desc:descName
      })
    }
  }
  
  componentDidUpdate=(preProps)=>{
    const { descName } = this.props;
    if(preProps && descName && preProps.descName !== descName ){
      this.props.form.setFieldsValue({
        desc:descName
      })
    }
  }

  changeSubmittype = (e) => {
    this.setState({
      submitType: e.target.value,
    });
  };

  // 命名文件
  changeFileName = (e) => {
    this.setState({
      filename: e.target.value,
    });
  };

  // 提交变更
  subMitFrom = () => {
    const { filepath, content, editor_type } = this.props;
    const { branch, projectsId , owner } = this.props.match.params;
    const { submitType, filename } = this.state;
    this.setState({ isSpin: true });
    let path = editor_type === "upload" ? filepath : filepath.substr(1);
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const url = `/${owner}/${projectsId}/create_file.json`;
        axios.post(url, {
          filepath: filename ? filename : path,
          branch: returnbar(branch),
          new_branch: submitType === "1" ? values.branchname : undefined,
          content,
          message: values.desc,
        })
        .then((result) => {
          this.setState({ isSpin: false });
          if (result.data && result.data.name) {
            this.props.showNotification("文件新建成功!");
            if(submitType === "1"){
              const { getTopCount } = this.props;
              getTopCount && getTopCount(values.branchname);
            }
            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 } = 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) {
        axios
          .put(url, {
            filepath: 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;
              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 });
      }
    });
  };

  render() {
    const { submitType, filename, isSpin } = this.state;
    const { getFieldDecorator } = this.props.form;

    const { branch, projectsId , owner } = this.props.match.params;

    const { current_user, filepath, projectDetail , currentBranch } = 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>
                <Form.Item
                  style={{
                    display: editor_type === "upload" ? "block" : "none",
                  }}
                >
                  {getFieldDecorator("path", {
                    rules: [],
                  })(
                    <div className="setInputAddon">
                      <Input
                        addonBefore={`/${ projectDetail && projectDetail.identifier }/`}
                        value={filename || filepath}
                        onChange={this.changeFileName}
                        placeholder="文件路径..."
                      />
                    </div>
                  )}
                </Form.Item>
                <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: "请输入分支名称",
                          },
                        ],
                      })(
                        <Input
                          placeholder={`请输入分支名称`}
                          style={{ width: "220px" }}
                        />
                      )}
                    </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}`);
              }}
              className="mr20"
            >
              取消
            </Button>
          </div>
        </Spin>
      </div>
    );
  }
}
const WrappedUserSubmitForm = Form.create({ name: "UserSubmitForm" })(
  UserSubmitComponent
);
export default WrappedUserSubmitForm;