@zat-design/sisyphus-react 3.2.2 → 3.3.0-beta.2

package/lib/ProLayout/components/ProCollapse/style/index.less

@@ -1,39 +1,42 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-collapse {
   background: #f6f8fc;
 
   &.pro-collapse-no-title {
-    .ant-collapse-header {
+    .@{ant-prefix}-collapse-header {
       display: none !important;
     }
   }
 
-  &.ant-collapse {
+  &.@{ant-prefix}-collapse {
     .pro-collapse-panel {
       margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
     }
   }
 
-  .ant-collapse-header {
+  .@{ant-prefix}-collapse-header {
     align-items: center !important;
     padding    : 12px var(--zaui-space-size-md, 16px) !important;
     background : var(--zaui-area, #fafafa);
   }
 
-  .ant-collapse-header-text {
+  .@{ant-prefix}-collapse-header-text {
     color      : var(--zaui-text, #343434);
     font-weight: 500;
     font-size  : var(--zaui-font-size-lg, 16px);
   }
 
-  .ant-collapse-expand-icon {
+  .@{ant-prefix}-collapse-expand-icon {
     color: #c5c7cd;
   }
 
-  &.ant-collapse-borderless .ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box {
+  &.@{ant-prefix}-collapse-borderless .@{ant-prefix}-collapse-item>.@{ant-prefix}-collapse-content>.@{ant-prefix}-collapse-content-box {
     padding: 0;
   }
 
-  .ant-collapse-content-box {
+  .@{ant-prefix}-collapse-content-box {
     padding   : 0;
     background: var(--zaui-base-bg, #ffffff);
 
@@ -48,12 +51,12 @@
     margin-bottom: 0;
     background   : var(--zaui-base-bg, #ffffff);
 
-    .ant-collapse-header {
+    .@{ant-prefix}-collapse-header {
       margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
       padding      : 0 !important;
       background   : var(--zaui-base-bg, #ffffff);
 
-      .ant-collapse-header-text {
+      .@{ant-prefix}-collapse-header-text {
         position    : relative;
         padding-left: var(--zaui-space-size-sm, 8px);
         font-size   : var(--zaui-font-size, 14px);
@@ -71,7 +74,7 @@
         }
       }
 
-      .ant-collapse-extra {
+      .@{ant-prefix}-collapse-extra {
         .extra-info {
           margin-right: var(--zaui-space-size-sm, 8px);
         }
@@ -79,7 +82,7 @@
     }
 
     .pro-collapse-level2-collapse {
-      .ant-collapse-extra {
+      .@{ant-prefix}-collapse-extra {
         .extra-info {
           margin-right: var(--zaui-space-size-lg, 32px);
         }
@@ -90,24 +93,24 @@
       padding: 0;
     }
 
-    &.ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,
-    .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow {
+    &.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled>.@{ant-prefix}-collapse-header,
+    .@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled>.@{ant-prefix}-collapse-header>.arrow {
       color : var(--zaui-text, #343434);
       cursor: default;
     }
 
-    .ant-collapse-expand-icon {
+    .@{ant-prefix}-collapse-expand-icon {
       display: none;
     }
 
     .pro-collapse-level2-collapse {
-      .ant-collapse-expand-icon {
+      .@{ant-prefix}-collapse-expand-icon {
         display: block;
       }
     }
   }
 
-  .ant-collapse-extra {
+  .@{ant-prefix}-collapse-extra {
     .extra-info {
       margin-right: 24px;
     }
@@ -115,17 +118,17 @@
 
   &.pro-collapse-list {
 
-    .ant-descriptions-row>th,
-    .ant-descriptions-row>td {
+    .@{ant-prefix}-descriptions-row>th,
+    .@{ant-prefix}-descriptions-row>td {
       padding   : var(--zaui-space-size-md, 16px) 0;
       background: #fafafa;
 
-      &.ant-descriptions-item {
+      &.@{ant-prefix}-descriptions-item {
         padding-left: var(--zaui-space-size-md, 16px);
       }
     }
 
-    .ant-descriptions-row {
+    .@{ant-prefix}-descriptions-row {
       td:first-child {
         position: relative;
 
@@ -143,17 +146,17 @@
       }
     }
 
-    .ant-descriptions-item-container {
+    .@{ant-prefix}-descriptions-item-container {
 
-      .ant-descriptions-item-label,
-      .ant-descriptions-item-content {
+      .@{ant-prefix}-descriptions-item-label,
+      .@{ant-prefix}-descriptions-item-content {
         color      : #0a0a0a !important;
         font-weight: 500 !important;
         font-size  : var(--zaui-font-size, 14px);
       }
     }
 
-    .ant-descriptions {
+    .@{ant-prefix}-descriptions {
       margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
     }
   }

package/lib/ProLayout/components/ProFooter/style/index.less

@@ -1,10 +1,14 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-footer {
-  position  : fixed;
-  bottom    : 0;
-  right     : 0;
-  width     : 100%;
-  padding   : var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 101;
+  width: 100%;
+  padding: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1))
+    var(--zaui-space-size-lg, 32px);
   background: var(--zaui-base-bg, #ffffff);
-  box-shadow: 3px 2px 12px 0 hsla(0, 0%, 59.2%, .32);
-  z-index   : 101;
+  box-shadow: 3px 2px 12px 0 hsla(0, 0%, 59.2%, 0.32);
 }

package/lib/ProLayout/components/ProHeader/components/ProBackBtn/style/index.less

@@ -1,5 +1,8 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .back-button-container {
-  &.ant-btn {
+  &.@{ant-prefix}-btn {
     color      : var(--zaui-text);
     font-weight: 400;
     background : var(--zaui-disabled-bg);

package/lib/ProLayout/components/ProHeader/index.js

@@ -13,7 +13,7 @@ var _antd = require("antd");
 var _react = require("react");
 var _utils = require("@zat-design/utils");
 var _classnames2 = _interopRequireDefault(require("classnames"));
-var _moment3 = _interopRequireDefault(require("moment"));
+var _dayjs3 = _interopRequireDefault(require("dayjs"));
 var _ahooks = require("ahooks");
 var _lodash = require("lodash");
 var _reactSvg = require("react-svg");
@@ -155,7 +155,7 @@ var ProHeader = function ProHeader(props) {
    * 次级描述数据渲染
    */
   var subDescribeRender = function subDescribeRender(describeData) {
-    var _moment, _moment2;
+    var _dayjs, _dayjs2;
     var value = describeData.value,
       type = describeData.type,
       valueType = describeData.valueType,
@@ -186,11 +186,11 @@ var ProHeader = function ProHeader(props) {
         break;
       case 'date':
         // 年月日
-        result = value ? (_moment = (0, _moment3.default)(value)) === null || _moment === void 0 ? void 0 : _moment.format('YYYY-MM-DD') : '-';
+        result = value ? (_dayjs = (0, _dayjs3.default)(value)) === null || _dayjs === void 0 ? void 0 : _dayjs.format('YYYY-MM-DD') : '-';
         break;
       case 'dateTime':
         // 年月日 时分秒
-        result = value ? (_moment2 = (0, _moment3.default)(value)) === null || _moment2 === void 0 ? void 0 : _moment2.format('YYYY-MM-DD HH:mm:ss') : '-';
+        result = value ? (_dayjs2 = (0, _dayjs3.default)(value)) === null || _dayjs2 === void 0 ? void 0 : _dayjs2.format('YYYY-MM-DD HH:mm:ss') : '-';
         break;
       default:
         result = String(value).includes('undefined') || !value ? '-' : value;

package/lib/ProLayout/components/ProHeader/style/index.less

@@ -1,8 +1,10 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
 @import '../components/ProBackBtn/style/index';
 
 .pro-header {
   background-color: var(--zaui-base-bg, #ffffff);
-  padding         : 24px 0 0 0;
+  padding         : 16px 0 0 0 !important;
 
   &.pro-header-no-back.pro-header-has-describe {
     .pro-header-top {
@@ -52,7 +54,7 @@
     display      : flex;
     align-items  : center;
 
-    .ant-typography-copy-success {
+    .@{ant-prefix}-typography-copy-success {
       svg {
         width  : 14px;
         height : 14px;
@@ -104,18 +106,18 @@
     box-shadow: 0px 1px 2px 0px rgba(0, 55, 93, 0.1);
   }
 
-  .ant-breadcrumb {
+  .@{ant-prefix}-breadcrumb {
     li {
       font-weight: 500;
       color      : #1D2129;
     }
 
-    .ant-breadcrumb-link {
+    .@{ant-prefix}-breadcrumb-link {
       font-size: var(--zaui-font-size-xl, 18px);
       display  : inline-flex;
     }
 
-    .ant-breadcrumb-separator {
+    .@{ant-prefix}-breadcrumb-separator {
       font-weight: 500;
       color      : #1D2129;
       font-size  : var(--zaui-font-size-xl, 18px);
@@ -167,7 +169,7 @@
             font-size: var(--zaui-font-size-lg, 16px);
           }
 
-          .ant-typography {
+          .@{ant-prefix}-typography {
             display      : flex;
             margin-bottom: 0;
           }
@@ -192,19 +194,19 @@
     }
 
     .pro-header-right {
-      .ant-btn-link {
+      .@{ant-prefix}-btn-link {
         color: #616161;
       }
 
-      .ant-btn-primary {
+      .@{ant-prefix}-btn-primary {
         color: #ffffff;
       }
 
-      .ant-btn-link {
+      .@{ant-prefix}-btn-link {
         padding: var(--zaui-space-size-xs, 4px), var(--zaui-space-size-sm, 8px);
       }
 
-      .ant-divider-vertical {
+      .@{ant-prefix}-divider-vertical {
         margin: 0;
       }
     }
@@ -232,7 +234,6 @@
 
       ul {
         height     : 0;
-        // padding : 0;
         overflow   : hidden;
       }
     }

package/lib/ProLayout/style/index.less

@@ -1,3 +1,6 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 @import "../components/Layout/index.less";
 @import "../components/ProCollapse/style/index.less";
 @import "../components/ProFooter/style/index.less";
@@ -26,7 +29,7 @@
       box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
     }
 
-    .pro-layout-open-menu .ant-menu-title-content div .pro-layout-icon {
+    .pro-layout-open-menu .@{ant-prefix}-menu-title-content div .pro-layout-icon {
       color   : var(--zaui-text, #343434);
       position: relative;
       z-index : 1;
@@ -114,7 +117,7 @@
       background: var(--zaui-base-bg, #fff);
     }
 
-    .ant-menu-root {
+    .@{ant-prefix}-menu-root {
       overflow-x: hidden !important;
     }
 
@@ -126,16 +129,16 @@
       background: var(--zaui-base-bg, #ffffff);
     }
 
-    .pro-layout-open-menu .ant-menu-root>.ant-menu-submenu .ant-menu-sub {
+    .pro-layout-open-menu .@{ant-prefix}-menu-root>.@{ant-prefix}-menu-submenu .@{ant-prefix}-menu-sub {
       background: var(--zaui-base-bg, #ffffff);
     }
 
-    .pro-layout-open-menu .ant-menu-title-content div h2 {
+    .pro-layout-open-menu .@{ant-prefix}-menu-title-content div h2 {
       color: var(--zaui-text, #343434);
     }
 
-    .pro-layout-open-menu .ant-menu-item:hover,
-    .pro-layout-open-menu .ant-menu-submenu-title:hover {
+    .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
+    .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover {
       background: transparent;
       position  : relative;
 
@@ -151,7 +154,7 @@
       }
     }
 
-    .pro-layout-open-menu .ant-menu-item-selected {
+    .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
       &::after {
         display: none;
       }

package/lib/ProSelect/index.less

@@ -1,3 +1,6 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-select-ellipse {
   display: block;
   width: 100%;

package/lib/ProStep/index.js

@@ -170,7 +170,7 @@ var ProStep = function ProStep(_ref) {
 
     observer.observe(targetElement, config);
   };
-  (0, _react.useEffect)(function () {
+  (0, _ahooks.useDeepCompareEffect)(function () {
     var errorModuleKeys = Object.keys(errorCollection).reverse();
     if (errorModuleKeys === null || errorModuleKeys === void 0 ? void 0 : errorModuleKeys.length) {
       var _dataSource$find;

package/lib/ProStep/style/index.less

@@ -1,3 +1,6 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-step-wrapper {
   padding-right: 48px;
 }

package/lib/ProTable/index.js

@@ -76,7 +76,10 @@ function ProTable(props) {
     tableProps = (0, _objectWithoutProperties2.default)(quickTableConfig, _excluded2);
   var _ref3 = tableProps || {},
     pagination = _ref3.pagination,
-    dataSource = _ref3.dataSource;
+    dataSource = _ref3.dataSource,
+    rowKey = _ref3.rowKey;
+  var originalObj = originalDataSource ? (0, _lodash.keyBy)(originalDataSource, rowKey) : undefined;
+  var dataSourceObj = dataSource ? (0, _lodash.keyBy)(dataSource, rowKey) : {};
   var propsColumnObj = (0, _react.useMemo)(function () {
     return propsColumns.reduce(function (acc, cur) {
       // @ts-ignore
@@ -167,7 +170,7 @@ function ProTable(props) {
       return !(item === null || item === void 0 ? void 0 : item.delete);
     });
     newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item) {
-      (0, _utils3.formatColumn)(item, originalDataSource);
+      (0, _utils3.formatColumn)(item, originalObj, dataSourceObj, rowKey);
     });
     return newColumns;
   }, [curColumns, handleResize]);
@@ -315,22 +318,27 @@ function ProTable(props) {
           columns: columns,
           locale: {
             emptyText: (0, _jsxRuntime.jsxs)("div", {
-              className: "ant-empty ant-empty-normal",
+              className: "pro-table-empty",
               children: [(0, _jsxRuntime.jsx)("div", {
-                className: "ant-empty-image",
+                className: "empty-image",
                 children: (0, _jsxRuntime.jsx)("img", {
                   src: _empty.default,
                   alt: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable5 = _locale.default.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.noData
                 })
               }), (0, _jsxRuntime.jsx)("div", {
-                className: "ant-empty-description",
+                className: "empty-description",
                 children: typeof emptyText === 'function' ? emptyText() : emptyText
               })]
             })
           },
           summary: (0, _typeof2.default)(summary) === 'object' ? function () {
             return renderSummary();
-          } : summary
+          } : summary,
+          rowClassName: function rowClassName(record, index) {
+            if (originalDataSource && !originalObj.hasOwnProperty((0, _lodash.get)(record, rowKey))) {
+              return 'new-cell';
+            }
+          }
         }, tableProps)), (0, _jsxRuntime.jsx)(_components.ResizableLine, {})]
       }), footerRender ? (0, _jsxRuntime.jsx)("div", {
         className: "pro-table-footer ".concat(pagination && !!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) ? 'has-page' : 'no-page'),