@zat-design/sisyphus-react 3.11.0 → 3.11.1

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

@@ -1,3 +1,3 @@
 import { ProStepItemPropsType } from '../../propsType';
-declare function ProStepItem({ id, title, collapse: collapseItem, children, lazyLoad, ...restProps }: ProStepItemPropsType): import("react/jsx-runtime").JSX.Element;
+declare const ProStepItem: ({ id, title, collapse: collapseItem, children, lazyLoad: stepLazyLoad, ...restProps }: ProStepItemPropsType) => import("react/jsx-runtime").JSX.Element;
 export default ProStepItem;

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

@@ -6,23 +6,28 @@ import { useEffect } from 'react';
 import LazyLoad from 'react-lazyload';
 import { isBoolean } from 'lodash';
 import { useStep } from '../../index';
+import { getLoadedMap } from '../../utils';
 import ProCollapse from '../../../ProLayout/components/ProCollapse';
 var defaultLazyLoadConfig = {
   height: 100,
   offset: 100,
   once: true // Load only once upon first entry into the viewport
 };
-function ProStepItem(_ref) {
+var ProStepItem = function ProStepItem(_ref) {
   var id = _ref.id,
     title = _ref.title,
     _ref$collapse = _ref.collapse,
     collapseItem = _ref$collapse === void 0 ? true : _ref$collapse,
     children = _ref.children,
-    lazyLoad = _ref.lazyLoad,
+    stepLazyLoad = _ref.lazyLoad,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useStep = useStep(),
     register = _useStep.register,
-    collapse = _useStep.collapse;
+    collapse = _useStep.collapse,
+    globalLazyLoad = _useStep.lazyLoad,
+    registerMap = _useStep.registerMap;
+  var lazyLoad = stepLazyLoad || globalLazyLoad;
+  var loadedMap = getLoadedMap(registerMap);
   useEffect(function () {
     // Schedule registration to avoid re-render issues
     var timeoutId = setTimeout(function () {
@@ -37,7 +42,9 @@ function ProStepItem(_ref) {
     };
   }, [id, title, lazyLoad, restProps, register]);
   var renderChildren = function renderChildren() {
-    if (lazyLoad) {
+    var _loadedMap$;
+    // 第一个step不设置lasyload，防止懒加载不生效
+    if (lazyLoad && (loadedMap === null || loadedMap === void 0 ? void 0 : loadedMap.length) && (loadedMap === null || loadedMap === void 0 ? void 0 : (_loadedMap$ = loadedMap[0]) === null || _loadedMap$ === void 0 ? void 0 : _loadedMap$.id) !== id) {
       var lazyLoadProps = isBoolean(lazyLoad) ? defaultLazyLoadConfig : lazyLoad;
       return _jsx(LazyLoad, _objectSpread(_objectSpread({}, lazyLoadProps), {}, {
         classNamePrefix: id,
@@ -65,5 +72,5 @@ function ProStepItem(_ref) {
     id: id,
     children: renderChildren()
   });
-}
+};
 export default ProStepItem;

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

@@ -1,11 +1,12 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "delayTime", "excludes"];
-import { throttle, pick } from 'lodash';
+import { throttle } from 'lodash';
 import React from 'react';
 import { useStep } from '../../index';
+import { getLoadedMap } from '../../utils';
 var checkErrorList = function checkErrorList(arr) {
   for (var i = 0; i < arr.length; i++) {
     if (arr[i].className.includes('errored')) {
@@ -26,17 +27,6 @@ var findFirstErrorDom = function findFirstErrorDom() {
   }
   return null;
 };
-var getLoadedMap = function getLoadedMap(registerMap) {
-  if (!(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current)) {
-    return undefined;
-  }
-  var stepList = Object.values(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current).map(function (item) {
-    return _objectSpread(_objectSpread({}, pick(item, ['id', 'order', 'title'])), {}, {
-      loaded: !document.querySelector(".".concat(item === null || item === void 0 ? void 0 : item.id, "-placeholder"))
-    });
-  });
-  return stepList;
-};
 // Function to check if all modules are loaded
 var areAllModulesLoaded = function areAllModulesLoaded(data) {
   return data.every(function (item) {

package/es/ProStep/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import Item from './components/Item';
 import { ProStepPropsType } from './propsType';
 import './style/index.less';
 export declare const ProStepContext: import("react").Context<any>;
@@ -7,7 +6,7 @@ export declare const useStep: () => any;
 declare const ProStep: {
     ({ children, ...resetProps }: ProStepPropsType): import("react/jsx-runtime").JSX.Element;
     useStep: () => any;
-    Item: typeof Item;
+    Item: ({ id, title, collapse: collapseItem, children, lazyLoad: stepLazyLoad, ...restProps }: import("./propsType").ProStepItemPropsType) => import("react/jsx-runtime").JSX.Element;
     Listener: ({ children, delayTime, excludes, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>;
 };
 export default ProStep;

package/es/ProStep/index.js

@@ -39,7 +39,9 @@ var ProStep = function ProStep(_ref) {
     _resetProps$collapse = resetProps.collapse,
     collapse = _resetProps$collapse === void 0 ? false : _resetProps$collapse,
     _resetProps$scrollToE = resetProps.scrollToError,
-    scrollToError = _resetProps$scrollToE === void 0 ? true : _resetProps$scrollToE;
+    scrollToError = _resetProps$scrollToE === void 0 ? true : _resetProps$scrollToE,
+    _resetProps$lazyLoad = resetProps.lazyLoad,
+    lazyLoad = _resetProps$lazyLoad === void 0 ? false : _resetProps$lazyLoad;
   var dataSource = useMemo(function () {
     var _Object$entries, _Object$entries$map;
     if (resetProps === null || resetProps === void 0 ? void 0 : resetProps.dataSource) {
@@ -233,7 +235,8 @@ var ProStep = function ProStep(_ref) {
       register: register,
       notify: notify,
       triggerTo: triggerTo,
-      handleScroll: handleScroll
+      handleScroll: handleScroll,
+      lazyLoad: lazyLoad
     },
     children: _jsxs("div", {
       className: "pro-step-wrapper",

package/es/ProStep/propsType.d.ts

@@ -5,6 +5,12 @@ export interface ItemType {
     code: string;
     order?: number;
 }
+export interface LoadedMapPropsType {
+    id: string;
+    order: number;
+    title: string;
+    loaded: boolean;
+}
 export interface ProStepPropsType {
     /** @name 步骤条配置项 */
     dataSource?: ItemType[];
@@ -22,6 +28,8 @@ export interface ProStepPropsType {
     collapse?: boolean;
     /** @name 是否滚动到第一个报错 */
     scrollToError?: boolean;
+    /** 模块可视区域懒加载 */
+    lazyLoad?: boolean | LazyLoadProps;
 }
 export interface ProStepItemPropsType {
     id: string;

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

@@ -1,2 +1,5 @@
+import type { LoadedMapPropsType } from '../propsType';
 export declare const handleScroll: (id: any, options: any) => void;
+/** 获取加载模块数据信息 */
+export declare const getLoadedMap: (registerMap: any) => LoadedMapPropsType[];
 export default handleScroll;

package/es/ProStep/utils/index.js

@@ -1,4 +1,5 @@
-import { debounce } from 'lodash';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { debounce, pick } from 'lodash';
 export var handleScroll = function handleScroll(id, options) {
   var _ref = options || {},
     _ref$targetOffset = _ref.targetOffset,
@@ -15,4 +16,16 @@ export var handleScroll = function handleScroll(id, options) {
     }, 100), 0);
   }
 };
+/** 获取加载模块数据信息 */
+export var getLoadedMap = function getLoadedMap(registerMap) {
+  if (!(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current)) {
+    return undefined;
+  }
+  var stepList = Object.values(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current).map(function (item) {
+    return _objectSpread(_objectSpread({}, pick(item, ['id', 'order', 'title'])), {}, {
+      loaded: !document.querySelector(".".concat(item === null || item === void 0 ? void 0 : item.id, "-placeholder"))
+    });
+  });
+  return stepList;
+};
 export default handleScroll;

package/lib/ProStep/components/Item/index.d.ts

@@ -1,3 +1,3 @@
 import { ProStepItemPropsType } from '../../propsType';
-declare function ProStepItem({ id, title, collapse: collapseItem, children, lazyLoad, ...restProps }: ProStepItemPropsType): import("react/jsx-runtime").JSX.Element;
+declare const ProStepItem: ({ id, title, collapse: collapseItem, children, lazyLoad: stepLazyLoad, ...restProps }: ProStepItemPropsType) => import("react/jsx-runtime").JSX.Element;
 export default ProStepItem;

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

@@ -12,6 +12,7 @@ var _react = require("react");
 var _reactLazyload = _interopRequireDefault(require("react-lazyload"));
 var _lodash = require("lodash");
 var _index = require("../../index");
+var _utils = require("../../utils");
 var _ProCollapse = _interopRequireDefault(require("../../../ProLayout/components/ProCollapse"));
 var _excluded = ["id", "title", "collapse", "children", "lazyLoad"];
 var defaultLazyLoadConfig = {
@@ -19,17 +20,21 @@ var defaultLazyLoadConfig = {
   offset: 100,
   once: true // Load only once upon first entry into the viewport
 };
-function ProStepItem(_ref) {
+var ProStepItem = function ProStepItem(_ref) {
   var id = _ref.id,
     title = _ref.title,
     _ref$collapse = _ref.collapse,
     collapseItem = _ref$collapse === void 0 ? true : _ref$collapse,
     children = _ref.children,
-    lazyLoad = _ref.lazyLoad,
+    stepLazyLoad = _ref.lazyLoad,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useStep = (0, _index.useStep)(),
     register = _useStep.register,
-    collapse = _useStep.collapse;
+    collapse = _useStep.collapse,
+    globalLazyLoad = _useStep.lazyLoad,
+    registerMap = _useStep.registerMap;
+  var lazyLoad = stepLazyLoad || globalLazyLoad;
+  var loadedMap = (0, _utils.getLoadedMap)(registerMap);
   (0, _react.useEffect)(function () {
     // Schedule registration to avoid re-render issues
     var timeoutId = setTimeout(function () {
@@ -44,7 +49,9 @@ function ProStepItem(_ref) {
     };
   }, [id, title, lazyLoad, restProps, register]);
   var renderChildren = function renderChildren() {
-    if (lazyLoad) {
+    var _loadedMap$;
+    // 第一个step不设置lasyload，防止懒加载不生效
+    if (lazyLoad && (loadedMap === null || loadedMap === void 0 ? void 0 : loadedMap.length) && (loadedMap === null || loadedMap === void 0 ? void 0 : (_loadedMap$ = loadedMap[0]) === null || _loadedMap$ === void 0 ? void 0 : _loadedMap$.id) !== id) {
       var lazyLoadProps = (0, _lodash.isBoolean)(lazyLoad) ? defaultLazyLoadConfig : lazyLoad;
       return (0, _jsxRuntime.jsx)(_reactLazyload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, lazyLoadProps), {}, {
         classNamePrefix: id,
@@ -72,5 +79,5 @@ function ProStepItem(_ref) {
     id: id,
     children: renderChildren()
   });
-}
+};
 var _default = exports.default = ProStepItem;

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

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _lodash = require("lodash");
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../../index");
+var _utils = require("../../utils");
 var _excluded = ["children", "delayTime", "excludes"];
 var checkErrorList = function checkErrorList(arr) {
   for (var i = 0; i < arr.length; i++) {
@@ -33,17 +34,6 @@ var findFirstErrorDom = function findFirstErrorDom() {
   }
   return null;
 };
-var getLoadedMap = function getLoadedMap(registerMap) {
-  if (!(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current)) {
-    return undefined;
-  }
-  var stepList = Object.values(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current).map(function (item) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodash.pick)(item, ['id', 'order', 'title'])), {}, {
-      loaded: !document.querySelector(".".concat(item === null || item === void 0 ? void 0 : item.id, "-placeholder"))
-    });
-  });
-  return stepList;
-};
 // Function to check if all modules are loaded
 var areAllModulesLoaded = function areAllModulesLoaded(data) {
   return data.every(function (item) {
@@ -71,7 +61,7 @@ var _default = exports.default = function _default(_ref) {
             });
           case 3:
             values = _context.sent;
-            loadedMap = getLoadedMap(registerMap);
+            loadedMap = (0, _utils.getLoadedMap)(registerMap);
             setTimeout(function () {
               var localData = localStorage.getItem('cache-pro-step');
               var _ref3 = findFirstErrorDom() || {},

package/lib/ProStep/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import Item from './components/Item';
 import { ProStepPropsType } from './propsType';
 import './style/index.less';
 export declare const ProStepContext: import("react").Context<any>;
@@ -7,7 +6,7 @@ export declare const useStep: () => any;
 declare const ProStep: {
     ({ children, ...resetProps }: ProStepPropsType): import("react/jsx-runtime").JSX.Element;
     useStep: () => any;
-    Item: typeof Item;
+    Item: ({ id, title, collapse: collapseItem, children, lazyLoad: stepLazyLoad, ...restProps }: import("./propsType").ProStepItemPropsType) => import("react/jsx-runtime").JSX.Element;
     Listener: ({ children, delayTime, excludes, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>;
 };
 export default ProStep;

package/lib/ProStep/index.js

@@ -46,7 +46,9 @@ var ProStep = function ProStep(_ref) {
     _resetProps$collapse = resetProps.collapse,
     collapse = _resetProps$collapse === void 0 ? false : _resetProps$collapse,
     _resetProps$scrollToE = resetProps.scrollToError,
-    scrollToError = _resetProps$scrollToE === void 0 ? true : _resetProps$scrollToE;
+    scrollToError = _resetProps$scrollToE === void 0 ? true : _resetProps$scrollToE,
+    _resetProps$lazyLoad = resetProps.lazyLoad,
+    lazyLoad = _resetProps$lazyLoad === void 0 ? false : _resetProps$lazyLoad;
   var dataSource = (0, _react.useMemo)(function () {
     var _Object$entries, _Object$entries$map;
     if (resetProps === null || resetProps === void 0 ? void 0 : resetProps.dataSource) {
@@ -240,7 +242,8 @@ var ProStep = function ProStep(_ref) {
       register: register,
       notify: notify,
       triggerTo: triggerTo,
-      handleScroll: _utils.handleScroll
+      handleScroll: _utils.handleScroll,
+      lazyLoad: lazyLoad
     },
     children: (0, _jsxRuntime.jsxs)("div", {
       className: "pro-step-wrapper",

package/lib/ProStep/propsType.d.ts

@@ -5,6 +5,12 @@ export interface ItemType {
     code: string;
     order?: number;
 }
+export interface LoadedMapPropsType {
+    id: string;
+    order: number;
+    title: string;
+    loaded: boolean;
+}
 export interface ProStepPropsType {
     /** @name 步骤条配置项 */
     dataSource?: ItemType[];
@@ -22,6 +28,8 @@ export interface ProStepPropsType {
     collapse?: boolean;
     /** @name 是否滚动到第一个报错 */
     scrollToError?: boolean;
+    /** 模块可视区域懒加载 */
+    lazyLoad?: boolean | LazyLoadProps;
 }
 export interface ProStepItemPropsType {
     id: string;

package/lib/ProStep/utils/index.d.ts

@@ -1,2 +1,5 @@
+import type { LoadedMapPropsType } from '../propsType';
 export declare const handleScroll: (id: any, options: any) => void;
+/** 获取加载模块数据信息 */
+export declare const getLoadedMap: (registerMap: any) => LoadedMapPropsType[];
 export default handleScroll;

package/lib/ProStep/utils/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleScroll = exports.default = void 0;
+exports.handleScroll = exports.getLoadedMap = exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _lodash = require("lodash");
 var handleScroll = exports.handleScroll = function handleScroll(id, options) {
   var _ref = options || {},
@@ -21,4 +23,16 @@ var handleScroll = exports.handleScroll = function handleScroll(id, options) {
     }, 100), 0);
   }
 };
+/** 获取加载模块数据信息 */
+var getLoadedMap = exports.getLoadedMap = function getLoadedMap(registerMap) {
+  if (!(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current)) {
+    return undefined;
+  }
+  var stepList = Object.values(registerMap === null || registerMap === void 0 ? void 0 : registerMap.current).map(function (item) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodash.pick)(item, ['id', 'order', 'title'])), {}, {
+      loaded: !document.querySelector(".".concat(item === null || item === void 0 ? void 0 : item.id, "-placeholder"))
+    });
+  });
+  return stepList;
+};
 var _default = exports.default = handleScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.11.0",
+  "version": "3.11.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",