myems / myems-web

import React, { Fragment } from 'react';

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

import PageHeader from '../common/PageHeader';

import { Button, Card, CardBody, CardHeader, Row, Col } from 'reactstrap';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import FalconEditor from '../common/FalconEditor';

import { useState } from 'react';

const DragAndDropCode = `function DragAndDropExample() {

  return (

    <DragDropContext onDragEnd={onDragEnd} >

      <Row>

        <Col>

        <h5>List 1</h5>

        <Droppable droppableId="droppable">

        {(provided, snapshot) => (

            <div

                ref={provided.innerRef}

                style={getListStyle(snapshot.isDraggingOver)}>

                {data.items.map((item, index) => (

                    <Draggable

                        key={item.id}

                        draggableId={item.id}

                        index={index}>

                        {(provided, snapshot) => (

                            <div

                                ref={provided.innerRef}

                                {...provided.draggableProps}

                                {...provided.dragHandleProps}

                                style={getItemStyle(

                                    snapshot.isDragging,

                                    provided.draggableProps.style

                                )}>

                                {item.content}

                            </div>

                        )}

                    </Draggable>

                ))}

                {provided.placeholder}

            </div>

            )}

         </Droppable>

        </Col>

        <Col>

        <h5>List 2</h5>

        <Droppable droppableId="droppable2">

        {(provided, snapshot) => (

            <div

                ref={provided.innerRef}

                style={getListStyle(snapshot.isDraggingOver)}>

                {data.selected.map((item, index) => (

                    <Draggable

                        key={item.id}

                        draggableId={item.id}

                        index={index}>

                        {(provided, snapshot) => (

                            <div

                                ref={provided.innerRef}

                                {...provided.draggableProps}

                                {...provided.dragHandleProps}

                                style={getItemStyle(

                                    snapshot.isDragging,

                                    provided.draggableProps.style

                                )}>

                                {item.content}

                            </div>

                        )}

                    </Draggable>

                ))}

                {provided.placeholder}

            </div>

           )}

          </Droppable>

        </Col>

      </Row>

</DragDropContext>)

}`;

const getItems = (count, offset = 0) =>

  Array.from({ length: count }, (v, k) => k).map(k => ({

    id: `item-${k + offset}`,

    content: `item ${k + offset}`

  }));

// a little function to help us with reordering the result

const reorder = (list, startIndex, endIndex) => {

  const result = Array.from(list);

  const [removed] = result.splice(startIndex, 1);

  result.splice(endIndex, 0, removed);

  return result;

};

/**

 * Moves an item from one list to another list.

 */

const move = (source, destination, droppableSource, droppableDestination) => {

  const sourceClone = Array.from(source);

  const destClone = Array.from(destination);

  const [removed] = sourceClone.splice(droppableSource.index, 1);

  destClone.splice(droppableDestination.index, 0, removed);

  const result = {};

  result[droppableSource.droppableId] = sourceClone;

  result[droppableDestination.droppableId] = destClone;

  return result;

};

const grid = 8;

const getItemStyle = (isDragging, draggableStyle) => ({

  // some basic styles to make the items look a bit nicer

  userSelect: 'none',

  padding: grid * 2,

  margin: `0 0 ${grid}px 0`,

  // change background colour if dragging

  background: isDragging ? 'lightgreen' : '#FFF',

  // styles we need to apply on draggables

  ...draggableStyle

});

const getListStyle = isDraggingOver => ({

  background: isDraggingOver ? 'lightblue' : 'lightgrey',

  padding: grid,

  width: 250

});

const ReactBootstrapTable2 = () => {

  const [data, setData] = useState({ items: getItems(10), selected: getItems(5, 10) });

  const id2List = {

    droppable: 'items',

    droppable2: 'selected'

  };

  const getList = id => data[id2List[id]];

  const onDragEnd = result => {

    const { source, destination } = result;

    // dropped outside the list

    if (!destination) {

      return;

    }

    if (source.droppableId === destination.droppableId) {

      const reorderData = reorder(getList(source.droppableId), source.index, destination.index);

      setData({ items: reorderData, selected: data.selected });

      if (source.droppableId === 'droppable2') {

        setData({ ...data, selected: reorderData });

      }

    } else {

      const result = move(getList(source.droppableId), getList(destination.droppableId), source, destination);

      setData({

        items: result.droppable,

        selected: result.droppable2

      });

    }

  };

  return (

    <Fragment>

      <PageHeader

        title="React Beautiful DnD"

        description="Intuitive to use.

        Compatible for Bootstrap 3 and 4.

        Better than legacy react-bootstrap-table!!. It has Rich Functionality - Sortable, Row Selection, Cell Editor, Row Expand, Column Filter Pagination etc. Easy to Configurable and customizable table."

        className="mb-3"

      >

        <Button

          tag="a"

          href="https://github.com/atlassian/react-beautiful-dnd"

          target="_blank"

          color="link"

          size="sm"

          className="pl-0"

        >

          React Beautiful DnD Documentation

          <FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />

        </Button>

      </PageHeader>

      <Card>

        <CardHeader className="bg-light">

          <h4 className="mb-0">Example</h4>

        </CardHeader>

        <CardBody>

          <Row>

            <Col>

              <FalconEditor

                code={DragAndDropCode}

                scope={{ DragDropContext, Droppable, Draggable, data, setData, onDragEnd, getListStyle, getItemStyle }}

                language="jsx"

              />

              {/* <PurchasesTable /> */}

            </Col>

          </Row>

        </CardBody>

      </Card>

    </Fragment>

  );

};

export default ReactBootstrapTable2;