@wix/design-system
Version:
@wix/design-system
108 lines (107 loc) • 5.25 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _ReactPortal = _interopRequireDefault(require("../../../utils/ReactPortal/ReactPortal"));
var _reactDnd = require("react-dnd");
var _ZIndex = require("../../../common/ZIndex");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/DragAndDrop/Draggable/components/DragLayer.jsx";
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var layerStyles = {
position: 'fixed',
pointerEvents: 'none',
zIndex: _ZIndex.ZIndex.dragLayer,
left: 0,
top: 0
};
var dragPreviewRef = null;
var onOffsetChange = function 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;
};
var CustomDragLayer = /*#__PURE__*/function (_React$Component) {
function CustomDragLayer() {
var _this;
(0, _classCallCheck2["default"])(this, CustomDragLayer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, CustomDragLayer, [].concat(args));
_this.shouldRenderLayer = function () {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
var id = props.id,
item = props.item,
itemType = props.itemType,
draggedType = props.draggedType,
isDragging = props.isDragging;
return isDragging && id === item.id && itemType === draggedType;
};
_this.renderPreview = function () {
var offsetOfHandle = _this.props.offsetOfHandle;
var styles = _objectSpread(_objectSpread({}, layerStyles), {}, {
left: -offsetOfHandle.x,
top: -offsetOfHandle.y
});
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles,
ref: function ref(node) {
dragPreviewRef = node;
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 7
}
}, _this.props.renderPreview({}));
};
_this.renderPreviewInPortal = function () {
return /*#__PURE__*/_react["default"].createElement(_ReactPortal["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 12
}
}, _this.renderPreview());
};
return _this;
}
(0, _inherits2["default"])(CustomDragLayer, _React$Component);
return (0, _createClass2["default"])(CustomDragLayer, [{
key: "render",
value: function render() {
if (!this.shouldRenderLayer()) {
return null;
}
return this.props.usePortal ? this.renderPreviewInPortal() : this.renderPreview();
}
}]);
}(_react["default"].Component);
var _default = exports["default"] = (0, _reactDnd.DragLayer)(function (monitor, props) {
onOffsetChange(monitor);
return {
offsetOfHandle: props.offsetOfHandle,
item: monitor.getItem(),
itemType: monitor.getItemType(),
isDragging: monitor.isDragging()
};
})(CustomDragLayer);