@ccs-design/rc-pro/es/CcsBasicLayout/index.js

ccs design basic react component

import "antd/es/config-provider/style";
import _ConfigProvider from "antd/es/config-provider";
import "antd/es/breadcrumb/style";
import _Breadcrumb from "antd/es/breadcrumb";
import "antd/es/tabs/style";
import _Tabs from "antd/es/tabs";
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import "antd/es/layout/style";
import _Layout from "antd/es/layout";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

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

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

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

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { useEffect, useState, useMemo, useLayoutEffect } from 'react';
import { isBrowser } from 'umi';
import NoFoundPage from './404';
import { DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import Header from './header';
import AppPage from './page';
import { AuthContext, GlobalContext } from './context';
import LayoutMenu from './menu';
import { getStroage, setStroage } from '../utils';
import classNames from 'classnames';
import { ContainerQuery } from 'react-container-query';
import zhCN from "antd/es/locale-provider/zh_CN";
import { useEventListener, useUpdateEffect } from 'ahooks';
import DumiLayout from './dumi';
import './index.less';
var Content = _Layout.Content,
    Sider = _Layout.Sider;
var query = {
  'screen-xs': {
    maxWidth: 575
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599
  },
  'screen-xxl': {
    minWidth: 1600
  }
};
var RouteHistorys = [];
export var classPrefix = 'ccs-bl';
export function stringToHex(str) {
  if (str === '') return '';
  var hexCharCode = [];

  for (var i = 0; i < str.length; i += 1) {
    hexCharCode.push(str.charCodeAt(i).toString(16));
  }

  return hexCharCode.join('').toUpperCase();
}

var getRoute = function getRoute() {
  var routes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var path = arguments.length > 1 ? arguments[1] : undefined;

  var get = function get(rs, ph) {
    rs.forEach(function (r) {
      if (r.path === ph) {
        throw new Error(r.hiddenBreadcrumb);
      }

      if (r.routes) get(r.routes, ph);
    });
  };

  try {
    get(routes, path);
  } catch (error) {
    return error.message;
  }

  return false;
}; // 获取菜单列表（鉴权用）


var getMenus = function getMenus() {
  var menus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var parents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return menus.reduce(function (keys, item) {
    keys.push(_objectSpread(_objectSpread({}, item), {}, {
      parents: parents
    }));

    if (item.nodeData.menuType === 0) {
      return keys.concat(getMenus(item.children, [].concat(_toConsumableArray(parents), [{
        key: item.nodeId,
        url: item.nodeData.menuUrl,
        name: item.nodeData.menuName
      }])));
    }

    return keys;
  }, []);
};

var tabPages = [];
/**
 * 布局
 * @param BasicLayoutType
 */

var CcsBasicLayout = function CcsBasicLayout(_ref) {
  var logo = _ref.logo,
      route = _ref.route,
      history = _ref.history,
      children = _ref.children,
      dispatch = _ref.dispatch,
      location = _ref.location,
      userDetail = _ref.userDetail,
      headerExtra = _ref.headerExtra,
      _ref$homePage = _ref.homePage,
      homePage = _ref$homePage === void 0 ? '/' : _ref$homePage,
      layoutConfig = _ref.layoutConfig,
      renderHeader = _ref.renderHeader,
      hideLeftMenu = _ref.hideLeftMenu,
      userOverlayMenu = _ref.userOverlayMenu,
      renderChildrenMenu = _ref.renderChildrenMenu;

  var _ref2 = location || {},
      pathname = _ref2.pathname;

  var _ref3 = userDetail || {},
      _ref3$menuData = _ref3.menuData,
      menuData = _ref3$menuData === void 0 ? [] : _ref3$menuData;

  var menus = useMemo(function () {
    return getMenus(menuData).filter(function (t) {
      var _t$nodeData;

      return ((_t$nodeData = t.nodeData) === null || _t$nodeData === void 0 ? void 0 : _t$nodeData.menuType) === 1;
    });
  }, [menuData.map(function (m) {
    return m.nodeId;
  }).toString()]);

  var _ref4 = layoutConfig || {},
      IsDark = _ref4.IsDark,
      _ref4$AppName = _ref4.AppName,
      AppName = _ref4$AppName === void 0 ? '' : _ref4$AppName,
      IsCompact = _ref4.IsCompact,
      IsTabsPage = _ref4.IsTabsPage,
      LayoutMode = _ref4.LayoutMode,
      _ref4$MenuExpandWidth = _ref4.MenuExpandWidth,
      MenuExpandWidth = _ref4$MenuExpandWidth === void 0 ? 208 : _ref4$MenuExpandWidth,
      _ref4$MenuCollapsedWi = _ref4.MenuCollapsedWidth,
      MenuCollapsedWidth = _ref4$MenuCollapsedWi === void 0 ? 48 : _ref4$MenuCollapsedWi,
      MenuCollapsed = _ref4.MenuCollapsed;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      tabs = _useState2[0],
      setTabs = _useState2[1];

  var appNameHex = useMemo(function () {
    return stringToHex(AppName);
  }, []);

  function getLocalStorage(key) {
    try {
      return localStorage.getItem("".concat(key, "_").concat(appNameHex));
    } catch (error) {
      return false;
    }
  }

  function setLocalStorage(state) {
    try {
      var key = state.key,
          value = state.value;
      localStorage.setItem("".concat(key, "_").concat(appNameHex), value);
    } catch (error) {
      /* continue regardless of error */
    }
  }

  var _useState3 = useState(getLocalStorage('_LAYOUT') || LayoutMode || 'left'),
      _useState4 = _slicedToArray(_useState3, 2),
      layout = _useState4[0],
      setLayout = _useState4[1];

  var _useState5 = useState(MenuCollapsed || getLocalStorage('_COLLAPSED') === 'true'),
      _useState6 = _slicedToArray(_useState5, 2),
      collapsed = _useState6[0],
      setCollapsed = _useState6[1];

  var hasPage = tabPages.find(function (page) {
    return page.key === pathname;
  }) || {
    key: pathname,
    title: '',
    content: undefined,
    top: 0
  };
  var title = '未知';

  var content = function content() {
    return /*#__PURE__*/React.createElement(NoFoundPage, null);
  }; // clear tabs


  useEffect(function () {
    return function () {
      tabPages = [];
    };
  }, []);
  useUpdateEffect(function () {
    if (hasPage === null || hasPage === void 0 ? void 0 : hasPage.content) {
      var _document$scrollingEl;

      (_document$scrollingEl = document.scrollingElement) === null || _document$scrollingEl === void 0 ? void 0 : _document$scrollingEl.scrollTo(0, hasPage.top);
    }
  }, [pathname]);

  var onScroll = function onScroll(e) {
    var _ref5 = e.target.scrollingElement || {},
        scrollTop = _ref5.scrollTop;

    hasPage.top = scrollTop;
  }; // listener document scroll


  useEventListener('scroll', onScroll, {
    target: document
  }); // add theme class

  useLayoutEffect(function () {
    var body = document.getElementsByTagName('body');

    if (body && body.length > 0) {
      body[0].classList.add(IsDark ? 'dark-theme' : 'default-theme');

      if (IsCompact) {
        body[0].classList.add('compact-theme');
      }
    }
  }, []); // coolapsed change

  function onChangeCollapsed() {
    setCollapsed(!collapsed);
    setLocalStorage({
      key: '_COLLAPSED',
      value: !collapsed
    });
  } // layou change


  function onChangeLayout(e) {
    setLayout(e);
    setLocalStorage({
      key: '_LAYOUT',
      value: e
    });
  }

  var curMenu = useMemo(function () {
    var menu = menus.find(function (m) {
      var menuUrl = m.nodeData.menuUrl;

      if (menuUrl.includes('?')) {
        return menuUrl.split('?')[0] === pathname;
      }

      return menuUrl === pathname;
    }); // add document title

    if (isBrowser() && menu) {
      setTimeout(function () {
        document.title = "".concat(AppName, " - ").concat(menu.nodeName);
      }, 10);
    } // save history route


    var saveHistory = /*#__PURE__*/function () {
      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
        var index;
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (RouteHistorys.length) {
                  _context.next = 7;
                  break;
                }

                _context.next = 3;
                return getStroage('_ROUTE_HISTORY');

              case 3:
                _context.t0 = _context.sent;

                if (_context.t0) {
                  _context.next = 6;
                  break;
                }

                _context.t0 = [];

              case 6:
                RouteHistorys = _context.t0;

              case 7:
                index = RouteHistorys.findIndex(function (h) {
                  return h.pathName === pathname;
                });

                if (index > -1) {
                  RouteHistorys.splice(index, 1);
                }

                RouteHistorys.unshift({
                  pathName: pathname,
                  menuName: (menu === null || menu === void 0 ? void 0 : menu.nodeData.menuName) || '',
                  time: new Date()
                });
                setStroage('_ROUTE_HISTORY', RouteHistorys);

              case 11:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function saveHistory() {
        return _ref6.apply(this, arguments);
      };
    }();

    if (menu) saveHistory();
    return menu;
  }, [pathname]); // cache page

  if (!(hasPage === null || hasPage === void 0 ? void 0 : hasPage.content) && IsTabsPage) {
    if (curMenu) {
      title = curMenu.nodeName;
      content = children === null || children === void 0 ? void 0 : children.props.children;
    }

    hasPage.title = title;
    hasPage.content = content;
    tabPages.push(hasPage);
  } // tabs change


  function onChange(e) {
    history.push(e);
  } // tab close


  var onEdit = function onEdit(e) {
    if (tabPages.length === 1) {
      // close last
      tabPages = [];
      history.push(homePage);
      return;
    }

    tabPages = tabPages.filter(function (f) {
      return f.key !== e;
    }); // close current

    if (pathname === e) {
      history.push(tabPages[tabPages.length - 1].key);
      return;
    }

    setTabs(!tabs);
  }; // tab extra


  var operations = function operations() {
    // close other or close all tabs
    var onClose = function onClose(key) {
      if (key) {
        tabPages = tabPages.filter(function (f) {
          return f.key === key;
        });
        setTabs(!tabs);
      } else {
        tabPages = [];
        history.push(homePage);
      }
    };

    var closeMenu = /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, {
      key: "1"
    }, /*#__PURE__*/React.createElement("a", {
      onClick: function onClick() {
        return onClose(pathname);
      }
    }, "\u5173\u95ED\u5176\u4ED6\u6807\u7B7E")), /*#__PURE__*/React.createElement(_Menu.Item, {
      key: "2"
    }, /*#__PURE__*/React.createElement("a", {
      onClick: function onClick() {
        return onClose();
      }
    }, "\u5173\u95ED\u6240\u6709\u6807\u7B7E")));
    return /*#__PURE__*/React.createElement(_Dropdown, {
      overlay: closeMenu
    }, /*#__PURE__*/React.createElement("a", {
      className: "ant-dropdown-link",
      onClick: function onClick(e) {
        return e.preventDefault();
      },
      style: {
        paddingRight: 16
      }
    }, "\u5173\u95ED ", /*#__PURE__*/React.createElement(DownOutlined, null)));
  }; // left menu


  var renderSiderMenu = function renderSiderMenu() {
    if (layout !== 'left' || hideLeftMenu) return null;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      style: {
        width: collapsed ? MenuCollapsedWidth : MenuExpandWidth,
        transition: 'width 0.3s'
      }
    }), /*#__PURE__*/React.createElement(Sider, {
      theme: IsDark ? 'dark' : 'light',
      width: MenuExpandWidth,
      collapsedWidth: MenuCollapsedWidth,
      collapsed: collapsed,
      className: "".concat(classPrefix, "-siderbar")
    }, /*#__PURE__*/React.createElement(LayoutMenu, {
      mode: "inline",
      theme: "light",
      menus: menus,
      menuData: menuData,
      location: location,
      collapsed: collapsed,
      layoutConfig: layoutConfig,
      renderChildrenMenu: renderChildrenMenu
    }), !MenuCollapsed ? /*#__PURE__*/React.createElement("div", {
      className: "".concat(classPrefix, "-trigger"),
      style: {
        paddingLeft: 16
      }
    }, /*#__PURE__*/React.createElement("span", {
      onClick: onChangeCollapsed
    }, collapsed ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null))) : null));
  };

  var renderTab = function renderTab(page) {
    return /*#__PURE__*/React.createElement(_Tabs.TabPane, {
      tab: page.title,
      key: page.key
    }, page.title === '未知' ? /*#__PURE__*/React.createElement(NoFoundPage, null) : /*#__PURE__*/React.createElement(AppPage, {
      location: location,
      menu: curMenu
    }, children.props.children));
  }; // render tabs page


  var renderTabsPage = function renderTabsPage() {
    return /*#__PURE__*/React.createElement(_Tabs, {
      onEdit: onEdit,
      hideAdd: true,
      tabBarGutter: 0,
      size: 'small',
      onChange: onChange,
      activeKey: pathname,
      type: 'editable-card',
      className: "".concat(classPrefix, "-card-container"),
      tabBarExtraContent: operations(),
      tabBarStyle: {
        marginBottom: 0,
        left: [0, 0, MenuCollapsedWidth, MenuExpandWidth][[layout === 'top', hideLeftMenu, collapsed, !collapsed].findIndex(function (e) {
          return e;
        })],
        background: IsDark ? undefined : '#f0f2f5'
      },
      style: {
        overflow: 'unset'
      }
    }, tabPages.map(function (page) {
      return renderTab(page);
    }));
  }; // render one page


  var renderPage = function renderPage() {
    var _curMenu$parents;

    // is hiddenBreadcrumb ?
    var isHideBb = getRoute(route === null || route === void 0 ? void 0 : route.routes, pathname);
    var page = isHideBb !== 'true' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(classPrefix, "-breadcrumb")
    }, /*#__PURE__*/React.createElement("div", null, curMenu === null || curMenu === void 0 ? void 0 : curMenu.nodeData.menuName), /*#__PURE__*/React.createElement(_Breadcrumb, null, /*#__PURE__*/React.createElement(_Breadcrumb.Item, null, "\u9996\u9875"), curMenu === null || curMenu === void 0 ? void 0 : (_curMenu$parents = curMenu.parents) === null || _curMenu$parents === void 0 ? void 0 : _curMenu$parents.map(function (m) {
      return /*#__PURE__*/React.createElement(_Breadcrumb.Item, {
        key: m.key
      }, m.name);
    }), /*#__PURE__*/React.createElement(_Breadcrumb.Item, null, curMenu === null || curMenu === void 0 ? void 0 : curMenu.nodeName))), children) : children;
    /** 权限判断 */

    var onAuth = function onAuth(code) {
      var btns = (curMenu === null || curMenu === void 0 ? void 0 : curMenu.children) || [];
      return btns.find(function (b) {
        return b.nodeData.menuUrl === code;
      });
    };

    return curMenu ? /*#__PURE__*/React.createElement(AuthContext.Provider, {
      value: {
        menu: curMenu,
        onAuth: onAuth
      }
    }, page) : /*#__PURE__*/React.createElement(NoFoundPage, null);
  };

  var contextValue = useMemo(function () {
    return _objectSpread({
      layout: layout,
      collapsed: collapsed,
      userDetail: userDetail,
      dispatch: dispatch
    }, layoutConfig);
  }, [layout, collapsed, userDetail === null || userDetail === void 0 ? void 0 : userDetail.loginId]);
  if (process.env.isDumi) return /*#__PURE__*/React.createElement(DumiLayout, {
    logo: logo,
    route: route,
    history: history,
    children: children,
    dispatch: dispatch,
    location: location,
    userDetail: userDetail,
    headerExtra: headerExtra,
    layoutConfig: layoutConfig,
    renderHeader: renderHeader,
    userOverlayMenu: userOverlayMenu,
    renderChildrenMenu: renderChildrenMenu
  });
  return /*#__PURE__*/React.createElement(_ConfigProvider, {
    locale: zhCN
  }, /*#__PURE__*/React.createElement(ContainerQuery, {
    query: query
  }, function (screen) {
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('ccs-bl', screen, layout === 'top' ? "".concat(classPrefix, "-top") : "".concat(classPrefix, "-left"))
    }, /*#__PURE__*/React.createElement(GlobalContext.Provider, {
      value: contextValue
    }, /*#__PURE__*/React.createElement(_Layout, {
      style: {
        minHeight: '100vh',
        flexDirection: 'row'
      }
    }, renderSiderMenu(), /*#__PURE__*/React.createElement(_Layout, {
      style: {
        width: 0
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        height: 48
      }
    }), renderHeader ? renderHeader({
      logo: logo,
      menuData: menuData,
      menus: menus,
      layout: layout,
      location: location
    }) : /*#__PURE__*/React.createElement(Header, {
      logo: logo,
      menus: menus,
      layout: layout,
      history: history,
      menuData: menuData,
      location: location,
      userDetail: userDetail,
      headerExtra: headerExtra,
      layoutConfig: layoutConfig,
      userOverlayMenu: userOverlayMenu,
      onChangeLayout: onChangeLayout,
      renderChildrenMenu: renderChildrenMenu
    }), /*#__PURE__*/React.createElement(Content, null, IsTabsPage ? renderTabsPage() : renderPage())))));
  }));
};

export default CcsBasicLayout;