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

package/es/ProDrawerForm/style/index.less

@@ -1,82 +1,86 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-drawer {
   .pro-drawer-close {
-    position       : absolute;
-    top            : 6px;
-    left           : -34px;
-    display        : flex;
-    align-items    : center;
+    position: absolute;
+    top: 6px;
+    left: -34px;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    width          : 32px;
-    height         : 38px;
-    color          : var(--zaui-global-bg, #fff);
-    cursor         : pointer;
+    width: 32px;
+    height: 38px;
+    color: var(--zaui-global-bg, #fff);
+    cursor: pointer;
 
     .close-icon {
-      position : relative;
-      left     : 2px;
-      z-index  : 1;
+      position: relative;
+      left: 2px;
+      z-index: 1;
       font-size: var(--zaui-font-size-lg, 16px);
       transform: translateZ(100px);
-      fill     : var(--zaui-aide-text, #909090);
+      fill: var(--zaui-aide-text, #909090);
 
       &:hover {
-        fill: var(--zaui-brand-active, #005AD9);
+        fill: var(--zaui-brand-active, #005ad9);
       }
 
-      >div {
+      > div {
         height: 20px;
       }
     }
   }
 
   .pro-drawer-close::after {
-    position        : absolute;
-    top             : 0;
-    right           : 0;
-    bottom          : 0;
-    left            : 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     background-color: var(--zaui-global-bg, #fff);
-    border-radius   : 4px 0px 0px 4px;
-    transform       : perspective(0.15em) rotateY(-2deg);
-    content         : '';
+    border-radius: 4px 0px 0px 4px;
+    transform: perspective(0.15em) rotateY(-2deg);
+    content: '';
   }
 
   .pro-drawer-title {
-    position        : absolute;
-    top             : 0;
-    left            : 0;
-    width           : 100%;
-    height          : 64px;
-    padding         : var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
-    color           : var(--zaui-text, #343434);
-    font-weight     : 600;
-    font-size       : var(--zaui-font-size-xxl, 20px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    padding: var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
+    color: var(--zaui-text, #343434);
+    font-weight: 600;
+    font-size: var(--zaui-font-size-xxl, 20px);
     background-color: var(--zaui-global-bg, #fff);
   }
 
   .pro-drawer-scrolling {
-    z-index   : 1;
+    z-index: 1;
     box-shadow: -12px 14px 14px -18px var(--zaui-shadow, rgba(56, 56, 56, 0.15));
   }
 
   .pro-drawer-content {
-    flex       : 1;
-    width      : 100%;
-    padding    : var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
+    flex: 1;
+    width: 100%;
+    padding: var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
     padding-top: 0;
-    overflow-x : hidden;
-    overflow-y : auto;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 
   .pro-drawer-footer {
-    position        : absolute;
-    bottom          : 0;
-    left            : 0;
-    z-index         : 101;
-    width           : 100%;
-    padding         : var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
+    position: absolute;
+    bottom: 0;
+    left: 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-color: var(--zaui-global-bg, #fff);
-    box-shadow      : 8px 2px 8px 0 var(--zaui-shadow, rgba(56, 56, 56, 0.15));
+    box-shadow: 8px 2px 8px 0 var(--zaui-shadow, rgba(56, 56, 56, 0.15));
 
     button {
       margin-right: var(--zaui-space-size-sm, 8px);
@@ -87,24 +91,24 @@
     }
   }
 
-  .ant-drawer-body {
-    height    : 100vh;
-    padding   : 0;
+  .@{ant-prefix}-drawer-body {
+    height: 100vh;
+    padding: 0;
     overflow-y: hidden;
   }
 
-  .ant-drawer-content {
+  .@{ant-prefix}-drawer-content {
     position: static;
   }
 
-  .ant-drawer-close {
+  .@{ant-prefix}-drawer-close {
     display: none;
   }
 }
 
 .pro-modal {
-  .ant-modal-close {
-    .ant-modal-close-x {
+  .@{ant-prefix}-modal-close {
+    .@{ant-prefix}-modal-close-x {
       .close-icon {
         fill: var(--zaui-aide-text, #909090);
 
@@ -115,40 +119,39 @@
     }
   }
 
-  .ant-modal-header {
-    padding      : var(--zaui-space-size-md, 16px);
+  .@{ant-prefix}-modal-header {
+    padding: var(--zaui-space-size-md, 16px);
     border-bottom: none;
 
-    .ant-modal-title {
+    .@{ant-prefix}-modal-title {
       font-weight: 600;
     }
   }
 
-  .ant-modal-footer {
-    padding   : var(--zaui-space-size-md, 16px);
+  .@{ant-prefix}-modal-footer {
+    padding: var(--zaui-space-size-md, 16px);
     border-top: none;
 
     .pro-modal-footer {
-      display        : flex;
+      display: flex;
       justify-content: space-between;
     }
   }
 
-  .ant-modal-content {
-    .ant-modal-body {
-      max-height : 450px;
-      padding    : 0 var(--zaui-space-size-md, 16px);
+  .@{ant-prefix}-modal-content {
+    .@{ant-prefix}-modal-body {
+      max-height: 450px;
+      padding: 0 var(--zaui-space-size-md, 16px);
       padding-top: 0;
-      overflow   : auto;
+      overflow: auto;
     }
   }
-
 }
 
 .pro-modal-no-footer {
-  .ant-modal-content {
-    .ant-modal-body {
-      padding-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1))
+  .@{ant-prefix}-modal-content {
+    .@{ant-prefix}-modal-body {
+      padding-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
     }
   }
 }
@@ -156,17 +159,17 @@
 .pro-modal-scrolling {
   z-index: 1;
 
-  .ant-modal-header {
+  .@{ant-prefix}-modal-header {
+    position: relative;
+    z-index: 1;
     box-shadow: -12px 14px 14px -18px var(--zaui-shadow, rgba(56, 56, 56, 0.15));
-    position  : relative;
-    z-index   : 1;
   }
 }
 
 .pro-modal-footer-shadow {
-  .ant-modal-footer {
-    position  : relative;
-    z-index   : 1;
+  .@{ant-prefix}-modal-footer {
+    position: relative;
+    z-index: 1;
     box-shadow: 3px 2px 12px 0px var(--zaui-shadow, rgba(56, 56, 56, 0.15));
   }
 }

package/es/ProEditLabel/style/index.less

@@ -1,8 +1,11 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-edit-label {
   display: inline-block;
 
   .pro-form-view {
-    .ant-row {
+    .@{ant-prefix}-row {
       display: block;
     }
   }
@@ -54,8 +57,8 @@
 
 }
 
-.ant-popover {
-  .ant-btn-sm {
+.@{ant-prefix}-popover {
+  .@{ant-prefix}-btn-sm {
     font-size  : var(--zaui-font-size-sm, 12px);
     min-width  : 56px;
     line-height: 1;
@@ -70,15 +73,15 @@
 .pro-edit-label-popconfirm {
   z-index: 1001 !important;
 
-  .ant-popover-message {
+  .@{ant-prefix}-popover-message {
     display: block;
   }
 
-  .ant-popover-message-title {
+  .@{ant-prefix}-popover-message-title {
     padding-left: 0;
   }
 
-  .ant-popover-content {
+  .@{ant-prefix}-popover-content {
     width    : 360px;
     max-width: 400px;
   }
@@ -109,13 +112,13 @@
       width: 100%;
 
       &.pro-form-no-label {
-        .ant-form-item-label {
+        .@{ant-prefix}-form-item-label {
           display: none;
         }
       }
     }
 
-    .ant-col-10 {
+    .@{ant-prefix}-col-10 {
       flex         : 0 0 var(--zaui-form-label-width, 130px);
       text-align   : var(--zaui-form-align, left);
       white-space  : pre-wrap;
@@ -127,7 +130,7 @@
 
   }
 
-  .ant-select {
+  .@{ant-prefix}-select {
     width: 100%;
   }
 

package/es/ProEditTable/components/RenderField/index.js

@@ -506,7 +506,7 @@ var RenderField = function RenderField(_ref) {
     delete _formItemProps.rules;
   }
   var _className = classNames((_classNames = {}, _defineProperty(_classNames, className, className), _defineProperty(_classNames, 'pro-form-item-changed', changed), _classNames));
-  var originalTitle = _jsxs(_Space, {
+  var originalTitle = originalTip ? _jsxs(_Space, {
     children: ["\u521D\u59CB\u503C\uFF1A", /*#__PURE__*/React.isValidElement(TargetComponent) ? /*#__PURE__*/React.cloneElement(TargetComponent, _objectSpread(_objectSpread({}, omit(componentProps, ['onFieldChange'])), {}, {
       isView: true,
       value: originalValue,
@@ -516,14 +516,16 @@ var RenderField = function RenderField(_ref) {
       value: originalValue,
       checked: type === 'Switch' ? originalValue : undefined
     }))]
-  });
-  var FormItem = _jsx(_Form.Item, _objectSpread(_objectSpread({
+  }) : null;
+  var FormItem = TargetComponent ? _jsx(_Form.Item, _objectSpread(_objectSpread({
     validateFirst: true
   }, omit(_formItemProps, ['render', 'cache', 'key', 'width', 'hiddenNames', 'name'])), {}, {
     className: _className,
     name: cellName,
     children: /*#__PURE__*/React.isValidElement(TargetComponent) ? /*#__PURE__*/React.cloneElement(TargetComponent, _objectSpread({}, omit(componentProps, ['onFieldChange']))) : _jsx(TargetComponent, _objectSpread({}, omit(componentProps, ['onFieldChange'])))
-  }));
+  })) : _jsx(Container, {
+    viewEmpty: viewEmpty
+  });
   return _jsx(FieldProvider, {
     value: componentProps === null || componentProps === void 0 ? void 0 : componentProps.otherProps,
     children: !originalTip || ['FormList', 'ProEditTable'].includes(type) ? FormItem : _jsx(_Tooltip, {

package/es/ProEditTable/index.js

@@ -1,18 +1,18 @@
 import "antd/es/table/style";
 import _Table from "antd/es/table";
-import "antd/es/config-provider/style";
-import _ConfigProvider from "antd/es/config-provider";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "onChange", "className", "columns", "type", "mode", "stripe", "draggable", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "otherProps", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalTip"];
+var _excluded = ["value", "onChange", "className", "columns", "type", "mode", "stripe", "draggable", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "otherProps", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalTip", "rowKey"];
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { isArray } from 'lodash';
 import { useDebounceEffect, useSetState } from 'ahooks';
 import classnames from 'classnames';
@@ -50,6 +50,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     pagination = _ref.pagination,
     originalValues = _ref.originalValues,
     originalTip = _ref.originalTip,
+    rowKey = _ref.rowKey,
     resetProps = _objectWithoutProperties(_ref, _excluded);
   // 上下文form
   var contentForm = _Form.useFormInstance();
@@ -60,6 +61,9 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     _otherProps$viewEmpty = otherProps.viewEmpty,
     viewEmpty = _otherProps$viewEmpty === void 0 ? '-' : _otherProps$viewEmpty;
   var tableRef = useRef(null);
+  var _React$useContext = React.useContext(_ConfigProvider.ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls;
+  var prefixCls = getPrefixCls();
   disabled = (otherProps === null || otherProps === void 0 ? void 0 : otherProps.disabled) || disabled;
   var _useSetState = useSetState({
       _columns: columns,
@@ -94,21 +98,14 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     'pro-table-no-stripe': !stripe,
     className: className
   });
-  // 编辑行设置下样式
-  var _rowClassName = function _rowClassName(record) {
-    return !virtualKey || editingKeys.includes(record.rowKey) ? 'is-editing' : '';
-  };
-  // 复选框
-  var _rowSelection = _objectSpread({
-    fixed: true,
-    selectedRowKeys: selectedRowKeys,
-    onChange: function onChange(selectedRowKeys, selectedRows) {
-      setState({
-        selectedRowKeys: selectedRowKeys,
-        selectedRows: selectedRows
-      });
+  var getRowKey = function getRowKey(record) {
+    var key = record.rowKey || getRandom();
+    if (rowKey) {
+      var _ref2;
+      key = (_ref2 = typeof rowKey === 'function' ? rowKey(record) : record[rowKey]) !== null && _ref2 !== void 0 ? _ref2 : key;
     }
-  }, rowSelection);
+    return key;
+  };
   var config = {
     form: form,
     mode: mode,
@@ -138,8 +135,26 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     tableLength: value === null || value === void 0 ? void 0 : value.length,
     page: page,
     originalValues: originalValues,
-    originalTip: originalTip
+    originalTip: originalTip,
+    prefixCls: prefixCls
+  };
+  // 编辑行设置下样式
+  var _rowClassName = function _rowClassName(record) {
+    var isEdit = !virtualKey || editingKeys.includes(record.rowKey);
+    var className = isEdit ? 'is-editing' : '';
+    return className;
   };
+  // 复选框
+  var _rowSelection = _objectSpread({
+    fixed: true,
+    selectedRowKeys: selectedRowKeys,
+    onChange: function onChange(selectedRowKeys, selectedRows) {
+      setState({
+        selectedRowKeys: selectedRowKeys,
+        selectedRows: selectedRows
+      });
+    }
+  }, rowSelection);
   // 判断是否禁止添加、批量删除
   var isForbiddenBtn = useCallback(function (type) {
     // 当工具栏不渲染时，都不渲染
@@ -198,7 +213,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     return isForbiddenBtn('mulDelete') ? rowSelection : _rowSelection;
   };
   var setColumns = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var nextColumns;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -217,7 +232,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
       }, _callee);
     }));
     return function setColumns() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   useDebounceEffect(function () {
@@ -233,7 +248,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     if ((value === null || value === void 0 ? void 0 : value.length) && !(value === null || value === void 0 ? void 0 : (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.rowKey)) {
       var nextValues = value === null || value === void 0 ? void 0 : value.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
-          rowKey: getRandom()
+          rowKey: getRowKey(item)
         });
       });
       onChange(nextValues);