本文整理汇总了TypeScript中@ephox/alloy.SketchSpec类的典型用法代码示例。如果您正苦于以下问题：TypeScript SketchSpec类的具体用法？TypeScript SketchSpec怎么用？TypeScript SketchSpec使用的例子？那么, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了SketchSpec类的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: renderButton
export const renderDialogButton = (spec: ButtonFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
const action = getAction(spec.name, 'custom');
return renderButton(spec, action, providersBackstage, [
RepresentingConfigs.memory(''),
ComposingConfigs.self()
]);
};示例2: renderCommon
export const renderButton = (spec: ButtonFoo, action, providersBackstage: UiFactoryBackstageProviders, extraBehaviours = []): SketchSpec => {
const translatedText = providersBackstage.translate(spec.text);
const icon = spec.icon ? spec.icon.map((iconName) => renderIconFromPack(iconName, providersBackstage.icons)) : Option.none();
const components = icon.isSome() ? componentRenderPipeline([ icon ]) : [];
const innerHtml = icon.isSome() ? {} : {
innerHtml: translatedText
};
const classes = [
...spec.primary ? ['tox-button'] : ['tox-button', 'tox-button--secondary'],
...icon.isSome() ? ['tox-button--icon'] : []
];
const dom = {
tag: 'button',
classes,
...innerHtml,
attributes: {
title: translatedText // TODO: tooltips AP-213
}
};
return renderCommon(spec, action, extraBehaviours, dom, components);
};示例3: makeGroup
const renderComponents = (_data, state) => {
// default group is 'end'
const footerButtons = state.map((s) => s.footerButtons).getOr([ ]);
const buttonGroups = Arr.partition(footerButtons, (button) => button.align === 'start');
const makeGroup = (edge, buttons): SketchSpec => Container.sketch({
dom: {
tag: 'div',
classes: [ `tox-dialog__footer-${edge}` ]
},
components: Arr.map(buttons, (button) => button.memento.asSpec())
});
const startButtons = makeGroup('start', buttonGroups.pass);
const endButtons = makeGroup('end', buttonGroups.fail);
return [ startButtons, endButtons ];
};示例4: renderFormFieldWith
const renderFormField = (pLabel: Option<AlloySpec>, pField: AlloySpec): SketchSpec => {
return renderFormFieldWith(pLabel, pField, [ ]);
};示例5: setButtonEnabled
const renderSideBar = (providersBackstage: UiFactoryBackstageProviders) => {
const updateButtonUndoStates = (anyInSystem: AlloyComponent, undoEnabled: boolean, redoEnabled: boolean): void => {
memUndo.getOpt(anyInSystem).each((undo) => {
setButtonEnabled(undo, undoEnabled);
});
memRedo.getOpt(anyInSystem).each((redo) => {
setButtonEnabled(redo, redoEnabled);
});
};
const memUndo = Memento.record(
createButton('Undo', 'undo', true, (button) => {
AlloyTriggers.emitWith(button, ImageToolsEvents.internal.undo(), {
direction: 1
});
}, providersBackstage)
);
const memRedo = Memento.record(
createButton('Redo', 'redo', true, (button) => {
AlloyTriggers.emitWith(button, ImageToolsEvents.internal.redo(), {
direction: 1
});
}, providersBackstage)
);
const container = Container.sketch({
dom: {
tag: 'div',
classes: [ 'tox-image-tools__toolbar', 'tox-image-tools__sidebar']
},
components: [
memUndo.asSpec(),
memRedo.asSpec(),
createButton('Zoom in', 'zoom-in', false, (button) => {
AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
direction: 1
});
}, providersBackstage),
createButton('Zoom out', 'zoom-out', false, (button) => {
AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
direction: -1
});
}, providersBackstage)
]
});
return {
container,
updateButtonUndoStates
};
};