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";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import RenderHtml from "../../components/render-html";


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 = {
      value: undefined,
      language: undefined,
      languages: undefined,
      description:props.detail.content
    };
  }

  componentDidMount = () => {
    const { detail } = this.props;
    this.setState({
      value: detail.content,
    });
    this.languages_total();
  };

  languages_total = () => {
    const { detail } = this.props;
    const file_name = detail.path.split("/").pop().split(".").pop();
    let languages = [];
    let default_language = "javascript";
    let all_languages = {
      apex: ["apex", "apxc"],
      azcli: ["azcli"],
      bat: ["bat"],
      clojure: ["clj"],
      coffee: ["coffee"],
      cpp: ["cpp"],
      csharp: ["cs"],
      csp: ["csp"],
      css: ["css"],
      dockerfile: ["dockerfile", "docker", "yml"],
      fsharp: ["fs"],
      go: ["go"],
      html: ["html", "htm", "erb"],
      ini: ["ini"],
      java: ["java", "class"],
      javascript: ["js"],
      json: ["json"],
      less: ["less"],
      lua: ["lua"],
      markdown: ["markdown", "md", "rmd"],
      msdax: ["dax"],
      mysql: ["sql"],
      objective: ["m", "mm", "o", "out"],
      perl: ["perl"],
      pgsql: ["sql"],
      php: ["php"],
      postiats: ["postiats"],
      powerquery: [""],
      powershell: ["ps1"],
      pug: ["pug"],
      python: ["py"],
      r: ["r"],
      razor: ["cshtml"],
      redis: ["rdb"],
      ruby: ["rb"],
      rust: ["rs"],
      sb: ["sb"],
      scheme: ["scm", "ss"],
      scss: ["scss"],
      shell: ["sh"],
      solidity: ["sol"],
      sql: ["sql"],
      st: ["st"],
      swift: ["swift"],
      typescript: ["ts"],
      vb: ["vbp", "frm", "frx", "bas", "cls"],
      xml: ["xml"],
      yaml: ["yml"],
    };
    for (var item in all_languages) {
      languages.push(item);
      let item_values = all_languages[item];
      if (item_values.indexOf(file_name) !== -1) {
        default_language = item;
      }
    }
    this.state.languages = languages;
    this.state.language = default_language;
  };

  select_language = (e) => {
    this.setState({
      language: e,
    });
  };
  EditFile = (flag) => {
    const { onEdit } = this.props;
    onEdit && onEdit(flag);
    // this.setState({
    //   readOnly: false,
    // });
  };

  // 编辑文件

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

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

    const url = `/${owner}/${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/${owner}/${projectsId}`);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  updateCode = (value) => {
    this.setState({
      value,
    });
  };

  onContentChange = (value) => {
    this.setState({
      description: value,
    });
  };

  render() {
    const {
      readOnly,
      detail,
      current_user,
      isManager,
      isDeveloper,
      md
    } = this.props;
    const { language, languages , description } = this.state;
    let flag = current_user && current_user.login && (isManager || isDeveloper);
    const Option = Select.Option;

    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(false)} 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 &&
                        languages.map((item, key) => {
                          return (
                            <Option value={item} key={key}>
                              {item}
                            </Option>
                          );
                        })}
                    </Select>
                    <button
                      type="button"
                      className="ant-btn ant-btn-sm ml20"
                      onClick={() => this.EditFile(true)}
                    >
                      <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.image_type ? (
            <div className="edu-txt-center pt20 pb20">
              <img
                alt=""
                src={detail.download_url}
                style={{ maxWidth: "80%" }}
              />
            </div>
          ) : detail.direct_download ? (
            <div className="mt20 text-center">
              <a href={detail.download_url} className="color-blue font-15">
                下载原始文件
              </a>
            </div>
          ) : (
            md && readOnly ?
            <div className="files-md">
              <RenderHtml className="file-md imageLayerParent" value={description} />
            </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;