# SortableContainer

SortableContainer is a container which could contain list of sortable elements.

It is Component with RenderProp pattern. By that, you could use any thing you want.

## Props Table

|               Props Name                | Props Type | Default Props | Required |
| :-------------------------------------: | :--------: | :-----------: | :------: |
|        [totalCount](#totalcount)        |   number   |       -       |   Yes    |
| [allowedDragGroups](#alloweddraggroups) |   array    |       -       |   Yes    |
|           [pattern](#pattern)           |   string   |    'exit'     |    No    |
|         [isDisable](#isdisable)         |  boolean   |     false     |    No    |
|  [isLineDropShadow](#islinedropshadow)  |  boolean   |     false     |    No    |
|         [hasMargin](#hasmargin)         |  boolean   |     true      |    No    |
|        [isVertical](#isvertical)        |  boolean   |     true      |    No    |
|    [reOrderElement](#reorderelement)    |  function  |       -       |    No    |
|        [addElement](#addelement)        |  function  |       -       |    No    |
|     [removeElement](#removeelement)     |  function  |       -       |    No    |
|          [children](#children)          |  function  |       -       |   Yes    |

## Props Description

#### totalCount

this is a conut of that container's sortable elements.

---

#### allowedDragGroups

this is `Array` of `String` will have which group of `draggable` or `sortable element` can drop inside of SortableContainer.

---

#### pattern

this pattern how to react sortable elements for cursor movement.

the pattern values must be one of these `right-half`, `bottom-half`, `triangle-half`, `exit`

---

#### isDisable

this boolean disable dropping events.

---

#### isLineDropShadow

this is for tell dropShadow or placeholder will show like line not element. if true then it was line else element.

---

#### hasMargin

this element has margin.

---

#### isVertical

this boolean for the sortable container work as vertical or not.

---

#### reOrderElement

this will call when element reorder in same SortableContainer.
**arguments** :

1. **info**: `Object` this was info of reorder. (object memeber below)

   - **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .
   - **fromIndex** `Number` this index was which element you first taken that's index.
   - **toIndex** `Number` this index was where you release that element.

---

#### addElement

this will call when element add to SortableContainer.
**arguments** :

1. **info**: `Object` this was info of reorder. (object memeber below)

   - **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .
   - **toIndex** `Number` this index was where you release that element.

---

#### removeElement

this will call when element remove from SortableContainer.

**arguments** :

1. **index** `Number` this index was removed element index.
2. **isDropped** `Boolean` this indicates if that element dropped in some container or not.

---

#### children

this will call when element remove from SortableContainer.
it must be a function. will call it with below arguments.

**arguments** :

1. `Object` it's properties or below
   - **ref** `Function` you must send element ref to this function or make it as ref of that element ref.
   - **isDragOver** `Boolean` this indicates dragging element is hover or over on DropTaget.
   - **status** `Enum('dragover'|'allowed'|'notallowed'|'idle')` this tell current state of DropTarget.
   - **isAllowed** `Boolean` this indicates dragging element can drop inside of DropTarget.
   - **dragOverIndex** `Number` this is index of where the dragging element hover or over on SortableContainer.

---

## Example Usage

```jsx
import { SortableContainer } from '@zohodesk/react-dnd';
import SortableElement from './SortableElement';
import DropShadow from './DropShadow';

function MySortableContainer(props) {
  const {
    totalCount,
    reOrderElement,
    addElement,
    removeElement,
    items,
  } = props;

  return (
    <SortableContainer
      totalCount={totalCount}
      allowedDragGroups={['SortableElement']}
      pattern={'triangle-half'}
      isDisable={false}
      isLineDropShadow={false}
      hasMargin={false}
      isVertical={true}
      reOrderElement={reOrderElement}
      addElement={addElement}
      removeElement={removeElement}>
      {({ ref, isDragOver, status, isAllowed, dragOverIndex }) => {
        <div>
          {dragOverIndex >= 0 && (
            <div> element will drop in {dragOverIndex} index</div>
          )}
          <div
            ref={ref}
            className={`${isDragOver ? 'shade' : 'normal'} ${
              isAllowed ? 'green' : 'red'
            }`}>
            {items.map((item) => (
              <SortableElement {...item} />
            ))}
            <DropShadow key='DropShadow' />
          </div>
        </div>;
      }}
    </SortableContainer>
  );
}
```