wix-style-react/dist/src/DragAndDrop/Draggable/components/DragLayer.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _ReactPortal = _interopRequireDefault(require("../../../utils/ReactPortal/ReactPortal"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDnd = require("react-dnd");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/DragAndDrop/Draggable/components/DragLayer.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/* eslint-disable new-cap */

var layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 5001,
  left: 0,
  top: 0
};
var dragPreviewRef = null;
var onOffsetChange = monitor => {
  if (!dragPreviewRef) {
    return;
  }
  var offset = monitor.getSourceClientOffset() || monitor.getInitialClientOffset();
  if (!offset) {
    return;
  }
  var transform = "translate(".concat(offset.x, "px, ").concat(offset.y, "px)");
  dragPreviewRef.style.transform = transform;
  dragPreviewRef.style['-webkit-transform'] = transform;
};
class CustomDragLayer extends _react.default.Component {
  constructor() {
    var _this;
    super(...arguments);
    _this = this;
    this.shouldRenderLayer = function () {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
      var {
        id,
        item,
        itemType,
        draggedType,
        isDragging
      } = props;
      return isDragging && id === item.id && itemType === draggedType;
    };
    this.renderPreview = () => {
      var {
        offsetOfHandle
      } = this.props;
      var styles = _objectSpread(_objectSpread({}, layerStyles), {}, {
        left: -offsetOfHandle.x,
        top: -offsetOfHandle.y
      });
      return /*#__PURE__*/_react.default.createElement("div", {
        style: styles,
        ref: node => dragPreviewRef = node,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 48,
          columnNumber: 7
        }
      }, this.props.renderPreview({}));
    };
    this.renderPreviewInPortal = () => {
      return /*#__PURE__*/_react.default.createElement(_ReactPortal.default, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 55,
          columnNumber: 12
        }
      }, this.renderPreview());
    };
  }
  render() {
    if (!this.shouldRenderLayer()) {
      return null;
    }
    return this.props.usePortal ? this.renderPreviewInPortal() : this.renderPreview();
  }
}
CustomDragLayer.propTypes = {
  offsetOfHandle: _propTypes.default.object,
  item: _propTypes.default.object,
  itemType: _propTypes.default.string,
  draggedType: _propTypes.default.string,
  isDragging: _propTypes.default.bool,
  renderPreview: _propTypes.default.func,
  usePortal: _propTypes.default.bool,
  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
var _default = exports.default = (0, _reactDnd.DragLayer)((monitor, props) => {
  onOffsetChange(monitor);
  return {
    offsetOfHandle: props.offsetOfHandle,
    item: monitor.getItem(),
    itemType: monitor.getItemType(),
    isDragging: monitor.isDragging()
  };
})(CustomDragLayer);
//# sourceMappingURL=DragLayer.js.map