本文整理汇总了TypeScript中@ephox/alloy.ModalDialog.sketch方法的典型用法代码示例。如果您正苦于以下问题：TypeScript ModalDialog.sketch方法的具体用法？TypeScript ModalDialog.sketch怎么用？TypeScript ModalDialog.sketch使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.ModalDialog的用法示例。
在下文中一共展示了ModalDialog.sketch方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
const renderDialog = (spec: DialogFoo) => {
return ModalDialog.sketch(
{
lazySink: spec.lazySink,
onEscape: () => {
spec.onCancel();
// TODO: Make a strong type for Handled KeyEvent
return Option.some(true);
},
dom: {
tag: 'div',
classes: [ 'tox-dialog' ].concat(spec.extraClasses)
},
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dialog__header' ]
},
components: [
spec.partSpecs.title,
spec.partSpecs.close
]
},
spec.partSpecs.body,
spec.partSpecs.footer
],
parts: {
blocker: {
dom: DomFactory.fromHtml('<div class="tox-dialog-wrap"></div>'),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dialog-wrap__backdrop' ]
}
}
]
}
},
modalBehaviours: Behaviour.derive([
// Dupe warning.
AddEventsBehaviour.config('basic-dialog-events', [
AlloyEvents.run<FormCancelEvent>(formCancelEvent, (comp, se) => {
spec.onCancel();
}),
AlloyEvents.run<FormSubmitEvent>(formSubmitEvent, (comp, se) => {
spec.onSubmit();
}),
])
])
}
);
};示例2: onEscape
const renderModalDialog = (spec: DialogSpec, initialData, dialogEvents: AlloyEvents.AlloyEventKeyAndHandler<any>[], backstage: UiFactoryBackstage) => {
const updateState = (_comp, incoming) => {
return Option.some(incoming);
};
return GuiFactory.build(
ModalDialog.sketch({
lazySink: backstage.shared.getSink,
// TODO: Disable while validating
onEscape(c) {
AlloyTriggers.emit(c, formCancelEvent);
return Option.some(true);
},
useTabstopAt: (elem) => {
return !NavigableObject.isPseudoStop(elem) && (
Node.name(elem) !== 'button' || Attr.get(elem, 'disabled') !== 'disabled'
);
},
modalBehaviours: Behaviour.derive([
Reflecting.config({
channel: dialogChannel,
updateState,
initialData
}),
RepresentingConfigs.memory({ }),
Focusing.config({}),
AddEventsBehaviour.config('execute-on-form', dialogEvents.concat([
AlloyEvents.runOnSource(NativeEvents.focusin(), (comp, se) => {
Keying.focusIn(comp);
})
])),
AddEventsBehaviour.config('scroll-lock', [
AlloyEvents.runOnAttached(() => {
Class.add(Body.body(), 'tox-dialog__disable-scroll');
}),
AlloyEvents.runOnDetached(() => {
Class.remove(Body.body(), 'tox-dialog__disable-scroll');
}),
]),
...spec.extraBehaviours
]),
eventOrder: {
[SystemEvents.execute()]: [ 'execute-on-form' ],
[SystemEvents.receive()]: [ 'reflecting', 'receiving' ],
[SystemEvents.attachedToDom()]: [ 'scroll-lock', 'reflecting', 'messages', 'execute-on-form', 'alloy.base.behaviour' ],
[SystemEvents.detachedFromDom()]: [ 'alloy.base.behaviour', 'execute-on-form', 'messages', 'reflecting', 'scroll-lock' ],
},
dom: {
tag: 'div',
classes: [ 'tox-dialog' ].concat(spec.extraClasses),
styles: {
position: 'relative',
...spec.extraStyles
}
},
components: [
spec.header,
spec.body,
...spec.footer.toArray()
],
dragBlockClass: 'tox-dialog-wrap',
parts: {
blocker: {
dom: DomFactory.fromHtml('<div class="tox-dialog-wrap"></div>'),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dialog-wrap__backdrop' ]
}
}
]
}
}
})
);
};