@lemon-fe/kits 1.0.0-177 → 1.0.0-178

package/es/components/DataGrid/index.js

@@ -1367,6 +1367,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
 
       if (showSearch) {
         footer.push( /*#__PURE__*/React.createElement(Search, _extends({
+          key: "search",
           ref: this.searchRef
         }, _typeof(showSearch) === 'object' ? showSearch : {})));
       }

package/es/hooks/useHistoryBlock/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 校验函数
+ * @param block  返回true或者string 会阻止页面被关闭;
+ * @returns  string 为提示信息，一般情况不需要
+ */
+export default function useHistoryBlock(block: () => string | boolean): {
+    clear(): void;
+};

package/es/hooks/useHistoryBlock/index.js

@@ -0,0 +1,30 @@
+import { useLastestRef } from '@lemon-fe/hooks';
+import { useContext, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router';
+import { RouteTabContext } from "../../layouts/components/RouteTab";
+/**
+ * 校验函数
+ * @param block  返回true或者string 会阻止页面被关闭;
+ * @returns  string 为提示信息，一般情况不需要
+ */
+
+export default function useHistoryBlock(block) {
+  var tabCtx = useContext(RouteTabContext);
+  var blockRef = useLastestRef(block);
+  var pathname = useLocation().pathname;
+  var clearRef = useRef(function () {});
+  useEffect(function () {
+    clearRef.current = tabCtx.instance.registerCloseBlocker({
+      pathname: "".concat(tabCtx.routerBase).concat(pathname),
+      block: function block() {
+        return blockRef.current();
+      }
+    });
+    return clearRef.current;
+  }, []);
+  return {
+    clear: function clear() {
+      clearRef.current();
+    }
+  };
+}

package/es/index.d.ts

@@ -44,9 +44,11 @@ export { default as GreyPanel } from './components/GreyPanel';
 export { default as Alert } from './components/Alert';
 export { default as InputNumber } from './components/InputNumber';
 export { default as InputCompact } from './components/InputCompact';
+export { default as SelectPanel } from './components/SelectPanel';
 export { default as BasicLayout } from './layouts/BasicLayout';
 export { default as BlankLayout } from './layouts/BlankLayout';
 export { default as MicroLayout } from './layouts/MicroLayout';
 export { default as Breadcrumb } from './layouts/Breadcrumb';
 export { default as useBatchOperator } from './hooks/useBatchOperator';
-export { default as SelectPanel } from './components/SelectPanel';
+export { default as useHistoryBlock } from './hooks/useHistoryBlock';
+export { TabInstance } from './layouts/TabInstance';

package/es/index.js

@@ -36,9 +36,11 @@ export { default as GreyPanel } from "./components/GreyPanel";
 export { default as Alert } from "./components/Alert";
 export { default as InputNumber } from "./components/InputNumber";
 export { default as InputCompact } from "./components/InputCompact";
+export { default as SelectPanel } from "./components/SelectPanel";
 export { default as BasicLayout } from "./layouts/BasicLayout";
 export { default as BlankLayout } from "./layouts/BlankLayout";
 export { default as MicroLayout } from "./layouts/MicroLayout";
 export { default as Breadcrumb } from "./layouts/Breadcrumb";
 export { default as useBatchOperator } from "./hooks/useBatchOperator";
-export { default as SelectPanel } from "./components/SelectPanel";
+export { default as useHistoryBlock } from "./hooks/useHistoryBlock";
+export { TabInstance } from "./layouts/TabInstance";

package/es/layouts/MicroLayout/index.js

@@ -4,11 +4,29 @@ 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 React, { memo, useEffect } from 'react';
 import { useMemo } from 'react';
 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;
 
@@ -31,7 +49,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 +99,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", {
@@ -91,13 +135,15 @@ function MicroLayout(props) {
         height: '100%'
       }
     }, 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 { ReactText } from 'react';
 import type { IRoute, Location } from '../BasicLayout/typings';
+import type { TabInstance } from '../TabInstance';
 
 export interface MicroLayoutProps {
   /**
@@ -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>;
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-177",
+  "version": "1.0.0-178",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",