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

Merge pull request #8384 from chengjinyang0/feat-icon-event-action

Browse Source 
feat: icon支持配置事件动作
This commit is contained in:
hsm-lv 2023-12-01 13:07:06 +08:00 committed by GitHub
commit a57e7dff2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 131 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/amis-editor/src/plugin/Icon.tsx
View File

@ -1,4 +1,8 @@
import {registerEditorPlugin, RendererPluginEvent} from 'amis-editor-core';
import {
registerEditorPlugin,
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control';
@ -143,18 +147,17 @@ export class IconPlugin extends BasePlugin {
]
}
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
// {
// title: '事件',
// className: 'p-none',
// body: [
// getSchemaTpl('eventControl', {
// name: 'onEvent',
// ...getEventControlConfig(this.manager, context)
// })
// ]
// }
])
];
};

18
packages/amis-ui/src/components/icons.tsx
View File

@ -259,6 +259,8 @@ export function Icon({
vendor,
cx: iconCx,
onClick = () => {},
onMouseEnter = () => {},
onMouseLeave = () => {},
style
}: {
icon: string;
@ -283,7 +285,9 @@ export function Icon({
(icon.props as any).className
),
style,
onClick
onClick,
onMouseEnter,
onMouseLeave
});
}
@ -310,6 +314,8 @@ export function Icon({
return (
<div
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={cx(iconContent, className, classNameProp)}
ref={refFn}
style={style}
@ -323,6 +329,8 @@ export function Icon({
return (
<Component
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={cx(className, `icon-${icon}`, classNameProp)}
// @ts-ignore
icon={icon}
@ -355,6 +363,8 @@ export function Icon({
return (
<svg
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={cx('icon', 'icon-object', className, classNameProp)}
style={style}
>
@ -369,6 +379,8 @@ export function Icon({
const svgStr = /<svg .*?>(.*?)<\/svg>/.exec(icon);
const svgHTML = createElement('svg', {
onClick,
onMouseEnter,
onMouseLeave,
className: cx('icon', className, classNameProp),
style,
dangerouslySetInnerHTML: {__html: svgStr ? svgStr[1] : ''},
@ -383,6 +395,8 @@ export function Icon({
return (
<img
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={cx(`${classPrefix}Icon`, className, classNameProp)}
src={icon}
style={style}
@ -408,6 +422,8 @@ export function Icon({
return (
<i
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={cx(icon, className, classNameProp, iconPrefix)}
style={style}
/>

87
packages/amis/__tests__/event-action/renderers/icon.test.tsx Normal file
View File

@ -0,0 +1,87 @@
import {fireEvent, render, waitFor} from '@testing-library/react';
import '../../../src';
import {render as amisRender} from '../../../src';
import {makeEnv} from '../../helper';
test('EventAction:icon', async () => {
const notify = jest.fn();
const {getByText, container}: any = render(
amisRender(
{
type: 'page',
data: {
btnDisabled: true,
btnNotDisabled: false
},
body: [
{
type: 'icon',
icon: 'cloud',
onEvent: {
click: {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: '派发点击事件'
}
}
]
},
mouseenter: {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: '派发鼠标移入事件'
}
}
]
},
mouseleave: {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: '派发鼠标移出事件'
}
}
]
}
}
}
]
},
{},
makeEnv({
notify
})
)
);
const icon = container.querySelector('.cloud');
fireEvent.click(icon);
await waitFor(() => {
expect(notify).toHaveBeenCalledWith('info', '派发点击事件', {
msg: '派发点击事件',
msgType: 'info'
});
});
fireEvent.mouseEnter(icon);
await waitFor(() => {
expect(notify).toHaveBeenCalledWith('info', '派发鼠标移入事件', {
msg: '派发鼠标移入事件',
msgType: 'info'
});
});
fireEvent.mouseLeave(icon);
await waitFor(() => {
expect(notify).toHaveBeenCalledWith('info', '派发鼠标移出事件', {
msg: '派发鼠标移出事件',
msgType: 'info'
});
});
});

2
packages/amis/__tests__/renderers/__snapshots__/Action.test.tsx.snap
View File

@ -77,6 +77,8 @@ 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

8
packages/amis/__tests__/renderers/__snapshots__/Breadcrumb.test.tsx.snap
View File

@ -357,6 +357,8 @@ 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"
@ -446,6 +448,8 @@ 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"
@ -535,6 +539,8 @@ 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"
@ -624,6 +630,8 @@ 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"

2
packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
View File

@ -49,6 +49,8 @@ exports[`Renderer:Page 1`] = `
className="icon-question-mark"
icon="question-mark"
onClick={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
</span>
</div>