本文整理匯總了TypeScript中@ephox/alloy.Invalidating.config方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Invalidating.config方法的具體用法？TypeScript Invalidating.config怎麽用？TypeScript Invalidating.config使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.Invalidating的用法示例。
在下文中一共展示了Invalidating.config方法的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: getRoot
const validatingBehaviours = spec.validation.map((vl) => {
return Invalidating.config({
getRoot(input) {
return Traverse.parent(input.element());
},
invalidClass: 'tox-invalid',
validator: {
validate(input) {
const v = Representing.getValue(input);
const result = vl.validator(v);
return Future.pure(result === true ? Result.value(v) : Result.error(result));
},
validateOnLoad: vl.validateOnLoad
}
});
}).toArray();示例2: handler
(handler) => Invalidating.config({
getRoot: (comp) => Traverse.parent(comp.element()),
invalidClass: 'tox-control-wrap--status-invalid',
notify: {
onInvalid: (comp: AlloyComponent, err: string) => {
memInvalidIcon.getOpt(comp).each((invalidComp) => {
Attr.set(invalidComp.element(), 'title', providersBackstage.translate(err));
});
}
},
validator: {
validate: (input) => {
const urlEntry = Representing.getValue(input);
return FutureResult.nu((completer) => {
handler({ type: spec.filetype, url: urlEntry.value }, (validation) => {
completer((validation.status === 'invalid' ? Result.error : Result.value)(validation.message));
});
});
},
validateOnLoad: false
}
})示例3: renderLabel
export const renderColorInput = (spec: Types.ColorInput.ColorInput, sharedBackstage: UiFactoryBackstageShared, colorInputBackstage: UiFactoryBackstageForColorInput): SimpleSpec => {
const pField = FormField.parts().field({
factory: Input,
inputClasses: ['tox-textfield'],
onSetValue: (c) => Invalidating.run(c).get(() => { }),
inputBehaviours: Behaviour.derive([
Tabstopping.config({ }),
Invalidating.config({
invalidClass: 'tox-textbox-field-invalid',
getRoot: (comp) => {
return Traverse.parent(comp.element());
},
notify: {
onValid: (comp) => {
// onValid should pass through the value here
// We need a snapshot of the value validated.
const val = Representing.getValue(comp);
AlloyTriggers.emitWith(comp, colorInputChangeEvent, {
color: val
});
}
},
validator: {
validateOnLoad: false,
validate: (input) => {
const inputValue = Representing.getValue(input);
// Consider empty strings valid colours
if (inputValue.length === 0) {
return Future.pure(Result.value(true));
} else {
const span = Element.fromTag('span');
Css.set(span, 'background-color', inputValue);
const res = Css.getRaw(span, 'background-color').fold(
// TODO: Work out what we want to do here.
() => Result.error('blah'),
(_) => Result.value(inputValue)
);
return Future.pure(res);
}
}
}
})
]),
selectOnFocus: false
});
const pLabel: Option<AlloySpec> = spec.label.map((label) => renderLabel(label, sharedBackstage.providers));
const emitSwatchChange = (colorBit, value) => {
AlloyTriggers.emitWith(colorBit, colorSwatchChangeEvent, {
value
});
};
const onItemAction = (comp: AlloyComponent, value) => {
memColorButton.getOpt(comp).each((colorBit) => {
if (value === 'custom') {
colorInputBackstage.colorPicker((valueOpt) => {
valueOpt.fold(
() => AlloyTriggers.emit(colorBit, colorPickerCancelEvent),
(value) => {
emitSwatchChange(colorBit, value);
Settings.addColor(value);
}
);
}, '#ffffff');
} else if (value === 'remove') {
emitSwatchChange(colorBit, '');
} else {
emitSwatchChange(colorBit, value);
}
});
};
const memColorButton = Memento.record(
renderPanelButton({
dom: {
tag: 'span',
attributes: {
'aria-label': sharedBackstage.providers.translate('Color swatch')
}
},
layouts: Option.some({
onRtl: () => [ Layout.southeast ],
onLtr: () => [ Layout.southwest ]
}),
components: [],
fetch: ColorSwatch.getFetch(colorInputBackstage.getColors(), colorInputBackstage.hasCustomColors()),
columns: colorInputBackstage.getColorCols(),
presets: 'color',
onItemAction
}, sharedBackstage)
);
return FormField.sketch({
dom: {
//.........這裏部分代碼省略.........