rsuite
Version:
A suite of react components
73 lines (72 loc) • 2.69 kB
TypeScript
import React from 'react';
import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
import Button from '../Button';
import NavDropdownItem from './NavDropdownItem';
import NavDropdownMenu from './NavDropdownMenu';
import { NavDropdownToggleProps } from './NavDropdownToggle';
export type NavDropdownTrigger = 'click' | 'hover' | 'contextMenu';
export interface NavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
/** Define the title as a submenu */
title?: React.ReactNode;
/** Set the icon */
icon?: NavDropdownToggleProps['icon'];
/** Triggering events */
trigger?: NavDropdownTrigger | readonly NavDropdownTrigger[];
/** The placement of Menu */
placement?: TypeAttributes.Placement8;
/** Whether or not component is disabled */
disabled?: boolean;
/** The style of the menu */
menuStyle?: React.CSSProperties;
/** A css class to apply to the Toggle DOM node */
toggleClassName?: string;
/** The value of the current option */
eventKey?: T;
/** You can use a custom element type for this toggle component */
toggleAs?: React.ElementType;
/** No caret variation */
noCaret?: NavDropdownToggleProps['noCaret'];
/**
* Open the menu and control it
* @deprecated
*/
open?: boolean;
/**
* @deprecated
*/
renderTitle?: (children: React.ReactNode) => React.ReactNode;
/** Custom Toggle */
renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
/** The callback function that the menu closes */
onClose?: () => void;
/** Menu Pop-up callback function */
onOpen?: () => void;
/** Callback function for menu state switching */
onToggle?: (open: boolean, eventKey?: T | undefined, event?: React.SyntheticEvent) => void;
}
export interface NavDropdownComponent extends RsRefForwardingComponent<'div', NavDropdownProps> {
<ToggleAs extends React.ElementType = typeof Button>(props: NavDropdownProps & {
ref?: React.Ref<any>;
toggleAs?: ToggleAs;
} & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
/**
* @deprecated Use <Nav.Item> instead.
*/
Item: typeof NavDropdownItem;
/**
* @deprecated Use <Nav.Menu> instead.
*/
Menu: typeof NavDropdownMenu;
}
/**
* @private this component is not supposed to be used directly
* Instead it's rendered by a `<Nav.Menu>` call
*
* @example
* <Nav>
* <Nav.Menu> -> This will render <NavDropdown> component
* </Nav.Menu>
* </Nav>
*/
declare const NavDropdown: NavDropdownComponent;
export default NavDropdown;