@6thquake/react-material/es/DragableLayer/CustomDragLayer.js

React components that implement Google's Material Design.

var _class, _temp;

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DragLayer } from 'react-dnd';
import ItemTypes from './ItemTypes';
import BoxDragPreview from './BoxDragPreview';
import snapToGrid from './snapToGrid';
const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%'
};

function getItemStyles(props) {
  const {
    initialOffset,
    currentOffset
  } = props;

  if (!initialOffset || !currentOffset) {
    return {
      display: 'none'
    };
  }

  let {
    x,
    y
  } = currentOffset;

  if (props.snapToGrid) {
    x -= initialOffset.x;
    y -= initialOffset.y;
    [x, y] = snapToGrid(x, y);
    x += initialOffset.x;
    y += initialOffset.y;
  }

  const transform = `translate(${x}px, ${y}px)`;
  return {
    transform,
    WebkitTransform: transform
  };
}

const cdl = (_temp = _class = class CustomDragLayer extends Component {
  renderItem(type, item) {
    switch (type) {
      case ItemTypes.BOX:
        return React.createElement(BoxDragPreview, {
          title: item.title
        });

      default:
        return null;
    }
  }

  render() {
    const {
      item,
      itemType,
      isDragging
    } = this.props;

    if (!isDragging) {
      return null;
    }

    return React.createElement("div", {
      style: layerStyles
    }, React.createElement("div", {
      style: getItemStyles(this.props)
    }, this.renderItem(itemType, item)));
  }

}, _class.propTypes = {
  currentOffset: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  }),
  initialOffset: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  }),
  isDragging: PropTypes.bool.isRequired,
  item: PropTypes.object,
  itemType: PropTypes.string,
  snapToGrid: PropTypes.bool.isRequired
}, _temp);
export default DragLayer(monitor => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  isDragging: monitor.isDragging()
}))(cdl);