@zat-design/sisyphus-react 4.3.3 → 4.3.4-beta.2

package/es/ProEditTable/components/RcTable/DraggableTable.js

@@ -61,7 +61,6 @@ const Row = props => {
               component: dragSvg,
               size: 20,
               color: "#949599",
-              buttonIcon: false,
               style: {
                 touchAction: 'none',
                 cursor: disabled ? 'no-drop' : 'move'

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

@@ -41,12 +41,10 @@ const getDefaultActions = mode => {
       icon: mode === 'less' ? /*#__PURE__*/_jsx(ProIcon, {
         component: close2Svg,
         size: 14,
-        className: "single-delete",
-        buttonIcon: false
+        className: "single-delete"
       }) : /*#__PURE__*/_jsx(ProIcon, {
         component: deleteSvg,
-        size: 18,
-        buttonIcon: false
+        size: 18
       })
     },
     copy: {

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

@@ -68,8 +68,7 @@ const LineFields = props => {
       children: /*#__PURE__*/_jsx(ProIcon, {
         component: dragSvg,
         size: 20,
-        color: "#949599",
-        buttonIcon: false
+        color: "#949599"
       })
     }), /*#__PURE__*/_jsx(Row, {
       gutter: isLess ? 0 : 24,

package/es/ProForm/components/combination/Group/utils/index.d.ts

@@ -75,31 +75,32 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     confirm?: boolean | import("antd").ModalFuncProps | import("../../../render/propsType").FunctionArgs<any, boolean | import("antd").ModalFuncProps>;
     show?: boolean | ReactiveFunction<any, boolean>;
     component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
-    onReset?: () => void;
+    trigger?: string;
+    style?: React.CSSProperties;
+    hidden?: boolean;
+    layout?: import("antd/es/form/Form").FormItemLayout;
+    help?: React.ReactNode;
+    vertical?: boolean;
+    preserve?: boolean;
+    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
+    isView?: boolean;
     trim?: boolean;
     normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
-    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
     className?: string;
     status?: "" | "warning" | "error" | "success" | "validating";
-    hidden?: boolean;
-    id?: string;
-    style?: React.CSSProperties;
-    htmlFor?: string;
     prefixCls?: string;
-    trigger?: string;
-    isView?: boolean;
     rootClassName?: string;
+    id?: string;
+    onReset?: () => void;
     getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
-    vertical?: boolean;
     desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
     validateTrigger?: string | false | string[];
-    preserve?: boolean;
     clearNotShow?: boolean;
     labelAlign?: import("antd/es/form/interface").FormLabelAlign;
     colon?: boolean;
-    layout?: import("antd/es/form/Form").FormItemLayout;
     labelCol?: import("antd").ColProps;
     wrapperCol?: import("antd").ColProps;
+    htmlFor?: string;
     getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
     shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
     validateDebounce?: number;
@@ -114,7 +115,6 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
         icons: import("antd/es/form/FormItem").FeedbackIcons;
     };
     validateStatus?: "" | "warning" | "error" | "success" | "validating";
-    help?: React.ReactNode;
     fieldId?: string;
     valueType?: import("../../../render/propsType").ProFormValueType;
     switchValue?: [any, any];

package/es/ProIcon/index.js

@@ -1,16 +1,16 @@
 import _uniqBy from "lodash/uniqBy";
-import { useLocalStorageState, useSetState, useDeepCompareLayoutEffect } from 'ahooks';
-import { Button, Tooltip, Space } from 'antd';
+import { useLocalStorageState } from 'ahooks';
+import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { ReactSVG } from 'react-svg';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useProConfig } from "../ProConfigProvider";
 import { iconMap } from "./config";
 import { onBeforeInjection } from "./utils";
 import locale from "../locale";
 
 // 提取主题色相关辅助函数
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const extractThemeColor = target => {
   if (!target) return null;
   const styleAttr = Object.values(target.attributes ?? {})
@@ -85,14 +85,8 @@ const ProIcon = props => {
     src,
     actionMap,
     tooltip,
-    buttonIcon = true,
     ...reset
   } = _config;
-  const [{
-    IconInstance
-  }, setState] = useSetState({
-    IconInstance: /*#__PURE__*/_jsx(_Fragment, {})
-  });
 
   // 主题色 primaryColor 用于单应用或处于组件库文档内 qiankunPrimaryColor用于主子应用
   const {
@@ -119,26 +113,23 @@ const ProIcon = props => {
   const proIconClassNames = classNames(className, {
     'pro-icon': !disabled,
     'pro-icon-spin': !!spin,
-    'pro-icon-with-theme': theme,
-    'pro-icon-btn': disabled
+    'pro-icon-with-theme': theme
   });
-  let _mode = mode || 'icon';
-
-  // 观察者实例
-  let observer;
 
   // 特殊情况，如果指定了type，并且没有接收到组件内的mode，那模式就是icon
+  let _mode = mode || 'icon';
   if (type && !props.mode) {
     _mode = 'icon';
   }
-  const targetTextFill = `text-${language}`; // text-cn text-en
-
   const isIconMode = _mode === 'icon';
-  const isExtendButtonMode = !isIconMode || isIconMode && disabled;
+
+  // 观察者实例（主题色同步用）
+  const observerRef = useRef(null);
+  const targetTextFill = `text-${language}`; // text-cn text-en
   const mergedMapList = _uniqBy(mapList.concat(iconMap), targetTextFill);
   let _type = type;
   let _text = children;
-  // svg图标对应文本
+  // svg 图标对应文本
   let iconText = tooltip || '';
 
   // 文本和类型映射处理函数
@@ -171,6 +162,9 @@ const ProIcon = props => {
       _text = mappingResult.text;
     }
   }
+
+  // disabled 时，icon 模式下拦截 onClick，仅保留视觉降级
+  const effectiveOnClick = disabled ? undefined : onClick;
   const svgProps = {
     className: proIconClassNames,
     fill: 'currentColor',
@@ -241,28 +235,26 @@ const ProIcon = props => {
   };
 
   // 渲染自定义组件 icon
-  const renderComponentIcon = (component, svgProps, color, onClick) => {
+  // 注意：icon 本身不绑定 onClick，点击由外层容器（span 或 Button）统一处理，避免重复触发
+  const renderComponentIcon = (component, svgProps, color) => {
     const componentProps = {
       ...svgProps,
       style: {
         color,
         ...svgProps?.style
       },
-      onClick,
       'aria-hidden': 'true'
     };
     return /*#__PURE__*/React.isValidElement(component) ? /*#__PURE__*/React.cloneElement(component, componentProps) : /*#__PURE__*/React.createElement(component, componentProps);
   };
 
   // 渲染 icon 的优先级：component > src > type
+  // 所有分支都不绑定 onClick，交由外层容器处理，避免 svg + span 双重触发
   const renderIcon = () => {
     // component 字符串类型：当作 SVG 文件路径处理
     if (component && typeof component === 'string') {
       return /*#__PURE__*/_jsx(ReactSVG, {
-        className: proIconClassNames
-        // @ts-ignore
-        ,
-        onClick: onClick,
+        className: proIconClassNames,
         src: component,
         beforeInjection: createSvgBeforeInjection(true)
       });
@@ -270,15 +262,13 @@ const ProIcon = props => {
 
     // component 组件类型或实例（排除字符串类型）
     if (component && typeof component !== 'string') {
-      return renderComponentIcon(component, svgProps, color, onClick);
+      return renderComponentIcon(component, svgProps, color);
     }
 
     // src 类型：使用 ReactSVG 加载外部 SVG
     if (src) {
       return /*#__PURE__*/_jsx(ReactSVG, {
         ...svgProps,
-        // @ts-ignore
-        onClick: onClick,
         "aria-hidden": "true",
         src: src,
         beforeInjection: createSvgBeforeInjection()
@@ -292,7 +282,6 @@ const ProIcon = props => {
         color,
         ...svgProps?.style
       },
-      onClick: onClick,
       "aria-hidden": "true",
       children: /*#__PURE__*/_jsx("use", {
         xlinkHref: `#icon-${_type}`
@@ -300,42 +289,13 @@ const ProIcon = props => {
     });
   };
   const icon = renderIcon();
-
-  // 判断 RenderIcon 是否会被外层 Button 包裹
-  // 如果会被包裹（isExtendButtonMode && isIconMode），则内部不使用 Button，避免 button 嵌套
-  const willBeWrappedByButton = isExtendButtonMode && isIconMode;
-  const RenderIcon = /*#__PURE__*/_jsx("span", {
-    className: "anticon",
-    ...reset,
-    children: /*#__PURE__*/_jsx(Tooltip, {
-      title: iconText,
-      children: buttonIcon && !willBeWrappedByButton ? /*#__PURE__*/_jsx(Button, {
-        className: "pro-icon-btn-inner",
-        style: {
-          width: size,
-          height: size
-        },
-        type: "text",
-        icon: icon,
-        ...buttonProps
-      }) : /*#__PURE__*/_jsx(Space, {
-        children: /*#__PURE__*/_jsx("span", {
-          className: "pro-icon-wrapper",
-          style: {
-            width: size,
-            height: size
-          },
-          children: icon
-        })
-      })
-    })
-  });
   useEffect(() => {
     // 处于主子应用情况下才会执行下方逻辑，主题色的变更以主框架的为准
     if (!actionMap || !isQiankun) return;
-    observer = new MutationObserver(mutationsList => {
+    const observer = new MutationObserver(mutationsList => {
       handleMutation(mutationsList, dispatch, primaryColor, qiankunPrimaryColor);
     });
+    observerRef.current = observer;
     const mainWindow = getMainAppWindow();
     const zaAccessibilityTarget = mainWindow.document.documentElement;
     observer.observe(zaAccessibilityTarget, {
@@ -348,29 +308,47 @@ const ProIcon = props => {
     if (extendFromMainColor && qiankunPrimaryColor !== extendFromMainColor) {
       updateThemeColor(extendFromMainColor, dispatch, primaryColor);
     }
-  }, []);
-  useEffect(() => {
     return () => {
-      if (observer) {
-        observer.disconnect();
-      }
+      observer.disconnect();
+      observerRef.current = null;
     };
   }, []);
-  useDeepCompareLayoutEffect(() => {
-    setState({
-      IconInstance: RenderIcon
+
+  // mode=button：唯一走 Button 的分支
+  if (!isIconMode) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: tooltip,
+      children: /*#__PURE__*/_jsx(Button, {
+        type: buttonProps?.type || 'link',
+        className: proIconClassNames,
+        disabled: disabled,
+        icon: null,
+        onClick: effectiveOnClick,
+        ...reset,
+        ...buttonProps,
+        children: _text
+      })
     });
-  }, [_config, primaryColor, qiankunPrimaryColor, language, svgProps]);
-  return !isExtendButtonMode ? IconInstance : /*#__PURE__*/_jsx(Tooltip, {
-    title: tooltip,
-    children: /*#__PURE__*/_jsx(Button, {
-      type: isIconMode ? 'text' : buttonProps?.type || 'link',
-      className: proIconClassNames,
-      disabled: disabled,
-      icon: isIconMode ? RenderIcon : null,
+  }
+
+  // mode=icon（默认）：不套 Button
+  const wrapperClassName = classNames('anticon', proIconClassNames, {
+    'pro-icon-disabled': disabled
+  });
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip || iconText,
+    children: /*#__PURE__*/_jsx("span", {
+      className: wrapperClassName,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size,
+        height: size
+      },
+      onClick: effectiveOnClick,
       ...reset,
-      ...buttonProps,
-      children: _text
+      children: icon
     })
   });
 };

package/es/ProIcon/propsTypes.d.ts

@@ -171,11 +171,5 @@ export interface ProIconType {
      * @default undefined
      */
     actionMap?: ProIconActionMapType;
-    /**
-     * 按钮图标标记
-     * @description 内部使用，标记图标作为按钮使用
-     * @default true
-     */
-    buttonIcon?: boolean;
 }
 export {};

package/es/ProIcon/style/index.less

@@ -12,25 +12,20 @@
   }
 }
 
-// 内层图标容器（buttonIcon=false 时的 span，buttonIcon=true 时的 Button）
-// 静态样式统一在此，动态 width/height 通过内联 style 传入
-.pro-icon-wrapper,
-.pro-icon-btn-inner {
-  display: inline-block;
+// icon 模式外层容器
+.pro-icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   border-radius: 0;
   padding: 0;
   vertical-align: baseline;
 }
 
-.pro-icon-btn {
-  .anticon {
-    display: inline-block;
-  }
-
-  &.@{ant-prefix}-btn-icon-only {
-    width: auto;
-    height: auto;
-    vertical-align: 0;
-  }
+// icon 模式 disabled 视觉降级（onClick 已在 JS 层拦截）
+.pro-icon-disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+  opacity: 0.45;
 }

package/es/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -82,7 +82,6 @@ const FoldMenu = props => {
             }) : /*#__PURE__*/_jsx(ProIcon, {
               type: icon || '',
               size: "20px",
-              buttonIcon: false,
               color: currentKeyIdPath.includes(id) ? '#fff' : undefined
             }), /*#__PURE__*/_jsx("h2", {
               children: name

package/es/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -70,8 +70,7 @@ const OpenMenu = props => {
               alt: "icon"
             }) : item.icon && isFirstMenu ? /*#__PURE__*/_jsx(ProIcon, {
               type: item.icon || '',
-              size: "20px",
-              buttonIcon: false
+              size: "20px"
             }) : /*#__PURE__*/_jsx("span", {
               className: classnames({
                 'pro-layout-icon': true,

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

@@ -59,6 +59,7 @@ export const Step = ({
         size: 32,
         actionMap: {}
       }), onOff && /*#__PURE__*/_jsx("div", {
+        className: "pro-step-menu-name",
         children: locale?.ProStep?.catalogue
       })]
     }), options.map(item => {

package/es/ProStep/style/index.less

@@ -22,10 +22,14 @@
   > .pro-step-menu {
     display: flex;
     align-items: center;
+    padding-left: 8px;
     width: 100%;
     height: 48px;
     font-size: var(--zaui-font-size-lg, 16px);
     border-bottom: 1px solid var(--zaui-line, #dddddd);
+    .pro-step-menu-name{
+      margin-left: 8px;
+    }
     > .anticon {
       display: flex;
       align-items: center;

package/es/ProTable/components/EditableCell/EditIcon.js

@@ -11,8 +11,7 @@ const EditIcon = ({
     onClick: onClick,
     children: /*#__PURE__*/_jsx(ProIcon, {
       src: editSvg,
-      size: "20px",
-      buttonIcon: false
+      size: "20px"
     })
   });
 };

package/es/ProTable/components/RcTable/components/DraggableTable/components/DndWrapper/index.js

@@ -58,7 +58,6 @@ export const Row = props => {
                 component: dragSvg,
                 size: 20,
                 color: "#949599",
-                buttonIcon: false,
                 style: {
                   touchAction: 'none',
                   cursor: disabled ? 'no-drop' : 'move'

package/es/ProTable/style/index.less

@@ -100,7 +100,7 @@
   }
   .pro-table-drag-wrapper {
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     margin-right: 8px;
     .@{ant-prefix}-btn:hover {
       background: #fff !important;

package/es/ProTreeModal/components/SortableItem.js

@@ -57,13 +57,11 @@ const SortableItem = props => {
       children: [drag ? isItemDisabled ? /*#__PURE__*/_jsx(ProIcon, {
         className: "disabled-icon",
         component: disabledSvg,
-        size: 16,
-        buttonIcon: false
+        size: 16
       }) : /*#__PURE__*/_jsx(ProIcon, {
         component: dragSvg,
         size: 20,
         color: "#949599",
-        buttonIcon: false,
         ...listeners
       }) : null, /*#__PURE__*/_jsx(ProTooltip, {
         mode: "auto",

package/es/ProTreeModal/index.js

@@ -293,7 +293,7 @@ const ProTreeModal = props => {
   /**
    * clear all checked
    */
-  const handleClearAll = () => {
+  const handleClearAll = (immediateSubmit = false) => {
     // 处理 ProTable 场景下 disabled 的不需要被清理
     const _checkedValues = span ? state.flatTreeData.filter(item => item.disabled)?.map(item => item[fieldNameValue]) : [];
     setState({
@@ -303,11 +303,12 @@ const ProTreeModal = props => {
       treeViewData: [],
       checkAll: false
     });
-    // 通知父组件更新 value prop，确保清空操作被正确保存
-    if (labelInValue) {
-      onChange?.([]);
-    } else {
-      onChange?.(_checkedValues);
+    if (immediateSubmit) {
+      if (labelInValue) {
+        onChange?.([]);
+      } else {
+        onChange?.(_checkedValues);
+      }
     }
   };
 
@@ -580,7 +581,7 @@ const ProTreeModal = props => {
       allValue: allValue,
       label: props?.otherProps?.label,
       handleClick: handleClick,
-      handleClearAll: handleClearAll,
+      handleClearAll: () => handleClearAll(true),
       appointChange: appointChange,
       appointProps: appointProps
     });
@@ -798,7 +799,7 @@ const ProTreeModal = props => {
               }), !isView ? /*#__PURE__*/_jsx(Button, {
                 disabled: disabled,
                 type: "link",
-                onClick: handleClearAll,
+                onClick: () => handleClearAll(false),
                 children: locale?.ProTreeModal?.clearAll
               }) : null]
             }), /*#__PURE__*/_jsx("div", {

package/es/ProTreeModal/style/index.less

@@ -328,7 +328,7 @@
   }
   .checked-item.checked-item-0.disabled {
     .disabled-icon {
-      margin: 4px 0 0 2px;
+      margin: 2px 0 0 2px;
     }
   }
   .checked-item {
@@ -351,6 +351,14 @@
       }
     }
 
+    &.dragable:not(.disabled) {
+      .pro-icon,
+      .pro-icon > div,
+      .pro-icon svg {
+        cursor: move;
+      }
+    }
+
     &:first-child {
       margin-top: 0;
     }
@@ -375,8 +383,8 @@
 
       .disabled-icon {
         height: 20px;
-        margin-right: var(--zaui-space-size-xs, 4px);
-        margin-left: 6px;
+        margin-right: 0;
+        margin-left: 2px;
         margin-top: 2px;
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.3.3",
+  "version": "4.3.4-beta.2",
   "license": "MIT",
   "files": [
     "es",
@@ -98,15 +98,13 @@
     "react-docgen-typescript-dumi-tmp": {
       "typescript": "^4.9.5"
     },
-    "esbuild": "0.21.4",
-    "@umijs/bundler-utils": "^4.6.35"
+    "esbuild": "0.21.4"
   },
   "resolutions": {
     "react-resizable/react-draggable": "<4.5.0",
     "@babel/core": "^7.26.0",
     "react-docgen-typescript-dumi-tmp/typescript": "^4.9.5",
-    "esbuild": "0.21.4",
-    "@umijs/bundler-utils": "^4.6.35"
+    "esbuild": "0.21.4"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
@@ -137,6 +135,7 @@
     "@babel/runtime": "^7.28.4",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
+    "@locator/babel-jsx": "^0.5.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",