react-konva-grid
Version:
Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets
91 lines (90 loc) • 2.4 kB
TypeScript
import React from "react";
import { SelectionArea, CellInterface, GridRef } from "./../Grid";
export interface UseSelectionOptions {
/**
* Access grid functions
*/
gridRef?: React.MutableRefObject<GridRef>;
/**
* Initial selections
*/
initialSelections?: SelectionArea[];
/**
* Option to set 0,0 as initially selected cell
*/
initialActiveCell?: CellInterface | null;
/**
* No of columns in the grid
*/
columnCount?: number;
/**
* No of rows in the grid
*/
rowCount?: number;
/**
* Allow multiple selection
*/
allowMultipleSelection?: boolean;
/**
* Allow deselect a selected area
*/
allowDeselectSelection?: boolean;
/**
* If true, user can select multiple selections without pressing Ctrl/Cmd.
* Useful for formula mode
*/
persistantSelectionMode?: boolean;
/**
* onFill
*/
onFill?: (activeCell: CellInterface, selection: SelectionArea | null, selections: SelectionArea[]) => void;
}
export interface SelectionResults {
/**
* Active selected cell
*/
activeCell: CellInterface | null;
/**
* Use this to invoke a new selection. All old selection will be cleared
*/
newSelection: (coords: CellInterface) => void;
/**
* Use this to update selections without clearning old selection.
*/
setSelections: (selection: SelectionArea[]) => void;
/**
* Set the currently active cell
*/
setActiveCell: (coords: CellInterface | null) => void;
/**
* Array of all selection bounds
*/
selections: SelectionArea[];
/**
* Handler for mousedown, use to set activeCell
*/
onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
/**
* Used to move selections based on pressed key
*/
onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
/**
* Mousedown event on fillhandle
*/
fillHandleProps?: Record<string, (e: any) => void>;
/**
*
* Fill selections
*/
fillSelection: SelectionArea | null;
/**
* Clears the last selection
*/
clearLastSelection: () => void;
}
/**
* Hook to enable selection in datagrid
* @param initialSelection
*/
declare const useSelection: (options?: UseSelectionOptions | undefined) => SelectionResults;
export default useSelection;