import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'
import * as DragAndDropStories from './drag-and-drop.stories'
import { Warning } from '../../docs/helpers'

<Meta title="pv-grid/Examples/Drag and Drop" />

## Drag and Drop

The grid supports dragging and dropping rows into new positions and parents. Exactly which features you can leverage depend on your use case and often the capabilities of the API you are working with.

<Warning>
    The grid does not support dragging rows from one grid to another grid.
</Warning>
<br />

### Flat Grid

The simplest use of drag and drop is with a non-hierarchical grid. You can switch this example between single and multiple drag support. To drag multiple rows, first select them using the checkboxes and then start dragging one of the selected rows.

<Warning>
    _Note: you can turn off support for dragging multiple rows even if
    `selectionMode` is set to `multi`, but you cannot leverage dragging multiple
    rows when `selectionMode` is set to `none` or `single`._
</Warning>

<Canvas of={DragAndDropStories.FlatGrid} />

### Tree Grid (Specific order on drop)

In addition to dropping leaf rows on existing parent rows, this example also enables dropping rows on a leaf to turn it into a parent by setting `enableLeafConversion` to `true`. If you try to drop on a milestone, this example has `canDrop` configured to return an error and will prevent the drop from completing.

Tip: while dragging, hover over a parent activity to auto-expand it.

<Canvas of={DragAndDropStories.TreeGridOrdering} />

### Sorted Tree Grid (No specific order on drop)

In some cases, the order of the items is calculated automatically either because the list is sorted or because of other business requirements. In this case, you should set the `mode` to `parent` and the grid will present larger drop areas.

<Canvas of={DragAndDropStories.TreeGridParent} />