@krowdy-ui/views/esm/DragComponent/DragComponent.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import clsx from 'clsx';
export var styles = function styles(theme) {
  return {
    aditionalInput: {
      color: theme.palette.grey[700],
      fontSize: 14,
      margin: 'auto',
      width: 'fill-available'
    },
    container: {
      height: '100%',
      overflow: 'auto',
      width: '100%'
    }
  };
};

var reorder = function reorder(list, startIndex, endIndex) {
  var result = Array.from(list);

  var _result$splice = result.splice(startIndex, 1),
      _result$splice2 = _slicedToArray(_result$splice, 1),
      removed = _result$splice2[0];

  result.splice(endIndex, 0, removed);
  return result;
};

var DragComponent = function DragComponent(props) {
  var addInputComponent = props.addInputComponent,
      classes = props.classes,
      children = props.children,
      _props$onItemsOrdered = props.onItemsOrdered,
      onItemsOrdered = _props$onItemsOrdered === void 0 ? function () {} : _props$onItemsOrdered,
      _props$disableAdditio = props.disableAdditionalInput,
      disableAdditionalInput = _props$disableAdditio === void 0 ? false : _props$disableAdditio;

  var onDragEnd = function onDragEnd(result) {
    if (!result.destination) return;
    var newItems = reorder(children, result.source.index, result.destination.index);
    onItemsOrdered(newItems);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.container, classes.root)
  }, /*#__PURE__*/React.createElement(DragDropContext, {
    onDragEnd: onDragEnd
  }, /*#__PURE__*/React.createElement(Droppable, {
    direction: "vertical",
    droppableId: "droppable"
  }, function (dropProvided) {
    return /*#__PURE__*/React.createElement("div", _extends({
      className: classes.container
    }, dropProvided.droppableProps, {
      ref: dropProvided.innerRef,
      tabIndex: "-1"
    }), React.Children.map(children, function (item, index) {
      return /*#__PURE__*/React.createElement(Draggable, {
        draggableId: "drag-".concat(item.props.id),
        index: index,
        key: "drag-".concat(item.props.id)
      }, function (dragProvided) {
        return /*#__PURE__*/React.createElement("div", _extends({
          ref: dragProvided.innerRef
        }, dragProvided.draggableProps, dragProvided.dragHandleProps, {
          style: dragProvided.draggableProps.style,
          tabIndex: "-1"
        }), item);
      });
    }), dropProvided.placeholder, addInputComponent && /*#__PURE__*/React.createElement("div", {
      className: clsx(!disableAdditionalInput && classes.aditionalInput)
    }, addInputComponent));
  })));
};

process.env.NODE_ENV !== "production" ? DragComponent.propTypes = {
  addInputComponent: PropTypes.node,
  classes: PropTypes.shape({
    aditionalInput: PropTypes.string,
    container: PropTypes.string,
    root: PropTypes.string
  }),
  disableAdditionalInput: PropTypes.bool,
  onItemsOrdered: PropTypes.func
} : void 0;
DragComponent.muiName = 'DragComponent';
export default withStyles(styles, {
  name: 'KrowdyDragComponent'
})(DragComponent);