mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:48:13 +08:00
feat: Tag支持事件动作 (#6325)
This commit is contained in:
meerkat
GitHub
parent
4b3b1505dc
commit
e15892f8dd
@ -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}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -176,13 +193,14 @@ icon:
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------ |
|
||||
| ----------- | ----------------------------------------------------------------------------------------- | ---------- | ------------------------------------------ |
|
||||
| displayMode | `'normal' \| 'rounded' \| 'status'` | `normal` | 展现模式 |
|
||||
| color | `'active' \| 'inactive' \| 'error' \| 'success' \| 'processing' \| 'warning' \| 具体色值 ` | | 颜色主题，提供默认主题，并支持自定义颜色值 |
|
||||
| color | `'active' \| 'inactive' \| 'error' \| 'success' \| 'processing' \| 'warning' \| 具体色值` | | 颜色主题，提供默认主题，并支持自定义颜色值 |
|
||||
| label | `string` | `-` | 标签内容 |
|
||||
| icon | `SchemaIcon` | `dot 图标` | status 模式下的前置图标 |
|
||||
| className | `string` | | 自定义 CSS 样式类名 |
|
||||
| style | `object` | {} | 自定义样式（行内样式），优先级最高 |
|
||||
| closable | `boolean` | `false` | 是否展示关闭按钮 |
|
||||
|
||||
## 事件表
|
||||
|
||||
@ -191,7 +209,8 @@ 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}` 鼠标事件对象 | `关闭`时触发 |
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -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',
|
||||
|
||||
@ -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({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user