@lemon-fe/kits 1.0.2-0 → 1.0.2

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

@@ -34,7 +34,7 @@ export { default as SelectView } from './components/SelectView';
 export { default as DataGrid } from './components/DataGrid';
 export * from './components/DataGrid/typings';
 export * from './components/DataGrid/hooks';
-export type { ColDef, ColGroupDef, ColumnState, GridOptions, GridReadyEvent, ICellEditorParams, ICellRendererParams, IHeaderParams, RowDataUpdatedEvent, CellValueChangedEvent, NavigateToNextCellParams, TabToNextCellParams, AgGridEvent, GroupCellRendererParams as IGroupCellRendererParams, Column, CellPosition, } from '@ag-grid-community/core';
+export type { ColDef, ColGroupDef, ColumnState, GridOptions, GridReadyEvent, ICellEditorParams, ICellRendererParams, IHeaderParams, RowDataUpdatedEvent, CellValueChangedEvent, NavigateToNextCellParams, TabToNextCellParams, AgGridEvent, GroupCellRendererParams as IGroupCellRendererParams, Column, CellPosition, IRowNode, } from '@ag-grid-community/core';
 export { GridApi, ColumnApi } from '@ag-grid-community/core';
 export * from '@ag-grid-community/react';
 export { default as TipMark } from './components/TipMark';
@@ -44,8 +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 useHistoryBlock } from './hooks/useHistoryBlock';
+export { TabInstance } from './layouts/TabInstance';

package/es/index.js

@@ -36,8 +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 useBatchOperator } from "./hooks/useBatchOperator";
+export { default as useHistoryBlock } from "./hooks/useHistoryBlock";
+export { TabInstance } from "./layouts/TabInstance";

package/es/index.less

@@ -25,6 +25,7 @@
 @import './components/GreyPanel/index.less';
 @import './components/InputNumber/index.less';
 @import './components//InputCompact/index.less';
+@import './components/SelectPanel/index.less';
 
 @import './layouts/BasicLayout/components/MainFramework/index.less';
 @import './layouts/Breadcrumb/index.less';

package/es/init.js

@@ -7,10 +7,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import { config } from '@lemon-fe/hooks';
-import { message, Modal, Select, ConfigProvider, Result, Button, DatePicker, Cascader, TreeSelect, Empty, Menu, TimePicker } from 'antd';
+import { message, Modal, Select, ConfigProvider, Result, Button, DatePicker, Cascader, TreeSelect, Empty, Menu, TimePicker, Tree } from 'antd';
 import React from 'react';
 import Icons from "./components/Icons";
 import PageLoading from "./components/PageLoading";
+import { PREFIX_CLS } from "./constants";
 import empty from "./styles/empty.png";
 var Tip = Icons.Tip,
     Down = Icons.Down,
@@ -122,6 +123,16 @@ export default function init() {
     clearIcon: /*#__PURE__*/React.createElement(Clear, null)
   }; //@ts-ignore
 
+  Tree.defaultProps = {
+    switcherIcon: /*#__PURE__*/React.createElement(Down, {
+      style: {
+        fontSize: 14,
+        color: 'rgba(51, 51, 51, 0.7)',
+        verticalAlign: '-0.125em'
+      }
+    })
+  }; //@ts-ignore
+
   Cascader.defaultProps = {
     suffixIcon: node,
     clearIcon: /*#__PURE__*/React.createElement(Clear, null)
@@ -148,6 +159,14 @@ export default function init() {
         pointerEvents: 'none'
       }
     })
+  });
+  TimePicker.RangePicker.defaultProps = _objectSpread(_objectSpread({}, TimePicker.RangePicker.defaultProps), {}, {
+    suffixIcon: /*#__PURE__*/React.createElement(Icons.Clock, {
+      style: {
+        pointerEvents: 'none'
+      }
+    }),
+    clearIcon: /*#__PURE__*/React.createElement(Clear, null)
   }); //@ts-ignore
 
   Menu.defaultProps = {
@@ -170,6 +189,7 @@ export default function init() {
       return /*#__PURE__*/React.createElement(PageLoading, null);
     },
     showError: function showError(err) {
+      console.error(err);
       message.error(err.message);
     },
     setPrimaryColor: function setPrimaryColor(color) {
@@ -191,4 +211,9 @@ export default function init() {
       });
     }
   });
+  /** 设置滚动条 */
+
+  if (/windows/.test(window.navigator.userAgent.toLowerCase())) {
+    document.body.classList.add("".concat(PREFIX_CLS, "-thin-scroll-bar"));
+  }
 }

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 { ReactText } from 'react';
-import type { IRoute, Location } from '../BasicLayout/typings';
+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/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";
@@ -68,7 +68,7 @@ function _render(_ref) {
     }
   }
 
-  if (authority !== undefined) {
+  if (authority !== undefined && opts.authorities !== null) {
     var authorities = opts.authorities;
     var flag = false;
 

package/es/styles/overrides.less

@@ -40,7 +40,7 @@ a[title='站长统计'] {
 }
 
 .@{ant-prefix}-table-body {
-  .scrollBar(8px);
+  .scrollBar();
 }
 
 .@{ant-prefix}-table-tbody > tr.@{ant-prefix}-table-row-selected > td {
@@ -168,12 +168,12 @@ a[title='站长统计'] {
 @input-padding-vertical-base: (
     round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10
   ) - @border-width-base;
-@input-disabled-color: fade(#333, 70);
+@input-disabled-color: fade(#333, 50);
 @input-disabled-bg: #fff;
 
 .@{ant-prefix}-input-prefix,
 .@{ant-prefix}-input-suffix {
-  color: #666;
+  color: rgba(51, 51, 51, 0.7);
 }
 
 /** picker */
@@ -189,7 +189,7 @@ a[title='站长统计'] {
   }
 
   &&-disabled &-suffix {
-    color: fade(#333, 49);
+    color: fade(#333, 40);
   }
 }
 
@@ -253,6 +253,10 @@ a[title='站长统计'] {
   & &-treenode-leaf-last &-switcher-leaf-line::before {
     height: (@tree-title-height / 2) !important;
   }
+
+  & &-treenode-draggable &-draggable-icon {
+    width: @tree-node-indent-width;
+  }
 }
 
 /** button **/
@@ -272,12 +276,27 @@ a[title='站长统计'] {
 @tabs-card-horizontal-padding: 5px;
 
 /** checkbox **/
+@checkbox-group-item-margin-right: 12px;
+
 .@{ant-prefix}-checkbox + span {
   padding-right: 0;
   padding-left: 4px;
 }
 
+.@{ant-prefix}-checkbox-wrapper {
+  & + & {
+    margin-left: 12px;
+  }
+}
+
+.@{ant-prefix}-checkbox-group {
+  &-item + &-item {
+    margin-left: 0px;
+  }
+}
+
 /** radio **/
+@radio-wrapper-margin-right: 12px;
 span.@{ant-prefix}-radio + * {
   padding-right: 0;
   padding-left: 4px;
@@ -303,3 +322,14 @@ span.@{ant-prefix}-radio + * {
 
 /** tooltip **/
 @tooltip-arrow-width: 5px * sqrt(2);
+
+/** form **/
+.@{ant-prefix}-form-item {
+  &-explain-error {
+    margin-top: 4px;
+    color: #ff4128;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+  }
+}

package/es/styles/theme.less

@@ -7,3 +7,23 @@
 html {
   --lemon-primary-color: 35, 87, 223;
 }
+
+.@{prefixCls}-thin-scroll-bar {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}

package/es/styles/utils.less

@@ -90,21 +90,21 @@
   }
 }
 
-.scrollBar (@width: 6px) {
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    width: @width;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #fff;
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #ddd;
-    border-radius: 4px;
-  }
+.scrollBar (@width: 8px) {
+  // scrollbar-width: thin;
+
+  // &::-webkit-scrollbar {
+  //   width: @width;
+  //   height: 8px;
+  // }
+
+  // &::-webkit-scrollbar-track {
+  //   background-color: #fff;
+  //   border-radius: 4px;
+  // }
+
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: #ddd;
+  //   border-radius: 4px;
+  // }
 }