@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
95 lines (94 loc) • 4.1 kB
TypeScript
export interface UseSplitterPanel {
/** Initial size as percentage (0-100). All panels must sum to 100. */
defaultSize: number;
/** Minimum size percentage, `0` by default */
min?: number;
/** Maximum size percentage, `100` by default */
max?: number;
/** Whether this panel can be collapsed, `false` by default */
collapsible?: boolean;
/** Size below which the panel snaps to collapsed (percentage), defaults to `min` */
collapseThreshold?: number;
}
export interface UseSplitterRedistributeInput {
/** Current sizes before applying delta */
sizes: number[];
/** Panel configurations */
panels: UseSplitterPanel[];
/** Index of the handle being dragged */
handleIndex: number;
/** Requested size change in percentage (positive = grow before-panel) */
delta: number;
}
export type UseSplitterRedistributeFn = (input: UseSplitterRedistributeInput) => number[];
export interface UseSplitterOptions {
/** Panel configuration array (minimum 2 panels) */
panels: UseSplitterPanel[];
/** Layout direction, `'horizontal'` by default */
orientation?: 'horizontal' | 'vertical';
/** Controlled sizes (percentages summing to 100) */
sizes?: number[];
/** Called during resize with updated sizes */
onSizeChange?: (sizes: number[]) => void;
/** Called when drag starts */
onResizeStart?: (handleIndex: number) => void;
/** Called when drag ends */
onResizeEnd?: (handleIndex: number, sizes: number[]) => void;
/** Called when a panel collapses or expands */
onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
/** How to borrow space from non-adjacent panels when the immediate neighbor is at its min/max.
* `'nearest'` takes from the nearest panel in the drag direction first.
* `'equal'` distributes equally among all panels in the drag direction.
* A function receives sizes, panels, handleIndex and delta, and returns new sizes.
* When not set, only the two adjacent panels are affected. */
redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
/** Keyboard step size in percentage, `1` by default */
step?: number;
/** Shift+arrow step size in percentage, `10` by default */
shiftStep?: number;
/** Text direction for keyboard nav, `'ltr'` by default */
dir?: 'ltr' | 'rtl';
/** Enable/disable the hook, `true` by default */
enabled?: boolean;
}
export interface UseSplitterReturnValue<T extends HTMLElement = any> {
/** Ref callback for the container element */
ref: React.RefCallback<T | null>;
/** Current panel sizes as percentages */
sizes: number[];
/** Which panels are currently collapsed */
collapsed: boolean[];
/** Index of handle being dragged, or -1 */
activeHandle: number;
/** Get props to spread on each resize handle */
getHandleProps: (input: {
index: number;
}) => {
ref: React.RefCallback<HTMLElement>;
role: 'separator';
'aria-orientation': 'horizontal' | 'vertical';
'aria-valuenow': number;
'aria-valuemin': number;
'aria-valuemax': number;
tabIndex: number;
onKeyDown: React.KeyboardEventHandler;
'data-active': boolean | undefined;
'data-orientation': 'horizontal' | 'vertical';
};
/** Programmatically set sizes */
setSizes: (sizes: number[]) => void;
/** Collapse a panel */
collapse: (panelIndex: number) => void;
/** Expand a collapsed panel */
expand: (panelIndex: number) => void;
/** Toggle collapse of a panel */
toggleCollapse: (panelIndex: number) => void;
}
export declare function useSplitter<T extends HTMLElement = any>(options: UseSplitterOptions): UseSplitterReturnValue<T>;
export declare namespace useSplitter {
type Panel = UseSplitterPanel;
type Options = UseSplitterOptions;
type RedistributeInput = UseSplitterRedistributeInput;
type RedistributeFn = UseSplitterRedistributeFn;
type ReturnValue<T extends HTMLElement = any> = UseSplitterReturnValue<T>;
}