本文整理匯總了TypeScript中@ephox/alloy.Disabling類的典型用法代碼示例。如果您正苦於以下問題：TypeScript Disabling類的具體用法？TypeScript Disabling怎麽用？TypeScript Disabling使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了Disabling類的7個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
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
})
])
});
};示例2: function
//.........這裏部分代碼省略.........
Tabstopping.config({})
])
});
const formGroup = (components) => {
return {
dom: {
tag: 'div',
classes: [ 'tox-form__group' ]
},
components
};
};
const getFieldPart = (isField1) => AlloyFormField.parts().field({
factory: AlloyInput,
inputClasses: ['tox-textfield'],
inputBehaviours: Behaviour.derive([
Tabstopping.config({}),
AddEventsBehaviour.config('size-input-events', [
AlloyEvents.run(NativeEvents.focusin(), function (component, simulatedEvent) {
AlloyTriggers.emitWith(component, ratioEvent, { isField1 });
}),
AlloyEvents.run(NativeEvents.change(), function (component, simulatedEvent) {
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name });
})
])
]),
selectOnFocus: false
});
const getLabel = (label: string) => {
return {
dom: {
tag: 'label',
classes: ['tox-label'],
innerHtml: providersBackstage.translate(label)
}
};
};
const widthField = AlloyFormCoupledInputs.parts().field1(
formGroup([ AlloyFormField.parts().label(getLabel('Width')), getFieldPart(true) ])
);
const heightField = AlloyFormCoupledInputs.parts().field2(
formGroup([ AlloyFormField.parts().label(getLabel('Height')), getFieldPart(false) ])
);
return AlloyFormCoupledInputs.sketch({
dom: {
tag: 'div',
classes: ['tox-form__group']
},
components: [
{
dom: {
tag: 'div',
classes: ['tox-form__controls-h-stack']
},
components: [
// NOTE: Form coupled inputs to the FormField.sketch themselves.
widthField,
heightField,
formGroup([
getLabel(' '),
pLock
])
]
}
],
field1Name: 'width',
field2Name: 'height',
locked: true,
markers: {
lockClass: 'tox-locked'
},
onLockedChange(current: AlloyComponent, other: AlloyComponent, lock: AlloyComponent) {
parseSize(Representing.getValue(current)).each((size) => {
converter(size).each((newSize) => {
Representing.setValue(other, formatSize(newSize));
});
});
},
coupledFieldBehaviours: Behaviour.derive([
Disabling.config({ }),
AddEventsBehaviour.config('size-input-events2', [
AlloyEvents.run<RatioEvent>(ratioEvent, function (component, simulatedEvent) {
const isField1 = simulatedEvent.event().isField1();
const optCurrent = isField1 ? AlloyFormCoupledInputs.getField1(component) : AlloyFormCoupledInputs.getField2(component);
const optOther = isField1 ? AlloyFormCoupledInputs.getField2(component) : AlloyFormCoupledInputs.getField1(component);
const value1 = optCurrent.map<string>(Representing.getValue).getOr('');
const value2 = optOther.map<string>(Representing.getValue).getOr('');
converter = makeRatioConverter(value1, value2);
})
])
])
});
};示例3:
setDisabled: (state: boolean) => Disabling.set(component, state)示例4: sequence
const renderField = (s) => {
return {
uid: s.uid,
dom: {
tag: 'div',
classes: [ 'tox-dropzone-container' ]
},
behaviours: Behaviour.derive([
RepresentingConfigs.memory([ ]),
ComposingConfigs.self(),
Disabling.config({}),
Toggling.config({
toggleClass: 'dragenter',
toggleOnExecute: false
}),
AddEventsBehaviour.config('dropzone-events', [
AlloyEvents.run('dragenter', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragleave', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragover', stopper),
AlloyEvents.run('drop', sequence([ stopper, onDrop ])),
AlloyEvents.run(NativeEvents.change(), onSelect)
]),
]),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dropzone' ],
styles: {}
},
components: [
{
dom: {
tag: 'p',
innerHtml: providersBackstage.translate('Drop an image here')
}
},
Button.sketch({
dom: {
tag: 'button',
innerHtml: providersBackstage.translate('Browse for an image'),
styles: {
position: 'relative'
},
classes: [ 'tox-button', 'tox-button--secondary']
},
components: [
memInput.asSpec()
],
action: (comp) => {
const inputComp = memInput.get(comp);
inputComp.element().dom().click();
},
buttonBehaviours: Behaviour.derive([
Tabstopping.config({ })
])
})
]
}
]
};
};示例5: handleFiles
const onDrop: AlloyEvents.EventRunHandler<SugarEvent> = (comp, se) => {
if (! Disabling.isDisabled(comp)) {
const transferEvent = se.event().raw() as DragEvent;
handleFiles(comp, transferEvent.dataTransfer.files);
}
};示例6:
isDisabled: () => Disabling.isDisabled(comp),示例7:
const item = (disabled: boolean) => Disabling.config({
disabled,
disableClass: 'tox-collection__item--state-disabled'
});