@wix/design-system
Version:
@wix/design-system
65 lines • 2.14 kB
JavaScript
import React from 'react';
import Portal from '../../../utils/ReactPortal/ReactPortal';
import { DragLayer } from 'react-dnd';
import { ZIndex } from '../../../common/ZIndex';
const layerStyles = {
position: 'fixed',
pointerEvents: 'none',
zIndex: ZIndex.dragLayer,
left: 0,
top: 0,
};
let dragPreviewRef = null;
const onOffsetChange = monitor => {
if (!dragPreviewRef) {
return;
}
const offset = monitor.getSourceClientOffset() || monitor.getInitialClientOffset();
if (!offset) {
return;
}
const transform = `translate(${offset.x}px, ${offset.y}px)`;
dragPreviewRef.style.transform = transform;
dragPreviewRef.style['-webkit-transform'] = transform;
};
class CustomDragLayer extends React.Component {
constructor() {
super(...arguments);
this.shouldRenderLayer = (props = this.props) => {
const { id, item, itemType, draggedType, isDragging } = props;
return isDragging && id === item.id && itemType === draggedType;
};
this.renderPreview = () => {
const { offsetOfHandle } = this.props;
const styles = {
...layerStyles,
left: -offsetOfHandle.x,
top: -offsetOfHandle.y,
};
return (React.createElement("div", { style: styles, ref: node => {
dragPreviewRef = node;
} }, this.props.renderPreview({})));
};
this.renderPreviewInPortal = () => {
return React.createElement(Portal, null, this.renderPreview());
};
}
render() {
if (!this.shouldRenderLayer()) {
return null;
}
return this.props.usePortal
? this.renderPreviewInPortal()
: this.renderPreview();
}
}
export default DragLayer((monitor, props) => {
onOffsetChange(monitor);
return {
offsetOfHandle: props.offsetOfHandle,
item: monitor.getItem(),
itemType: monitor.getItemType(),
isDragging: monitor.isDragging(),
};
})(CustomDragLayer);
//# sourceMappingURL=DragLayer.js.map