///
import type { UseMenuItemProps } from '@sheinx/hooks';
import { KeygenResult, KeygenType, ObjectKey } from '@sheinx/hooks';
import { CommonType } from '../common/type';
import { PopoverJssStyle } from '../popover/popover.type';
export type MenuMode = 'inline' | 'vertical' | 'horizontal' | 'vertical-auto';
export interface MenuClasses {
rootClass: string;
wrapper: string;
wrapperInline: string;
wrapperVertical: string;
wrapperHorizontal: string;
wrapperHasOpen: string;
wrapperLight: string;
wrapperDark: string;
wrapperCollapse: string;
wrapperInTransition: string;
wrapperInlineAnimate: string;
header: string;
root: string;
children: string;
childrenShow: string;
childrenHidden: string;
childrenUp: string;
item: string;
itemActive: string;
itemDisabled: string;
itemOpen: string;
itemClosing: string;
itemInPath: string;
itemHasChildren: string;
itemContent: string;
itemContentFront: string;
itemContentBack: string;
title: string;
titleIcon: string;
titleContent: string;
expand: string;
expandFront: string;
expandBack: string;
expandHover: string;
expandVertical: string;
scrollbar: string;
scrollbarX: string;
scrollbarY: string;
scrollbarDragging: string;
scrolbarHandler: string;
scrollbox: string;
icon: string;
childrenHasExpand: string;
popover?: string;
popArrow?: string;
popArrowDark?: string;
}
export interface MenuJssStyle extends PopoverJssStyle {
menu?: () => MenuClasses;
}
/**
* @title Menu
*/
export interface MenuProps extends Pick {
jssStyle?: MenuJssStyle;
/**
* @en style of menu
* @cn 菜单样式
* @default 'inline'
*/
mode?: MenuMode;
/**
* @en Menu items data
* @cn 需要渲染成菜单的数据
* @default []
* @override object[]
*/
data?: DataItem[];
/**
* @en theme of menu
* @cn 主题
*/
theme?: 'dark' | 'light';
/**
* @en menu height
* @cn 菜单高度
*/
height?: number | string;
/**
* @en expended menu
* @cn 展开的菜单(受控)
* @default []
* @override (string | number)[]
*/
openKeys?: Key[];
/**
* @en triangle expansion color
* @cn 三角展开符颜色
*/
caretColor?: string;
/**
* @en Front solid triangle expansion
* @cn 前置实心三角展开符
*/
frontCaret?: boolean;
/**
* @en indent of each level
* @cn 每一层缩进宽度
* @default 24
*/
inlineIndent?: number;
/**
* @en whether to animate when inline menu expand or collapse
* @cn inline 模式下菜单展开或收起时是否启用动画
* @default false
* @version 3.9.1
*/
inlineAnimate?: boolean;
/**
* @en menu item expandable if has children
* @cn 如果 children 有设置则菜单项可展开
* @default false
*/
looseChildren?: boolean;
/**
* @private 内部属性
*/
toggleDuration?: number;
/**
* @en Key generator. When it is true, the data itself is used as the key equivalent to (d => d). When it is a function, use its return value. When it is a string,ues the value of the string. For example, 'id' is the same thing as (d) => d.id.
* @cn 生成每一项key的辅助方法。为 true 时,以数据项本身作为key,相当于 (d => d)。为函数时,使用此函数返回值。为string时,使用这个string对应的数据值。如 'id',相当于 (d => d.id)
* @default true
*/
keygen: KeygenType;
/**
* @en Initial expanded menu
* @cn 初始展开的菜单;如果需要设置此值,则需要设置keygen,此值为一个包含key的数组
* @default []
* @override (string | number)[]
*/
defaultOpenKeys?: Key[];
/**
* @en parent menu Selectable
* @cn 父级菜单是否可选中
* @default false
*/
parentSelectable?: boolean;
/**
* @en The function will be called when the user clicks the menu item.
* @cn 子菜单点击事件,参数为当条数据
*/
onClick?: (data: DataItem) => void;
/**
* @en The item is actived when the active function return true.
* @cn 验证是否激活,参数为对应的数据对象,返回true则代表该菜单激活
*/
active?: (data: DataItem) => boolean;
/**
* @en Whether to be disabled
* @cn 是否禁用选项
* @default d => d.disabled
*/
disabled?: (data: DataItem) => boolean;
/**
* @en front triangle expansion symbol type
* @cn 前置三角展开符类型
* @default 'solid'
*/
frontCaretType?: 'hollow' | 'solid';
/**
* @en menu open change callback
* @cn 菜单展开/收起回调
*/
onOpenChange?: (keys: Key[]) => void;
/**
* @en the key of inject the link value of the submenu
* @cn 需要注入子菜单的链接键值
*/
linkKey?: ((d: DataItem) => string) | ObjectKey;
/**
* @en Element render mode. If it is a string, the corresponding value is taken as the display content; If it is a function, the result returned by the function is taken as the display content.
* @cn 元素渲染方式,如果为字符串,则会以对应的值作为显示内容;如果为函数,则以函数返回的结果作为显示内容,函数参数为对应的数据对象
* @default 'title'
*/
renderItem?: ((data: DataItem, index: number) => React.ReactNode) | ObjectKey;
/**
* @cn 渲染Icon
* @en Render Icon
*/
renderIcon?: (data: DataItem) => React.ReactNode;
/**
* @cn 是否折叠
* @en Whether to collapse
* @default false
*/
collapse?: boolean;
/**
* @cn 头部内容, 仅在 mode为 'inline' 时生效
*/
header?: React.ReactNode;
/**
* @en Get custom props for each menu item (e.g., tracking attributes). The function will be called for each menu item with the data, level, hasChildren and index as parameters. Note: Properties returned by this function have higher priority than data-* attributes in the data item. For parent nodes, attributes will be applied to the clickable div element; for leaf nodes, attributes will be applied to the li element.
* @cn 获取每个菜单项的自定义属性(如埋点属性等)。该函数会为每个菜单项调用,参数包括数据项、层级、是否有子节点和索引。注意:该函数返回的属性优先级高于数据项中的 data-* 属性。对于父节点,属性会应用到可点击的 div 元素上;对于叶子节点,属性会应用到 li 元素上。
* @version 3.9.6
*/
getItemProps?: (data: DataItem, info: {
/** 是否有子节点(父节点) */
hasChildren: boolean;
/** 在当前层级的索引 */
index: number;
/** 当前层级,0 为根节点 */
level: number;
}) => React.HTMLAttributes & Record;
}
export interface MenuItemProps extends UseMenuItemProps, Pick, 'renderItem' | 'keygen' | 'linkKey' | 'frontCaret' | 'frontCaretType' | 'caretColor' | 'jssStyle' | 'inlineIndent' | 'inlineAnimate' | 'theme' | 'renderIcon' | 'getItemProps'> {
index: number;
level: number;
scrollRef: React.MutableRefObject;
collapse?: boolean;
isEdgeItem?: boolean;
}
//# sourceMappingURL=menu.type.d.ts.map