@pisell/materials 6.8.2 → 6.8.4

package/es/components/DragSortList/index.d.ts

@@ -18,7 +18,7 @@ export interface Props<T> {
         attributes: DraggableAttributes;
     }) => React.ReactElement<HTMLElement>;
 }
-export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): React.JSX.Element;
+export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): JSX.Element;
 export interface SortableItemProps<T> {
     id: number;
     index: number;

package/es/components/MultipleContainersSortList/index.d.ts

@@ -22,5 +22,5 @@ interface DefaultRenderContainerProps {
     }) => React.ReactElement;
     children: any;
 }
-declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => React.JSX.Element;
+declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => JSX.Element;
 export default MultipleContainersSortList;

package/es/components/Pagination/index.d.ts

@@ -9,6 +9,6 @@ export declare const paginationConfig: {
     responsive: boolean;
     size: string;
 };
-declare const Pagination: (props: PaginationProps) => React.JSX.Element | null;
+declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export default Pagination;
-export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => React.JSX.Element;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => JSX.Element;

package/es/components/PisellBasicGrid/PisellBasicGrid.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import type { PisellBasicGridProps } from './types';
 import './PisellBasicGrid.less';
 /**
  * 使用 memo 优化组件性能
  * @description 当 props 没有变化时，避免不必要的重新渲染
  */
-declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => React.JSX.Element;
+declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => JSX.Element;
 export { MemoizedPisellBasicGrid as PisellBasicGrid };
 export default MemoizedPisellBasicGrid;

package/es/components/PisellCards/components/GraphicTextCard/GraphicTextCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { GraphicTextCardProps } from './types';
 import './GraphicTextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: GraphicTextCardProps) => React.JSX.Element;
+declare const Provider: (props: GraphicTextCardProps) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/MultilevelCard/MultilevelCard.d.ts

@@ -15,5 +15,5 @@ import './MultilevelCard.less';
  * ```
  */
 export declare const MultilevelCard: React.FC<MultilevelCardProps<any>>;
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/PisellImageCard/PisellImageCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { PisellImageCardProps } from './types';
 import './PisellImageCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: PisellImageCardProps) => React.JSX.Element;
+declare const Provider: (props: PisellImageCardProps) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/TabCard/TabCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import './TabCard.less';
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/TextCard/TextCard.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import './TextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 declare const PisellCards: {
-    TabCard: (props: any) => import("react").JSX.Element;
-    TextCard: (props: any) => import("react").JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => import("react").JSX.Element;
-    MultilevelCard: (props: any) => import("react").JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => import("react").JSX.Element;
+    TabCard: (props: any) => JSX.Element;
+    TextCard: (props: any) => JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
+    MultilevelCard: (props: any) => JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';

package/es/components/PisellProcedure/PisellProcedure.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PisellProcedureProps } from './types';
+import type { PisellProcedureProps, PisellProcedureRef } from './types';
 import './PisellProcedure.less';
 /**
  * PisellProcedure 流程容器组件
@@ -7,6 +7,16 @@ import './PisellProcedure.less';
  * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
  * @author Pisell Team
  * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
  */
-declare const PisellProcedure: React.FC<PisellProcedureProps>;
+declare const PisellProcedure: React.ForwardRefExoticComponent<PisellProcedureProps & React.RefAttributes<PisellProcedureRef>>;
 export default PisellProcedure;

package/es/components/PisellProcedure/PisellProcedure.js

@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
 import PisellLayout from "../pisellLayout";
 import { ProcedureHeader, ProcedureBody, ProcedureFooter } from "./components";
 import { useStepManager } from "./hooks";
@@ -22,8 +22,18 @@ import "./PisellProcedure.less";
  * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
  * @author Pisell Team
  * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
  */
-var PisellProcedure = function PisellProcedure(props) {
+var PisellProcedure = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     style = props.style,
     _props$mode = props.mode,
@@ -65,9 +75,9 @@ var PisellProcedure = function PisellProcedure(props) {
       onStepsChange: onStepsChange
     }),
     currentStep = _useStepManager.currentStep,
-    goPrev = _useStepManager.goPrev,
-    goNext = _useStepManager.goNext,
-    goToStep = _useStepManager.goToStep;
+    _goPrev = _useStepManager.goPrev,
+    _goNext = _useStepManager.goNext,
+    _goToStep = _useStepManager.goToStep;
 
   // 移动端弹窗状态
   var _useState = useState(false),
@@ -81,6 +91,44 @@ var PisellProcedure = function PisellProcedure(props) {
     return setSummaryModalOpen(false);
   }, []);
 
+  // 暴露组件方法给父组件
+  useImperativeHandle(ref, function () {
+    return {
+      /**
+       * 跳转到上一步
+       */
+      goPrev: function goPrev() {
+        return _goPrev();
+      },
+      /**
+       * 跳转到下一步
+       */
+      goNext: function goNext() {
+        return _goNext();
+      },
+      /**
+       * 跳转到指定步骤
+       */
+      goToStep: function goToStep(step) {
+        return _goToStep(step);
+      },
+      /**
+       * 获取当前步骤索引
+       */
+      getCurrentStep: function getCurrentStep() {
+        return currentStep;
+      },
+      /**
+       * 打开移动端总结弹窗
+       */
+      openSummaryModal: openSummaryModal,
+      /**
+       * 关闭移动端总结弹窗
+       */
+      closeSummaryModal: closeSummaryModal
+    };
+  }, [_goPrev, _goNext, _goToStep, currentStep, openSummaryModal, closeSummaryModal]);
+
   // 底部操作区位置模式（移动端强制使用 float-all 吸底悬浮，弹窗模式下不强制）
   var footerPosition = useMemo(function () {
     if (isMobile && mode !== 'modal') return 'float-all';
@@ -89,11 +137,28 @@ var PisellProcedure = function PisellProcedure(props) {
 
   // 容器类名
   var containerCls = useMemo(function () {
-    return mergeClassNames('pisell-procedure', className, modifierClassName('pisell-procedure', "footer-".concat(footerPosition)));
-  }, [className, footerPosition]);
+    return mergeClassNames('pisell-procedure', className,
+    // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+    mode === 'modal' && 'pisell-procedure--modal', modifierClassName('pisell-procedure', "footer-".concat(footerPosition)));
+  }, [className, mode, footerPosition]);
 
   // 判断底部是否全局显示
   var footerIsGlobal = isFooterGlobal(footerPosition);
+
+  // 获取容器宽度和高度（垂直布局下不需要）
+  // const containerSize = useElementSize({
+  //   selector: bodyProps?.sidebarContainerSelector || '',
+  //   enabled:
+  //     bodyProps?.direction !== 'vertical' &&
+  //     !!bodyProps?.sidebarContainerSelector,
+  // });
+
+  // // 使用自定义 Hook 计算响应式类名
+  // const responsiveClsComputed =
+  //   mode === 'modal' ? useResponsiveClass(containerSize?.width || 0) : '';
+
+  // if (!responsiveClsComputed && mode === 'modal') return null;
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: containerCls,
     style: style,
@@ -102,12 +167,12 @@ var PisellProcedure = function PisellProcedure(props) {
   }, other), /*#__PURE__*/React.createElement(PisellLayout, null, showHeader && /*#__PURE__*/React.createElement(ProcedureHeader, {
     headerProps: headerProps,
     currentStep: currentStep,
-    goPrev: goPrev,
+    goPrev: _goPrev,
     onClose: onClose,
     onFirstStepBack: onFirstStepBack,
     onBackConfirm: onBackConfirm,
     onCloseConfirm: onCloseConfirm,
-    goToStep: goToStep
+    goToStep: _goToStep
   }), /*#__PURE__*/React.createElement(ProcedureBody, {
     bodyProps: bodyProps,
     footerProps: footerProps,
@@ -117,9 +182,11 @@ var PisellProcedure = function PisellProcedure(props) {
     summaryModalOpen: summaryModalOpen,
     onOpenSummaryModal: openSummaryModal,
     onCloseSummaryModal: closeSummaryModal,
-    goPrev: goPrev,
-    goNext: goNext,
+    goPrev: _goPrev,
+    goNext: _goNext,
     mode: mode
+    // containerSize={containerSize}
+    // responsiveClsComputed={responsiveClsComputed}
   }), showFooter && footerIsGlobal && /*#__PURE__*/React.createElement(ProcedureFooter, {
     footerProps: footerProps,
     position: footerPosition,
@@ -128,10 +195,10 @@ var PisellProcedure = function PisellProcedure(props) {
     summaryModalOpen: summaryModalOpen,
     onOpenSummaryModal: openSummaryModal,
     onCloseSummaryModal: closeSummaryModal,
-    goPrev: goPrev,
-    goNext: goNext,
+    goPrev: _goPrev,
+    goNext: _goNext,
     mode: mode
   })));
-};
+});
 PisellProcedure.displayName = 'PisellProcedure';
 export default PisellProcedure;