@zat-design/sisyphus-react 3.4.2-beta.2 → 3.4.2-beta.21

package/lib/ProForm/utils/useChanged.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChanged = void 0;
 var _antd = require("antd");
 var _lodash = require("lodash");
-var _contrastOriginal = require("./contrastOriginal");
+var _diffOriginal = require("./diffOriginal");
 var useChanged = exports.useChanged = function useChanged(_ref) {
   var name = _ref.name,
     names = _ref.names,
@@ -21,11 +21,12 @@ var useChanged = exports.useChanged = function useChanged(_ref) {
   if (notWatch) form = [];
   var value = _antd.Form.useWatch(namesStr || name, form);
   if (notWatch) return [false];
-  var changed = (0, _contrastOriginal.contrastOriginal)({
+  var changed = (0, _diffOriginal.diffOriginal)({
     originalValue: originalValue,
     value: value,
     form: form,
-    equalWith: equalWith
+    equalWith: equalWith,
+    name: namesStr || name
   });
   return [changed, originalValue];
 };

package/lib/ProForm/utils/useListChanged.d.ts

@@ -1,7 +1,7 @@
 import { FormInstance } from 'antd';
 import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
 interface Params {
-    name?: NamePath;
+    name?: any;
     names?: NamePath[];
     namesStr?: NamePath;
     originalName?: NamePath;

package/lib/ProForm/utils/useListChanged.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useListChanged = void 0;
 var _antd = require("antd");
 var _lodash = require("lodash");
-var _contrastOriginal = require("./contrastOriginal");
+var _diffOriginal = require("./diffOriginal");
 var toNamePath = function toNamePath(name) {
   if (Array.isArray(name)) {
     return name;
@@ -32,6 +32,7 @@ var getOriginalValue = function getOriginalValue(_ref) {
     var rowValueNamePath = namePath.slice(0, rowKeyPath.length - 1); // 表单中变动值所在行
     var rowKeyName = rowKeyPath[rowKeyPath.length - 1]; // rowKey在行内的name
     var rowValue = form.getFieldValue(rowValueNamePath);
+    if (!rowValue) return undefined;
     var keyValue = rowValue[rowKeyName]; // 获取表单中rowKey值
     if (!keyValue) return undefined;
     var originalValueList = (0, _lodash.get)(originalValues, originalName.slice(0, rowKeyPath.length - 2));
@@ -88,11 +89,12 @@ var useListChanged = exports.useListChanged = function useListChanged(params) {
   if (notWatch) _form = [];
   var value = _antd.Form.useWatch(namePath, _form);
   if (notWatch || noChange) return [false];
-  var changed = (0, _contrastOriginal.contrastOriginal)({
+  var changed = (0, _diffOriginal.diffOriginal)({
     value: value,
     originalValue: originalValue,
     form: form,
-    equalWith: equalWith
+    equalWith: equalWith,
+    name: namesStr || name
   });
   return [changed, originalValue];
 };

package/lib/ProIcon/index.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
 import { ProIconProps } from './propsTypes';
-export declare function createScriptUrlElements(scriptUrls: string[], index?: number): void;
 declare const ProIcon: FC<ProIconProps>;
 export default ProIcon;

package/lib/ProIcon/index.js

@@ -4,45 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createScriptUrlElements = createScriptUrlElements;
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _ahooks = require("ahooks");
 var _antd = require("antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
-var _config2 = require("./config");
-var _symbolIcon = _interopRequireDefault(require("./symbolIcon"));
 var _ProConfigProvider = require("../ProConfigProvider");
+var _config2 = require("./config");
 var _excluded = ["type", "onClick", "size", "color", "className", "style", "spin", "rotate", "theme", "disabled", "mode", "buttonProps", "children", "mapList"];
-var customCache = new Set();
-function isValidCustomScriptUrl(scriptUrl) {
-  return Boolean(typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl));
-}
-function createScriptUrlElements(scriptUrls) {
-  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var currentScriptUrl = scriptUrls[index];
-  if (isValidCustomScriptUrl(currentScriptUrl)) {
-    var script = document.createElement('script');
-    script.setAttribute('src', currentScriptUrl);
-    script.setAttribute('data-namespace', currentScriptUrl);
-    if (scriptUrls.length > index + 1) {
-      script.onload = function () {
-        createScriptUrlElements(scriptUrls, index + 1);
-      };
-      script.onerror = function () {
-        createScriptUrlElements(scriptUrls, index + 1);
-      };
-    }
-    customCache.add(currentScriptUrl);
-    document.body.appendChild(script);
-  }
-}
-// 加载内部icon
-if (_symbolIcon.default && typeof document !== 'undefined' && typeof window !== 'undefined' && typeof document.createElement === 'function') {
-  createScriptUrlElements([_symbolIcon.default]);
-}
 var ProIcon = function ProIcon(props) {
   var config = (0, _ProConfigProvider.useProConfig)('ProIcon') || {};
   var _config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), props !== null && props !== void 0 ? props : {});
@@ -69,6 +41,11 @@ var ProIcon = function ProIcon(props) {
     _config$mapList = _config.mapList,
     mapList = _config$mapList === void 0 ? [] : _config$mapList,
     reset = (0, _objectWithoutProperties2.default)(_config, _excluded);
+  // 加载内部icon
+  var status = (0, _ahooks.useExternal)('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
+  if (status !== 'ready') {
+    return null;
+  }
   var rotateStyle = rotate ? {
     msTransform: "rotate(".concat(rotate, "deg)"),
     transform: "rotate(".concat(rotate, "deg)")

package/lib/ProLayout/components/Layout/Header/style/index.less

@@ -2,7 +2,7 @@
   .pro-layout-header {
     position       : fixed;
     top            : 0;
-    z-index        : 101;
+    z-index        : 103;
     display        : flex;
     flex-direction : row;
     align-items    : center;

package/lib/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -7,33 +7,36 @@
   .@{ant-prefix}-menu-root {
     overflow-y: auto !important;
 
-    &>.@{ant-prefix}-menu-submenu>.@{ant-prefix}-menu-submenu-title,
-    &>.@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
+    & > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
+    & > .@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
       padding-left: 16px !important;
     }
 
-    &>.@{ant-prefix}-menu-submenu {
+    & > .@{ant-prefix}-menu-submenu {
       .@{ant-prefix}-menu-sub {
-        background: #1A202D;
+        background: #1a202d;
       }
 
-      &>.@{ant-prefix}-menu-sub>.@{ant-prefix}-menu-submenu>.@{ant-prefix}-menu-submenu-title,
-      &>.@{ant-prefix}-menu-item-only-child,
-      &>.@{ant-prefix}-menu-sub>.@{ant-prefix}-menu-item-only-child {
+      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
+      & > .@{ant-prefix}-menu-item-only-child,
+      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-item-only-child {
         padding-left: 16px !important;
       }
     }
 
-    &>.@{ant-prefix}-menu-item-only-child {
-      min-height    : 48px;
-      padding-top   : 12px;
-      padding-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) * var(--zaui-size; 1));
-      margin        : 0;
-      height        : auto;
+    & > .@{ant-prefix}-menu-item-only-child {
+      height: auto;
+      min-height: 48px;
+      margin: 0;
+      padding-top: 12px;
+      padding-bottom: calc(
+        var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) *
+          var(--zaui-size; 1)
+      );
 
       h2 {
+        height: auto !important;
         line-height: initial !important;
-        height     : auto !important;
         white-space: pre-wrap;
       }
     }
@@ -45,7 +48,6 @@
         display: none;
       }
     }
-
   }
 
   .@{ant-prefix}-menu-inline {
@@ -62,14 +64,12 @@
       h2 {
         color: #fff;
       }
-
     }
   }
 
-
   .@{ant-prefix}-menu.@{ant-prefix}-menu-dark {
-    background: #1A202D;
     overflow-x: hidden;
+    background: #1a202d;
 
     .@{ant-prefix}-menu-item-only-child {
       &:hover {
@@ -90,104 +90,107 @@
     }
   }
 
-  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline>.@{ant-prefix}-menu-item,
+  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item,
   .@{ant-prefix}-menu-submenu-title {
-    white-space: pre-wrap;
-    line-height: initial !important;
-    height     : auto !important;
-    margin     : 0;
+    height: auto !important;
+    min-height: 48px;
+    margin: 0;
     padding: 12px 0;
-    min-height : 48px;
+    line-height: initial !important;
+    white-space: pre-wrap;
   }
 
   .@{ant-prefix}-menu-title-content {
-
-
     div {
-      display        : flex;
-      align-items    : center;
+      display: flex;
+      align-items: center;
       justify-content: left;
 
       .pro-layout-icon {
-        flex  : 0 0 20px;
-        width : 20px;
+        flex: 0 0 20px;
+        width: 20px;
         height: 20px;
-        color : #CACACA;
+        color: #cacaca;
       }
 
       h2 {
-        flex-grow    : 1;
+        display: inline-block;
+        flex-grow: 1;
         margin-bottom: 0;
-        opacity      : 1;
-        transition   : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
-        display      : inline-block;
-        padding-left : 12px;
-        color        : #CACACA;
-        font-weight  : 400;
-        font-size    : var(--zaui-font-size-md, 14px);
+        padding-left: 12px;
+        color: #cacaca;
+        font-weight: 400;
+        font-size: var(--zaui-font-size-md, 14px);
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
       }
     }
-
-
   }
 
   .anticon-caret-down {
-    color     : #CACACA;
-    transform : rotateZ(0deg);
-    top       : auto;
+    top: auto;
+    color: #cacaca;
+    transform: rotateZ(0deg);
     transition: all 0.1s ease-in;
   }
 
   .@{ant-prefix}-menu-submenu-open {
     .anticon-caret-down {
+      color: #fff;
       transform: rotateZ(180deg);
-      color    : #fff;
     }
 
     .@{ant-prefix}-menu-submenu-inline {
       .anticon-caret-down {
+        color: #cacaca;
         transform: rotateZ(0deg);
-        color    : #CACACA;
       }
 
       &.@{ant-prefix}-menu-submenu-open {
         .anticon-caret-down {
+          color: #fff;
           transform: rotateZ(180deg);
-          color    : #fff;
         }
       }
     }
   }
 
-  .@{ant-prefix}-menu-submenu:hover>.@{ant-prefix}-menu-submenu-title>.@{ant-prefix}-menu-submenu-expand-icon {
+  .@{ant-prefix}-menu-submenu:hover
+    > .@{ant-prefix}-menu-submenu-title
+    > .@{ant-prefix}-menu-submenu-expand-icon {
     color: #fff;
   }
 
+ .@{ant-prefix}-menu-item-selected{
+  .@{ant-prefix}-menu-title-content{
+    h2{
+      font-weight: bold !important;
+    }
+  }
+ }
+
   .@{ant-prefix}-menu-submenu-selected {
-    &>.@{ant-prefix}-menu-submenu-title {
+    & > .@{ant-prefix}-menu-submenu-title {
       .@{ant-prefix}-menu-title-content div {
         .pro-layout-icon {
           color: #fff;
         }
 
         h2 {
-          font-weight: bold;
-          color      : #fff;
+          color: #fff;
         }
       }
-
     }
 
     .@{ant-prefix}-menu-item-only-child .@{ant-prefix}-menu-title-content div {
       .pro-layout-icon {
-        color: #CACACA;
+        color: #cacaca;
       }
 
       h2 {
+        color: #cacaca;
         font-weight: 400;
-        color      : #CACACA;
       }
     }
-
   }
 }

package/lib/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -2,18 +2,18 @@
 @import (reference) '~antd/es/style/themes/index.less';
 
 .pro-layout-sider-menu {
-  width     : 220px;
+  width: 220px;
   background: #fff;
 
   h2 {
     margin-bottom: 0;
-    padding      : 16px 16px 8px;
-    color        : var(--zaui-text, #343434);
-    color        : var(--zaui-text);
-    font-weight  : 500;
-    font-size    : var(--zaui-font-size-lg, 16px);
-    line-height  : inherit;
-    text-align   : left;
+    padding: 16px 16px 8px;
+    color: var(--zaui-text, #343434);
+    color: var(--zaui-text);
+    font-weight: 500;
+    font-size: var(--zaui-font-size-lg, 16px);
+    line-height: inherit;
+    text-align: left;
   }
 
   .pro-layout-open-menu {
@@ -33,15 +33,22 @@
       }
 
       .@{ant-prefix}-menu {
+        .@{ant-prefix}-menu-item-only-child{
+          .@{ant-prefix}-menu-title-content  .pro-layout-open-menu-lv1 h2{
+            padding-right: 0;
+          }
+        }
         .@{ant-prefix}-menu-title-content {
           div h2 {
-            color  : var(--zaui-text);
             padding: 0;
+            padding-right: 12px;
+            color: var(--zaui-text);
           }
 
           .pro-layout-open-menu-lv1 {
             h2 {
-              color      : var(--zaui-text);
+              padding-right: 26px;
+              color: var(--zaui-text);
               font-weight: 500;
             }
           }
@@ -53,19 +60,19 @@
           &.pro-layout-icon-empty {
             display: none;
 
-            &~h2 {
+            & ~ h2 {
               margin-left: var(--zaui-space-size-md, 16px);
             }
           }
         }
 
         .pro-layout-icon {
-          fill : currentColor;
           color: var(--zaui-text, #343434) !important;
+          fill: currentColor;
         }
 
         &.@{ant-prefix}-menu-sub {
-          overflow  : hidden;
+          overflow: hidden;
           background: #fff;
         }
 
@@ -74,8 +81,8 @@
 
         .@{ant-prefix}-menu-submenu-title:hover,
         .@{ant-prefix}-menu-item:hover {
+          color: #fff;
           background-color: #f2f2f2;
-          color           : #fff;
         }
 
         .@{ant-prefix}-menu-item {
@@ -87,15 +94,13 @@
         }
 
         .@{ant-prefix}-menu-submenu-title,
-        &.@{ant-prefix}-menu-root>.@{ant-prefix}-menu-item-only-child,
-        &.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline>.@{ant-prefix}-menu-item {
-          padding-top   : 10px;
+        &.@{ant-prefix}-menu-root > .@{ant-prefix}-menu-item-only-child,
+        &.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item {
+          min-height: 40px;
+          padding-top: 10px;
           padding-bottom: 10px;
-          min-height    : 40px;
         }
       }
     }
   }
-
-
 }

package/lib/ProLayout/components/Layout/Menu/style/index.less

@@ -1,36 +1,35 @@
 @root-entry-name: 'default';
 @import (reference) '~antd/es/style/themes/index.less';
-@import "../FoldMenu/style/index.less";
-@import "../OpenMenu/style/index.less";
-@import "../SideMenu/style/index.less";
+@import '../FoldMenu/style/index.less';
+@import '../OpenMenu/style/index.less';
+@import '../SideMenu/style/index.less';
 
 /** 侧边栏 + 内容区 */
 .pro-layout-row {
   flex-direction: column;
 
-
   .pro-layout-menu-open {
-    .pro-layout-arrow  {
+    .pro-layout-arrow {
       transform: rotate(225deg);
     }
   }
 
   .pro-layout-arrow {
-    width           : 10px;
-    height          : 10px;
+    width: 10px;
+    height: 10px;
+    margin-left: -5px;
     background-color: transparent;
     /* 模块背景为透明 */
-    border-color    : #fff;
-    border-style    : solid;
-    border-width    : 2px 2px 0 0;
-    margin-left     : -5px;
-    transform       : rotate(45deg);
+    border-color: #fff;
+    border-style: solid;
+    border-width: 2px 2px 0 0;
+    transform: rotate(45deg);
   }
 
   &.pro-layout-menu-no-collapsed {
     .pro-layout-menu-fold-li {
-      display        : flex;
-      align-items    : center;
+      display: flex;
+      align-items: center;
       justify-content: center;
 
       div {
@@ -42,11 +41,10 @@
       }
 
       h2 {
-        display    : inline-block;
+        display: inline-block;
         white-space: nowrap;
-        opacity    : 0;
-        transition : opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
-          color 0.5s;
+        opacity: 0;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s;
       }
     }
   }
@@ -81,18 +79,18 @@
   }
 
   .pro-layout-menu {
-    position        : fixed;
-    top             : 48px;
-    left            : 0;
-    z-index         : 99;
-    width           : 48px;
-    height          : 100vh;
-    min-height      : 100%;
-    padding         : 0;
-    overflow-x      : hidden;
-    overflow-y      : auto;
+    position: fixed;
+    top: 48px;
+    left: 0;
+    z-index: 99;
+    width: 48px;
+    height: 100vh;
+    min-height: 100%;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
     background-color: #1a202d;
-    transition      : background .3s, width .3s cubic-bezier(.2, 0, 0, 1) 0s;
+    transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
 
     &.pro-layout-menu-open {
       width: 220px;
@@ -101,52 +99,50 @@
 
   /** 内容区 */
   .pro-layout-content {
-    flex       : auto;
+    z-index: 1;
+    flex: auto;
+    flex: auto;
+    min-height: calc(100vh - 48px);
+    margin-top: 48px;
     margin-left: 48px;
-    padding    : 0 var(--zaui-space-size-md, 16px);
-    transition : all 0.3s ease-in-out;
-    z-index    : 1;
-    flex       : auto;
-    min-height : calc(100vh - 48px);
-    margin-top : 48px;
+    padding: 0 var(--zaui-space-size-md, 16px);
+    transition: all 0.3s ease-in-out;
   }
 
-
-
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
-    left : 0;
-    width: 220px
+    left: 0;
+    width: 220px;
   }
 
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed img {
-    transform: rotate(-180deg)
+    transform: rotate(-180deg);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed {
-    position       : fixed;
-    bottom         : 0;
-    left           : 0;
-    z-index        : 2;
-    display        : flex;
-    align-items    : center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    width          : 48px;
-    height         : 48px;
-    transition     : all .25s ease;
-    background     : #292f3b
+    width: 48px;
+    height: 48px;
+    background: #292f3b;
+    transition: all 0.3s ease;
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed:hover {
-    background-color: rgba(185, 185, 189, .1)
+    background-color: rgba(185, 185, 189, 0.1);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed img {
     display: inline-block;
-    width  : 20px;
-    height : 20px
+    width: 20px;
+    height: 20px;
   }
 
-  .pro-layout-menu-open~.pro-layout-content {
-    margin-left: 220px !important
+  .pro-layout-menu-open ~ .pro-layout-content {
+    margin-left: 220px !important;
   }
 }

package/lib/ProLayout/components/ProCollapse/PropTypes.d.ts

@@ -15,16 +15,16 @@ export interface TitleListProps {
 }
 export interface ProCollapseProps {
     /**
-   * @description       折叠头部模式
-   * @default           default
-   */
-    mode?: 'default' | 'card';
-    /**
     * @description       折叠头部标题
     * @default           -
     */
     title?: string | React.ReactNode;
     /**
+   * @description       标题前图标
+   * @default           -
+   */
+    icon?: React.ReactNode | Boolean;
+    /**
     * @description       折叠头部多个标题
     * @default           []
     */