office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
229 lines (228 loc) • 6.54 kB
TypeScript
import * as React from 'react';
import { IContextualMenuItem } from './ContextualMenu.types';
import { IMenuItemClassNames } from './ContextualMenu.classNames';
import { IStyle, ITheme } from '../../Styling';
import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
import { IButtonStyles } from '../../Button';
/**
* {@docCategory ContextualMenu}
*/
export interface IContextualMenuRenderItem {
/**
* Function to open this item's subMenu, if present.
*/
openSubMenu: () => void;
/**
* Function to close this item's subMenu, if present.
*/
dismissSubMenu: () => void;
/**
* Dismiss the menu this item belongs to.
*/
dismissMenu: (dismissAll?: boolean) => void;
}
/**
* {@docCategory ContextualMenu}
*/
export interface IContextualMenuItemProps extends React.HTMLAttributes<IContextualMenuItemProps> {
/**
* Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IContextualMenuRenderItem>;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<IContextualMenuItemStyleProps, IContextualMenuItemStyles>;
/**
* Theme provided by High-Order Component.
*/
theme?: ITheme;
/**
* Additional css class to apply to the ContextualMenuItem
* @defaultvalue undefined
*/
className?: string;
/**
* The item to display
*/
item: IContextualMenuItem;
/**
* Classnames for different aspects of a menu item
*/
classNames: IMenuItemClassNames;
/**
* Index of the item
*/
index: number;
/**
* If this item has icons
*/
hasIcons: boolean | undefined;
/**
* Click handler for the checkmark
*/
onCheckmarkClick?: (item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void;
/**
* This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
*/
openSubMenu?: (item: any, target: HTMLElement) => void;
/**
* This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.
*/
dismissSubMenu?: () => void;
/**
* This prop will get set by ContextualMenu and can be called to close the menu this item belongs to.
* If dismissAll is true, all menus will be closed.
*/
dismissMenu?: (ev?: any, dismissAll?: boolean) => void;
/**
* This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem.
* Used for openSubMenu.
*/
getSubmenuTarget?: () => HTMLElement | undefined;
}
/**
* {@docCategory ContextualMenu}
*/
export interface IContextualMenuItemStyleProps {
/**
* Theme provided by High-Order Component.
*/
theme: ITheme;
/**
* Accept custom classNames
*/
className?: string;
/**
* Whether or not the menu item is disabled.
*/
disabled: boolean;
/**
* Whether or not the menu item is expanded.
*/
expanded: boolean;
/**
* Whether or not the menu item is checked.
*/
checked: boolean;
/**
* Indicates if a menu item is an anchor link.
*/
isAnchorLink: boolean;
/**
* Indicates if the icon used is of the known set of icons.
*/
knownIcon: boolean;
/**
* The optional class name to apply to the item element.
*/
itemClassName?: string;
/**
* The optional class name to apply to the divider element.
*/
dividerClassName?: string;
/**
* The optional class name to apply to the icon element.
*/
iconClassName?: string;
/**
* The optional class name to apply to the sub-menu if present.
*/
subMenuClassName?: string;
/**
* Whether or not the primary section of a split menu item is disabled.
*/
primaryDisabled?: boolean;
}
/**
* {@docCategory ContextualMenu}
*/
export interface IContextualMenuItemStyles extends IButtonStyles {
/**
* Style for the root element.
*/
root?: IStyle;
/**
* Styles for a menu item that is an anchor link.
*/
item?: IStyle;
/**
* Styles for a divider item of a ContextualMenu.
*/
divider?: IStyle;
/**
* Styles for the content inside the button/link of the menuItem.
*/
linkContent?: IStyle;
/**
* Styles for a menu item that is an anchor link.
*/
anchorLink?: IStyle;
/**
* Styles for the icon element of a menu item.
*/
icon?: IStyle;
/**
* Default icon color style for known icons.
*/
iconColor?: IStyle;
/**
* Default style for checkmark icons.
*/
checkmarkIcon?: IStyle;
/**
* Styles for the submenu icon of a menu item.
*/
subMenuIcon?: IStyle;
/**
* Styles for the label of a menu item.
*/
label?: IStyle;
/**
* Styles for the secondary text of a menu item.
*/
secondaryText?: IStyle;
/**
* Styles for the container of a split menu item.
*/
splitContainer?: IStyle;
/**
* Styles for the primary portion of a split menu item.
*/
splitPrimary?: IStyle;
/**
* Styles for the menu portion of a split menu item.
*/
splitMenu?: IStyle;
/**
* Styles for a menu item that is a link.
*/
linkContentMenu?: IStyle;
/**
* Styles for hidden screen reader text.
*/
screenReaderText?: IStyle;
}
export interface IContextualMenuItemRenderFunctions {
/**
* Rendering function for check mark icon
*/
renderCheckMarkIcon: (props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
/**
* Rendering function for item icon
*/
renderItemIcon: (props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
/**
* Rendering function for item label
*/
renderItemName: (props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
/**
* Rendering function for secondary text label
*/
renderSecondaryText: (props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
/**
* Rendering function for submenu icon
*/
renderSubMenuIcon: (props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
}