@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
42 lines • 1.63 kB
TypeScript
import { ComputedRef, Ref } from 'vue';
import { ResizableDirection, ResizablePanelState } from '../resizable_constants';
import { ResizeHandler } from './useResizableCalculations';
export type DragState = DragStateIdle | DragStateActive;
export interface DragStateIdle {
isActive: false;
handleId: null;
beforePanelId: null;
afterPanelId: null;
proposedBeforeSize: 0;
proposedAfterSize: 0;
}
export interface DragStateActive {
isActive: true;
handleId: string;
beforePanelId: string;
afterPanelId: string;
proposedBeforeSize: number;
proposedAfterSize: number;
}
export interface UseResizableDragOptions {
direction: ComputedRef<ResizableDirection>;
containerRef: Ref<HTMLElement | null>;
panels: ComputedRef<ResizablePanelState[]> | Ref<ResizablePanelState[]>;
containerSize: ComputedRef<number> | Ref<number>;
resizeHandler: ResizeHandler;
onDragEnd: (beforePanelId: string, afterPanelId: string, beforeSize: number, afterSize: number, sizesChanged: boolean) => void;
onDragStart?: (handleId: string) => void;
}
export declare function findPanelsForHandle(handleId: string, panels: ResizablePanelState[]): {
beforePanel: ResizablePanelState | null;
afterPanel: ResizablePanelState | null;
};
export declare function useResizableDrag(options: UseResizableDragOptions): {
dragState: import('vue').Reactive<DragState>;
startDrag: (handleId: string) => void;
onDragMove: (event: PointerEvent) => void;
commitDrag: () => void;
cancelDrag: () => void;
cleanup: () => void;
};
//# sourceMappingURL=useResizableDrag.d.ts.map