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

package/es/ProLayout/style/index.less

@@ -1,4 +1,3 @@
-
 @import '../../style/variables.less';
 @import '../components/Layout/index.less';
 @import '../components/ProCollapse/style/index.less';
@@ -10,7 +9,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: #F7F9FD;
+  background: #f7f9fd;
   position: relative;
 
   // 背景图层：固定在顶部，延伸到可视区域下方，z-index低于header和content让内容显示在背景之上
@@ -39,257 +38,254 @@
 
   // pro-collapse折叠调整
   .pro-collapse {
-      border-radius:  var(--zaui-border-radius, 8px);
-      &.@{ant-prefix}-collapse-borderless{
-        background: #fff;
+    border-radius: var(--zaui-border-radius, 8px);
+    &.@{ant-prefix}-collapse-borderless {
+      background: #fff;
+    }
+    &.pro-collapse-no-title {
+      .pro-collapse-content {
+        border-radius: var(--zaui-border-radius, 8px) !important;
+        padding: var(--zaui-space-size-md, 16px);
       }
-      &.pro-collapse-no-title{
-        .pro-collapse-content{
-          border-radius:  var(--zaui-border-radius, 8px) !important;
-          padding: var(--zaui-space-size-md, 16px);
-        }
-        .pro-header-no-describe{
-          padding: 0 !important;
-        }
+      .pro-header-no-describe {
+        padding: 0 !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-item-active {
+      &.pro-collapse-panel {
+        & > .@{ant-prefix}-collapse-header {
+          border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0 !important;
         }
       }
-    
-      .pro-collapse-content{
-        border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
-        padding: var(--zaui-space-size-md, 16px);
-       
-        .pro-form{
-          margin-bottom: 0;
-        }
+    }
+
+    .pro-collapse-content {
+      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
+      padding: var(--zaui-space-size-md, 16px);
+
+      .pro-form {
+        margin-bottom: 0;
       }
-      &.pro-collapse-level2{
-        .pro-collapse-panel  .@{ant-prefix}-collapse-header{
-          background: #fff;
-        }
-        .pro-collapse-content{
-          padding-bottom: var(--zaui-space-size-sm, 8px);
-        }
+    }
+    &.pro-collapse-level2 {
+      .pro-collapse-panel .@{ant-prefix}-collapse-header {
+        background: #fff;
       }
-      
-      .pro-collapse-panel{
-        .@{ant-prefix}-collapse-header{
-          border-radius: var(--zaui-border-radius, 8px) !important;
-          background: #E4F2FE;
-        }
-        .pro-collapse-level2-collapse{
-          .@{ant-prefix}-collapse-header{
-            border-radius: 0 !important;
-          }
-        }
-     
+      .pro-collapse-content {
+        padding-bottom: var(--zaui-space-size-sm, 8px);
       }
     }
 
-    // pro-header调整
-    .pro-header{
-      &.pro-header-no-describe{
-        padding: 10px var(--zaui-space-size-md, 16px) !important;
-        .pro-header-top{
-          padding-bottom: 0;
-        }
+    .pro-collapse-panel {
+      .@{ant-prefix}-collapse-header {
+        border-radius: var(--zaui-border-radius, 8px) !important;
+        background: #e4f2fe;
       }
-      &.pro-header-has-describe{
-        .pro-header-nav-open{
-          border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
+      .pro-collapse-level2-collapse {
+        .@{ant-prefix}-collapse-header {
+          border-radius: 0 !important;
         }
       }
-      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
     }
+  }
 
-
-    .pro-layout-menu-open,
-    .pro-layout-menu {
-      box-shadow: none;
+  // pro-header调整
+  .pro-header {
+    &.pro-header-no-describe {
+      padding: 10px var(--zaui-space-size-md, 16px) !important;
+      .pro-header-top {
+        padding-bottom: 0;
+      }
     }
-
-    .pro-layout-open-menu .@{ant-prefix}-menu-title-content div .pro-layout-icon {
-      position: relative;
-      z-index: 1;
-      color: var(--zaui-text, #343434);
+    &.pro-header-has-describe {
+      .pro-header-nav-open {
+        border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
+      }
     }
-    .pro-layout-menu-fold {
-      background: #F7F9FD;
+    border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
+  }
+
+  .pro-layout-menu-open,
+  .pro-layout-menu {
+    box-shadow: none;
+  }
+
+  .pro-layout-open-menu .@{ant-prefix}-menu-title-content div .pro-layout-icon {
+    position: relative;
+    z-index: 1;
+    color: var(--zaui-text, #343434);
+  }
+  .pro-layout-menu-fold {
+    background: #f7f9fd;
 
-      .pro-layout-menu-fold-list {
-        background: #F7F9FD;
-        border-right: none;
-        li {
+    .pro-layout-menu-fold-list {
+      background: #f7f9fd;
+      border-right: none;
+      li {
+        position: relative;
+        background: #f7f9fd;
+
+        & > div {
           position: relative;
-          background: #F7F9FD;
+          z-index: 1;
+        }
+
+        &.active {
+          background: transparent;
+          border-radius: var(--zaui-border-radius, 8px);
 
-          & > div {
-            position: relative;
-            z-index: 1;
+          div .pro-layout-icon {
+            color: #fff;
           }
 
-          &.active {
-            background: transparent;
+          &::before {
+            position: absolute;
+            top: 4px;
+            left: 5px;
+            width: calc(100% - 10px);
+            height: 38px;
+            background-color: var(--zaui-brand, #006aff);
             border-radius: var(--zaui-border-radius, 8px);
-
-            div .pro-layout-icon {
-              color: #fff;
-            }
-
-            &::before {
-              position: absolute;
-              top: 4px;
-              left: 5px;
-              width: calc(100% - 10px);
-              height: 38px;
-              background-color: var(--zaui-brand, #006aff);
-              border-radius: var(--zaui-border-radius, 8px);
-              opacity: 1 !important;
-              content: '';
-            }
+            opacity: 1 !important;
+            content: '';
           }
+        }
 
-          &:hover {
-            background: transparent;
-
-            &::before {
-              position: absolute;
-              top: 4px;
-              left: 5px;
-              width: calc(100% - 10px);
-              height: 38px;
-              background-color: var(--zaui-brand, #006aff);
-              border-radius: var(--zaui-border-radius, 8px);
-              opacity: 0.08;
-              content: '';
-            }
-          }
+        &:hover {
+          background: transparent;
 
-          div .pro-layout-icon {
-            color: var(--zaui-text, #343434);
+          &::before {
+            position: absolute;
+            top: 4px;
+            left: 5px;
+            width: calc(100% - 10px);
+            height: 38px;
+            background-color: var(--zaui-brand, #006aff);
+            border-radius: var(--zaui-border-radius, 8px);
+            opacity: 0.08;
+            content: '';
           }
         }
-      }
-    }
 
-    .pro-layout-menu-collapsed {
-      background: #F7F9FD;
-      border-right: none;
-      &:hover {
-        background: transparent !important;
-      }
-      &:hover::after {
-        position: absolute;
-        top: 5px;
-        left: 5px;
-        width: calc(100% - 10px);
-        height: 40px;
-        background-color: var(--zaui-brand, #006aff);
-        border-radius: var(--zaui-border-radius, 8px);
-        opacity: 0.08;
-        content: '';
-      }
-
-      &::before {
-        position: absolute;
-        top: 0;
-        left: var(--zaui-space-size-sm, 8px);
-        width: calc(100% - 16px);
-        height: 1px;
-        background: #dee0e3;
-        content: '';
+        div .pro-layout-icon {
+          color: var(--zaui-text, #343434);
+        }
       }
     }
+  }
 
-    .pro-layout-row {
-      .pro-layout-arrow {
-        border-color: var(--zaui-text, #343434);
-      }
+  .pro-layout-menu-collapsed {
+    background: #f7f9fd;
+    border-right: none;
+    &:hover {
+      background: transparent !important;
     }
-    .@{ant-prefix}-menu-root {
-      overflow-x: hidden !important;
-      border: none !important;
+    &:hover::after {
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      width: calc(100% - 10px);
+      height: 40px;
+      background-color: var(--zaui-brand, #006aff);
+      border-radius: var(--zaui-border-radius, 8px);
+      opacity: 0.08;
+      content: '';
     }
 
-    .anticon-caret-down {
-      color: #999 !important;
-      inset-inline-end: 8px;
+    &::before {
+      position: absolute;
+      top: 0;
+      left: var(--zaui-space-size-sm, 8px);
+      width: calc(100% - 16px);
+      height: 1px;
+      background: #dee0e3;
+      content: '';
     }
+  }
 
-    .pro-layout-row .pro-layout-menu {
-      background: #F7F9FD;
+  .pro-layout-row {
+    .pro-layout-arrow {
+      border-color: var(--zaui-text, #343434);
     }
+  }
+  .@{ant-prefix}-menu-root {
+    overflow-x: hidden !important;
+    border: none !important;
+  }
 
-    // 所有 Menu 相关的背景色统一为 #F7F9FD
-    .pro-layout-open-menu {
-      background: #F7F9FD;
-
-      .@{ant-prefix}-menu {
-        background: #F7F9FD;
-      }
+  .anticon-caret-down {
+    color: #999 !important;
+    inset-inline-end: 8px;
+  }
 
-      .@{ant-prefix}-menu-root {
-        background: #F7F9FD;
-      }
+  .pro-layout-row .pro-layout-menu {
+    background: #f7f9fd;
+  }
 
-      .@{ant-prefix}-menu-sub {
-        background: #F7F9FD !important;
-      }
+  // 所有 Menu 相关的背景色统一为 #F7F9FD
+  .pro-layout-open-menu {
+    background: #f7f9fd;
 
+    .@{ant-prefix}-menu {
+      background: #f7f9fd;
     }
 
-    .pro-layout-open-menu
-      .@{ant-prefix}-menu-root
-      > .@{ant-prefix}-menu-submenu
-      .@{ant-prefix}-menu-sub {
-      background: #F7F9FD;
+    .@{ant-prefix}-menu-root {
+      background: #f7f9fd;
     }
 
-    .pro-layout-open-menu .@{ant-prefix}-menu-title-content div h2 {
-      color: var(--zaui-text, #343434);
-      padding-right: 26px;
+    .@{ant-prefix}-menu-sub {
+      background: #f7f9fd !important;
     }
-    .@{ant-prefix}-menu-item-only-child{
-      .@{ant-prefix}-menu-title-content div h2{
-        padding-right: 16px;
-      }
+  }
+
+  .pro-layout-open-menu
+    .@{ant-prefix}-menu-root
+    > .@{ant-prefix}-menu-submenu
+    .@{ant-prefix}-menu-sub {
+    background: #f7f9fd;
+  }
+
+  .pro-layout-open-menu .@{ant-prefix}-menu-title-content div h2 {
+    color: var(--zaui-text, #343434);
+    padding-right: 26px;
+  }
+  .@{ant-prefix}-menu-item-only-child {
+    .@{ant-prefix}-menu-title-content div h2 {
+      padding-right: 16px;
     }
+  }
 
-    .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
-    .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover,
-    .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
-      position: relative;
-      background-color: transparent !important;
-
-      &:before {
-        position: absolute;
-        left: var(--zaui-space-size-sm, 8px);
-        width: calc(100% - 8px);
-        min-height: 38px;
-        height: 80%;
-        background-color: var(--zaui-brand, #006aff);
-        border-radius: var(--zaui-border-radius, 8px);
-        opacity: 0.08;
-        content: '';
-      }
+  .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
+  .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover,
+  .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
+    position: relative;
+    background-color: transparent !important;
+
+    &:before {
+      position: absolute;
+      left: var(--zaui-space-size-sm, 8px);
+      width: calc(100% - 8px);
+      min-height: 38px;
+      height: 80%;
+      background-color: var(--zaui-brand, #006aff);
+      border-radius: var(--zaui-border-radius, 8px);
+      opacity: 0.08;
+      content: '';
     }
+  }
 
-    .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
-      &::after {
-        display: none;
-      }
+  .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
+    &::after {
+      display: none;
+    }
 
-      background: transparent !important;
+    background: transparent !important;
 
-      h2 {
-        color: var(--zaui-brand, #006aff) !important;
-      }
+    h2 {
+      color: var(--zaui-brand, #006aff) !important;
     }
+  }
 
   /** 内容区 */
   .pro-layout-content {
@@ -301,7 +297,7 @@
     margin-bottom: 0;
     margin-left: 48px;
     padding: 0 var(--zaui-space-size-md, 16px);
-    background: #FFFFFF;
+    background: #ffffff;
     border-top: 1px solid rgb(235 236 238);
     border-right: 1px solid rgb(235 236 238);
     border-left: 1px solid rgb(235 236 238);

package/es/ProLayout/utils/index.d.ts

@@ -30,7 +30,7 @@ export declare function getUrlParams(name: string): string;
  * @param pathName  url地址
  * @param routerMatch  匹配模式id & url
  */
-export declare const getPathNameKey: ({ menus, pathName, }: {
+export declare const getPathNameKey: ({ menus, pathName }: {
     menus: any[];
     pathName: string;
 }) => any;

package/es/ProSelect/style/index.less

@@ -1,4 +1,3 @@
-
 .pro-select-ellipse {
   display: block;
   width: 100%;

package/es/ProSelect/utils/index.d.ts

@@ -1,4 +1,4 @@
 /**
  * 返回当前组件可以显示的数据源
  */
-export declare const getSelectList: ({ otherProps, value, dataSource, labelInValue, fieldNames, mode }: any) => any;
+export declare const getSelectList: ({ otherProps, value, dataSource, labelInValue, fieldNames, mode, }: any) => any;

package/es/ProStep/components/Item/index.js

@@ -1,7 +1,7 @@
 import _isBoolean from "lodash/isBoolean";
 // @ts-nocheck
 import { useEffect } from 'react';
-import LazyLoad, { forceCheck } from 'react-lazyload';
+import LazyLoad, { forceCheck } from "../LazyLoad";
 import { useStep } from "../../index";
 import ProCollapse from "../../../ProLayout/components/ProCollapse";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/ProStep/components/LazyLoad/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+export interface LazyLoadProps {
+    /** 占位高度，未进入视口时显示 */
+    height?: number;
+    /** 提前触发距离（px），等同于 rootMargin */
+    offset?: number;
+    /** 进入视口后只加载一次 */
+    once?: boolean;
+    /** CSS className 前缀 */
+    classNamePrefix?: string;
+    children: ReactNode;
+    [key: string]: any;
+}
+/** 强制所有懒加载组件立即显示内容（替代 react-lazyload 的 forceVisible） */
+export declare const forceVisible: () => void;
+/** 重新检查懒加载状态（替代 react-lazyload 的 forceCheck） */
+export declare const forceCheck: () => void;
+declare const LazyLoad: ({ height, offset, once, classNamePrefix, children, }: LazyLoadProps) => React.JSX.Element;
+export default LazyLoad;

package/es/ProStep/components/LazyLoad/index.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** 全局强制加载回调注册表 */
+const forceLoadCallbacks = new Set();
+
+/** 强制所有懒加载组件立即显示内容（替代 react-lazyload 的 forceVisible） */
+export const forceVisible = () => {
+  forceLoadCallbacks.forEach(cb => cb());
+};
+
+/** 重新检查懒加载状态（替代 react-lazyload 的 forceCheck） */
+export const forceCheck = () => {
+  forceVisible();
+};
+const LazyLoad = ({
+  height = 200,
+  offset = 100,
+  once = true,
+  classNamePrefix,
+  children
+}) => {
+  const [forceLoaded, setForceLoaded] = useState(false);
+  const {
+    ref,
+    inView
+  } = useInView({
+    rootMargin: `${offset}px`,
+    triggerOnce: once,
+    threshold: 0
+  });
+  useEffect(() => {
+    const cb = () => setForceLoaded(true);
+    forceLoadCallbacks.add(cb);
+    return () => {
+      forceLoadCallbacks.delete(cb);
+    };
+  }, []);
+  const visible = inView || forceLoaded;
+  if (!visible) {
+    return /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      style: {
+        height
+      },
+      className: classNamePrefix ? `${classNamePrefix}-lazy-placeholder` : undefined
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: classNamePrefix ? `${classNamePrefix}-lazy-wrapper` : undefined,
+    children: children
+  });
+};
+export default LazyLoad;

package/es/ProStep/components/Listener/index.js

@@ -1,6 +1,6 @@
 import _throttle from "lodash/throttle";
 import React from 'react';
-import { forceVisible } from 'react-lazyload';
+import { forceVisible } from "../LazyLoad";
 import { useStep } from "../../index";
 import { getLoadedMap } from "../../utils";
 /**

package/es/ProStep/index.d.ts

@@ -5,7 +5,7 @@ export declare const useStep: () => Partial<ProStepContextType>;
 declare const ProStep: {
     ({ children, ...resetProps }: ProStepType): JSX.Element;
     useStep: () => Partial<ProStepContextType>;
-    Item: ({ id, title, collapse: collapseItem, children, lazyLoad: stepLazyLoad, order, ...restProps }: import("./propsType").ProStepItemPropsType) => JSX.Element;
+    Item: ({ id, title, collapse: collapseItem, children, lazyLoad: stepLazyLoad, order, ...restProps }: import("./propsType").ProStepItemPropsType) => globalThis.JSX.Element;
     Listener: ({ children, delayTime, excludes, ...props }: import("./propsType").ListenerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 };
 export default ProStep;

package/es/ProStep/propsType.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, CSSProperties } from 'react';
-import { LazyLoadProps } from 'react-lazyload';
+import type { LazyLoadProps } from './components/LazyLoad';
 /**
  * 步骤项基础类型定义
  * @interface ItemType

package/es/ProStep/style/index.less

@@ -128,8 +128,6 @@
           background: var(--zaui-brand, #006aff);
           border-radius: 3px;
 
-          
-
           &.errored {
             width: 12px;
             height: 12px;
@@ -189,15 +187,15 @@
         align-items: center;
         justify-content: center;
 
-        .@{ant-prefix}-badge{
-          .@{ant-prefix}-badge-count{
-             background: rgba(255, 80, 80, 0.15);
-             color: #ff5050;
-             .@{ant-prefix}-scroll-number-only-unit, .@{ant-prefix}-scroll-number{
+        .@{ant-prefix}-badge {
+          .@{ant-prefix}-badge-count {
+            background: rgba(255, 80, 80, 0.15);
+            color: #ff5050;
+            .@{ant-prefix}-scroll-number-only-unit,
+            .@{ant-prefix}-scroll-number {
               font-weight: 600;
-             }
+            }
           }
-        
         }
 
         > span {

package/es/ProTable/components/RcTable/components/DraggableTable/components/DndWrapper/index.d.ts

@@ -5,7 +5,7 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     disabled?: boolean;
 }
 export declare const Row: FC<RowProps>;
-declare const DndWrapper: ({ draggable, value, onChange, disabled, children, rowKey, onDragStartGuard, onDragEndGuard }: {
+declare const DndWrapper: ({ draggable, value, onChange, disabled, children, rowKey, onDragStartGuard, onDragEndGuard, }: {
     draggable: any;
     value: any;
     onChange: any;

package/es/ProTable/propsType.d.ts

@@ -197,7 +197,7 @@ export interface ProTableColumnType extends Omit<ColumnType<any>, 'dataIndex'> {
      * @description 用于开启比对时，自定义 render 渲染初始值，触发条件必须写render
      * @default undefined
      */
-    viewRender?: ({ value, record, index, originValue, originRecord }: any) => 'same' | 'changed' | 'add' | undefined;
+    viewRender?: ({ value, record, index, originValue, originRecord, }: any) => 'same' | 'changed' | 'add' | undefined;
     /**
      * 是否已更改
      * @description 标记列值是否已变更