office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 7.23 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport { ContextualMenu } from './ContextualMenu';\r\nimport { DirectionalHint } from '../../common/DirectionalHint';\r\nimport { FocusZoneDirection } from '../../FocusZone';\r\nimport { IIconProps } from '../Icon/Icon.Props';\r\nimport { IRectangle } from '../../common/IRectangle';\r\nimport { IPoint } from '../../common/IPoint';\r\nexport { DirectionalHint } from '../../common/DirectionalHint';\r\n\r\nexport interface IContextualMenuProps extends React.Props<ContextualMenu> {\r\n\r\n /**\r\n * The target that the ContextualMenu should try to position itself based on.\r\n * It can be either an HTMLElement a querySelector string of a valid HTMLElement\r\n * or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.\r\n */\r\n target?: HTMLElement | string | MouseEvent;\r\n\r\n /**\r\n * The element that the ContextualMenu should be positioned based on.'\r\n * @deprecated at version 0.72.1 and will no longer exist after 1.0 use target instead\r\n */\r\n targetElement?: HTMLElement;\r\n\r\n /**\r\n * How the element should be positioned\r\n * @default DirectionalHint.bottomAutoEdge\r\n */\r\n directionalHint?: DirectionalHint;\r\n\r\n /**\r\n * The gap between the ContextualMenu and the target\r\n * @default 0\r\n */\r\n gapSpace?: number;\r\n\r\n /**\r\n * The width of the beak.\r\n * @default 16\r\n */\r\n beakWidth?: number;\r\n\r\n /**\r\n * The bounding rectangle for which the contextual menu can appear in.\r\n */\r\n bounds?: IRectangle;\r\n\r\n /**\r\n * If true use a point rather than rectangle to position the ContextualMenu.\r\n * For example it can be used to position based on a click.\r\n */\r\n useTargetPoint?: boolean;\r\n\r\n /**\r\n * Point used to position the ContextualMenu\r\n */\r\n targetPoint?: IPoint;\r\n\r\n /**\r\n * If true then the beak is visible. If false it will not be shown.\r\n * @default false\r\n */\r\n isBeakVisible?: boolean;\r\n\r\n /**\r\n * If true the position returned will have the menu element cover the target.\r\n * If false then it will position next to the target;\r\n * @default false\r\n */\r\n\r\n coverTarget?: boolean;\r\n\r\n /**\r\n * Collection of menu items.\r\n * @default []\r\n */\r\n items: IContextualMenuItem[];\r\n\r\n /**\r\n * Aria Labelled by labelElementId\r\n * @default null\r\n */\r\n labelElementId?: string;\r\n\r\n /**\r\n * Whether to focus on the menu when mounted.\r\n * @default true\r\n */\r\n shouldFocusOnMount?: boolean;\r\n\r\n /**\r\n * Callback when the ContextualMenu tries to close. If dismissAll is true then all\r\n * submenus will be dismissed.\r\n */\r\n onDismiss?: (ev?: any, dismissAll?: boolean) => void;\r\n\r\n /**\r\n * CSS class to apply to the context menu.\r\n * @default null\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Whether this menu is a submenu of another menu or not.\r\n */\r\n isSubMenu?: boolean;\r\n\r\n /**\r\n * DOM id to tag the ContextualMenu with, for reference.\r\n * Should be used for 'aria-owns' and other such uses, rather than direct reference for programmatic purposes.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Aria label for accessibility for the ContextualMenu.\r\n * If none specified no aria label will be applied to the ContextualMenu.\r\n */\r\n ariaLabel?: string;\r\n\r\n /**\r\n * If true do not render on a new layer. If false render on a new layer.\r\n * @default false\r\n */\r\n doNotLayer?: boolean;\r\n\r\n /**\r\n * Direction for arrow navigation of the ContextualMenu. Should only be specified if using custom-rendered menu items.\r\n * @default FocusZoneDirection.vertical\r\n */\r\n arrowDirection?: FocusZoneDirection;\r\n\r\n}\r\n\r\nexport interface IContextualMenuItem {\r\n /**\r\n * Unique id to identify the item\r\n */\r\n key: string;\r\n\r\n /**\r\n * Text description for the menu item to display\r\n */\r\n name: string;\r\n\r\n /**\r\n * Props that go to the IconComponent\r\n */\r\n iconProps?: IIconProps;\r\n\r\n /**\r\n * Icon to display next to the menu item\r\n * @deprecated at .69 and will no longer exist after 1.0 use IconProps instead.\r\n * If you need to change icon colors you will need to switch entirely to iconProps.\r\n */\r\n icon?: string;\r\n\r\n /**\r\n * Whether the menu item is disabled\r\n * @defaultvalue false\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * @deprecated\r\n * Deprecated at v.65.1 and will be removed by v 1.0. Use 'disabled' instead.\r\n */\r\n isDisabled?: boolean;\r\n\r\n /**\r\n * [TODO] Not Yet Implemented\r\n */\r\n shortCut?: string;\r\n\r\n /**\r\n * Whether or not this menu item can be checked\r\n * @defaultvalue false\r\n */\r\n canCheck?: boolean;\r\n\r\n /**\r\n * Whether or not this menu item is currently checked.\r\n * @defaultvalue false\r\n */\r\n checked?: boolean;\r\n\r\n /**\r\n * @deprecated\r\n * Deprecated at v.65.1 and will be removed by v 1.0. Use 'checked' instead.\r\n */\r\n isChecked?: boolean;\r\n\r\n /**\r\n * Any custom data the developer wishes to associate with the menu item.\r\n */\r\n data?: any;\r\n\r\n /**\r\n * Callback issued when the menu item is invoked\r\n */\r\n onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => void;\r\n\r\n /**\r\n * An optional URL to navigate to upon selection\r\n */\r\n href?: string;\r\n\r\n /**\r\n * @deprecated\r\n * Deprecated at v.80.0 and will be removed by v 1.0. Use 'subMenuProps' instead.\r\n */\r\n items?: IContextualMenuItem[];\r\n\r\n /**\r\n * Properties to apply to a submenu to this item.\r\n * The ContextualMenu will provide default values for 'target', 'onDismiss', 'isSubMenu',\r\n * 'id', 'shouldFocusOnMount', 'directionalHint', 'className', and 'gapSpace', all of which\r\n * can be overridden.\r\n */\r\n subMenuProps?: IContextualMenuProps;\r\n\r\n /**\r\n * Additional css class to apply to the menu item\r\n * @defaultvalue undefined\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional accessibility label (aria-label) attribute that will be stamped on to the element.\r\n * If none is specified, the arai-label attribute will contain the item name\r\n */\r\n ariaLabel?: string;\r\n\r\n /**\r\n * Optional title for displaying text when hovering over an item.\r\n */\r\n title?: string;\r\n\r\n /**\r\n * Method to custom render this menu item\r\n * @defaultvalue undefined\r\n */\r\n onRender?: (item: any) => React.ReactNode;\r\n\r\n /**\r\n * A function to be executed onMouseDown. This is executed before an onClick event and can\r\n * be used to interrupt native on click events as well. The click event should still handle\r\n * the commands. This should only be used in special cases when react and non-react are mixed.\r\n */\r\n onMouseDown?: (item: IContextualMenuItem, event: any) => void;\r\n\r\n /**\r\n * Any additional properties to use when custom rendering menu items.\r\n */\r\n [propertyName: string]: any;\r\n}\r\n"; });