@zat-design/sisyphus-react 4.6.1-beta.3 → 4.6.1-beta.5

package/es/ProDrawerForm/index.js

@@ -1,10 +1,50 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useImperativeHandle, useMemo } from "react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo
+} from "react";
 import { ProDrawer, ProModal } from "./components";
 import ProForm from "../ProForm";
 import { resolveDrawerSize } from "./utils";
 import locale from "../locale";
 const ProDrawerFormContext = createContext(null);
+const scrollLockClassName = "pro-drawer-form-scroll-lock";
+let openDrawerCount = 0;
+let lockedScrollLeft = 0;
+let lockedScrollTop = 0;
+const lockRootScroll = () => {
+  if (typeof document === "undefined") {
+    return void 0;
+  }
+  if (openDrawerCount === 0) {
+    const scrollingElement = document.scrollingElement ?? document.documentElement;
+    lockedScrollLeft = scrollingElement.scrollLeft;
+    lockedScrollTop = scrollingElement.scrollTop;
+    document.body.style.setProperty("--pro-drawer-form-scroll-top", `-${lockedScrollTop}px`);
+    document.body.style.setProperty("--pro-drawer-form-scroll-left", `-${lockedScrollLeft}px`);
+    document.documentElement.classList.add(scrollLockClassName);
+    document.body.classList.add(scrollLockClassName);
+  }
+  openDrawerCount += 1;
+  return () => {
+    openDrawerCount = Math.max(0, openDrawerCount - 1);
+    if (openDrawerCount === 0) {
+      document.documentElement.classList.remove(scrollLockClassName);
+      document.body.classList.remove(scrollLockClassName);
+      document.body.style.removeProperty("--pro-drawer-form-scroll-top");
+      document.body.style.removeProperty("--pro-drawer-form-scroll-left");
+      if (lockedScrollLeft !== 0 || lockedScrollTop !== 0) {
+        window.scrollTo(lockedScrollLeft, lockedScrollTop);
+      }
+      lockedScrollLeft = 0;
+      lockedScrollTop = 0;
+    }
+  };
+};
 const useProDrawerFormContext = () => useContext(ProDrawerFormContext);
 const ProDrawerForm = forwardRef((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
@@ -27,6 +67,12 @@ const ProDrawerForm = forwardRef((props, ref) => {
   } = props;
   const nextIsView = isView || disabled;
   const nextOkText = okText ?? (mode === "Drawer" ? (_d = (_c = locale) == null ? void 0 : _c.ProDrawerForm) == null ? void 0 : _d.save : (_f = (_e = locale) == null ? void 0 : _e.ProDrawerForm) == null ? void 0 : _f.confirm);
+  useEffect(() => {
+    if (!open || mode !== "Drawer") {
+      return void 0;
+    }
+    return lockRootScroll();
+  }, [mode, open]);
   const { width: deprecatedWidth, ...restPropsWithoutWidth } = restProps;
   const width = resolveDrawerSize(size, deprecatedWidth);
   const [form] = ProForm.useForm(originalForm);

package/es/ProDrawerForm/style/index.less

@@ -1,5 +1,17 @@
 @import '../../style/variables.less';
 
+html.pro-drawer-form-scroll-lock {
+  overflow: hidden !important;
+}
+
+body.pro-drawer-form-scroll-lock {
+  position: fixed !important;
+  top: var(--pro-drawer-form-scroll-top, 0);
+  left: var(--pro-drawer-form-scroll-left, 0);
+  width: 100%;
+  overflow: hidden !important;
+}
+
 .pro-drawer {
   .original-value-tooltip {
     position: fixed;

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

@@ -138,7 +138,8 @@ const RenderField = ({ text: value, record, index, column, config }) => {
     lastFieldProps = dynamicProps.fieldProps ?? fieldProps(rowData, reactiveParams);
   }
   if (isFunction(rules)) {
-    lastRules = dynamicProps.rules ?? rules(rowData, reactiveParams);
+    const canReuseDynamicRules = isRecordShallowEqual(dynamicProps.rowSnapshot, rowData);
+    lastRules = canReuseDynamicRules ? dynamicProps.rules ?? rules(rowData, reactiveParams) : rules(rowData, reactiveParams);
   }
   if (isFunction(valueType)) {
     lastValueType = dynamicProps.valueType ?? valueType(currentValue, rowData, {

package/es/ProEditTable/utils/useShouldUpdateForTable.js

@@ -43,8 +43,9 @@ const useShouldUpdateForTable = (props) => {
     }
     if (isFunction(column.rules)) {
       const newRules = column.rules(values, reactiveParams);
-      if (!isEqualWith(rulesRef.current, newRules, customEqualForFunction)) {
-        rulesRef.current = newRules;
+      const rulesChanged = !isEqualWith(rulesRef.current, newRules, customEqualForFunction);
+      rulesRef.current = newRules;
+      if (rulesChanged) {
         hasChange = true;
       }
     } else {

package/es/ProForm/components/combination/FormList/components/LineFields.js

@@ -30,7 +30,8 @@ const LineFields = (props) => {
     className,
     id,
     diffConfig,
-    hideStartEndActionProps
+    hideStartEndActionProps,
+    actionAlign
   } = props;
   const isLess = mode === "less";
   const {
@@ -48,6 +49,7 @@ const LineFields = (props) => {
   const classnames = classNames({
     "pro-form-list": true,
     "pro-form-list-line": mode === "line",
+    [`pro-form-list-action-${actionAlign}`]: !!actionAlign,
     [className]: !!className
   });
   const style = {
@@ -66,7 +68,7 @@ const LineFields = (props) => {
         children: /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 20, color: "#949599" })
       }
     ),
-    /* @__PURE__ */ jsx(Row, { gutter: isLess ? 0 : 24, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Row, { className: "pro-form-list-fields", gutter: isLess ? 0 : 24, children: /* @__PURE__ */ jsx(
       MemoRenderFields,
       {
         columns,

package/es/ProForm/components/combination/FormList/propsType.d.ts

@@ -62,6 +62,7 @@ export interface FormListType {
     emptyBtnText?: string;
     hideStartEndActionProps?: [boolean, boolean];
     titlePosition?: 'top' | 'left';
+    actionAlign?: 'top' | 'center' | 'bottom';
     className?: string;
 }
 export type TypeWithRef = FormListType & React.RefAttributes<FormListRefType>;

package/es/ProForm/components/combination/FormList/style/index.less

@@ -52,6 +52,11 @@
     padding-right: @zaui-space-size-sm;
     border: none;
   }
+
+  > .pro-form-list-fields {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 .pro-form-list-line {
@@ -63,6 +68,18 @@
   }
 }
 
+.pro-form-list-action-top > .pro-form-list-action {
+  align-self: flex-start;
+}
+
+.pro-form-list-action-center > .pro-form-list-action {
+  align-self: center;
+}
+
+.pro-form-list-action-bottom > .pro-form-list-action {
+  align-self: flex-end;
+}
+
 .pro-form-list-toolbar,
 .pro-form-list-action {
   .@{ant-prefix}-btn-link {

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

@@ -36,6 +36,14 @@
     border-radius: 8px !important;
   }
 
+  .@{ant-prefix}-collapse-item-active {
+    &.pro-collapse-panel {
+      & > .@{ant-prefix}-collapse-header {
+        border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0 !important;
+      }
+    }
+  }
+
   .@{ant-prefix}-collapse-title {
     color: var(--zaui-text, #343434);
     font-weight: 500;
@@ -62,6 +70,7 @@
       padding-bottom: 0;
       background: var(--zaui-base-bg, #ffffff);
       border: 1px solid #ebecee;
+      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.6.1-beta.3",
+  "version": "4.6.1-beta.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public",