forked from gaearon/react-dnd-touch-backend
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ItemPreview.jsx
69 lines (60 loc) · 1.5 KB
/
ItemPreview.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
* Copyright 2015, Yahoo Inc.
* Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
*/
'use strict';
import React from 'react';
import DragLayer from 'react-dnd/lib/DragLayer';
function collect (monitor) {
var item = monitor.getItem();
return {
id: item && item.id,
name: item && item.name,
currentOffset: monitor.getSourceClientOffset(),
isDragging: monitor.isDragging()
};
}
function getItemStyles (currentOffset) {
if (!currentOffset) {
return {
display: 'none'
};
}
// http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
var x = currentOffset.x;
var y = currentOffset.y;
var transform = `translate(${x}px, ${y}px)`;
return {
pointerEvents: 'none',
transform: transform,
WebkitTransform: transform
};
}
function ItemPreview ({
id,
name,
isDragging,
currentOffset
}) {
if (!isDragging) {
return <li></li>;
}
return (
<div
className="item preview"
style={getItemStyles(currentOffset)}
>
{id} {name}
</div>
);
}
ItemPreview.propTypes = {
id: React.PropTypes.string,
name: React.PropTypes.string,
currentOffset: React.PropTypes.shape({
x: React.PropTypes.number,
y: React.PropTypes.number
}),
isDragging: React.PropTypes.bool
};
export default DragLayer(collect)(ItemPreview);