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

import React , { Component } from "react";
import { Popconfirm } 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
    }
  }

  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 className="mb20">
        <div className="">
          <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-bianji1 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>
          {
            detail.direct_download ?
              <div className="text-center">
                <a href={detail.download_url} className="color-blue font-15">下载原始文件</a>
              </div>
              :
              <Meditor  
            {...this.props} 
            {...this.state} 
            filepath={`/${detail.path}`}
            content={detail.content}
            readOnly={readOnly}
            editorType="update"
            >
            </Meditor>
          }
        </div>
      </div>
    )
  }
}

export default CoderRootFileDetail;