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

import React, { Component } from "react";
import Meditor from "./m_editor";
import Top from "../Main/DetailTop";
import "./index.css";
import { Input, Select } from "antd";

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorValue: "",
      filename: "",
      language: undefined
    };
  }

  // 命名文件
  changeFileName = (e) => {
    this.setState({
      filename: e.target.value,
    });
  };
  // 取消，弹框询问
  CancelAddFile = () => {
    this.props.history.goBack();
  };

  select_language = (e) => {
    console.log(e)
    this.setState({
      language: e
    })

  }

  render() {
    const { pathname } = this.props.location;
    const { filename, language } = this.state;
    const urlroot = pathname.split("newfile")[1];
    const file_path = `${urlroot}/${filename}`;
    const { projectDetail } = this.props;
    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 (
      <React.Fragment>
        <Top {...this.props} {...this.state} />
        <div className="main">
          <p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">
            新建文件
          </p>
          <div>
            <div className="grid-item mb20">
              <div className="grid-item">
                <div className="setInputAddon">
                  <Input
                    addonBefore={`/${
                      projectDetail && projectDetail.identifier
                    }${urlroot}/`}
                    value={filename}
                    onChange={this.changeFileName}
                    placeholder="命名文件..."
                  />
                </div>
                <a onClick={this.CancelAddFile} className="color-blue">
                  取消
                </a>
              </div>
              <div  className="text-right">
              <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>
              </div>


            </div>
            <Meditor
              {...this.props}
              {...this.state}
              filepath={`${file_path}`}
              language = {language}
              content={undefined}
              readOnly={false}
              editorType="new"
            ></Meditor>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default Index;