wix-style-react
Version:
wix-style-react
74 lines • 2.44 kB
JavaScript
import React from 'react';
import Portal from '../../../utils/ReactPortal/ReactPortal';
import PropTypes from 'prop-types';
import { DragLayer } from 'react-dnd';
/* eslint-disable new-cap */
const layerStyles = {
position: 'fixed',
pointerEvents: 'none',
zIndex: 5001,
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();
}
}
CustomDragLayer.propTypes = {
offsetOfHandle: PropTypes.object,
item: PropTypes.object,
itemType: PropTypes.string,
draggedType: PropTypes.string,
isDragging: PropTypes.bool,
renderPreview: PropTypes.func,
usePortal: PropTypes.bool,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
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