dnd-multi-view
v0.0.25
Published
Display drag-n-drop dataset in multiple views
Downloads
3
Readme
Strongly customization and Beautiful drag and drop context auto-generated into KANBAN
or List
view
Guides
Basic Drag-and-Drop Context
Usage
This is the minimal/default configuration, with the only-required prop is list
data. Checkout out the API below for more configuration.
import { DndMultiView } from '...dnd-multi-view';
const App = () => {
return (
<DndMultiView
list={data}
kanbanBoardProps={}
listViewProps={}
defaultView="kanban"
grid={8}
/>
);
}
API
<DndMultiView>
Interface: DndMultiViewProps
list
(required): (Array) data is: array of list data, each list have props (requiredid
,title
) and list of items as propitems
(also requiredid
). Here is an example:
const data = [
{
id: 'column-1',
title: 'To do',
items: [
{
id: 'task-1',
content: 'Take out the gabrgabe',
...
},
...
],
...
},
...
]
grid
(optional): (Number) basic spacing unit inpadding
ormargin
between lists and itemsdefaultView
(optional): ('kanban' | 'list'
) default view type in first renderToolbar
(optional): (Function) custom Toolbar, props containsetViewType(type)
kanbanBoarProps
(optional):- Customize style of
column
,title
,title-container
,item-container
,dragging/draggingOver
states draggableColumn
: enable/disable draggable columnsCustomToggleButton
: custom toggle button with props: listindex
,collapse
- current collapse state,toggleCollapse(listIndex)
CustomItem
: custom item component with props:item
data, itemindex
,snapshot
stateCustomAddItem
: custom add-item component with props:item
data, itemindex
,snapshot
state
- Customize style of
listViewProps
(optional):- Customize style of
list
,title
,title-container
,item-container
,dragging/draggingOver
states, we don't allow custom item style because item is complex, depend on user requirement, so you should use aCustomRowItem
component along with your styling disableToggle
: disable toggle item list view functionCustomToggleButton
: custom toggle button with props: listindex
,collapse
- current collapse state,toggleCollapse(listIndex)
CustomRowItem
: custom item component with props:lane
- whole list data,laneIndex
,item
data, itemindex
,snapshot
state,dragHandleProps
- pass all props to make an element can handle drag eventCustomHeadingRowItem
: custom heading-item component with props:lane
- list data andlaneIndex
- Customize style of