@lemon-fe/kits 1.0.0-21 → 1.0.0-210

package/es/layouts/MicroLayout/index.js

@@ -4,11 +4,31 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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, { memo } from 'react';
+import { useLastestRef } from '@lemon-fe/hooks';
+import { Button, Result } from 'antd';
+import React, { memo, useEffect } from 'react';
 import { useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { matchPath, useHistory } from 'react-router-dom';
 import RouteTab from "../components/RouteTab";
 
+function isSubPath(path, subPath) {
+  var pathArr = path.split('/');
+  var subPathArr = subPath.split('/');
+
+  if (path.length > subPath.length) {
+    return false;
+  }
+
+  for (var i = 0; i < pathArr.length; i++) {
+    if (subPathArr[i] !== pathArr[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 function MicroLayout(props) {
   var _tabs$active;
 
@@ -19,7 +39,7 @@ function MicroLayout(props) {
       active = props.active;
   var history = useHistory();
   var auth = useMemo(function () {
-    if (authorities === undefined) {
+    if (authorities === undefined || authorities === null) {
       return authorities;
     }
 
@@ -31,7 +51,7 @@ function MicroLayout(props) {
   var key = (_tabs$active = tabs[active]) === null || _tabs$active === void 0 ? void 0 : _tabs$active.rootPath;
   var routeTabs = useMemo(function () {
     return tabs.filter(function (tab) {
-      return new RegExp("".concat(basename, "\\b")).test(tab.rootPath);
+      return isSubPath(basename, tab.rootPath);
     }).map(function (item) {
       var tab = _objectSpread(_objectSpread({}, item), {}, {
         location: _objectSpread(_objectSpread({}, item.location), {}, {
@@ -81,6 +101,32 @@ function MicroLayout(props) {
       return tab;
     });
   }, [tabs, routes]);
+  var routeTabsRef = useLastestRef(routeTabs);
+  useEffect(function () {
+    history.block(function (loc, action) {
+      if (action === 'POP') {
+        return;
+      }
+
+      var pathname = "".concat(basename).concat(loc.pathname);
+      var target = routeTabsRef.current.find(function (tab) {
+        return isSubPath(tab.rootPath, pathname);
+      });
+
+      if (target === undefined || pathname === target.location.pathname) {
+        return;
+      }
+
+      if (target.instance.block({
+        title: target.title,
+        onOk: function onOk() {
+          history.push(loc);
+        }
+      })) {
+        return false;
+      }
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, routeTabs.map(function (tab, index) {
     var route = tab.route;
     return /*#__PURE__*/React.createElement("div", {
@@ -90,15 +136,33 @@ function MicroLayout(props) {
         width: '100%',
         height: '100%'
       }
+    }, /*#__PURE__*/React.createElement(ErrorBoundary, {
+      fallbackRender: function fallbackRender(_ref) {
+        var error = _ref.error,
+            resetErrorBoundary = _ref.resetErrorBoundary;
+        return /*#__PURE__*/React.createElement(Result, {
+          status: "500",
+          title: "\u9875\u9762\u5F02\u5E38",
+          subTitle: error.message,
+          extra: /*#__PURE__*/React.createElement(Button, {
+            type: "primary",
+            onClick: function onClick() {
+              resetErrorBoundary();
+            }
+          }, "\u91CD\u65B0\u52A0\u8F7D")
+        });
+      }
     }, route !== null && tab.match !== null && /*#__PURE__*/React.createElement(RouteTab, {
+      routerBase: basename,
       authorities: auth,
       routes: routes,
       index: index,
       history: history,
       route: route,
       location: tab.location,
-      match: tab.match
-    }));
+      match: tab.match,
+      instance: tab.instance
+    })));
   }));
 }
 

package/es/layouts/MicroLayout/typings.d.ts

@@ -1,5 +1,6 @@
-import type { ReactNode, ReactText } from 'react';
-import type { IRoute, Location } from '../BasicLayout/typings';
+import type { ReactText } from 'react';
+import type { TabInstance } from '../TabInstance';
+import type { IRoute, Location } from '../typings';
 
 export interface MicroLayoutProps {
   /**
@@ -9,7 +10,7 @@ export interface MicroLayoutProps {
   /**
    * @description 用户包含的所有权限
    */
-  authorities?: ReactText[] | Set<ReactText>;
+  authorities?: ReactText[] | Set<ReactText> | null;
   /**
    * @description 主应用tabs
    */
@@ -17,6 +18,7 @@ export interface MicroLayoutProps {
     title: string;
     rootPath: string;
     location: Location;
+    instance: TabInstance;
   }[];
   /**
    * @description 当前active tab

package/es/layouts/TabInstance.d.ts

@@ -0,0 +1,31 @@
+import type { Location } from './typings';
+declare type CloseBlocker = {
+    pathname: string;
+    block: () => string | boolean;
+};
+/**
+ * 为了简化，只会阻止最后一个且当前路由下的history blocker;
+ */
+export declare class TabInstance {
+    private closeBlockers;
+    private rootPath;
+    private location;
+    constructor(rootPath: string, location: Location);
+    update(rootPath: string | undefined, location: Location | undefined): void;
+    registerCloseBlocker(blocker: CloseBlocker): () => void;
+    private shouldNotBlock;
+    /**
+     * 用于路由跳转
+     * @param modalParams
+     * @returns
+     */
+    block(modalParams: {
+        title: string;
+        onOk: () => void;
+    }): boolean;
+    /**
+     * @returns 用于关闭tab
+     */
+    shouldBlock(): string | false;
+}
+export {};

package/es/layouts/TabInstance.js

@@ -0,0 +1,115 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+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 { Modal } from 'antd';
+
+/**
+ * 为了简化，只会阻止最后一个且当前路由下的history blocker;
+ */
+export var TabInstance = /*#__PURE__*/function () {
+  function TabInstance(rootPath, location) {
+    _classCallCheck(this, TabInstance);
+
+    _defineProperty(this, "closeBlockers", []);
+
+    _defineProperty(this, "rootPath", void 0);
+
+    _defineProperty(this, "location", void 0);
+
+    _defineProperty(this, "shouldNotBlock", '');
+
+    this.rootPath = rootPath;
+    this.location = location;
+  }
+
+  _createClass(TabInstance, [{
+    key: "update",
+    value: function update(rootPath, location) {
+      if (rootPath) {
+        this.rootPath = rootPath;
+      }
+
+      if (location) {
+        this.location = location;
+      }
+    }
+  }, {
+    key: "registerCloseBlocker",
+    value: function registerCloseBlocker(blocker) {
+      var _this = this;
+
+      this.closeBlockers.push(blocker);
+      return function () {
+        var index = _this.closeBlockers.findIndex(function (item) {
+          return item === blocker;
+        });
+
+        _this.closeBlockers.splice(index, 1);
+      };
+    }
+  }, {
+    key: "block",
+    value:
+    /**
+     * 用于路由跳转
+     * @param modalParams
+     * @returns
+     */
+    function block(modalParams) {
+      var _this2 = this;
+
+      var shouldNotBlock = this.shouldNotBlock;
+      this.shouldNotBlock = '';
+
+      if (this.closeBlockers.length > 0) {
+        var last = this.closeBlockers[this.closeBlockers.length - 1];
+
+        if (last.pathname === this.location.pathname && last.pathname !== shouldNotBlock) {
+          var shouldBlock = last.block();
+
+          if (shouldBlock) {
+            Modal.confirm({
+              title: modalParams.title,
+              content: typeof shouldBlock === 'string' ? shouldBlock : "\u9875\u9762\u672A\u4FDD\u5B58\uFF0C\u786E\u8BA4\u79BB\u5F00\uFF1F",
+              onOk: function onOk() {
+                _this2.shouldNotBlock = last.pathname;
+                modalParams.onOk();
+              }
+            });
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    /**
+     * @returns 用于关闭tab
+     */
+
+  }, {
+    key: "shouldBlock",
+    value: function shouldBlock() {
+      if (this.closeBlockers.length > 0) {
+        var last = this.closeBlockers[this.closeBlockers.length - 1];
+
+        if (last.pathname === this.location.pathname) {
+          var result = last.block();
+
+          if (result) {
+            return typeof result === 'string' ? result : '页面未保存，确认离开？';
+          }
+        }
+      }
+
+      return false;
+    }
+  }]);
+
+  return TabInstance;
+}();

package/es/layouts/components/RouteTab.d.ts

@@ -1,20 +1,24 @@
 import React from 'react';
-import type { ReactText } from 'react';
 import { type match } from 'react-router';
+import type { TabInstance } from '../TabInstance';
 import type { IRoute, Location } from '../typings';
 interface Props {
+    routerBase: string;
     route: IRoute;
     routes: IRoute[];
     index: number;
     location: Location;
     match: match;
     history: any;
-    authorities?: Set<ReactText>;
-    pathAuthorities?: Map<string, ReactText | ReactText[]>;
+    authorities?: Set<string | number> | null;
+    pathAuthorities?: Map<string, string | number | (string | number)[]>;
+    instance: TabInstance;
 }
 export declare const RouteTabContext: React.Context<{
     route: IRoute;
     match: match;
+    routerBase: string;
+    instance: TabInstance;
 }>;
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/es/layouts/components/RouteTab.js

@@ -10,11 +10,15 @@ export default /*#__PURE__*/memo(function RouteTab(props) {
       history = props.history,
       routes = props.routes,
       authorities = props.authorities,
-      pathAuthorities = props.pathAuthorities;
+      pathAuthorities = props.pathAuthorities,
+      instance = props.instance,
+      routerBase = props.routerBase;
   var ctx = useMemo(function () {
     return {
       match: match,
-      route: route
+      route: route,
+      instance: instance,
+      routerBase: routerBase
     };
   }, [route]);
   return /*#__PURE__*/React.createElement(RouterContext.Provider, {

package/es/layouts/typings.d.ts

@@ -1,5 +1,3 @@
-import type { ReactText } from 'react';
-
 export interface IComponent extends FunctionComponent {
   getInitialProps?: Function;
   preload?: () => Promise<any>;

package/es/layouts/utils.d.ts

@@ -7,7 +7,7 @@ interface IOpts {
      * @description
      * 所有权限
      */
-    authorities?: Set<ReactText>;
+    authorities?: Set<ReactText> | null;
     /**
      * @description
      * 路径对应的权限

package/es/layouts/utils.js

@@ -18,8 +18,8 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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; }
 
-import React, { createElement } from 'react';
 import { Result } from 'antd';
+import React, { createElement } from 'react';
 import { Redirect, Route } from 'react-router';
 import { matchPath } from 'react-router';
 import CachableRoute from "./components/CachableRoute";
@@ -57,8 +57,8 @@ function _render(_ref) {
     rootRoutes: opts.rootRoutes
   }));
   var Component = route.component,
-      wrappers = route.wrappers,
-      authority = route.authority;
+      wrappers = route.wrappers;
+  var authority = route.authority;
 
   if (authority === undefined && opts.pathAuthorities !== undefined) {
     var matchedAuth = getMatchedAuth(props.match.url, opts.pathAuthorities);
@@ -68,7 +68,7 @@ function _render(_ref) {
     }
   }
 
-  if (authority !== undefined) {
+  if (authority !== undefined && opts.authorities !== null) {
     var authorities = opts.authorities;
     var flag = false;