本文整理匯總了TypeScript中@ephox/alloy.Replacing類的典型用法代碼示例。如果您正苦於以下問題：TypeScript Replacing類的具體用法？TypeScript Replacing怎麽用？TypeScript Replacing使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了Replacing類的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderSpinner
const toggleThrobber = (comp: AlloyComponent, state: boolean, providerBackstage: UiFactoryBackstageProviders) => {
const element = comp.element();
if (state === true) {
Replacing.set(comp, [ renderSpinner(providerBackstage) ]);
Css.remove(element, 'display');
Attr.remove(element, 'aria-hidden');
} else {
Replacing.set(comp, [ ]);
Css.set(element, 'display', 'none');
Attr.set(element, 'aria-hidden', 'true');
}
};示例2: zoomFit
return memContainer.getOpt(anyInSystem).map((panel) => {
const aImg = GuiFactory.external({
element: img
});
Replacing.replaceAt(panel, 1, Option.some(aImg));
const lastViewRect = viewRectState.get();
const viewRect = {
x: 0,
y: 0,
w: img.dom().naturalWidth,
h: img.dom().naturalHeight
};
viewRectState.set(viewRect);
const rect = Rect.inflate(viewRect, -20, -20);
rectState.set(rect);
if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
zoomFit(panel, img);
}
repaintImg(panel, img);
return img;
});示例3:
export const renderLabel = (spec: Types.Label.Label, backstageShared: UiFactoryBackstageShared): SimpleSpec => {
const label = {
dom: {
tag: 'label',
innerHtml: backstageShared.providers.translate(spec.label),
classes: ['tox-label']
}
} as AlloySpec;
const comps = Arr.map(spec.items, backstageShared.interpreter);
return {
dom: {
tag: 'div',
classes: ['tox-form__group']
},
components: [
label
].concat(comps),
behaviours: Behaviour.derive([
ComposingConfigs.self(),
Replacing.config({}),
RepresentingConfigs.domHtml(Option.none()),
Keying.config({
mode: 'acyclic'
}),
])
};
};示例4: onControlAttached
Step.sync(() => {
Replacing.set(component, [
{
dom: {
tag: 'div',
classes: [ 'child-1' ]
},
behaviours: SimpleBehaviours.unnamedEvents([
onControlAttached(infoWithDestroy, cellWithDestroy),
onControlDetached(infoWithDestroy, cellWithDestroy)
])
},
{
dom: {
tag: 'div',
classes: [ 'child-2' ]
},
behaviours: SimpleBehaviours.unnamedEvents([
onControlAttached(infoWithoutDestroy, cellWithoutDestroy),
onControlDetached(infoWithoutDestroy, cellWithoutDestroy)
])
}
]);
}),示例5: renderIcon
const renderReplacableIconFromPack = (iconName: string, iconsProvider: IconProvider): SimpleOrSketchSpec => {
return renderIcon(getIcon(iconName, iconsProvider), {
behaviours: Behaviour.derive([
Replacing.config({ })
])
});
};示例6: renderInsertTableMenuItem
export function renderInsertTableMenuItem(spec: Menu.FancyMenuItem): ItemTypes.WidgetItemSpec {
const numRows = 10;
const numColumns = 10;
const sizeLabelId = Id.generate('size-label');
const cells = makeCells(sizeLabelId, numRows, numColumns);
const memLabel = Memento.record({
dom: {
tag: 'span',
classes: ['tox-insert-table-picker__label'],
attributes: {
id: sizeLabelId
}
},
components: [GuiFactory.text('0x0')],
behaviours: Behaviour.derive([
Replacing.config({})
])
});
return {
type: 'widget',
data: { value: Id.generate('widget-id')},
dom: {
tag: 'div',
classes: ['tox-fancymenuitem'],
},
autofocus: true,
components: [ItemWidget.parts().widget({
dom: {
tag: 'div',
classes: ['tox-insert-table-picker']
},
components: makeComponents(cells).concat(memLabel.asSpec()),
behaviours: Behaviour.derive([
AddEventsBehaviour.config('insert-table-picker', [
AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
const row = e.event().row();
const col = e.event().col();
selectCells(cells, row, col, numRows, numColumns);
Replacing.set(memLabel.get(c), [makeLabelText(row, col)]);
}),
AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
spec.onAction({numRows: e.event().row() + 1, numColumns: e.event().col() + 1});
AlloyTriggers.emit(c, SystemEvents.sandboxClose());
})
]),
Keying.config({
initSize: {
numRows,
numColumns
},
mode: 'flatgrid',
selector: '[role="button"]'
})
])
})]
};
}示例7:
const updateText: NotificationSketchApis['updateText'] = (comp, text) => {
if (comp.getSystem().isConnected()) {
const banner = memBannerText.get(comp);
Replacing.set(banner, [
GuiFactory.text(text)
]);
}
};示例8:
const renderLabel = (text: TranslateIfNeeded, prefix: string, providersBackstage: UiFactoryBackstageProviders) => ({
dom: {
tag: 'span',
innerHtml: providersBackstage.translate(text),
classes: [ `${prefix}__select-label` ]
},
behaviours: Behaviour.derive([
Replacing.config({ })
])
});示例9:
(store, doc, body) => {
return GuiFactory.build({
dom: {
tag: 'div',
classes: [ 'test-container' ]
},
behaviours: Behaviour.derive([
Replacing.config({ })
])
});
},示例10: function
const makeSocket = function () {
return GuiFactory.build(
Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-editor-socket"></div>'),
components: [ ],
containerBehaviours: Behaviour.derive([
Replacing.config({ })
])
})
);
};