jamis/lib/r-nav/Nav.types.d.ts

一种支持通过JSON配置方式生成页面的组件库

import type { RendererEnv, RendererProps, SchemaBoolean, SchemaClassName, ThemeProps, WithRemoteItem } from 'jamis-core';
import type { BadgeObject, BaseSchema, SchemaApi, SchemaCollection, SchemaIcon, SchemaObject, SchemaUrlPath } from '../types';
/**
 * Nav 导航渲染器
 *
 */
export interface NavSchema extends BaseSchema {
    /**
     * 指定为 Nav 导航渲染器
     */
    type: 'nav';
    /**
     * 链接地址集合
     */
    links?: Array<NavItemSchema>;
    listClassName?: SchemaClassName;
    /** 链接样式 */
    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 type NavItemSchema = {
    /**
     * 文字说明
     */
    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<NavItemSchema>;
    /**
     * 编号, 默认会生成guid
     */
    id?: number | string;
    /**
     * Badge 角标文字
     */
    customText?: string;
    /**
     * Badge 角标级别, 颜色不同
     */
    customLevel?: 'danger' | 'success';
} & Omit<BaseSchema, 'type' | 'id'>;
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, ThemeProps, Omit<NavSchema, 'type' | 'className'> {
    onSelect?: (item: NavLink) => Promise<void | false>;
    onToggle?: (item: NavLink, forceFold?: boolean) => void;
    onDragUpdate?: (dropInfo: NavDropInfo) => void;
    onOrderChange?: (res: NavLink[]) => void;
    togglerClassName?: string;
    links?: Array<NavLink>;
    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;
}