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

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,38 +75,35 @@ 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;
-    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";
+    className?: string;
     hidden?: boolean;
     id?: string;
     style?: React.CSSProperties;
-    htmlFor?: string;
+    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
+    onReset?: () => void;
     prefixCls?: string;
-    trigger?: string;
-    isView?: boolean;
     rootClassName?: string;
-    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
+    isView?: boolean;
     vertical?: boolean;
-    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
-    validateTrigger?: string | false | string[];
-    preserve?: boolean;
+    trim?: boolean;
+    normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
+    trigger?: string;
+    htmlFor?: string;
     clearNotShow?: boolean;
-    labelAlign?: import("antd/es/form/interface").FormLabelAlign;
     colon?: boolean;
-    layout?: import("antd/es/form/Form").FormItemLayout;
+    labelAlign?: import("antd/es/form/interface").FormLabelAlign;
     labelCol?: import("antd").ColProps;
-    wrapperCol?: import("antd").ColProps;
     getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
     shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
+    validateTrigger?: string | false | string[];
     validateDebounce?: number;
     valuePropName?: string;
+    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
     messageVariables?: Record<string, string>;
     initialValue?: any;
     onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
+    preserve?: boolean;
     isListField?: boolean;
     isList?: boolean;
     noStyle?: boolean;
@@ -114,6 +111,8 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
         icons: import("antd/es/form/FormItem").FeedbackIcons;
     };
     validateStatus?: "" | "warning" | "error" | "success" | "validating";
+    layout?: import("antd/es/form/Form").FormItemLayout;
+    wrapperCol?: import("antd").ColProps;
     help?: React.ReactNode;
     fieldId?: string;
     valueType?: import("../../../render/propsType").ProFormValueType;
@@ -127,6 +126,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     upperCase?: boolean;
     toISOString?: boolean;
     toCSTString?: boolean;
+    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
     name: any;
     dependencies: any[];
     tooltip: string | {
@@ -141,7 +141,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
  * 创建组件属性
  */
 export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
-    componentProps: import("lodash").Omit<any, "format" | "clearNotShow" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "precision">;
+    componentProps: import("lodash").Omit<any, "clearNotShow" | "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "precision">;
     formItemTransform: {
         getValueProps: any;
         normalize: 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.3.3",
+  "version": "4.3.4-beta.1",
   "license": "MIT",
   "files": [
     "es",