UNPKG

@lonli-lokli/react-mosaic-component

Version:
270 lines (266 loc) 9.83 kB
import { Spec } from 'immutability-helper'; import React__default, { ReactElement } from 'react'; /** * These actions are used to alter the state of the view tree */ interface MosaicRootActions<T extends MosaicKey> { /** * Increases the size of this node and bubbles up the tree * @param path Path to node to expand * @param percentage Every node in the path up to root will be expanded to this percentage */ expand: (path: MosaicPath, percentage?: number) => void; /** * Remove the node at `path` * @param path */ remove: (path: MosaicPath) => void; /** * Hide the node at `path` but keep it in the DOM. Used in Drag and Drop * @param path * @param suppressOnChange (default: false) - if true, won't trigger onChange event */ hide: (path: MosaicPath, suppressOnChange?: boolean) => void; /** * Show a previously hidden node. * This is used to restore a component if a drag operation is cancelled. * @param path * @param suppressOnChange (default: false) - if true, won't trigger onChange event */ show: (path: MosaicPath, suppressOnChange?: boolean) => void; createNode?: CreateNode<T>; /** * Replace currentNode at `path` with `node` * @param path * @param node */ replaceWith: (path: MosaicPath, node: MosaicNode<T>) => void; /** * Atomically applies all updates to the current tree * @param updates * @param suppressOnRelease (default: false) */ updateTree: (updates: MosaicUpdate<T>[], modifiers?: { suppressOnRelease?: boolean; suppressOnChange?: boolean; shouldNormalize?: boolean; }) => void; /** * Returns the root of this Mosaic instance */ getRoot: () => MosaicNode<T> | null; } interface MosaicWindowActions { /** * Fails if no `createNode()` is defined * Creates a new node and splits the current node. * The current node becomes the `first` and the new node the `second` of the result. * `direction` is chosen by querying the DOM and splitting along the longer axis */ split: (...args: any[]) => Promise<void>; /** * Creates a new tab node and replaces the current node. * The current node becomes the first tab and the new node the second tab of the result. */ addTab: (...args: any[]) => Promise<void>; /** * Returns the root of this Mosaic instance */ getRoot: () => MosaicNode<MosaicKey> | null; /** * Fails if no `createNode()` is defined * Convenience function to call `createNode()` and replace the current node with it. */ replaceWithNew: (...args: any[]) => Promise<void>; /** * Sets the open state for the tray that holds additional controls. * Pass 'toggle' to invert the current state. */ setAdditionalControlsOpen: (open: boolean | 'toggle') => void; /** * Returns the path to this window */ getPath: () => MosaicPath; /** * Enables connecting a different drag source besides the react-mosaic toolbar */ connectDragSource: (connectedElements: React__default.ReactElement<any>) => React__default.ReactElement | null; } /** * Mosaic provides functionality on the context for components within * Mosaic to affect the view state. */ /** * Context provided to everything within Mosaic */ interface MosaicContext<T extends MosaicKey> { mosaicActions: MosaicRootActions<T>; mosaicId: string; blueprintNamespace: string; } declare const MosaicContext: React__default.Context<MosaicContext<MosaicKey>>; /** * Context provided to everything within a Mosaic Window */ interface MosaicWindowContext { blueprintNamespace: string; mosaicWindowActions: MosaicWindowActions; } declare const MosaicWindowContext: React__default.Context<MosaicWindowContext>; /** * @deprecated For conversion purposes only. Use `MosaicKey` instead. */ type LegacyMosaicKey = string | number; /** * @deprecated For conversion purposes only. Use `MosaicDirection` instead. */ type LegacyMosaicDirection = 'row' | 'column'; /** * @deprecated For conversion purposes only. Use `MosaicNode` instead. * Base type for the Mosaic binary tree. */ type LegacyMosaicNode<T extends LegacyMosaicKey> = LegacyMosaicParent<T> | T; /** * @deprecated For conversion purposes only. Use `MosaicSplitNode` instead. */ interface LegacyMosaicParent<T extends LegacyMosaicKey> { direction: LegacyMosaicDirection; first: LegacyMosaicNode<T>; second: LegacyMosaicNode<T>; splitPercentage?: number; } /** * @deprecated For conversion purposes only. Use numeric indices for `MosaicPath`. */ type LegacyMosaicBranch = 'first' | 'second'; /** * @deprecated For conversion purposes only. Use `MosaicPath` instead. */ type LegacyMosaicPath = LegacyMosaicBranch[]; /** * A unique identifier for a panel (leaf node) in the mosaic. * @see React.Key */ type MosaicKey = string | number; /** * The direction of a split, where 'row' lays out children horizontally * and 'column' lays them out vertically. */ type MosaicDirection = 'row' | 'column'; /** * A node that splits its children horizontally or vertically. */ interface MosaicSplitNode<T extends MosaicKey> { type: 'split'; direction: MosaicDirection; children: MosaicNode<T>[]; /** * An array of numbers representing the percentage of space each child occupies. * The sum of all numbers in this array should always be 100. * Example: `[30, 70]` or `[25, 50, 25]`. * If not provided, children are assumed to have equal size upon first render. */ splitPercentages?: number[]; } /** * A node that holds multiple panels (leaves) in a tabbed interface. * A valid TabsNode must contain at least two tabs after normalization. */ interface MosaicTabsNode<T extends MosaicKey> { type: 'tabs'; tabs: T[]; /** The index of the currently visible tab. */ activeTabIndex: number; } /** * The base type for the Mosaic n-ary tree. It can be a split container, * a tab container, or a single panel (leaf). * A leaf node is represented simply by its key `T`. */ type MosaicNode<T extends MosaicKey> = MosaicSplitNode<T> | MosaicTabsNode<T> | T; /** * The path to a node in the n-ary tree, represented by an array of numeric indices. * An empty array `[]` refers to the root node. */ type MosaicPath = number[]; /** * A specification for an update to the mosaic tree, compatible with `immutability-helper`. */ type MosaicUpdateSpec<T extends MosaicKey> = Spec<MosaicNode<T>>; interface MosaicUpdate<T extends MosaicKey> { path: MosaicPath; spec: MosaicUpdateSpec<T>; } /** * A function that renders a panel's content, given its key and path. */ type TileRenderer<T extends MosaicKey> = (t: T, path: MosaicPath) => ReactElement; /** * A function that renders the title content for a tab given its key and path. * If not provided, the tabKey will be used as the title. */ type TabTitleRenderer<T extends MosaicKey> = (props: { tabKey: T; index: number; isActive: boolean; path: MosaicPath; mosaicId: string; }) => React.ReactNode; /** * The close state of a tab. */ type TabCloseState = 'canClose' | 'cannotClose' | 'noClose'; /** * A function that determines whether a tab can be closed. */ type TabCanCloseFunction<T extends MosaicKey> = (tabKey: T, tabs: T[], index: number, path: MosaicPath) => TabCloseState; /** * A function that renders the tab button for a tab. * If not provided, the DefaultButton will be used. */ type TabButtonRenderer<T extends MosaicKey> = (props: { tabKey: T; index: number; isActive: boolean; path: MosaicPath; mosaicId: string; onTabClick: () => void; mosaicActions: MosaicRootActions<T>; renderTabTitle?: TabTitleRenderer<T>; canClose?: TabCanCloseFunction<T>; onTabClose?: (tabKey: T, index: number) => void; tabs: T[]; }) => React.ReactElement; /** * A function that renders the entire toolbar for a tab group. * It receives the props for the tab group and a DraggableTab component for making tabs draggable. */ type TabToolbarRenderer<T extends MosaicKey> = (props: { tabs: T[]; activeTabIndex: number; path: MosaicPath; DraggableTab: React.ComponentType<{ tabKey: T; tabIndex: number; children: (dragProps: { isDragging: boolean; connectDragSource: (element: React.ReactElement) => React.ReactElement | null; connectDragPreview: (element: React.ReactElement) => React.ReactElement | null; }) => React.ReactElement; }>; }) => React.ReactElement; /** * A function that provides a new node to insert into the tree. */ type CreateNode<T extends MosaicKey> = (...args: any[]) => Promise<MosaicNode<T>> | MosaicNode<T>; /** * Drag type identifier used by `react-dnd`. */ declare const MosaicDragType: { WINDOW: string; }; interface EnabledResizeOptions { minimumPaneSizePercentage?: number; } type ResizeOptions = 'DISABLED' | EnabledResizeOptions; export { type CreateNode as C, type EnabledResizeOptions as E, type LegacyMosaicNode as L, type MosaicNode as M, type ResizeOptions as R, type TileRenderer as T, type MosaicSplitNode as a, type MosaicTabsNode as b, MosaicDragType as c, type MosaicDirection as d, type MosaicPath as e, type MosaicUpdate as f, type MosaicUpdateSpec as g, type TabTitleRenderer as h, type TabButtonRenderer as i, type TabToolbarRenderer as j, type TabCanCloseFunction as k, type TabCloseState as l, type LegacyMosaicParent as m, type LegacyMosaicKey as n, type LegacyMosaicDirection as o, type LegacyMosaicBranch as p, type LegacyMosaicPath as q, MosaicContext as r, type MosaicRootActions as s, type MosaicWindowActions as t, MosaicWindowContext as u, type MosaicKey as v };