estella-two-column-dnd v1.0.4

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

firstListItems

secondListItems

gridOptions

    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

warningFunction

Function that fires, when someone wants to proceed with forbidden action function ✖ none

secondListWarningFunction

itemRender

forbiddenIndexes

Array of two values that represent indexes from forbidden actions arraynumber ✔ 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