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

import React , { Component } from "react";
import { Popconfirm } from 'antd';
import './list.css';
import axios from 'axios';

import CodeMirror from 'react-codemirror';
require('codemirror/lib/codemirror.css');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');

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
    }
  }

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

    this.setState({
      value: detail.content,
      readOnly: readOnly
    })
  }

  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 } = this.state;
    let flag = current_user && current_user.login && (isManager || isDeveloper);
    var options = {
			lineNumbers: true,
      mode: 'javascript',
      readOnly:readOnly?'nocursor':false,
      autofocus:readOnly?false:true,
      styleActiveLine:true
		};
    return(
      <div>
        <div className="branchTable">
          <p className="branchTitle f-wrap-alignCenter f-wrap-between">
            <span>{bytesToSize(detail && detail.size)}</span>
            {
              flag &&
              <span>
                {
                  readOnly ?
                    <a onClick={this.EditFile} className="ml20"><i className="iconfont icon-bianji font-15 color-grey-6"></i></a>
                    :
                    <React.Fragment>
                      <button type="button" className="ant-btn ant-btn-sm mr10" 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>
              </span>
            }
          </p>
        </div>
        <div className={readOnly ? "content-file" :"content-file edit"}>
          {
            detail.direct_download ?
              <div className="text-center">
                <a href={detail.download_url} className="color-blue font-15">下载原始文件</a>
              </div>
              :
              <CodeMirror ref="editor" value={detail.content} onChange={this.updateCode} options={options} />
          }
        </div>
      </div>
    )
  }
}

export default CoderRootFileDetail;