@zat-design/sisyphus-react 3.2.1 → 3.2.2-beta.10

package/lib/ProForm/style/index.less

@@ -1,3 +1,5 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 @import '../components/base/SwitchCheckbox/style/index.less';
 @import '../components/base/TextArea/index.less';
 @import '../components/combination/FormList/style/index.less';
@@ -11,78 +13,78 @@
 @import '../components/old/EnumSelect/style/index.less';
 
 .pro-form {
-  &.ant-form-vertical {
-    .ant-form-item .ant-form-item-label {
+  &.@{ant-prefix}-form-vertical {
+    .@{ant-prefix}-form-item .@{ant-prefix}-form-item-label {
       flex: none !important;
     }
 
     .pro-form-custom-footer {
-      display      : flex;
-      align-items  : center;
+      display: flex;
+      align-items: center;
+      height: auto;
       margin-bottom: 0;
-      height       : auto;
-      padding-top  : 6px;
+      padding-top: 6px;
 
-      .ant-space-align-center {
+      .@{ant-prefix}-space-align-center {
         align-items: normal;
       }
     }
   }
 
-  &.ant-form {
+  &.@{ant-prefix}-form {
     margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
   }
 
   .pro-collapse-level2 {
-    .ant-collapse-item {
+    .@{ant-prefix}-collapse-item {
       margin-bottom: 0 !important;
     }
   }
 
-  .ant-form-item-control-input {
+  .@{ant-prefix}-form-item-control-input {
     flex-grow: 1;
     max-width: 100%;
   }
 
-  span.ant-input-clear-icon {
-    display   : unset;
+  span.@{ant-prefix}-input-clear-icon {
+    display: unset;
     visibility: hidden;
   }
 
-  .ant-input-affix-wrapper:hover span.ant-input-clear-icon {
-    display   : unset;
+  .@{ant-prefix}-input-affix-wrapper:hover span.@{ant-prefix}-input-clear-icon {
+    display: unset;
     visibility: unset;
   }
 
-  .ant-input-affix-wrapper:hover span.ant-input-clear-icon[class~='ant-input-clear-icon-hidden'] {
-    display   : unset;
+  .@{ant-prefix}-input-affix-wrapper:hover span.@{ant-prefix}-input-clear-icon[class~='ant-input-clear-icon-hidden'] {
+    display: unset;
     visibility: hidden;
   }
 
   &.pro-form-view {
-    .ant-form-item-label {
+    .@{ant-prefix}-form-item-label {
       label {
         color: var(--zaui-aide-text, #939599);
       }
     }
 
-    .ant-form-item {
+    .@{ant-prefix}-form-item {
       margin-bottom: 0 !important;
     }
 
-    .ant-form-item {
-      .ant-tree-icon-hide input {
+    .@{ant-prefix}-form-item {
+      .@{ant-prefix}-tree-icon-hide input {
         display: none !important;
       }
     }
   }
 
-  .ant-picker-range {
+  .@{ant-prefix}-picker-range {
     width: 100%;
   }
 
   .pro-form-list-line {
-    .ant-row {
+    .@{ant-prefix}-row {
       width: 100%;
     }
   }
@@ -90,7 +92,7 @@
   // 展开折叠按钮
   .expand-button {
     line-height: 32px;
-    cursor     : pointer;
+    cursor: pointer;
 
     .rotate-to-top {
       transform: rotate(90deg);
@@ -101,88 +103,96 @@
     }
   }
 
-  .ant-form-item {
+  .@{ant-prefix}-form-item {
     margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1)) !important;
 
     &.pro-form-item-width-auto {
-      .ant-form-item-control-input {
+      .@{ant-prefix}-form-item-control-input {
         flex-grow: inherit;
       }
 
-      .ant-form-item-control-input-content {
+      .@{ant-prefix}-form-item-control-input-content {
         flex: initial;
       }
     }
 
-    .ant-form-item-tooltip {
+    .@{ant-prefix}-form-item-tooltip {
       svg {
-        width         : 14px;
-        height        : 14px;
+        width: 14px;
+        height: 14px;
         vertical-align: bottom;
-        fill          : @zaui-aide-text;
+        fill: @zaui-aide-text;
       }
     }
 
     // 比较原始值场景下  不同时候的样式
     &.pro-form-item-changed {
-
-      span.ant-input-affix-wrapper,
-      .ant-select-selector,
-      .ant-picker {
-        background: @zaui-contract-bg;
+      span.@{ant-prefix}-input-affix-wrapper,
+      .@{ant-prefix}-select-selector,
+      .@{ant-prefix}-picker {
+        background: @zaui-contract-bg !important;
 
         input {
           background: @zaui-contract-bg;
         }
+        .@{ant-prefix}-select-selection-placeholder {
+          z-index: 9;
+        }
+      }
+
+      .@{ant-prefix}-form-item-control-input-content > span {
+        background: @zaui-contract-bg;
+        padding: 4px 8px;
+        border-radius: 4px;
       }
     }
 
-    .ant-row {
+    .@{ant-prefix}-row {
       width: 100%;
     }
 
-    .ant-col.ant-col-0 {
+    .@{ant-prefix}-col.@{ant-prefix}-col-0 {
       display: none;
     }
 
-    .ant-form-item-explain {
+    .@{ant-prefix}-form-item-explain {
       height: auto;
 
-      .ant-form-item-explain-error {
+      .@{ant-prefix}-form-item-explain-error {
         font-size: var(--zaui-font-size, 14px);
       }
     }
 
-    .ant-input-number {
+    .@{ant-prefix}-input-number {
       width: 100%;
     }
 
     .pro-number-range {
-      .ant-input-number {
+      .@{ant-prefix}-input-number {
         width: calc(50% - 20px);
       }
 
       .range-right {
-        .ant-input-number {
+        .@{ant-prefix}-input-number {
           border-left: none;
         }
 
         .range-right {
-          width                    : 100%;
-          border                   : 1px solid @zaui-form-control-line;
-          border-top-left-radius   : 0;
+          width: 100%;
+          border: 1px solid @zaui-form-control-line;
+          border-top-left-radius: 0;
           border-bottom-left-radius: 0;
         }
       }
     }
   }
 
-  .ant-form-item-hidden {
+  .@{ant-prefix}-form-item-hidden {
     display: none;
   }
 
-  .ant-form-item-label {
-    >label {
+  .@{ant-prefix}-form-item-label {
+    > label {
       white-space: pre-wrap;
     }
   }
@@ -191,9 +201,9 @@
     margin-left: @zaui-space-size-sm;
   }
 
-  .ant-form-item-has-error {
+  .@{ant-prefix}-form-item-has-error {
     .group-separator {
-      color       : var(--ant-error-color);
+      color: var(--ant-error-color);
       border-color: var(--ant-error-color);
     }
 
@@ -203,10 +213,9 @@
   }
 
   .site-input-group-wrapper {
-
     // 范围值表单样式
     & .site-input-split {
-      text-align      : center;
+      text-align: center;
       background-color: @zaui-table-strip-bg;
 
       &.site-input-split-disabled {
@@ -222,16 +231,16 @@
       border-left-width: 1px;
     }
 
-    & .ant-input-rtl.site-input-right {
+    & .@{ant-prefix}-input-rtl.site-input-right {
       border-right-width: 0;
     }
 
-    & .ant-input-rtl.site-input-right:hover,
-    & .ant-input-rtl.site-input-right:focus {
+    & .@{ant-prefix}-input-rtl.site-input-right:hover,
+    & .@{ant-prefix}-input-rtl.site-input-right:focus {
       border-right-width: 1px;
     }
 
-    .ant-form-item {
+    .@{ant-prefix}-form-item {
       margin-bottom: 0;
     }
 
@@ -241,44 +250,44 @@
     }
 
     .site-input-left {
-      .ant-input-number {
+      .@{ant-prefix}-input-number {
         border-right: none;
       }
     }
 
     .site-input-right {
-      .ant-input-number {
+      .@{ant-prefix}-input-number {
         border-left: none;
       }
     }
 
-    &.ant-input-group.ant-input-group-compact>*:not(:last-child) {
+    &.@{ant-prefix}-input-group.@{ant-prefix}-input-group-compact > *:not(:last-child) {
       margin-right: 0;
     }
 
-    >*:first-child {
-      border-top-right-radius   : 0 !important;
+    > *:first-child {
+      border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
 
-      >.ant-select-selector {
-        border-top-right-radius   : 0 !important;
+      > .@{ant-prefix}-select-selector {
+        border-top-right-radius: 0 !important;
         border-bottom-right-radius: 0 !important;
       }
     }
 
-    >*:last-child {
-      border-top-left-radius   : 0 !important;
+    > *:last-child {
+      border-top-left-radius: 0 !important;
       border-bottom-left-radius: 0 !important;
 
-      >.ant-select-selector {
-        border-top-left-radius   : 0 !important;
+      > .@{ant-prefix}-select-selector {
+        border-top-left-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
       }
     }
   }
 
-  .ant-input-group.ant-input-group-compact>* {
-    float         : none;
+  .@{ant-prefix}-input-group.@{ant-prefix}-input-group-compact > * {
+    float: none;
     vertical-align: top;
   }
 
@@ -287,17 +296,17 @@
   }
 
   .noDisabled {
-    color           : @zaui-disabled-text;
-    font-size       : var(--zaui-font-size, 14px);
+    color: @zaui-disabled-text;
+    font-size: var(--zaui-font-size, 14px);
     background-color: transparent;
-    border          : none;
-    cursor          : default;
-    opacity         : 1;
+    border: none;
+    cursor: default;
+    opacity: 1;
   }
 
   div.pro-form-custom-footer {
-    width        : unset !important;
-    height       : 32px;
+    width: unset !important;
+    height:32px;
     margin-bottom: calc(var(--zaui-height-size-md, 16px) * var(--zaui-size, 1));
 
     &.pro-form-custom-footer-hidden {
@@ -306,14 +315,14 @@
   }
 
   .pro-form-view-container {
-    display   : inline-block;
-    color     : var(--zaui-text, #343434);
+    display: inline-block;
+    color: var(--zaui-text, #343434);
     word-break: break-all;
   }
 
   .pro-form-view-container_nowrap {
-    overflow     : hidden;
-    white-space  : nowrap;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
   }
 

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

@@ -1 +1,10 @@
-export declare const contrastOriginal: (name: any, names: any, originValues: any, currentValue: any, fun: any) => any;
+import { FormInstance } from 'antd';
+interface Params {
+    originalValues: any;
+    originalValue: any;
+    value: any;
+    form: FormInstance;
+    equalWith?: (originalValue: any, currentValue: any) => boolean;
+}
+export declare const contrastOriginal: (params: Params) => boolean;
+export {};

package/lib/ProForm/utils/contrastOriginal.js

@@ -6,29 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.contrastOriginal = void 0;
 var _lodash = require("lodash");
 var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
-var contrastOriginal = exports.contrastOriginal = function contrastOriginal(name, names, originValues, currentValue, fun) {
+var contrastOriginal = exports.contrastOriginal = function contrastOriginal(params) {
+  var originalValue = params.originalValue,
+    originalValues = params.originalValues,
+    value = params.value,
+    equalWith = params.equalWith;
   // 支持传入自定义比较事件
-  if ((0, _lodash.isFunction)(fun)) {
-    if (names === null || names === void 0 ? void 0 : names.length) {
-      var originVal = names.map(function (key) {
-        return (0, _lodash.get)(originValues, key);
-      });
-      return !fun(originVal, currentValue);
-    }
-    return !fun((0, _lodash.get)(originValues, name), currentValue);
+  if ((0, _lodash.isFunction)(equalWith)) {
+    return !equalWith(originalValue, value);
   }
-  if (names === null || names === void 0 ? void 0 : names.length) {
-    return names.some(function (nameItem, index) {
-      var originalValue = (0, _lodash.get)(originValues, nameItem);
-      if (!nullValue.includes(currentValue === null || currentValue === void 0 ? void 0 : currentValue[index]) || !nullValue.includes(originalValue)) {
-        return !(0, _lodash.isEqual)(currentValue === null || currentValue === void 0 ? void 0 : currentValue[index], (0, _lodash.get)(originValues, nameItem));
+  if (Array.isArray(originalValue)) {
+    return originalValue.some(function (valueItem, index) {
+      // 如果两个值有一个不是空值, 则进行深比较
+      if (!nullValue.includes(value === null || value === void 0 ? void 0 : value[index]) || !nullValue.includes(valueItem)) {
+        return !(0, _lodash.isEqual)(value === null || value === void 0 ? void 0 : value[index], valueItem);
       }
       return false;
     });
   }
-  var originalValue = (0, _lodash.get)(originValues, name);
-  if (!nullValue.includes(currentValue) || !nullValue.includes(originalValue)) {
-    return !(0, _lodash.isEqual)(currentValue, (0, _lodash.get)(originValues, name));
+  if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
+    return !(0, _lodash.isEqual)(value, originalValue);
   }
   return false;
 };

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

@@ -1 +1,15 @@
-export declare const useChanged: (name: any, names: any, nameStr: any, originalValues: any, form: any, fun: any) => any;
+import { FormInstance } from 'antd';
+import { NamePath } from 'antd/lib/form/interface';
+interface Params {
+    name?: NamePath;
+    names?: NamePath[];
+    namesStr?: NamePath;
+    originalName?: NamePath;
+    originalNames?: NamePath[];
+    originalNameStr?: NamePath;
+    originalValues: any;
+    form: FormInstance;
+    equalWith?: (originalValue: any, currentValue: any) => boolean;
+}
+export declare const useChanged: (params: Params) => any[];
+export {};

package/lib/ProForm/utils/useChanged.js

@@ -7,13 +7,32 @@ exports.useChanged = void 0;
 var _antd = require("antd");
 var _lodash = require("lodash");
 var _contrastOriginal = require("./contrastOriginal");
-var useChanged = exports.useChanged = function useChanged(name, names, nameStr, originalValues, form, fun) {
+var useChanged = exports.useChanged = function useChanged(params) {
+  var name = params.name,
+    names = params.names,
+    namesStr = params.namesStr,
+    _params$originalName = params.originalName,
+    originalName = _params$originalName === void 0 ? name : _params$originalName,
+    _params$originalNames = params.originalNames,
+    originalNames = _params$originalNames === void 0 ? names : _params$originalNames,
+    originalValues = params.originalValues,
+    form = params.form,
+    equalWith = params.equalWith;
   var _form = form;
-  if (!originalValues || (0, _lodash.get)(originalValues, nameStr || name) === undefined) {
-    _form = [];
-    return false;
-  }
-  var value = _antd.Form.useWatch(nameStr || name, _form);
-  var changed = (0, _contrastOriginal.contrastOriginal)(name, names, originalValues, value, fun);
-  return changed;
+  var originalValue = (originalNames === null || originalNames === void 0 ? void 0 : originalNames.length) ? originalNames.map(function (originalName) {
+    return (0, _lodash.get)(originalValues, originalName);
+  }) : (0, _lodash.get)(originalValues, originalName);
+  var notWatch = !originalValues || originalValue === undefined;
+  // @ts-ignore
+  if (notWatch) _form = [];
+  var value = _antd.Form.useWatch(namesStr || name, _form);
+  if (notWatch) return [false];
+  var changed = (0, _contrastOriginal.contrastOriginal)({
+    value: value,
+    originalValue: originalValue,
+    originalValues: originalValues,
+    form: form,
+    equalWith: equalWith
+  });
+  return [changed, originalValue];
 };

package/lib/ProIcon/style/index.less

@@ -1,3 +1,6 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-icon {
   cursor: pointer;
 
@@ -17,7 +20,7 @@
     display: inline-block;
   }
 
-  &.ant-btn-icon-only {
+  &.@{ant-prefix}-btn-icon-only {
     width  : auto;
     height : auto;
     padding: 0;

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

@@ -15,7 +15,7 @@
     box-shadow     : 0px 1px 2px 0px rgba(0, 55, 93, 0.1) !important;
 
     .pro-layout-header-actions {
-      .ant-avatar {
+      .@{ant-prefix}-avatar {
         background: var(--zaui-brand, #006aff);
       }
     }

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

@@ -73,28 +73,28 @@
   top: 80px !important
 }
 
-.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.ant-popover-placement-rightBottom,
-.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.ant-popover-placement-rightTop {
+.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightBottom,
+.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightTop {
   left: 220px !important
 }
 
-.pro-layout-menu-tooltip.ant-popover-placement-rightBottom,
-.pro-layout-menu-tooltip.ant-popover-placement-rightTop {
+.pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightBottom,
+.pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightTop {
   position    : fixed;
   z-index     : 1001;
   left        : 49px !important;
   padding-left: 0
 }
 
-.pro-layout-menu-tooltip .ant-popover-inner-content {
+.pro-layout-menu-tooltip .@{ant-prefix}-popover-inner-content {
   padding: 0
 }
 
-.pro-layout-menu-tooltip .ant-popover-content>.ant-popover-arrow {
+.pro-layout-menu-tooltip .@{ant-prefix}-popover-content>.@{ant-prefix}-popover-arrow {
   display: none
 }
 
-.pro-layout-menu-tooltip .ant-popover-content .ant-popover-inner {
+.pro-layout-menu-tooltip .@{ant-prefix}-popover-content .@{ant-prefix}-popover-inner {
   padding   : 0;
   box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
 }