estella-two-column-dnd

Two column layout with drag and drop, using react beautiful dnd and material ui for layout

Install

npm install --save estella-two-column-dnd

Usage

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:

Props

Prop name	Destination	Type	Is required	Default
firstListItems	Items that will be rendered as elements of the first list	array[any]	✔	none
secondListItems	Items that will be rendered as elements of the second list	array[any]	✔	none
gridOptions	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 } }
listStyle	Object that represents style for both lists	object	✖	none
warningFunction	Function that fires, when someone wants to proceed with forbidden action	function	✖	none
secondListWarningFunction	Function that fires, when someone wants to add item to second function and [second list protection](#second-list-protection) is enabled	function	✖	none
itemRender	Function for rendering item	function	✔	none
forbiddenIndexes	Array of two values that represent indexes from forbidden actions	array[number]	✔	none
shouldBlockAddingToSecondList	Value that blocks additions for second list	bool	✖	none
shouldRemoveFromSecondList	Value that allows deletions from second list	bool	✖	none
outerDivStyle	Style outer div that contains both Submit button and columns	object	✖	none
onSubmit	Function that triggers when submit button was clicked	function	✖	none
materialButtonProps	Object with material props for submit button	object	✖	none
left/center/rigthSubmitGridProps	Grid row properties to place submit button well	object	✖	none
submitDivStyle	Style for div from submit button	object	✖	none

Forbidden actions

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).

Second List Protection

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 to true, items from the first list cannot be dropped into the second list
• shouldRemoveFromSecondList - when is set to false, items from the second list cannot be removed from this list

License

MIT © Davenury