office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
252 lines • 7.12 kB
JavaScript
import { buildKeytipConfigMap } from '../../../utilities/keytips/index';
var btnExecute = function (el) {
el.click();
};
// Setup keytips
var keytipConfig = {
keytips: [
// Button example
{
id: 'Button',
content: '1A',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'ButtonOffset',
content: '00',
optionalProps: {
onExecute: btnExecute,
offset: { x: 10, y: 10 }
}
},
{
id: 'CompoundButton',
content: '1B',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'ButtonWithMenu',
content: '2A',
optionalProps: {
onExecute: btnExecute
},
children: [
{
id: 'ButtonMenuItem1',
content: 'E'
},
{
id: 'ButtonMenuItem2',
content: '8'
}
]
},
{
id: 'SplitButton',
content: '2B',
optionalProps: {
onExecute: btnExecute
},
children: [
{
id: 'SplitButtonMenuItem1',
content: 'C'
},
{
id: 'SplitButtonMenuItem2',
content: 'WW'
}
]
},
{
id: 'DisabledButton',
content: '01',
optionalProps: {
onExecute: btnExecute
}
},
// Command Bar example
{
id: 'CommandButton1Keytip',
content: 'J',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'CommandButton2Keytip',
content: 'M',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'CommandButton3Keytip',
content: 'LK',
optionalProps: {
onExecute: btnExecute
},
children: [
{
id: 'SubmenuKeytip1',
content: 'M',
optionalProps: {
offset: { x: 17, y: 19 },
onExecute: btnExecute
}
},
{
id: 'SubmenuKeytip2',
content: 'P',
optionalProps: {
offset: { x: 17, y: 19 },
onExecute: btnExecute
},
children: [
{
id: 'SubmenuKeytip3',
content: 'O',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'SubmenuKeytip4',
content: 'DD',
optionalProps: {
onExecute: btnExecute
}
}
]
},
{
id: 'SubmenuKeytip5',
content: 'R',
optionalProps: {
offset: { x: 17, y: 19 },
onExecute: btnExecute
}
}
]
},
// Overflow Well example
{
id: 'OverflowButton1',
content: 'Q'
},
{
id: 'OverflowButton2',
content: 'W'
},
{
id: 'OverflowButton3',
content: 'E'
},
{
id: 'OverflowButton4',
content: 'R',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'OverflowButton5',
content: 'T'
},
{
id: 'OverflowButton6',
content: 'Y',
children: [
{
id: 'OverflowSubMenuButton1',
content: 'H'
}
]
},
// Full Keytips example
{
id: 'Pivot1Keytip',
content: 'A',
optionalProps: {
hasDynamicChildren: true,
onExecute: btnExecute
},
children: [
{
id: 'ToggleKeytip',
content: '1',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'LinkKeytip',
content: '2',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'SpinButtonKeytip',
content: '3',
optionalProps: {
onExecute: function (el) {
el.focus();
}
}
}
]
},
{
id: 'Pivot2Keytip',
content: 'B',
optionalProps: {
hasDynamicChildren: true,
onExecute: btnExecute
},
children: [
{
id: 'CheckboxKeytip',
content: '1',
optionalProps: {
onExecute: btnExecute
}
},
{
id: 'DropdownKeytip',
content: '2',
optionalProps: {
onExecute: function (el) {
el.focus();
}
}
}
]
},
{
id: 'Pivot3Keytip',
content: 'C',
optionalProps: {
hasDynamicChildren: true,
onExecute: btnExecute
},
children: [
{
id: 'ComboBoxKeytip',
content: '1',
optionalProps: {
onExecute: function (el) {
el.focus();
}
}
}
]
}
]
};
export var keytipMap = buildKeytipConfigMap(keytipConfig);
//# sourceMappingURL=KeytipSetup.js.map