///
import React from 'react';
import { RendererEnv, RendererProps } from 'amis-core';
import { ThemeProps } from 'amis-core';
import { BadgeObject } from 'amis-ui';
import { IScopedContext } from 'amis-core';
import type { BaseSchema, SchemaObject, SchemaApi, SchemaIcon, SchemaUrlPath, SchemaCollection, SchemaClassName } from '../Schema';
export declare type NavItemSchema = {
/**
* 文字说明
*/
label?: string | SchemaCollection;
/**
* 图标类名,参考 fontawesome 4。
*/
icon?: SchemaIcon;
to?: SchemaUrlPath;
target?: string;
unfolded?: boolean;
active?: boolean;
defer?: boolean;
deferApi?: SchemaApi;
children?: Array;
} & Omit;
export interface NavOverflow {
/**
* 是否开启响应式收纳
*/
enable: boolean;
/**
* 菜单触发按钮的文字
*/
overflowLabel?: string | SchemaObject;
/**
* 菜单触发按钮的图标
* @default "fa fa-ellipsis"
*/
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;
}
/**
* Nav 导航渲染器
* 文档:https://baidu.gitee.io/amis/docs/components/nav
*/
export interface NavSchema extends BaseSchema {
/**
* 指定为 Nav 导航渲染器
*/
type: 'nav';
/**
* 链接地址集合
*/
links?: Array;
/**
* @default 24
*/
indentSize: number;
/**
* 可以通过 API 拉取。
*/
source?: SchemaApi;
/**
* 懒加载 api,如果不配置复用 source 接口。
*/
deferApi?: SchemaApi;
/**
* true 为垂直排列,false 为水平排列类似如 tabs。
*/
stacked?: boolean;
/**
* 更多操作菜单列表
*/
itemActions?: SchemaCollection;
/**
* 可拖拽
*/
draggable?: boolean;
/**
* 保存排序的 api
*/
saveOrderApi?: SchemaApi;
/**
* 角标
*/
itemBadge?: BadgeObject;
/**
* 仅允许同层级拖拽
*/
dragOnSameLevel?: boolean;
/**
* 横向导航时自动收纳配置
*/
overflow?: NavOverflow;
}
export interface Link {
className?: string;
label?: string | SchemaCollection;
to?: string;
target?: string;
icon?: string;
active?: boolean;
activeOn?: string;
unfolded?: boolean;
children?: Links;
defer?: boolean;
loading?: boolean;
loaded?: boolean;
[propName: string]: any;
itemBadge?: BadgeObject;
}
export interface Links extends Array {
}
export interface NavigationState {
error?: string;
dropIndicator?: {
top: number;
left: number;
width: number;
height?: number;
opacity?: number;
};
}
export interface NavigationProps extends ThemeProps, Omit {
onSelect?: (item: Link) => void | false;
onToggle?: (item: Link, forceFold?: boolean) => void;
onDragUpdate?: (dropInfo: IDropInfo) => void;
onOrderChange?: (res: Link[]) => void;
togglerClassName?: string;
links?: Array;
loading?: boolean;
render: RendererProps['render'];
env: RendererEnv;
data: Object;
reload?: any;
overflow?: NavOverflow;
}
export interface IDropInfo {
dragLink: Link | null;
nodeId: string;
position: string;
rect: DOMRect;
height: number;
left: number;
}
export declare class Navigation extends React.Component {
static defaultProps: Pick;
dragNode: {
node: HTMLElement;
link: Link | null;
} | null;
dropInfo: IDropInfo | null;
startPoint: {
y: number;
x: number;
};
state: NavigationState;
handleClick(link: Link): void;
toggleLink(target: Link, forceFold?: boolean): void;
getDropInfo(e: DragEvent, id: string, depth: number): IDropInfo;
updateDropIndicator(e: DragEvent): void;
handleDragStart(link: Link): (e: React.DragEvent) => void;
handleDragOver(e: DragEvent): void;
handleDragEnd(e: DragEvent): void;
renderItem(link: Link, index: number, depth?: number): JSX.Element | null;
renderOverflowNavs(overflowConfig: NavOverflow): JSX.Element;
render(): JSX.Element;
}
declare const ThemedNavigation: {
new (props: Pick, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps): {
ref: any; /**
* 包裹导航的外层标签名,可以使用其他标签渲染
* @default "ul"
*/
childRef(ref: any): void;
getWrappedInstance(): any;
render(): JSX.Element;
context: any;
setState(state: {} | ((prevState: Readonly<{}>, props: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
forceUpdate(callback?: (() => void) | undefined): void;
readonly props: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps> & Readonly<{
children?: React.ReactNode; /**
* 懒加载 api,如果不配置复用 source 接口。
*/
}>;
state: Readonly<{}>;
refs: {
[key: string]: React.ReactInstance;
};
componentDidMount?(): void;
shouldComponentUpdate?(nextProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
componentWillUnmount?(): void;
componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
getSnapshotBeforeUpdate?(prevProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
componentDidUpdate?(prevProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
componentWillMount?(): void;
UNSAFE_componentWillMount?(): void;
componentWillReceiveProps?(nextProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
UNSAFE_componentWillReceiveProps?(nextProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
componentWillUpdate?(nextProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
UNSAFE_componentWillUpdate?(nextProps: Readonly, "hidden" | "$ref" | "disabled" | "disabledOn" | "hiddenOn" | "visible" | "visibleOn" | "id" | "onEvent" | "render" | "env" | "data" | "source" | "itemBadge" | "loading" | "reload" | "draggable" | "deferApi" | "onSelect" | "onToggle" | "itemActions" | "saveOrderApi" | "links" | "stacked" | "dragOnSameLevel" | "overflow" | "onDragUpdate" | "onOrderChange" | "togglerClassName"> & Partial, "indentSize">> & Partial, never>> & import("amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
};
displayName: string;
contextType: React.Context;
ComposedComponent: React.ComponentType;
} & import("hoist-non-react-statics").NonReactStatics & {
ComposedComponent: typeof Navigation;
};
export default ThemedNavigation;
export declare class NavigationRenderer extends React.Component {
static contextType: React.Context;
remoteRef: {
loadConfig: (ctx?: any) => Promise | void;
setConfig: (value: any) => void;
} | undefined;
remoteConfigRef(ref: any): void;
constructor(props: RendererProps, context: IScopedContext);
componentWillUnmount(): void;
reload(target?: string, query?: any, values?: object): void;
receive(values: object): void;
render(): JSX.Element;
}