@ccs-design/rc-pro-component/lib/CcsBasicLayout/index.js

ccs design basic react component

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.classPrefix = void 0;

var _react = _interopRequireWildcard(require("react"));

var _antd = require("antd");

var _umi = require("umi");

var _ = _interopRequireDefault(require("./404"));

var _icons = require("@ant-design/icons");

var _header = _interopRequireDefault(require("./header"));

var _page = _interopRequireDefault(require("./page"));

var _context2 = require("./context");

var _menu = _interopRequireDefault(require("./menu"));

var _utils = require("../utils");

var _classnames = _interopRequireDefault(require("classnames"));

var _reactContainerQuery = require("react-container-query");

var _zh_CN = _interopRequireDefault(require("antd/lib/locale-provider/zh_CN"));

require("./index.less");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

var Content = _antd.Layout.Content,
    Sider = _antd.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 = [];
var classPrefix = 'ccs-layout';
exports.classPrefix = classPrefix;

var getLocalStorage = function getLocalStorage(key) {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    return false;
  }
};

var setLocalStorage = function setLocalStorage(state) {
  try {
    var key = state.key,
        value = state.value;
    localStorage.setItem(key, value);
  } catch (error) {
    /* continue regardless of error */
  }
}; // 获取菜单列表（鉴权用）


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 CcsBasicLayoutPorps
 */

var CcsBasicLayout = function CcsBasicLayout(_ref) {
  var logo = _ref.logo,
      history = _ref.history,
      children = _ref.children,
      dispatch = _ref.dispatch,
      location = _ref.location,
      userDetail = _ref.userDetail,
      headerExtra = _ref.headerExtra,
      layoutConfig = _ref.layoutConfig,
      renderHeader = _ref.renderHeader,
      userOverlayMenu = _ref.userOverlayMenu;

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

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

  var menus = (0, _react.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;
    });
  }, []);

  var _ref4 = layoutConfig || {},
      LayoutMode = _ref4.LayoutMode,
      IsDark = _ref4.IsDark,
      AppName = _ref4.AppName,
      IsTabsPage = _ref4.IsTabsPage,
      MenuExpandWidth = _ref4.MenuExpandWidth;

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

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

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

  var hasPage = tabPages.find(function (page) {
    return page.key === pathname;
  });
  var title = '未知';

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


  (0, _react.useEffect)(function () {
    return function () {
      tabPages = [];
    };
  }, []); // add theme class

  (0, _react.useLayoutEffect)(function () {
    var html = document.getElementsByTagName('html');

    if (html && html.length > 0) {
      html[0].classList.add(IsDark ? 'dark-theme' : 'default-theme');
    }
  }, []); // coolapsed change

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


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

  var curMenu = (0, _react.useMemo)(function () {
    var menu = menus.find(function (m) {
      return m.nodeData.menuUrl === pathname;
    }); // add document title

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


    var saveHistory = /*#__PURE__*/function () {
      var _ref5 = _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 (0, _utils.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()
                });
                (0, _utils.setStroage)('_ROUTE_HISTORY', RouteHistorys);

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

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

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

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

    tabPages.push({
      key: pathname,
      title: title,
      content: content
    });
  } // tabs change


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


  var onEdit = function onEdit(e) {
    // close last
    if (tabPages.length === 1) {
      tabPages = [];
      history.push('/');
      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('/');
      }
    };

    var closeMenu = /*#__PURE__*/_react.default.createElement(_antd.Menu, null, /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
      key: "1"
    }, /*#__PURE__*/_react.default.createElement("a", {
      onClick: function onClick() {
        return onClose(pathname);
      }
    }, "\u5173\u95ED\u5176\u4ED6\u6807\u7B7E")), /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
      key: "2"
    }, /*#__PURE__*/_react.default.createElement("a", {
      onClick: function onClick() {
        return onClose();
      }
    }, "\u5173\u95ED\u6240\u6709\u6807\u7B7E")));

    return /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
      overlay: closeMenu
    }, /*#__PURE__*/_react.default.createElement("a", {
      className: "ant-dropdown-link",
      onClick: function onClick(e) {
        return e.preventDefault();
      },
      style: {
        paddingRight: 16
      }
    }, "\u5173\u95ED ", /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)));
  }; // left menu


  var renderSiderMenu = layout === 'left' ? /*#__PURE__*/_react.default.createElement(Sider, {
    theme: IsDark ? 'dark' : 'light',
    width: MenuExpandWidth,
    collapsible: true,
    collapsed: collapsed,
    className: "".concat(classPrefix, "-siderbar"),
    onCollapse: onChangeCollapsed
  }, /*#__PURE__*/_react.default.createElement(_menu.default, {
    mode: "inline",
    theme: "light",
    menus: menus,
    menuData: menuData,
    location: location,
    collapsed: collapsed,
    layoutConfig: layoutConfig
  })) : null; // render tabs page

  var renderTabsPage = /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
    onEdit: onEdit,
    onChange: onChange,
    hideAdd: true,
    tabBarGutter: 0,
    activeKey: pathname,
    type: 'editable-card',
    style: {
      height: '100%'
    },
    className: "".concat(classPrefix, "-card-container"),
    tabBarExtraContent: operations(),
    tabBarStyle: IsDark ? {
      marginBottom: 0
    } : {
      marginBottom: 0,
      background: '#f0f2f5',
      borderBottom: '1px solid #fff'
    },
    id: "LayoutSticky"
  }, tabPages.map(function (page) {
    return /*#__PURE__*/_react.default.createElement(_antd.Tabs.TabPane, {
      tab: page.title,
      key: page.key
    }, page.title === '未知' ? /*#__PURE__*/_react.default.createElement(_.default, null) : /*#__PURE__*/_react.default.createElement(_page.default, {
      location: location,
      menu: curMenu
    }, children.props.children));
  })); // render one page


  var renderPage = function renderPage() {
    /** 权限判断 */
    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.default.createElement(_context2.AuthContext.Provider, {
      value: {
        menu: curMenu,
        onAuth: onAuth
      }
    }, children) : /*#__PURE__*/_react.default.createElement(_.default, null);
  };

  var contextValue = (0, _react.useMemo)(function () {
    return _objectSpread({
      layout: layout,
      collapsed: collapsed,
      userDetail: userDetail,
      dispatch: dispatch
    }, layoutConfig);
  }, [layout, collapsed, userDetail === null || userDetail === void 0 ? void 0 : userDetail.loginId]);
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
    locale: _zh_CN.default
  }, /*#__PURE__*/_react.default.createElement(_reactContainerQuery.ContainerQuery, {
    query: query
  }, function (screen) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(screen, layout === 'top' ? "".concat(classPrefix, "-top") : "".concat(classPrefix, "-left"))
    }, /*#__PURE__*/_react.default.createElement(_context2.GlobalContext.Provider, {
      value: contextValue
    }, /*#__PURE__*/_react.default.createElement(_antd.Layout, {
      style: {
        height: '100vh'
      }
    }, renderHeader ? renderHeader({
      logo: logo,
      menuData: menuData,
      menus: menus,
      layout: layout,
      location: location
    }) : /*#__PURE__*/_react.default.createElement(_header.default, {
      logo: logo,
      menus: menus,
      layout: layout,
      history: history,
      menuData: menuData,
      location: location,
      userDetail: userDetail,
      headerExtra: headerExtra,
      layoutConfig: layoutConfig,
      userOverlayMenu: userOverlayMenu,
      onChangeLayout: onChangeLayout
    }), /*#__PURE__*/_react.default.createElement(_antd.Layout, {
      style: {
        flexGrow: 1
      }
    }, renderSiderMenu, /*#__PURE__*/_react.default.createElement(Content, {
      style: {
        overflowY: 'auto',
        overflowX: 'hidden'
      }
    }, IsTabsPage ? renderTabsPage : renderPage())))));
  }));
};

var _default = CcsBasicLayout;
exports.default = _default;