mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
fix:优化弹窗关闭动作 (#3514)
This commit is contained in:
hsm-lv
GitHub
parent
1307b6b2a2
commit
08077e547f
@ -27,11 +27,53 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
type: 'group',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_002',
|
||||
className: 'ml-2',
|
||||
label: '打开一个弹窗（模态）',
|
||||
actionType: 'reload',
|
||||
dialog: {
|
||||
title: '系统提示',
|
||||
body: '对你点击了'
|
||||
},
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
type: 'dialog',
|
||||
id: 'dialog_1',
|
||||
title: '一个模态弹窗',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<p>对，你打开了一个模态弹窗</p>',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_002',
|
||||
className: 'ml-2',
|
||||
label: '打开一个弹窗',
|
||||
label: '打开一个弹窗（模态）',
|
||||
actionType: 'reload',
|
||||
dialog: {
|
||||
title: '系统提示',
|
||||
@ -42,27 +84,15 @@ export default {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'dialog',
|
||||
args: {
|
||||
id: '${event.data.ajax1.id}'
|
||||
},
|
||||
dialog: {
|
||||
type: 'dialog',
|
||||
id: 'dialog_1',
|
||||
title: '弹框标题1',
|
||||
data: {
|
||||
id: '${id}'
|
||||
},
|
||||
title: '一个模态弹窗',
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
debug: true,
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<p>对，你刚刚点击了111${id}</p>',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
type: 'tpl',
|
||||
tpl: '<p>对，你打开了一个模态弹窗</p>',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -74,7 +104,7 @@ export default {
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_003',
|
||||
label: '关闭一个弹窗',
|
||||
label: '关闭一个弹窗（模态）',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
@ -84,13 +114,8 @@ export default {
|
||||
dialog: {
|
||||
type: 'dialog',
|
||||
id: 'dialog_1',
|
||||
title: '弹框标题1',
|
||||
title: '一个模态弹窗',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<p>对，你刚刚点击了111</p>',
|
||||
inline: false
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '打开一个子弹窗，然后关闭它的父亲',
|
||||
@ -101,11 +126,11 @@ export default {
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
type: 'dialog',
|
||||
title: '弹框标题3',
|
||||
title: '一个模态子弹窗',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '关闭指定弹窗',
|
||||
label: '关闭指定弹窗（关闭父弹窗）',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
@ -127,6 +152,7 @@ export default {
|
||||
{
|
||||
type: 'button',
|
||||
label: '关闭当前弹窗',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
@ -136,13 +162,6 @@ export default {
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '文本',
|
||||
name: 'text',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -154,6 +173,102 @@ export default {
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_004',
|
||||
className: 'ml-2',
|
||||
label: '打开一个抽屉（模态）',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
type: 'drawer',
|
||||
id: 'drawer_1',
|
||||
title: '一个模态抽屉',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<p>对，你打开了一个模态抽屉</p>',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_005',
|
||||
label: '关闭一个抽屉（模态）',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
type: 'drawer',
|
||||
id: 'drawer_1',
|
||||
title: '一个模态抽屉',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '打开一个子抽屉，然后关闭它的父亲',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
type: 'drawer',
|
||||
title: '一个模态子抽屉',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '关闭指定抽屉(关闭父抽屉)',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'closeDrawer',
|
||||
componentId: 'drawer_1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '关闭当前抽屉',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'closeDrawer'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_006',
|
||||
label: '打开页面',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
@ -170,7 +285,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_005',
|
||||
id: 'b_007',
|
||||
label: '打开页面（单页模式）',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
@ -186,8 +301,8 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_006',
|
||||
label: '弹个提示对话框',
|
||||
id: 'b_008',
|
||||
label: '弹个提示对话框（模态）',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
@ -202,8 +317,8 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_007',
|
||||
label: '弹个确认对话框',
|
||||
id: 'b_009',
|
||||
label: '弹个确认对话框（模态）',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
@ -219,7 +334,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_008',
|
||||
id: 'b_010',
|
||||
label: '全局消息提示',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
@ -228,7 +343,7 @@ export default {
|
||||
{
|
||||
actionType: 'toast',
|
||||
msgType: 'warning',
|
||||
msg: '我是一个全局警告消息',
|
||||
msg: '我是一个全局警告消息，可以配置不同类型和弹出位置~',
|
||||
options: {
|
||||
position: 'top-right'
|
||||
}
|
||||
@ -239,7 +354,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_009',
|
||||
id: 'b_011',
|
||||
label: '复制一段文本',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
@ -255,7 +370,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_010',
|
||||
id: 'b_012',
|
||||
label: '复制一段富文本',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
@ -272,7 +387,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_011',
|
||||
id: 'b_013',
|
||||
label: '发送邮件',
|
||||
className: 'ml-2',
|
||||
onEvent: {
|
||||
|
||||
@ -46,6 +46,7 @@ export interface IScopedContext {
|
||||
reload: (target: string, ctx: RendererData) => void;
|
||||
send: (target: string, ctx: RendererData) => void;
|
||||
close: (target: string) => void;
|
||||
closeById: (target: string) => void;
|
||||
}
|
||||
type AliasIScopedContext = IScopedContext;
|
||||
export const ScopedContext = React.createContext(createScopedTools(''));
|
||||
@ -236,6 +237,18 @@ function createScopedTools(
|
||||
.filter(component => component && component.props.show)
|
||||
.forEach(closeDialog);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭指定id的弹窗
|
||||
* @param id
|
||||
*/
|
||||
closeById(id: string) {
|
||||
const scoped = this;
|
||||
const component: any = scoped.getComponentById(id);
|
||||
if (component && component.props.show) {
|
||||
closeDialog(component);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
import React from 'react';
|
||||
import {render} from 'react-dom';
|
||||
import {render as amisRender} from '../factory';
|
||||
import {uuid} from '../utils/helper';
|
||||
import {RendererEvent} from '../utils/renderer-event';
|
||||
import {
|
||||
Action,
|
||||
@ -10,12 +6,6 @@ import {
|
||||
registerAction
|
||||
} from './Action';
|
||||
|
||||
let dialogs: {
|
||||
id: string;
|
||||
action: any;
|
||||
store: any;
|
||||
}[] = [];
|
||||
|
||||
/**
|
||||
* 打开弹窗动作
|
||||
*
|
||||
@ -30,13 +20,6 @@ export class DialogAction implements Action {
|
||||
event: RendererEvent<any>
|
||||
) {
|
||||
const store = renderer.props.store;
|
||||
// 记录弹窗
|
||||
dialogs.push({
|
||||
id: action.dialog.id || '', // id依赖用户的配置
|
||||
action,
|
||||
store
|
||||
});
|
||||
// 打开弹窗
|
||||
store.setCurrentAction(action);
|
||||
store.openDialog(action.args);
|
||||
}
|
||||
@ -55,13 +38,13 @@ export class CloseDialogAction implements Action {
|
||||
renderer: ListenerContext,
|
||||
event: RendererEvent<any>
|
||||
) {
|
||||
// 找到指定关闭的弹窗或者直接关闭当前
|
||||
const context = action.componentId
|
||||
? dialogs.find(item => item.id === action.componentId)
|
||||
: dialogs[dialogs.length - 1];
|
||||
// 如果通过store去关闭，需要确保store是dialog的渲染载体
|
||||
// 但如果是弹窗里弹窗的话，关闭父弹窗会同时关闭子弹窗
|
||||
context?.store.closeDialog(false);
|
||||
if (action.componentId) {
|
||||
// 关闭指定弹窗
|
||||
event.context.scoped.closeById(action.componentId);
|
||||
} else {
|
||||
// 关闭当前弹窗
|
||||
renderer.props.store.parentStore.closeDialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,23 +1,53 @@
|
||||
import {registerAction} from './Action';
|
||||
import {CloseDialogAction, DialogAction} from './DialogAction';
|
||||
import {RendererEvent} from '../utils/renderer-event';
|
||||
import {
|
||||
Action,
|
||||
ListenerAction,
|
||||
ListenerContext,
|
||||
registerAction
|
||||
} from './Action';
|
||||
|
||||
/**
|
||||
* 打开抽屉动作
|
||||
*
|
||||
* @export
|
||||
* @class DrawerAction
|
||||
* @extends {DialogAction}
|
||||
* @implements {Action}
|
||||
*/
|
||||
export class DrawerAction extends DialogAction {}
|
||||
export class DrawerAction implements Action {
|
||||
async run(
|
||||
action: ListenerAction,
|
||||
renderer: ListenerContext,
|
||||
event: RendererEvent<any>
|
||||
) {
|
||||
const store = renderer.props.store;
|
||||
// 打开抽屉
|
||||
store.setCurrentAction(action);
|
||||
store.openDrawer(action.args);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭抽屉动作
|
||||
*
|
||||
* @export
|
||||
* @class CloseDrawerAction
|
||||
* @extends {CloseDialogAction}
|
||||
* @implements {Action}
|
||||
*/
|
||||
export class CloseDrawerAction extends CloseDialogAction {}
|
||||
export class CloseDrawerAction implements Action {
|
||||
async run(
|
||||
action: ListenerAction,
|
||||
renderer: ListenerContext,
|
||||
event: RendererEvent<any>
|
||||
) {
|
||||
if (action.componentId) {
|
||||
// 关闭指定抽屉
|
||||
event.context.scoped.closeById(action.componentId);
|
||||
} else {
|
||||
// 关闭当前抽屉
|
||||
renderer.props.store.parentStore.closeDrawer();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registerAction('drawer', new DrawerAction());
|
||||
registerAction('closeDrawer', new CloseDrawerAction());
|
||||
|
||||
Loading…
Reference in New Issue
Block a user