feat:Tag&Icon接入事件 (#6016)

docs/zh-CN/components/icon.md

@@ -206,3 +206,15 @@ v6 用 fa-regular / fa-solid 等表示前缀，可参考官网[示例](https://f
 | className | `string`                             |        | 外层 CSS 类名                                                                                                             |
 | icon      | [模板](../../docs/concepts/template) |        | icon 名称，支持 [fontawesome v4](https://fontawesome.com/v4/icons/) 或 通过 registerIcon 注册的 icon、或使用 url          |
 | vendor    | `string`                             |        | icon 类型，默认为`fa`, 表示 fontawesome v4。也支持 iconfont, 如果是 fontawesome v5 以上版本或者其他框架可以设置为空字符串 |
+
+## 事件表
+
+> 2.6.1 及以上版本
+
+当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
+
+| 事件名称   | 事件参数                 | 说明           |
+| ---------- | ------------------------ | -------------- |
+| click      | nativeEvent 鼠标事件对象 | 点击时触发     |
+| mouseenter | nativeEvent 鼠标事件对象 | 鼠标移入时触发 |
+| mouseleave | nativeEvent 鼠标事件对象 | 鼠标移出时触发 |

docs/zh-CN/components/tag.md

@@ -83,7 +83,7 @@ icon:
 
 ## 标签颜色
 
-标签有几种预设的色彩样式，可以通过设置color属性为active、inactive、error、success、iprocessing、warning用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值
+标签有几种预设的色彩样式，可以通过设置 color 属性为 active、inactive、error、success、iprocessing、warning 用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值
 
 ```schema
 {
@@ -129,7 +129,6 @@ icon:
 }
 ```
 
-
 ## 自定义样式
 
 可以通过 style 来控制背景、边框及文字颜色。如下
@@ -184,3 +183,15 @@ icon:
 | icon        | `SchemaIcon`                                                                               | `dot 图标` | status 模式下的前置图标                    |
 | className   | `string`                                                                                   |            | 自定义 CSS 样式类名                        |
 | style       | `object`                                                                                   | {}         | 自定义样式（行内样式），优先级最高         |
+
+## 事件表
+
+> 2.6.1 及以上版本
+
+当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
+
+| 事件名称   | 事件参数                 | 说明           |
+| ---------- | ------------------------ | -------------- |
+| click      | nativeEvent 鼠标事件对象 | 点击时触发     |
+| mouseenter | nativeEvent 鼠标事件对象 | 鼠标移入时触发 |
+| mouseleave | nativeEvent 鼠标事件对象 | 鼠标移出时触发 |

packages/amis-ui/src/components/Tag.tsx

@@ -19,6 +19,8 @@ export interface TagProps extends ThemeProps {
   closeIcon?: string | React.ReactNode;
   onClose?: (e: React.MouseEvent) => void;
   onClick?: (e: React.MouseEvent) => void;
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  onMouseLeave?: (e: React.MouseEvent) => void;
 }
 
 export interface CheckableTagProps extends TagProps {
@@ -89,6 +91,18 @@ export class Tag extends React.Component<TagProps> {
     onClick?.(e);
   }
 
+  @autobind
+  handleMouseEnter(e: React.MouseEvent<any>) {
+    const {onMouseEnter} = this.props;
+    onMouseEnter?.(e);
+  }
+
+  @autobind
+  handleMouseLeave(e: React.MouseEvent<any>) {
+    const {onMouseLeave} = this.props;
+    onMouseLeave?.(e);
+  }
+
   render() {
     const {
       children,

packages/amis/src/renderers/Icon.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import {Renderer, RendererProps, filter, IconCheckedSchema} from 'amis-core';
+import {
+  Renderer,
+  RendererProps,
+  filter,
+  IconCheckedSchema,
+  autobind,
+  createObject
+} from 'amis-core';
 import {BaseSchema, SchemaTpl} from '../Schema';
 import {BadgeObject, withBadge} from 'amis-ui';
 import {getIcon} from 'amis-ui';
@@ -35,6 +42,39 @@ export class Icon extends React.Component<IconProps, object> {
     vendor: 'fa'
   };
 
+  @autobind
+  handleClick(e: React.MouseEvent<any>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(
+      'click',
+      createObject(data, {
+        nativeEvent: e
+      })
+    );
+  }
+
+  @autobind
+  handleMouseEnter(e: React.MouseEvent<any>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(
+      e,
+      createObject(data, {
+        nativeEvent: e
+      })
+    );
+  }
+
+  @autobind
+  handleMouseLeave(e: React.MouseEvent<any>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(
+      e,
+      createObject(data, {
+        nativeEvent: e
+      })
+    );
+  }
+
   render() {
     const {vendor, classnames: cx, className, style, data} = this.props;
     let icon = this.props.icon;
@@ -48,7 +88,13 @@ export class Icon extends React.Component<IconProps, object> {
         (icon as IconCheckedSchema).id.startsWith('svg-')
       ) {
         return (
-          <svg className={cx('icon', className)} style={style}>
+          <svg
+            className={cx('icon', className)}
+            style={style}
+            onClick={this.handleClick}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+          >
             <use
               xlinkHref={`#${(icon as IconCheckedSchema).id.replace(
                 /^svg-/,
@@ -64,7 +110,15 @@ export class Icon extends React.Component<IconProps, object> {
 
     let CustomIcon = getIcon(icon);
     if (CustomIcon) {
-      return <CustomIcon className={cx(className, `icon-${icon}`)} style={style}/>;
+      return (
+        <CustomIcon
+          className={cx(className, `icon-${icon}`)}
+          style={style}
+          onClick={this.handleClick}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        />
+      );
     }
 
     const isURLIcon = icon?.indexOf('.') !== -1;
@@ -79,9 +133,22 @@ export class Icon extends React.Component<IconProps, object> {
       iconPrefix = `${icon}`;
     }
     return isURLIcon ? (
-      <img className={cx('Icon')} src={icon} style={style}/>
+      <img
+        className={cx('Icon')}
+        src={icon}
+        style={style}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      />
     ) : (
-      <i className={cx(iconPrefix, className)} style={style}/>
+      <i
+        className={cx(iconPrefix, className)}
+        style={style}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      />
     );
   }
 }

packages/amis/src/renderers/Tag.tsx

@@ -2,7 +2,7 @@
  * @file Tag
  */
 import React from 'react';
-import {Renderer, RendererProps} from 'amis-core';
+import {autobind, createObject, Renderer, RendererProps} from 'amis-core';
 import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema';
 import {getPropValue} from 'amis-core';
 import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
@@ -83,6 +83,39 @@ export class TagField extends React.Component<TagProps, object> {
     displayMode: 'normal'
   };
 
+  @autobind
+  handleClick(e: React.MouseEvent<any>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(
+      'click',
+      createObject(data, {
+        nativeEvent: e
+      })
+    );
+  }
+
+  @autobind
+  handleMouseEnter(e: React.MouseEvent<any>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(
+      e,
+      createObject(data, {
+        nativeEvent: e
+      })
+    );
+  }
+
+  @autobind
+  handleMouseLeave(e: React.MouseEvent<any>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(
+      e,
+      createObject(data, {
+        nativeEvent: e
+      })
+    );
+  }
+
   render() {
     let {
       label,
@@ -119,6 +152,9 @@ export class TagField extends React.Component<TagProps, object> {
         icon={icon}
         closable={closable}
         style={style}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
       >
         {label}
       </Tag>