83 lines
2.2 KiB
Markdown
83 lines
2.2 KiB
Markdown
- Home
|
|
- Components
|
|
- Drag Selectable
|
|
|
|
# Drag Selectable
|
|
|
|
A React component system that enables drag selection over a vertical list of items with toggle-based multi-select behavior.
|
|
|
|
## Live Example
|
|
|
|
Try the drag selection below:
|
|
|
|
- Normal drag: Toggle selection
|
|
- Ctrl/Cmd + drag: Replace selection
|
|
- Escape: Clear all selections
|
|
|
|
```
|
|
import React from 'react';
|
|
import { Card, Badge, useDragSelect } from '@vuer-ai/vuer-uikit';
|
|
|
|
const TODOS = [
|
|
{ key: "1", title: "Learn React hooks" },
|
|
{ key: "2", title: "Build a todo app" },
|
|
{ key: "3", title: "Implement drag selection" },
|
|
// ... more items
|
|
];
|
|
|
|
export default function DragSelectExample() {
|
|
const { selectedItems, getItemProps, clearSelection } = useDragSelect();
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={clearSelection}>
|
|
Clear ({selectedItems.size} selected)
|
|
</button>
|
|
|
|
{TODOS.map(todo => (
|
|
<TodoItem
|
|
key={todo.key}
|
|
title={todo.title}
|
|
checked={selectedItems.has(todo.key)}
|
|
{...getItemProps(todo.key)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Simple API
|
|
|
|
The useDragSelect() hook provides everything you need for drag selection:
|
|
|
|
Returns:
|
|
|
|
- selectedItems: Set<string> - Currently selected item IDs
|
|
- getItemProps(id: string) - Props to spread on selectable items
|
|
- clearSelection() - Function to clear all selections
|
|
- isSelected(id: string) - Check if item is selected
|
|
|
|
Usage: Just import the hook, call it, and spread getItemProps(id) on your items. The hook handles all the complex state management, event handling, and keyboard shortcuts automatically.
|
|
|
|
## Features
|
|
|
|
- Automatic Event Handling - Mouse and keyboard events handled internally
|
|
- Modifier Key Support - Ctrl/Cmd for replace mode, default toggle mode
|
|
- Global Events - Mouse up and Escape key work anywhere on page
|
|
- TypeScript Support - Fully typed hook and props
|
|
- Zero Dependencies - Pure React implementation
|
|
|
|
## Selection Modes
|
|
|
|
- Toggle (default): Items flip their selection state during drag
|
|
- Replace (Ctrl/Cmd + drag): Clear existing selection, start new selection range
|
|
|
|
## Accessibility
|
|
|
|
- Semantic HTML structure
|
|
- Keyboard navigation support
|
|
- Screen reader friendly markup
|
|
- Clear visual feedback for selection states
|
|
|