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

import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";

import "../css/index.scss";
import "./setting.scss";

import Loadable from "react-loadable";
import Loading from "../../Loading";
import { Box, Long, Short, Gap } from '../Component/layout';

const BranchNew = Loadable({
  loader: () => import("./BranchRule"),
  loading: Loading,
});
const Branch = Loadable({
  loader: () => import("./Branch"),
  loading: Loading,
});
const Setting = Loadable({
  loader: () => import("./Setting"),
  loading: Loading,
});
const WebhookNew = Loadable({
  loader: () => import("./Webhooks/New"),
  loading: Loading,
});
const Webhook = Loadable({
  loader: () => import("./Webhooks/Index"),
  loading: Loading,
});
const Collaborator = Loadable({
  loader: () => import("./Collaborator"),
  loading: Loading,
});
const Tags = Loadable({
  loader: () => import("./new_tags"),
  loading: Loading,
});
const Manage = Loadable({
  loader: () => import("./ManageWeb"),
  loading: Loading,
});
const ManageNew = Loadable({
  loader: () => import("./ManageWebNew"),
  loading: Loading,
});
class Index extends Component {
  render() {
    const { projectsId , owner } = this.props.match.params;
    const { pathname } = this.props.history.location;

    const flag = pathname === `/${owner}/${projectsId}/settings`;
    return (
      <Box className="ProjectListIndex">
        <Short>
          <ul className="list-l-Menu">
            <li className={flag ? "active" : ""}>
              <p>
                <Link to={`/${owner}/${projectsId}/settings`} className="w-100">
                  <i className="iconfont icon-huabanfuben font-18 mr10"></i>基本设置
                </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("settings/collaborators") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/${owner}/${projectsId}/settings/collaborators`} className="w-100">
                  <i className="iconfont icon-chengyuan font-18 mr10"></i>
                  协作者管理
                </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("settings/webhooks") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/${owner}/${projectsId}/settings/webhooks`} className="w-100">
                  <i className="iconfont icon-a-xuanzhongwebhookicon font-18 mr10 color-grey-9"></i>
                  Webhooks
                </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("settings/branch") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/${owner}/${projectsId}/settings/branches`} className="w-100">
                <i className="iconfont icon-fenzhi font-20 mr10"></i>
                  分支设置
                </Link>
              </p>
            </li>
            <li
              className={pathname.indexOf("settings/labels") > -1 ? "active" : ""}
            >
              <p>
                <Link to={`/${owner}/${projectsId}/settings/labels`} className="w-100">
                  <i className="iconfont icon-biaoqian3 font-18 mr10 color-grey-6"></i>
                  项目标签
                </Link>
              </p>
            </li>

            {/* <li
              className={
                pathname.indexOf("settings/manage") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={""} className="w-100">
                <i className="iconfont icon-zhongqingdianxinicon10 font-18 mr10"></i>
                  管理Web钩子
                </Link>
              </p>
            </li> */}
          </ul>
        </Short>
        <Long>
          <Gap>
            <Switch {...this.props}>
              {/* webhooks */}
              <Route
                path="/:owner/:projectsId/settings/webhooks/new"
                render={(props) => (
                  <WebhookNew {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/:owner/:projectsId/settings/webhooks/:id"
                render={(props) => (
                  <WebhookNew {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/:owner/:projectsId/settings/webhooks"
                render={(props) => (
                  <Webhook {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 协作者 */}
              <Route
                path="/:owner/:projectsId/settings/collaborators"
                render={(props) => (
                  <Collaborator {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 修改仓库信息 */}
              <Route
                path="/:owner/:projectsId/settings/labels"
                render={(props) => (
                  <Tags {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/:owner/:projectsId/settings/branches/:branch"
                render={(props) => (
                  <BranchNew {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/:owner/:projectsId/settings/branches"
                render={(props) => (
                  <Branch {...this.props} {...props } {...this.state} />
                )}
              ></Route>
              <Route
                path="/:owner/:projectsId/settings/manage/new"
                render={(props) => (
                  <ManageNew {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/:owner/:projectsId/settings/manage"
                render={(props) => (
                  <Manage {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 修改仓库信息 */}
              <Route
                path="/:owner/:projectsId/settings"
                render={(props) => (
                  <Setting {...this.props} {...props} {...this.state} />
                )}
              ></Route>
            </Switch>
          </Gap>
        </Long>
      </Box>
    );
  }
}
export default Index;