cgreact-core/types/cgreact-type-menu.ts

未发表！CGReact前端Web研发框架核心包

/** MenuState数据结构定义*/
import {LayoutState} from "./cgreact-type-layout";
import {ModalState} from "./cgreact-type-modal";

type CGReactMenuLine = {
    label?: string, //标签文字
    icon?: string, // 可以配置img的src路径，或者图标渲染
    budget?: true | number,//右上角红色表示，true渲染一个小圆点，number则渲染红色圆圈
    value?: string,//为选项绑定的一个变量，会在菜单的点击回调函数中传递
    select?: boolean,//菜单的选中情况
    onClick?: (value: string) => void //菜单的点击事件
    expandType?: "side" | "fold", //按钮组的展开方式可以是右侧弹出或者向下折叠
    expand?: boolean, //当前是否折叠，expandType为side时生效，需要通过点击事件展开折叠，fold状态下hover时自动展开，非悬停自动折叠
    child?: CGReactMenuItem //下层子菜单，支持嵌套
}
type CGReactMenuItem = { [key in string]: CGReactMenuLine | string };
type CGReactMenuState = {
    menuType?: "horizontal" | "vertical" | "popdown",//菜单类型可以是横纵向的navigator导航，也可以是弹出或者下拉菜单
    menuItem?: CGReactMenuItem
} //配置数据类型定义
export interface MenuItem extends CGReactMenuItem{}
export interface MenuState extends CGReactMenuState {}

/* MenuProp数据类型*/
type CGReactMenuProp = {
    data?: CGReactMenuState, //元素state数据配置
    layout?: LayoutState, //元素布局配置
    modal?: ModalState | boolean,  //组件绑定的对话框数据结构
} ;//Prop是保持和Comp一致
export interface MenuProp extends CGReactMenuProp, LayoutState {}

/**回调函数数据类型*/
export interface MenuConfig
{
    menuType: "horizontal" | "vertical" | "popdown",
    menuItem: Array<ItemConfig>
} //菜单条目配置
export interface ItemConfig
{
    key: string, //标签的键名
    label: string, //标签文字
    icon: string, // 可以配置img的src路径，或者图标渲染
    level: number,//菜单级别
    budget: true | number,//右上角红色表示，true渲染一个小圆点，number则渲染红色圆圈
    value: string,//为选项绑定的一个变量，会在菜单的点击回调函数中传递
    onClick: (value: string) => void, //菜单的点击事件
    select: boolean,//菜单的选中情况
    showIndex: number, //菜单的叶子节点显示顺序，非叶子（隐藏）节点为-1
    expType: "fold" | "side", //菜单的展开类型
    expand: boolean, //当前是否折叠，代理同步到配置
    hover: boolean,//菜单是否展示悬停
    parent: ItemConfig, //上层菜单
    child: Array<ItemConfig> //下层子菜单，支持嵌套
}