本文整理匯總了TypeScript中@ephox/katamari.Option.toArray方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Option.toArray方法的具體用法？TypeScript Option.toArray怎麽用？TypeScript Option.toArray使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/katamari.Option的用法示例。
在下文中一共展示了Option.toArray方法的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderFormFieldDom
const renderFormFieldSpec = (pLabel: Option<AlloySpec>, pField: AlloySpec) => {
return {
dom: renderFormFieldDom(),
components: pLabel.toArray().concat([ pField ])
};
};示例2: renderFormFieldDomWith
const renderFormFieldSpecWith = (pLabel: Option<AlloySpec>, pField: AlloySpec, extraClasses: string[]) => {
return {
dom: renderFormFieldDomWith(extraClasses),
components: pLabel.toArray().concat([ pField ])
};
};示例3: renderLabel
//.........這裏部分代碼省略.........
);
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: {
tag: 'div',
classes: ['tox-form__group']
},
components: pLabel.toArray().concat([
{
dom: {
tag: 'div',
classes: ['tox-color-input']
},
components: [
pField,
memColorButton.asSpec()
]
}
]),
fieldBehaviours: Behaviour.derive([
AddEventsBehaviour.config('form-field-events', [
AlloyEvents.run<ColorInputChangeEvent>(colorInputChangeEvent, (comp, se) => {
memColorButton.getOpt(comp).each((colorButton) => {
Css.set(colorButton.element(), 'background-color', se.event().color());
});
}),
AlloyEvents.run<ColorSwatchChangeEvent>(colorSwatchChangeEvent, (comp, se) => {
FormField.getField(comp).each((field) => {
Representing.setValue(field, se.event().value());
// Focus the field now that we've set its value
Composing.getCurrent(comp).each(Focusing.focus);
});
}),
AlloyEvents.run<ColorPickerCancelEvent>(colorPickerCancelEvent, (comp, se) => {
FormField.getField(comp).each((field) => {
Composing.getCurrent(comp).each(Focusing.focus);
});
})
])
])
});
};