Two column layout with drag and drop, using react beautiful dnd and material ui for layout
npm install --save estella-two-column-dnd
import React from "react";
import { TwoColumnDnD } from "estella-two-column-dnd";
import { Card, Typography } from "@material-ui/core";
const getItem = index => {
return {
title: `title-${index}`,
id: index
};
};
const getItems = n => {
return Array(n).fill(null)
.map((item, index) => getItem(index));
};
const App = () => {
return <TwoColumnDnD
firstListItems={getItems(10)}
secondListItems={getItems(5)}
forbiddenIndexes={[0, 15]}
itemRender={(item) => (<Card style={{margin: '1em'}}><Typography variant="h6">{item.title}</Typography></Card>)}
/>;
};
export default App;
Sample code renders this view:
Prop name | Destination | Type | Is required | Default |
| Items that will be rendered as elements of the first list | array[any] | ✔ | none |
| Items that will be rendered as elements of the second list | array[any] | ✔ | none |
| To make nice two column format, we've used Material-UI Grid component. If you want to customize this grid, provide grid options, corresponding to those in example | object | ✖ |
gridOptions: {
firstList: {
xs: 6,
sm: 6,
md: 5,
lg: 5
},
break: {
xs: false,
sm: false,
md: 2,
lg: 2
},
secondList: {
xs: 6,
sm: 6,
md: 5,
lg: 5
}
} |
| Object that represents style for both lists | object | ✖ | none |
|
Function that fires, when someone wants to proceed with forbidden action | function | ✖ | none |
| Function that fires, when someone wants to add item to second function and [second list protection](#second-list-protection) is enabled | function | ✖ | none |
| Function for rendering item | function | ✔ | none |
|
Array of two values that represent indexes from forbidden actions | array[number] | ✔ | none |
|
Value that blocks additions for second list | bool | ✖ | none |
|
Value that allows deletions from second list | bool | ✖ | none |
|
Style outer div that contains both Submit button and columns | object | ✖ | none |
|
Function that triggers when submit button was clicked | function | ✖ | none |
|
Object with material props for submit button | object | ✖ | none |
|
Grid row properties to place submit button well | object | ✖ | none |
|
Style for div from submit button | object | ✖ | none |
Our business logic required that items from lists cannot be dragged wherever. For example, first and last items from the first
list cannot be moved. To accomplish this task, we've added a prop called forbiddenIndexes
. It's an array of two numbers.
For example, if it's set as [2, 5], elements to index 2 and from index 5 cannot be moved (includes trying to another
element from second list).
Our business logic required that second list is immutable. To prepare this library for more free usage, we've developed two values, passed as props:
-
shouldBlockAddingToSecondList
- when is set totrue
, items from the first list cannot be dropped into the second list -
shouldRemoveFromSecondList
- when is set tofalse
, items from the second list cannot be removed from this list
MIT © Davenury