office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
154 lines (153 loc) • 4.49 kB
TypeScript
import * as React from 'react';
import { ContextualMenu } from './ContextualMenu';
import { IPositionProps } from '../../utilities/positioning';
import { DirectionalHint } from '../../common/DirectionalHint';
export { DirectionalHint } from '../../common/DirectionalHint';
export interface IContextualMenuProps extends React.Props<ContextualMenu>, IPositionProps {
/**
* Collection of menu items.
* @default []
*/
items: IContextualMenuItem[];
/**
* Element to anchor the ContextualMenu to.
*/
targetElement?: HTMLElement;
/**
* Indicator of how the ContextualMenu should be anchored to its targetElement.
* @default DirectionalHint.rightBottomEdge
*/
directionalHint?: DirectionalHint;
/**
* The gap space between the target element and the callout.
* @default 0
*/
gapSpace?: number;
/**
* Aria Labelled by labelElementId
* @default null
*/
labelElementId?: string;
/**
* Whether to focus on the menu when mounted.
* @default true
*/
shouldFocusOnMount?: boolean;
/**
* Whether the beak should be visible.
* @default false
*/
isBeakVisible?: boolean;
/**
* Callback when the ContextualMenu tries to close. If dismissAll is true then all
* submenus will be dismissed.
*/
onDismiss?: (ev?: any, dismissAll?: boolean) => void;
/**
* CSS class to apply to the context menu.
* @default null
*/
className?: string;
/**
* Whether this menu is a submenu of another menu or not.
*/
isSubMenu?: boolean;
/**
* DOM id to tag the ContextualMenu with, for reference.
* Should be used for 'aria-owns' and other such uses, rather than direct reference for programmatic purposes.
*/
id?: string;
/**
* The beak width of the ContextualMenu beak.
* @default 16
*/
beakWidth?: number;
/**
* Aria label for accessibility for the ContextualMenu.
* If none specified no aria label will be applied to the ContextualMenu.
*/
ariaLabel?: string;
/**
* If true do not render on a new layer. If false render on a new layer.
* @default false
*/
doNotLayer?: boolean;
}
export interface IContextualMenuItem {
/**
* Unique id to identify the item
*/
key: string;
/**
* Text description for the menu item to display
*/
name: string;
/**
* Icon to display next to the menu item
*/
icon?: string;
/**
* Whether the menu item is disabled
* @defaultvalue false
*/
isDisabled?: boolean;
/**
* [TODO] Not Yet Implemented
*/
shortCut?: string;
/**
* Whether or not this menu item can be checked
* @defaultvalue false
*/
canCheck?: boolean;
/**
* Whether or not this menu item is currently checked.
* @defaultvalue false
*/
isChecked?: boolean;
/**
* Any custom data the developer wishes to associate with the menu item.
*/
data?: any;
/**
* Callback issued when the menu item is invoked
*/
onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => void;
/**
* An optional URL to navigate to upon selection
*/
href?: string;
/**
* A collection of submenu items
*/
items?: IContextualMenuItem[];
/**
* Additional css class to apply to the menu item
* @defaultvalue undefined
*/
className?: string;
/**
* Optional accessibility label (aria-label) attribute that will be stamped on to the element.
* If none is specified, the arai-label attribute will contain the item name
*/
ariaLabel?: string;
/**
* Optional title for displaying text when hovering over an item.
*/
title?: string;
/**
* Method to custom render this menu item
* @defaultvalue undefined
*/
onRender?: (item: any) => React.ReactNode;
/**
* A function to be executed onMouseDown. This is executed before an onClick event and can
* be used to interrupt native on click events as well. The click event should still handle
* the commands. This should only be used in special cases when react and non-react are mixed.
*/
onMouseDown?: (item: IContextualMenuItem, event: any) => void;
/**
* Any additional properties to use when custom rendering menu items.
*/
[propertyName: string]: any;
}