import type { ReactPropsBase, RendererEnv, RendererProps, SchemaBoolean, SchemaClassName, SchemaExpression, WithRemoteItem } from 'jamis-core'; import type { BadgeObject, BaseSchema, SchemaApi, SchemaCollection, SchemaIcon, SchemaObject, SchemaSlots, SchemaUrlPath } from '../types'; /** * Nav 导航组件 * */ export interface NavSchema extends BaseSchema { /** * 指定为 Nav 导航组件 */ type: 'nav'; /** * 链接地址集合 */ links?: Array; /** * 链接激活表达式, 可以通过`link`访问到链接对象, `links`可以访问到全部的链接对象 */ linkActiveOn?: SchemaExpression; linkActiveTrackExpr?: SchemaExpression; slots?: SchemaSlots<'Nav' /** 每个导航项元素 */ | 'Nav-item' /** 每个导航项链接元素 */ | 'Nav-item-link' /** 导航项的角标元素 */ | 'Nav-itemBadge' /** 更多操作元素 */ | 'Nav-item-actions' /** 拖拽排序按钮元素 */ | 'Nav-itemDrager' /** 异步加载项正在加载中元素 */ | 'Nav-spinner' /** 导航项展开按钮元素 */ | 'Nav-itemToggler' /** 导航项前面的图标元素 */ | 'Nav-itemIcon' /** 导航项的子项容器元素 */ | 'Nav-subItems' | 'Nav-list--tabs' | 'Nav-list--stacked' | 'Nav-list' | 'Nav-item-overflow-popover' | 'Nav-list-overflow' | 'Nav-item-overflow' | 'Nav-dropIndicator' | (string & {})>; /** * @deprecated 请使用`slots.Nav-list.className` */ listClassName?: SchemaClassName; /** 链接样式 @deprecated 请使用`slots.Nav-item-link.className` */ linkClassName?: SchemaClassName; /** * 缩进值, 只能是4的倍数 * @default 24 */ indentSize?: number; /** * 可以通过 API 拉取。 */ source?: SchemaApi; /** * 懒加载 api,如果不配置复用 source 接口。 */ deferApi?: SchemaApi; /** * true 为垂直排列,false 为水平排列类似如 tabs。 */ stacked?: boolean; /** * 角标 */ itemBadge?: BadgeObject; /** * 更多操作菜单列表 */ itemActions?: SchemaCollection; /** * 可拖拽 */ draggable?: boolean; /** * 保存排序的 api */ saveOrderApi?: SchemaApi; /** * 仅允许同层级拖拽 */ dragOnSameLevel?: boolean; /** * 横向导航时自动收纳配置 */ overflow?: NavOverflow; /** * 是否可搜索 */ searchable?: boolean; searchableOn?: SchemaBoolean; } export interface NavItemSchema extends Omit { /** * 文字说明 */ label?: string | SchemaCollection; /** * 图标类名,参考 ant-design/icons。 */ icon?: SchemaIcon; to?: SchemaUrlPath; target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'; unfolded?: boolean; active?: boolean; activeOn?: SchemaBoolean; defer?: boolean; deferApi?: SchemaApi; children?: Array; /** * 编号, 默认会生成guid */ id?: number | string; /** * Badge 角标文字 */ customText?: string; /** * Badge 角标级别, 颜色不同 */ customLevel?: 'danger' | 'success'; } export interface NavOverflow { /** * 是否开启响应式收纳 */ enable: boolean; /** * 菜单触发按钮的文字 */ overflowLabel?: string | SchemaObject; /** * 菜单触发按钮的图标 * @default "EllipsisOutlined" */ overflowIndicator?: SchemaIcon; /** * 菜单触发按钮CSS类名 */ overflowClassName?: SchemaClassName; /** * Popover浮层CSS类名 */ overflowPopoverClassName?: SchemaClassName; /** * 菜单外层CSS类名 */ overflowListClassName?: SchemaClassName; /** * 导航横向布局时,开启开启响应式收纳后最大可显示数量,超出此数量的导航将被收纳到下拉菜单中 */ maxVisibleCount?: number; /** * 包裹导航的外层标签名,可以使用其他标签渲染 * @default "ul" */ wrapperComponent?: string; /** * 导航项目宽度 * @default 160 */ itemWidth?: number; /** * 导航列表后缀节点 */ overflowSuffix?: SchemaCollection; /** * 自定义样式 */ style?: React.CSSProperties; /** * 菜单DOM挂载点 */ popOverContainer?: any; } export interface NavLink extends WithRemoteItem { children?: NavLink[]; className?: string; icon?: string; itemBadge?: BadgeObject; label?: SchemaCollection; target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'; to?: string; /** 唯一标识 */ id?: string | number; unfolded?: boolean; [propName: string]: any; } export interface NavigationProps extends RendererProps, ReactPropsBase, Omit { onSelect?: (item: NavLink) => Promise; onToggle?: (item: NavLink, forceFold?: boolean) => void; onDragUpdate?: (dropInfo: NavDropInfo) => void; onOrderChange?: (res: NavLink[]) => void; togglerClassName?: string; links?: Array; loading?: boolean; render: RendererProps['render']; env: RendererEnv; reload?: () => void; overflow?: NavOverflow; listClassName?: string; linkClassName?: string; location?: any; unfoldedField?: string; foldedField?: string; } export interface NavDropInfo { dragLink: NavLink | null; nodeId: string; position: string; rect: DOMRect; height: number; left: number; }