flexlayout-react
Version:
A multi-tab docking layout manager
114 lines (113 loc) • 4.83 kB
TypeScript
import * as React from "react";
import { I18nLabel } from "../I18nLabel";
import { Rect } from "../Rect";
import { Action } from "../model/Action";
import { BorderNode } from "../model/BorderNode";
import { IJsonTabNode } from "../model/IJsonModel";
import { Model } from "../model/Model";
import { Node } from "../model/Node";
import { TabNode } from "../model/TabNode";
import { TabSetNode } from "../model/TabSetNode";
export interface ILayoutProps {
model: Model;
factory: (node: TabNode) => React.ReactNode;
icons?: IIcons;
onAction?: (action: Action) => Action | undefined;
onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
onRenderTabSet?: (tabSetNode: TabSetNode | BorderNode, renderValues: ITabSetRenderValues) => void;
onModelChange?: (model: Model, action: Action) => void;
onExternalDrag?: (event: React.DragEvent<HTMLElement>) => undefined | {
json: any;
onDrop?: (node?: Node, event?: React.DragEvent<HTMLElement>) => void;
};
classNameMapper?: (defaultClassName: string) => string;
i18nMapper?: (id: I18nLabel, param?: string) => string | undefined;
supportsPopout?: boolean | undefined;
popoutURL?: string | undefined;
realtimeResize?: boolean | undefined;
onRenderDragRect?: DragRectRenderCallback;
onContextMenu?: NodeMouseEvent;
onAuxMouseClick?: NodeMouseEvent;
onShowOverflowMenu?: ShowOverflowMenuCallback;
onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
windowId?: string;
parentLayout?: Layout;
}
interface ILayoutState {
rect: Rect;
editingTab?: TabNode;
portal?: React.ReactPortal;
showEdges?: boolean;
showOverlay: boolean;
modelRevision: number;
}
/**
* A React component that hosts a multi-tabbed layout
*/
export declare class Layout extends React.Component<ILayoutProps, ILayoutState> {
constructor(props: ILayoutProps);
sortPortals(portals: Map<string, React.ReactNode>): React.ReactNode[];
renderEdgeIndicators(): React.ReactNode[];
renderWindows(): React.ReactNode[];
renderTabs(): {
portals: Map<string, React.ReactNode>;
tabStamps: React.ReactNode[];
};
renderHoistedTabs(): React.ReactNode[];
getFactory(): (node: TabNode) => React.ReactNode;
/**
* Adds a new tab to the given tabset
* @param tabsetId the id of the tabset where the new tab will be added
* @param json the json for the new tab node
* @returns the added tab node or undefined
*/
addTabToTabSet(tabsetId: string, json: IJsonTabNode): TabNode | undefined;
/**
* Adds a new tab to the active tabset (if there is one)
* @param json the json for the new tab node
* @returns the added tab node or undefined
*/
addTabToActiveTabSet(json: IJsonTabNode): TabNode | undefined;
getIcons: () => IIcons;
showOverlay(show: boolean): void;
setDraggingOverWindow(overWindow: boolean): void;
}
export type DragRectRenderCallback = (content: React.ReactElement | undefined, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
export type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | undefined;
export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {
index: number;
node: TabNode;
}[], onSelect: (item: {
index: number;
node: TabNode;
}) => void) => void;
export type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
export interface ITabSetRenderValues {
stickyButtons: React.ReactNode[];
buttons: React.ReactNode[];
overflowPosition: number | undefined;
}
export interface ITabRenderValues {
leading: React.ReactNode;
content: React.ReactNode;
name: string;
buttons: React.ReactNode[];
}
export interface ITitleObject {
titleContent: React.ReactNode;
name: string;
}
export interface IIcons {
close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
closeTabset?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
popout?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: {
node: TabNode;
index: number;
}[]) => React.ReactNode));
edgeArrow?: React.ReactNode;
}
export {};