import * as React from "react"; import { TabNode } from "../model/TabNode"; import { TabSetNode } from "../model/TabSetNode"; import { IJsonTabNode } from "../model/IJsonModel"; import { Node } from "../model/Node"; import { Action } from "../model/Actions"; import { BorderNode } from "../model/BorderNode"; import { Model } from "../model/Model"; import { DragRectRenderCallback, NodeMouseEvent, ShowOverflowMenuCallback, TabSetPlaceHolderCallback, ITabSetRenderValues, ITabRenderValues, IIcons, IKeyMap } from "./layout/LayoutTypes"; import { ModelLayout } from "../model/ModelLayout"; export interface ILayoutProps { /** the model for this layout */ model: Model; /** factory function for creating the tab components */ factory: (node: TabNode) => React.ReactNode; /** sets a top level class name on popout windows */ popoutClassName?: string; /** keyboard bindings for the layout's command shortcuts (close tab, rename tab, focus toggle, * close overlay border), merged over defaultKeyMap; pass an explicit undefined for a binding to * disable that shortcut. The configured bindings are advertised to assistive technology via * aria-keyshortcuts */ keyMap?: IKeyMap; /** Custom icons for close, pin, maximize, restore, more, popout buttons. */ icons?: IIcons; /** function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning undefined from the function will halt the action, otherwise return the action to continue */ onAction?: (action: Action) => Action | undefined; /** function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized */ onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void; /** function called when rendering a tabset, allows header and buttons to be customized */ onRenderTabSet?: (tabSetNode: TabSetNode | BorderNode, renderValues: ITabSetRenderValues) => void; /** function called when model has changed */ onModelChange?: (model: Model, action: Action) => void; /** Handle external drag-and-drop onto the layout. Return undefined to reject. */ onExternalDrag?: (event: React.DragEvent) => undefined | { json: IJsonTabNode; onDrop?: (node?: Node, event?: React.DragEvent) => void; }; /** function called with default css class name, return value is class name that will be used. Mainly for use with css modules. */ classNameMapper?: (defaultClassName: string) => string; /** Function called for each model string (tab names, group names, tabset names) and * each built-in UI label (button tooltips, context menu items) to allow i18n translation. * The function receives the raw string key and must return the translated string. * Built-in UI labels use keys like "flexlayout.ui.close.tab", "flexlayout.ui.menu.pin", etc. * (see I18nLabel enum). If no translator is registered, built-in UI labels fall back to * their default English text. */ i18nTranslator?: (key: string) => string; /** if left undefined will do simple check based on userAgent */ supportsPopout?: boolean | undefined; /** URL of popout window relative to origin, defaults to popout.html */ popoutURL?: string | undefined; /** boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw */ realtimeResize?: boolean | undefined; /** callback for rendering the drag rectangles */ onRenderDragRect?: DragRectRenderCallback; /** callback for handling context actions on tabs and tabsets */ onContextMenu?: NodeMouseEvent; /** callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks */ onAuxMouseClick?: NodeMouseEvent; /** callback for handling the display of the tab overflow menu */ onShowOverflowMenu?: ShowOverflowMenuCallback; /** callback for rendering a placeholder when a tabset is empty */ onTabSetPlaceHolder?: TabSetPlaceHolderCallback; /** Name given to popout windows, defaults to 'Popout Window' */ popoutWindowName?: string; /** the transition speed of the drag rectangle from one position to another, default is 0.3 secs */ tabDragSpeed?: number; /** set to constrain floating panels to within the layout control */ constrainFloatPanels?: boolean; /** boolean value, defaults to true. When true every render of the host element * invalidates memoized tab content, so factories capturing host state stay fresh. Set to * false when tab content does not depend on host render scope: content then refreshes only * on model changes or an explicit redraw() call, so unrelated parent renders no longer * re-invoke the factory for every visible tab */ invalidateTabContentOnParentRender?: boolean; /** * Wrap the content rendered into a popout window, e.g. to inject css-in-js styles into the * popout document via an emotion {@link https://emotion.sh/docs/cache-provider CacheProvider} * or a styled-components StyleSheetManager targeting the popout document's head. css-in-js * libraries that insert rules through the CSSOM (emotion's production "speedy" mode) are * invisible to the runtime style copy, so styles must be written into the popout document * directly. The default returns the children unchanged. */ renderPopoutContent?: (renderContext: { children: React.ReactNode; layout: ModelLayout; popoutWindow: Window; popoutDocument: Document; }) => React.ReactNode; /** * Called once a popout window's document is ready, before its content is rendered. Allows * styling-specific setup to run with the popout window/document in hand (e.g. pre-creating an * emotion cache or styled-components sheet that targets the popout document). */ onPopoutOpen?: (layout: ModelLayout, popoutWindow: Window, popoutDocument: Document) => void; /** * Called when a popout window closes, after its layout has been removed from the model. Allows * teardown (e.g. disposing per-window style caches). Fires once per popout, including when the * main window unloads. */ onPopoutClose?: (layout: ModelLayout, popoutWindow: Window, popoutDocument: Document) => void; } export interface ILayoutApi { /** re-render the layout */ redraw(): void; /** * 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 by dragging an item to the drop location, must be called from within an HTML * drag start handler. You can use the setDragComponent() method to set the drag image before calling this * method. * @param event the drag start event * @param json the json for the new tab node * @param onDrop a callback to call when the drag is complete */ addTabWithDragAndDrop(event: DragEvent, json: IJsonTabNode, onDrop?: (node?: Node, event?: React.DragEvent) => void): void; /** * Move a tab/tabset using drag and drop, must be called from within an HTML * drag start handler * @param event the drag start event * @param node the tab or tabset to drag */ moveTabWithDragAndDrop(event: DragEvent, node: TabNode | TabSetNode): void; /** * 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; /** * Sets the drag image from a react component for a drag event * @param event the drag event * @param component the react component to be used for the drag image * @param x the x position of the drag cursor on the image * @param y the x position of the drag cursor on the image */ setDragComponent(event: DragEvent, component: React.ReactNode, x: number, y: number): void; /** * Starts the inline rename edit on the given tab's button (the same edit that * double-clicking the tab text starts); does nothing if the tab does not allow renaming * @param tabNodeId the id of the tab node to rename */ editTabName(tabNodeId: string): void; /** Get the root div element of the layout */ getRootDiv(): HTMLDivElement | null | undefined; } /** * A React component that hosts a multi-tabbed layout. * @category Components * @group Main Layout */ declare const Layout: React.ForwardRefExoticComponent>; export { Layout }; export declare const FlexLayoutVersion: string;