react-selectable-box
Version:
A React component used hooks that allows you to select elements in the drag area using the mouse
37 lines (36 loc) • 1.15 kB
TypeScript
import React from 'react';
export type Rule = 'collision' | 'inclusion' | ((boxElement: HTMLDivElement, boxPosition: {
left: number;
top: number;
width: number;
height: number;
}) => boolean);
export type UnmountItemsInfoType<T> = Map<T, {
rect: DOMRect;
scrollTop: number;
scrollLeft: number;
rule: Rule;
disabled?: boolean;
}>;
interface ISelectableContext<T> {
selectingValue: React.MutableRefObject<T[]>;
boxPosition: {
top: number;
left: number;
width: number;
height: number;
};
isDragging: boolean;
value: T[] | undefined;
mode: 'add' | 'remove' | 'reverse';
scrollContainer: HTMLElement | null;
startTarget: HTMLElement | null;
startInside: React.MutableRefObject<boolean>;
unmountItemsInfo: React.MutableRefObject<UnmountItemsInfoType<T>>;
virtual: boolean;
boxRef: React.MutableRefObject<HTMLDivElement | null>;
compareFn: (a: T, b: T) => boolean;
}
export declare const SelectableContext: React.Context<ISelectableContext<any>>;
export declare const useSelectableContext: () => ISelectableContext<any>;
export {};