test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: Tag支持事件动作 (#6325)

Browse Source
This commit is contained in:
meerkat 2023-03-15 15:17:58 +08:00 committed by GitHub
parent 4b3b1505dc
commit e15892f8dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 135 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/zh-CN/components/tag.md
View File

@ -35,6 +35,23 @@ icon:
"type": "tag",
"label": "这是一个很长长长长长长长长长长长长长的标签",
"closable": true
},
{
type: 'tag',
label: '关闭了！',
closable: true,
onEvent: {
close: {
actions: [
{
actionType: 'toast',
args: {
msg: '${event.data.label}'
}
}
]
}
}
}
]
}
@ -175,14 +192,15 @@ icon:
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------ |
| displayMode | `'normal' \| 'rounded' \| 'status'` | `normal` | 展现模式 |
| color | `'active' \| 'inactive' \| 'error' \| 'success' \| 'processing' \| 'warning' \| 具体色值 ` | | 颜色主题，提供默认主题，并支持自定义颜色值 |
| label | `string` | `-` | 标签内容 |
| icon | `SchemaIcon` | `dot 图标` | status 模式下的前置图标 |
| className | `string` | | 自定义 CSS 样式类名 |
| style | `object` | {} | 自定义样式（行内样式），优先级最高 |
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ----------------------------------------------------------------------------------------- | ---------- | ------------------------------------------ |
| displayMode | `'normal' \| 'rounded' \| 'status'` | `normal` | 展现模式 |
| color | `'active' \| 'inactive' \| 'error' \| 'success' \| 'processing' \| 'warning' \| 具体色值` | | 颜色主题，提供默认主题，并支持自定义颜色值 |
| label | `string` | `-` | 标签内容 |
| icon | `SchemaIcon` | `dot 图标` | status 模式下的前置图标 |
| className | `string` | | 自定义 CSS 样式类名 |
| style | `object` | {} | 自定义样式（行内样式），优先级最高 |
| closable | `boolean` | `false` | 是否展示关闭按钮 |
## 事件表
@ -190,8 +208,9 @@ icon:
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------------------------------------- | -------------- |
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
| 事件名称 | 事件参数 | 说明 |
| ---------- | ------------------------------------------------------- | ---------------- |
| click | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `点击`时触发 |
| mouseenter | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移入`时触发 |
| mouseleave | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移出`时触发 |
| close | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `关闭`时触发 |

39
examples/components/EventAction/cmpt-event-action/TagEvent.jsx Normal file
View File

@ -0,0 +1,39 @@
export default {
type: 'service',
api: '/api/mock2/sample',
id: 'service-reload',
body: [
{
type: 'each',
name: 'rows',
items: {
type: 'tag',
label: '${id}',
closable: true,
onEvent: {
close: {
actions: [
{
actionType: 'ajax',
args: {
api: {
url: '/api/mock2/sample/${event.data.label}',
method: 'DELETE'
},
messages: {
success: '${label} 删除成功',
failed: '删除失败'
}
}
},
{
actionType: 'reload',
componentId: 'service-reload'
}
]
}
}
}
}
]
};

6
examples/components/Example.jsx
View File

@ -71,6 +71,7 @@ import OptionsLocalPageSchema from './Linkage/OptionsLocal';
import FormSubmitSchema from './Linkage/FormSubmit';
import InputEventSchema from './EventAction/cmpt-event-action/InputEvent';
import DateEventSchema from './EventAction/cmpt-event-action/DateEvent';
import TagEvent from './EventAction/cmpt-event-action/TagEvent';
import SwitchEventSchema from './EventAction/cmpt-event-action/SwitchEvent';
import TabsEventSchema from './EventAction/cmpt-event-action/TabsEvent';
import UploadEventSchema from './EventAction/cmpt-event-action/UploadEvent';
@ -676,6 +677,11 @@ export const examples = [
path: 'examples/event/date',
component: makeSchemaRenderer(DateEventSchema)
},
{
label: '可关闭的tag group',
path: 'examples/event/each-tag',
component: makeSchemaRenderer(TagEvent)
},
{
label: '开关组件',
path: 'examples/event/switch',

85
packages/amis/src/renderers/Tag.tsx
View File

@ -76,7 +76,18 @@ export interface TagSchema extends BaseSchema {
export interface TagProps
extends RendererProps,
Omit<TagSchema, 'type' | 'className'> {}
Omit<TagSchema, 'type' | 'className'> {
onClick?: (params: {
[propName: string]: any;
nativeEvent: React.MouseEvent<any>;
label: string;
}) => void;
onClose?: (params: {
[propName: string]: any;
nativeEvent: React.MouseEvent<any>;
label: string;
}) => void;
}
export class TagField extends React.Component<TagProps, object> {
static defaultProps: Partial<TagProps> = {
@ -84,41 +95,41 @@ export class TagField extends React.Component<TagProps, object> {
};
@autobind
handleClick(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
'click',
createObject(data, {
nativeEvent: e
})
);
handleClick(nativeEvent: React.MouseEvent<any>) {
const {dispatchEvent, onClick} = this.props;
const params = this.getResolvedEventParams(nativeEvent);
dispatchEvent('click', params);
onClick?.(params);
}
@autobind
handleMouseEnter(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
e,
createObject(data, {
nativeEvent: e
})
);
const {dispatchEvent} = this.props;
const params = this.getResolvedEventParams(e);
dispatchEvent(e, params);
}
@autobind
handleMouseLeave(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
e,
createObject(data, {
nativeEvent: e
})
);
const {dispatchEvent} = this.props;
const params = this.getResolvedEventParams(e);
dispatchEvent(e, params);
}
@autobind
handleClose(nativeEvent: React.MouseEvent<HTMLElement>) {
const {dispatchEvent, onClose} = this.props;
const params = this.getResolvedEventParams(nativeEvent);
dispatchEvent('close', params);
onClose?.(params);
}
render() {
let {
label,
icon,
displayMode,
color,
@ -128,9 +139,7 @@ export class TagField extends React.Component<TagProps, object> {
style = {}
} = this.props;
label =
getPropValue(this.props) ||
(label ? resolveVariableAndFilter(label, data, '| raw') : null);
const label = this.resolveLabel();
if (isPureVariable(icon)) {
icon = resolveVariableAndFilter(icon, data);
@ -155,11 +164,33 @@ export class TagField extends React.Component<TagProps, object> {
onClick={this.handleClick}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onClose={this.handleClose}
>
{label}
</Tag>
);
}
private resolveLabel() {
const {label, data} = this.props;
return (
getPropValue(this.props) ||
(label ? resolveVariableAndFilter(label, data, '| raw') : null)
);
}
private getResolvedEventParams<T>(nativeEvent: T) {
const {data} = this.props;
return createObject(data, {
nativeEvent,
label: this.resolveLabel()
}) as {
[propName: string]: any;
nativeEvent: React.MouseEvent<T>;
label: string;
};
}
}
@Renderer({