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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@krowdy-ui/styles");

var _reactBeautifulDnd = require("react-beautiful-dnd");

var _clsx = _interopRequireDefault(require("clsx"));

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%'
    }
  };
};

exports.styles = styles;

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

  var _result$splice = result.splice(startIndex, 1),
      _result$splice2 = (0, _slicedToArray2["default"])(_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["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.container, classes.root)
  }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
    onDragEnd: onDragEnd
  }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
    direction: "vertical",
    droppableId: "droppable"
  }, function (dropProvided) {
    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
      className: classes.container
    }, dropProvided.droppableProps, {
      ref: dropProvided.innerRef,
      tabIndex: "-1"
    }), _react["default"].Children.map(children, function (item, index) {
      return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
        draggableId: "drag-".concat(item.props.id),
        index: index,
        key: "drag-".concat(item.props.id)
      }, function (dragProvided) {
        return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
          ref: dragProvided.innerRef
        }, dragProvided.draggableProps, dragProvided.dragHandleProps, {
          style: dragProvided.draggableProps.style,
          tabIndex: "-1"
        }), item);
      });
    }), dropProvided.placeholder, addInputComponent && /*#__PURE__*/_react["default"].createElement("div", {
      className: (0, _clsx["default"])(!disableAdditionalInput && classes.aditionalInput)
    }, addInputComponent));
  })));
};

process.env.NODE_ENV !== "production" ? DragComponent.propTypes = {
  addInputComponent: _propTypes["default"].node,
  classes: _propTypes["default"].shape({
    aditionalInput: _propTypes["default"].string,
    container: _propTypes["default"].string,
    root: _propTypes["default"].string
  }),
  disableAdditionalInput: _propTypes["default"].bool,
  onItemsOrdered: _propTypes["default"].func
} : void 0;
DragComponent.muiName = 'DragComponent';

var _default = (0, _styles.withStyles)(styles, {
  name: 'KrowdyDragComponent'
})(DragComponent);

exports["default"] = _default;