本文整理汇总了TypeScript中@ephox/alloy.Form.sketch方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Form.sketch方法的具体用法？TypeScript Form.sketch怎么用？TypeScript Form.sketch使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.Form的用法示例。
在下文中一共展示了Form.sketch方法的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: interpretInForm
const renderBodyPanel = <I>(spec: BodyPanelFoo<I>, backstage: UiFactoryBackstage): SimpleSpec => {
const memForm = Memento.record(
AlloyForm.sketch((parts) => {
return {
dom: {
tag: 'div',
classes: [ 'tox-form' ]
},
// All of the items passed through the form need to be put through the interpreter
// with their form part preserved.
components: Arr.map(spec.items, (item) => {
return interpretInForm(parts, item, backstage);
})
};
})
);
return {
dom: {
tag: 'div',
classes: [ 'tox-dialog__body' ]
},
components: [
{
dom: {
tag: 'div',
classes: ['tox-dialog__body-content']
},
components: [
memForm.asSpec()
]
}
],
behaviours: Behaviour.derive([
Keying.config({
mode: 'acyclic',
useTabstopAt: Fun.not(NavigableObject.isPseudoStop)
}),
ComposingConfigs.memento(memForm),
RepresentingConfigs.memento(memForm, {
postprocess: (formValue) => FormValues.toValidValues(formValue).fold(
(err) => {
console.error(err);
return { };
},
(vals) => vals
)
})
])
};
};示例2: function
const allTabs = Arr.map(spec.tabs, function (tab) {
return {
value: tab.title,
dom: {
tag: 'div',
classes: [ 'tox-dialog__body-nav-item' ],
innerHtml: backstage.shared.providers.translate(tab.title)
},
view () {
return [
// Dupe with SilverDialog
AlloyForm.sketch((parts) => {
return {
dom: {
tag: 'div',
classes: [ 'tox-form' ]
},
components: Arr.map(tab.items, (item) => interpretInForm(parts, item, backstage)),
formBehaviours: Behaviour.derive([
Keying.config({
mode: 'acyclic',
useTabstopAt: Fun.not(NavigableObject.isPseudoStop)
}),
AddEventsBehaviour.config('TabView.form.events', [
AlloyEvents.runOnAttached(setDataOnForm),
AlloyEvents.runOnDetached(updateDataWithForm)
]),
Receiving.config({
channels: Objects.wrapAll([
{
key: SendDataToSectionChannel,
value: {
onReceive: updateDataWithForm
}
},
{
key: SendDataToViewChannel,
value: {
onReceive: setDataOnForm
}
}
])
})
])
};
})
];
}
};
});示例3: function
const sketch = function (rawSpec) {
const navigateEvent = 'navigateEvent';
const wrapperAdhocEvents = 'serializer-wrapper-events';
const formAdhocEvents = 'form-events';
const schema = ValueSchema.objOf([
FieldSchema.strict('fields'),
// Used for when datafields are present.
FieldSchema.defaulted('maxFieldIndex', rawSpec.fields.length - 1),
FieldSchema.strict('onExecute'),
FieldSchema.strict('getInitialValue'),
FieldSchema.state('state', function () {
return {
dialogSwipeState: Singleton.value(),
currentScreen: Cell(0)
};
})
]);
const spec = ValueSchema.asRawOrDie('SerialisedDialog', schema, rawSpec);
const navigationButton = function (direction, directionName, enabled) {
return Button.sketch({
dom: UiDomFactory.dom('<span class="${prefix}-icon-' + directionName + ' ${prefix}-icon"></span>'),
action (button) {
AlloyTriggers.emitWith(button, navigateEvent, { direction });
},
buttonBehaviours: Behaviour.derive([
Disabling.config({
disableClass: Styles.resolve('toolbar-navigation-disabled'),
disabled: !enabled
})
])
});
};
const reposition = function (dialog, message) {
SelectorFind.descendant(dialog.element(), '.' + Styles.resolve('serialised-dialog-chain')).each(function (parent) {
Css.set(parent, 'left', (-spec.state.currentScreen.get() * message.width) + 'px');
});
};
const navigate = function (dialog, direction) {
const screens = SelectorFilter.descendants(dialog.element(), '.' + Styles.resolve('serialised-dialog-screen'));
SelectorFind.descendant(dialog.element(), '.' + Styles.resolve('serialised-dialog-chain')).each(function (parent) {
if ((spec.state.currentScreen.get() + direction) >= 0 && (spec.state.currentScreen.get() + direction) < screens.length) {
Css.getRaw(parent, 'left').each(function (left) {
const currentLeft = parseInt(left, 10);
const w = Width.get(screens[0]);
Css.set(parent, 'left', (currentLeft - (direction * w)) + 'px');
});
spec.state.currentScreen.set(spec.state.currentScreen.get() + direction);
}
});
};
// Unfortunately we need to inspect the DOM to find the input that is currently on screen
const focusInput = function (dialog) {
const inputs = SelectorFilter.descendants(dialog.element(), 'input');
const optInput = Option.from(inputs[spec.state.currentScreen.get()]);
optInput.each(function (input) {
dialog.getSystem().getByDom(input).each(function (inputComp) {
AlloyTriggers.dispatchFocus(dialog, inputComp.element());
});
});
const dotitems = memDots.get(dialog);
Highlighting.highlightAt(dotitems, spec.state.currentScreen.get());
};
const resetState = function () {
spec.state.currentScreen.set(0);
spec.state.dialogSwipeState.clear();
};
const memForm = Memento.record(
Form.sketch(function (parts) {
return {
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog"></div>'),
components: [
Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-chain" style="left: 0px; position: absolute;"></div>'),
components: Arr.map(spec.fields, function (field, i) {
return i <= spec.maxFieldIndex ? Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-screen"></div>'),
components: [
navigationButton(-1, 'previous', (i > 0)),
parts.field(field.name, field.spec),
navigationButton(+1, 'next', (i < spec.maxFieldIndex))
]
}) : parts.field(field.name, field.spec);
})
})
],
formBehaviours: Behaviour.derive([
Receivers.orientation(function (dialog, message) {
reposition(dialog, message);
}),
Keying.config({
//.........这里部分代码省略.........