forgeplus-react/src/forge/Main/CoderRootFileDetail.js

import React, { Component } from "react";
import { Popconfirm, Select } from "antd";
import "./list.css";
import axios from "axios";
import Meditor from "../Newfile/m_editor";

function bytesToSize(bytes) {
  if (bytes === 0) return "0 B";
  let k = 1024,
    sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
    i = Math.floor(Math.log(bytes) / Math.log(k));
  return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
}
class CoderRootFileDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      readOnly: true,
      value: undefined,
      language: undefined,
    };
  }

  componentDidMount = () => {
    const { detail, readOnly } = this.props;

    this.setState({
      value: detail.content,
      readOnly: readOnly,
    });
  };
  select_language = (e) => {
    console.log(e);
    this.setState({
      language: e,
    });
  };
  EditFile = () => {
    this.setState({
      readOnly: false,
    });
  };
  CancelEdit = () => {
    this.setState({
      readOnly: true,
    });
  };

  // 编辑文件

  changeMmirror = (e, e1, value) => {
    this.setState({
      value,
    });
  };

  deleteFile = () => {
    const { branch, detail } = this.props;
    const { projectsId } = this.props.match.params;

    const url = `/repositories/${projectsId}/delete_file.json`;
    axios
      .delete(url, {
        params: {
          filepath: detail.path,
          branch,
          sha: detail.sha,
        },
      })
      .then((result) => {
        if (result) {
          this.props.showNotification("删除成功!");
          this.props.history.push(`/projects/${projectsId}`);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // // 确认修改文件
  // UpdateFile=()=>{
  //   const { branch , detail}= this.props;
  //   const { projectsId } = this.props.match.params;
  //   const { value } = this.state;
  //   const url =`/repositories/${projectsId}/update_file.json`;
  //   axios.put(url,{
  //     filepath:detail.path,
  //     branch,
  //     content:value,
  //     sha:detail.sha,
  //   }).then(result=>{
  //     if(result){
  //       this.props.showNotification("修改成功!");
  //       this.setState({
  //         readOnly:true
  //       })
  //     }
  //   }).catch(error=>{
  //     console.log(error);
  //   })
  // }
  updateCode = (value) => {
    this.setState({
      value,
    });
  };

  render() {
    const { detail, current_user, isManager, isDeveloper } = this.props;
    const { readOnly, language } = this.state;
    let flag = current_user && current_user.login && (isManager || isDeveloper);
    const Option = Select.Option;
    const languages = [
      "apex",
      "azcli",
      "bat",
      "clojure",
      "coffee",
      "cpp",
      "csharp",
      "csp",
      "css",
      "dockerfile",
      "fsharp",
      "go",
      "handlebars",
      "html",
      "ini",
      "java",
      "javascript",
      "json",
      "less",
      "lua",
      "markdown",
      "msdax",
      "mysql",
      "objective",
      "perl",
      "pgsql",
      "php",
      "postiats",
      "powerquery",
      "powershell",
      "pug",
      "python",
      "r",
      "razor",
      "redis",
      "redshift",
      "ruby",
      "rust",
      "sb",
      "scheme",
      "scss",
      "shell",
      "solidity",
      "sql",
      "st",
      "swift",
      "typescript",
      "vb",
      "xml",
      "yaml",
    ];
    return (
      <div className="mb20">
        <div className="grid-item branchTitle">
          <div className="grid-item">
            <span className="ml20 color-grey-6 font-16">{bytesToSize(detail && detail.size)}</span>
          </div>
          <p className="text-right">
            {flag && (
              <div>
                {readOnly ? (
                  <a onClick={this.EditFile} className="ml20">
                    <i className="iconfont icon-bianji1 font-15 color-grey-6"></i>
                  </a>
                ) : (
                  <React.Fragment>
                    <Select
                      showSearch={true}
                      placeholder={"请选择文本语言"}
                      style={{ width: 200 }}
                      value={language}
                      onChange={this.select_language}
                    >
                      <Option value={undefined}>请选择文本语言</Option>
                      {languages.map((item, key) => {
                        return <Option value={item}>{item}</Option>;
                      })}
                    </Select>
                    <button
                      type="button"
                      className="ant-btn ant-btn-sm ml20"
                      onClick={this.CancelEdit}
                    >
                      <span>取 消</span>
                    </button>
                    {/* <button type="button" className="ant-btn ant-btn-primary ant-btn-sm" onClick={this.UpdateFile}><span>确 定</span>
                      </button> */}
                  </React.Fragment>
                )}

                <Popconfirm
                  title="确认删除这个文件？"
                  className="ml20"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={this.deleteFile}
                >
                  <a>
                    <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
                  </a>
                </Popconfirm>
              </div>
            )}
          </p>
        </div>
        <div>
          {detail.direct_download ? (
            <div className="text-center">
              <a href={detail.download_url} className="color-blue font-15">
                下载原始文件
              </a>
            </div>
          ) : (
            <Meditor
              {...this.props}
              {...this.state}
              language={language ? language : "javascript"}
              filepath={`/${detail.path}`}
              content={detail.content}
              readOnly={readOnly}
              editorType="update"
            ></Meditor>
          )}
        </div>
      </div>
    );
  }
}

export default CoderRootFileDetail;