@6thquake/react-material/DragableLayer/index.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

var _reactDnd = require("react-dnd");

var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));

var _Container = _interopRequireDefault(require("./Container"));

var _CustomDragLayer = _interopRequireDefault(require("./CustomDragLayer"));

/**
 * @ignore - do not document.
 */
var DragAroundCustomDragLayer =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(DragAroundCustomDragLayer, _Component);

  function DragAroundCustomDragLayer(props) {
    var _this;

    (0, _classCallCheck2.default)(this, DragAroundCustomDragLayer);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(DragAroundCustomDragLayer).call(this, props));
    _this.handleSnapToGridAfterDropChange = _this.handleSnapToGridAfterDropChange.bind((0, _assertThisInitialized2.default)(_this));
    _this.handleSnapToGridWhileDraggingChange = _this.handleSnapToGridWhileDraggingChange.bind((0, _assertThisInitialized2.default)(_this));
    _this.state = {
      snapToGridAfterDrop: false,
      snapToGridWhileDragging: false
    };
    return _this;
  }

  (0, _createClass2.default)(DragAroundCustomDragLayer, [{
    key: "handleSnapToGridAfterDropChange",
    value: function handleSnapToGridAfterDropChange() {
      var snapToGridAfterDrop = this.state.snapToGridAfterDrop;
      this.setState({
        snapToGridAfterDrop: !snapToGridAfterDrop
      });
    }
  }, {
    key: "handleSnapToGridWhileDraggingChange",
    value: function handleSnapToGridWhileDraggingChange() {
      var snapToGridWhileDragging = this.state.snapToGridWhileDragging;
      this.setState({
        snapToGridWhileDragging: !snapToGridWhileDragging
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          snapToGridAfterDrop = _this$state.snapToGridAfterDrop,
          snapToGridWhileDragging = _this$state.snapToGridWhileDragging;
      return _react.default.createElement("div", null, _react.default.createElement("p", null, _react.default.createElement("b", null, _react.default.createElement("a", {
        href: "https://github.com/react-dnd/react-dnd/tree/master/packages/documentation/examples/02%20Drag%20Around/Custom%20Drag%20Layer"
      }, "Browse the Source"))), _react.default.createElement("p", null, "The browser APIs provide no way to change the drag preview or its behavior once drag has started. Libraries such as jQuery UI implement the drag and drop from scratch to work around this, but react-dnd only supports browser drag and drop \u201Cbackend\u201D for now, so we have to accept its limitations."), _react.default.createElement("p", null, "We can, however, customize behavior a great deal if we feed the browser an empty image as drag preview. This library provides a ", _react.default.createElement("code", null, "DragLayer"), " that you can use to implement a fixed layer on top of your app where you'd draw a custom drag preview component."), _react.default.createElement("p", null, "Note that we can draw a completely different component on our drag layer if we wish so. It's not just a screenshot."), _react.default.createElement("p", null, "With this approach, we miss out on default \u201Creturn\u201D animation when dropping outside the container. However, we get great flexibility in customizing drag feedback and zero flicker."), _react.default.createElement(_Container.default, {
        snapToGrid: snapToGridAfterDrop
      }), _react.default.createElement(_CustomDragLayer.default, {
        snapToGrid: snapToGridWhileDragging
      }), _react.default.createElement("p", null, _react.default.createElement("label", {
        htmlFor: "snapToGridWhileDragging"
      }, _react.default.createElement("input", {
        id: "snapToGridWhileDragging",
        type: "checkbox",
        checked: snapToGridWhileDragging,
        onChange: this.handleSnapToGridWhileDraggingChange
      }), _react.default.createElement("small", null, "Snap to grid while dragging")), _react.default.createElement("br", null), _react.default.createElement("label", {
        htmlFor: "snapToGridAfterDrop"
      }, _react.default.createElement("input", {
        id: "snapToGridAfterDrop",
        type: "checkbox",
        checked: snapToGridAfterDrop,
        onChange: this.handleSnapToGridAfterDropChange
      }), _react.default.createElement("small", null, "Snap to grid after drop"))));
    }
  }]);
  return DragAroundCustomDragLayer;
}(_react.Component);

var _default = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend.default)(DragAroundCustomDragLayer);

exports.default = _default;