@choerodon/master/lib/components/tab-page/Breadcrumb.js

A package of Master for Choerodon platform.

import "choerodon-ui/lib/icon/style";
import _Icon from "choerodon-ui/lib/icon";
import "choerodon-ui/lib/breadcrumb/style";
import _Breadcrumb from "choerodon-ui/lib/breadcrumb";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/* eslint-disable consistent-return */
import React, { useContext, useMemo } from 'react';
import { inject } from 'mobx-react';
import { observer } from 'mobx-react-lite';
import { toJS } from 'mobx';
import { withRouter, Link } from 'react-router-dom';
import classNames from 'classnames';
import useTheme from "../../hooks/useTheme";
import { Context } from "./PageWrap";
import "./style/Bread.less";
var Item = _Breadcrumb.Item;

var Breadcrumb = function Breadcrumb(_ref) {
  var title = _ref.title,
      AppState = _ref.AppState,
      HeaderStore = _ref.HeaderStore,
      MenuStore = _ref.MenuStore,
      history = _ref.history,
      custom = _ref.custom,
      children = _ref.children,
      extraNode = _ref.extraNode;

  var _useContext = useContext(Context),
      isTab = _useContext.isTab;

  var _useTheme = useTheme(),
      _useTheme2 = _slicedToArray(_useTheme, 1),
      theme = _useTheme2[0];

  var isTheme4 = useMemo(function () {
    return theme === 'theme4';
  }, [theme]);

  function getOrganization() {
    var organizationId = AppState.currentMenuType.organizationId;
    var currentData = toJS(HeaderStore.getOrgData) || [];
    var orgObj = currentData.find(function (v) {
      return String(v.id) === organizationId;
    }) || {};
    return orgObj;
  }

  function getCurrentMenu() {
    return MenuStore.activeMenu;
  }

  function getMenuLink(route) {
    var _AppState$currentMenu = AppState.currentMenuType,
        id = _AppState$currentMenu.id,
        name = _AppState$currentMenu.name,
        type = _AppState$currentMenu.type,
        organizationId = _AppState$currentMenu.organizationId,
        category = _AppState$currentMenu.category;
    var search = '';

    switch (type) {
      case 'site':
        if (AppState.isTypeUser) {
          search = '?type=site';
        }

        break;

      case 'organization':
      case 'project':
        search = "?type=".concat(type, "&id=").concat(id, "&name=").concat(encodeURIComponent(name), "&category=").concat(category);

        if (organizationId) {
          search += "&organizationId=".concat(organizationId);
        }

        break;

      default:
    }

    return "".concat(route).concat(search);
  }

  function renderName() {
    var _AppState$currentMenu2 = AppState.currentMenuType,
        type = _AppState$currentMenu2.type,
        name = _AppState$currentMenu2.name,
        isTypeUser = AppState.isTypeUser;

    if (isTypeUser) {
      return /*#__PURE__*/React.createElement(Item, {
        className: classNames({
          'c7ncd-theme4-bread-menu': isTheme4,
          'c7n-breadcrumb-link': !isTheme4
        })
      }, name);
    }

    if (type === 'site' && history.location.pathname !== '/buzz/cooperate') {
      return /*#__PURE__*/React.createElement(Item, {
        className: classNames({
          'c7ncd-theme4-bread-menu': isTheme4,
          'c7n-breadcrumb-link': !isTheme4
        })
      }, "\u5E73\u53F0\u7BA1\u7406");
    }

    if (type === 'organization' || history.location.pathname === '/buzz/cooperate') {
      return /*#__PURE__*/React.createElement(Item, {
        className: classNames({
          'c7ncd-theme4-bread-menu': isTheme4,
          'c7n-breadcrumb-link': !isTheme4
        })
      }, getOrganization().name || '');
    }

    if (type === 'project') {
      return /*#__PURE__*/React.createElement(Item, {
        className: classNames({
          'c7ncd-theme4-bread-menu': isTheme4,
          'c7n-breadcrumb-link': !isTheme4
        })
      }, name);
    }
  }

  function getRoute(menu) {
    if (menu.subMenus && menu.subMenus.length && menu.subMenus[0].type === 'tab') {
      return menu.subMenus[0].route;
    }

    return menu.route;
  }

  function renderMenus() {
    var currentMenu = getCurrentMenu();
    if (!currentMenu) return null;
    return /*#__PURE__*/React.createElement(Item, {
      className: classNames({
        'c7ncd-theme4-bread-menu': isTheme4,
        'c7n-breadcrumb-link': !isTheme4
      })
    }, getRoute(currentMenu) && title ? /*#__PURE__*/React.createElement(Link, {
      to: getMenuLink(getRoute(currentMenu))
    }, currentMenu.name) : /*#__PURE__*/React.createElement("span", null, currentMenu.name));
  }

  var icon = isTheme4 ? /*#__PURE__*/React.createElement("span", {
    style: {
      width: 1,
      heigth: 12,
      background: 'rgba(15,19,88,0.65)'
    }
  }) : /*#__PURE__*/React.createElement(_Icon, {
    type: "keyboard_arrow_right",
    style: {
      color: 'rgba(0, 0, 0, .54)',
      fontSize: '.2rem'
    }
  });

  if (custom) {
    return /*#__PURE__*/React.createElement("section", {
      className: "page-breadcrumb"
    }, /*#__PURE__*/React.createElement(_Breadcrumb, {
      separator: icon
    }, children), extraNode || null);
  }

  return /*#__PURE__*/React.createElement("section", {
    className: classNames('page-breadcrumb', {
      'theme4-page-breadcrumb': isTheme4
    })
  }, /*#__PURE__*/React.createElement(_Breadcrumb, {
    separator: icon
  }, isTheme4 ? /*#__PURE__*/React.createElement(React.Fragment, null, renderMenus()) : /*#__PURE__*/React.createElement(React.Fragment, null, renderName(), renderMenus()), title ? /*#__PURE__*/React.createElement(Item, null, title) : null), extraNode || null);
};

export default withRouter(inject('AppState', 'HeaderStore', 'MenuStore')(observer(Breadcrumb)));