chore: 固定icon组件支持的事件,避免警告 (baidu#9529)

* chore: 固定icon组件支持的事件,避免警告 * 更新快照 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
lhtuling · Jan 30, 2024 · 032ea5a · 032ea5a
1 parent ce3685b
commit 032ea5a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 52 deletions.
diff --git a/packages/amis-ui/src/components/icons.tsx b/packages/amis-ui/src/components/icons.tsx
@@ -262,11 +262,21 @@ export function Icon({
   iconContent,
   vendor,
   cx: iconCx,
-  onClick = () => {},
-  onMouseEnter = () => {},
-  onMouseLeave = () => {},
-  style,
-  ...rest
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseOver,
+  onMouseOut,
+  onMouseDown,
+  onMouseUp,
+  onMouseMove,
+  onBlur,
+  onFocus,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+  style
 }: {
   icon: string;
   iconContent?: string;
@@ -281,26 +291,34 @@ export function Icon({
     return null;
   }
 
-  // 获取全部事件
-  let events: any = {};
-  Object.keys(rest).forEach(key => {
-    if (key.startsWith('on') && key.length > 2) {
-      events[key] = rest[key];
-    }
-  });
+  // 支持的事件
+  let events: any = {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseOver,
+    onMouseOut,
+    onMouseDown,
+    onMouseUp,
+    onMouseMove,
+    onBlur,
+    onFocus,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onTouchCancel
+  };
 
   // 直接的icon dom
   if (React.isValidElement(icon)) {
     return React.cloneElement(icon, {
+      ...events,
       ...((icon.props as any) || {}),
       className: cxClass(
         cx(className, classNameProp),
         (icon.props as any).className
       ),
-      style,
-      onClick,
-      onMouseEnter,
-      onMouseLeave
+      style
     });
   }
 
@@ -327,9 +345,6 @@ export function Icon({
     return (
       <div
         {...events}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
         className={cx(iconContent, className, classNameProp)}
         ref={refFn}
         style={style}
@@ -343,9 +358,6 @@ export function Icon({
     return (
       <Component
         {...events}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
         className={cx(className, `icon-${icon}`, classNameProp)}
         // @ts-ignore
         icon={icon}
@@ -378,9 +390,6 @@ export function Icon({
       return (
         <svg
           {...events}
-          onClick={onClick}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
           className={cx('icon', 'icon-object', className, classNameProp)}
           style={style}
         >
@@ -395,9 +404,6 @@ export function Icon({
     const svgStr = /<svg .*?>(.*?)<\/svg>/.exec(icon);
     const svgHTML = createElement('svg', {
       ...events,
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
       className: cx('icon', className, classNameProp),
       style,
       dangerouslySetInnerHTML: {__html: svgStr ? svgStr[1] : ''},
@@ -412,9 +418,6 @@ export function Icon({
     return (
       <img
         {...events}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
         className={cx(`${classPrefix}Icon`, className, classNameProp)}
         src={icon}
         style={style}
@@ -440,9 +443,6 @@ export function Icon({
     return (
       <i
         {...events}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
         className={cx(icon, className, classNameProp, iconPrefix)}
         style={style}
       />

diff --git a/packages/amis/__tests__/renderers/__snapshots__/Action.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Action.test.tsx.snap
@@ -76,9 +76,6 @@ exports[`Renderers:Action MenuItem display icon 2`] = `
 >
   <i
     className="fa fa-cloud cxd-Button-icon fa fa-cloud"
-    onClick={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
   />
   <span>
     123

diff --git a/packages/amis/__tests__/renderers/__snapshots__/Breadcrumb.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Breadcrumb.test.tsx.snap
@@ -356,9 +356,6 @@ exports[`Renderer:breadcrumb tooltip labelMaxLength 1`] = `
               >
                 <i
                   className="fa fa-home cxd-Icon cxd-Breadcrumb-icon fa fa-home"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
                 />
                 <span
                   className="cxd-TplField"
@@ -447,9 +444,6 @@ exports[`Renderer:breadcrumb tooltip labelMaxLength 2`] = `
               >
                 <i
                   className="fa fa-home cxd-Icon cxd-Breadcrumb-icon fa fa-home"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
                 />
                 <span
                   className="cxd-TplField"
@@ -538,9 +532,6 @@ exports[`Renderer:breadcrumb tooltip labelMaxLength 3`] = `
               >
                 <i
                   className="fa fa-home cxd-Icon cxd-Breadcrumb-icon fa fa-home"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
                 />
                 <span
                   className="cxd-TplField"
@@ -629,9 +620,6 @@ exports[`Renderer:breadcrumb tooltip labelMaxLength 4`] = `
               >
                 <i
                   className="fa fa-home cxd-Icon cxd-Breadcrumb-icon fa fa-home"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
                 />
                 <span
                   className="cxd-TplField"

diff --git a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -48,9 +48,6 @@ exports[`Renderer:Page 1`] = `
                   <icon-mock
                     className="icon-question-mark"
                     icon="question-mark"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
                   />
                 </span>
               </div>