本文整理匯總了TypeScript中@ephox/alloy.SystemEvents.receive方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript SystemEvents.receive方法的具體用法？TypeScript SystemEvents.receive怎麽用？TypeScript SystemEvents.receive使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.SystemEvents的用法示例。
在下文中一共展示了SystemEvents.receive方法的2個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderInlineHeader
const renderInlineDialog = <T>(dialogInit: DialogManager.DialogInit<T>, extra: WindowExtra<T>, backstage: UiFactoryBackstage, ariaAttrs: boolean) => {
const dialogLabelId = Id.generate('dialog-label');
const dialogContentId = Id.generate('dialog-content');
const updateState = (_comp, incoming: DialogManager.DialogInit<T>) => {
return Option.some(incoming);
};
const memHeader = Memento.record(
renderInlineHeader({
title: dialogInit.internalDialog.title,
draggable: true
}, dialogLabelId, backstage.shared.providers) as SimpleSpec
);
const memBody = Memento.record(
renderInlineBody({
body: dialogInit.internalDialog.body
}, dialogContentId, backstage, ariaAttrs) as SimpleSpec
);
const memFooter = Memento.record(
renderInlineFooter({
buttons: dialogInit.internalDialog.buttons
}, backstage.shared.providers)
);
const dialogEvents = SilverDialogEvents.initDialog(
() => instanceApi,
{
// TODO: Implement block and unblock for inline dialogs
onBlock: () => { },
onUnblock: () => { },
onClose: () => extra.closeWindow()
}
);
// TODO: Disable while validating?
const dialog = GuiFactory.build({
dom: {
tag: 'div',
classes: [ 'tox-dialog' ],
attributes: {
role: 'dialog',
['aria-labelledby']: dialogLabelId,
['aria-describedby']: `${dialogContentId}`,
}
},
eventOrder: {
[SystemEvents.receive()]: [ Reflecting.name(), Receiving.name() ],
[SystemEvents.execute()]: ['execute-on-form'],
[SystemEvents.attachedToDom()]: ['reflecting', 'execute-on-form']
},
// Dupe with SilverDialog.
behaviours: Behaviour.derive([
Keying.config({
mode: 'cyclic',
onEscape: (c) => {
AlloyTriggers.emit(c, formCloseEvent);
return Option.some(true);
},
useTabstopAt: (elem) => {
return !NavigableObject.isPseudoStop(elem) && (
Node.name(elem) !== 'button' || Attr.get(elem, 'disabled') !== 'disabled'
);
}
}),
Reflecting.config({
channel: dialogChannel,
updateState,
initialData: dialogInit
}),
AddEventsBehaviour.config(
'execute-on-form',
dialogEvents
),
RepresentingConfigs.memory({ })
]),
components: [
memHeader.asSpec(),
memBody.asSpec(),
memFooter.asSpec()
]
});
// TODO: Clean up the dupe between this (InlineDialog) and SilverDialog
const instanceApi = getDialogApi<T>({
getRoot: () => dialog,
getFooter: () => memFooter.get(dialog),
getBody: () => memBody.get(dialog),
getFormWrapper: () => {
const body = memBody.get(dialog);
return Composing.getCurrent(body).getOr(body);
}
}, extra.redial);
return {
dialog,
//.........這裏部分代碼省略.........
示例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' ]
}
}
]
}
}
})
);
};