@homecode/ui 4.22.6 → 4.22.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -30,10 +30,23 @@ class Draggable extends Component {
|
|
|
30
30
|
if (prevProps.items.join(',') !== this.props.items.join(',')) {
|
|
31
31
|
this.dropUnder();
|
|
32
32
|
}
|
|
33
|
+
if (prevProps.disabled !== this.props.disabled) {
|
|
34
|
+
this.dropUnder();
|
|
35
|
+
if (this.props.disabled)
|
|
36
|
+
this.unsubscribeMoveUp();
|
|
37
|
+
}
|
|
33
38
|
}
|
|
34
39
|
componentWillUnmount() {
|
|
35
40
|
this.timers.clear();
|
|
36
41
|
}
|
|
42
|
+
subscribeMoveUp = () => {
|
|
43
|
+
document.addEventListener('pointermove', this.onPointerMove);
|
|
44
|
+
document.addEventListener('pointerup', this.onPointerUp);
|
|
45
|
+
};
|
|
46
|
+
unsubscribeMoveUp = () => {
|
|
47
|
+
document.removeEventListener('pointermove', this.onPointerMove);
|
|
48
|
+
document.removeEventListener('pointerup', this.onPointerUp);
|
|
49
|
+
};
|
|
37
50
|
onPointerDown = e => {
|
|
38
51
|
const { clientX: x, clientY: y, currentTarget } = e;
|
|
39
52
|
e.stopPropagation();
|
|
@@ -41,11 +54,10 @@ class Draggable extends Component {
|
|
|
41
54
|
this.startPos = { x, y };
|
|
42
55
|
this.draggingElem = currentTarget;
|
|
43
56
|
this.draggingElemBounds = currentTarget.getBoundingClientRect();
|
|
44
|
-
|
|
45
|
-
document.addEventListener('pointerup', this.onPointerUp);
|
|
57
|
+
this.subscribeMoveUp();
|
|
46
58
|
};
|
|
47
59
|
onPointerMove = e => {
|
|
48
|
-
if (!this.draggingElem)
|
|
60
|
+
if (!this.draggingElem || this.props.disabled)
|
|
49
61
|
return;
|
|
50
62
|
const { clientX: x, clientY: y } = e;
|
|
51
63
|
if (!this.store.draggingId) {
|
|
@@ -94,8 +106,7 @@ class Draggable extends Component {
|
|
|
94
106
|
e.stopPropagation();
|
|
95
107
|
e.preventDefault();
|
|
96
108
|
}
|
|
97
|
-
|
|
98
|
-
document.removeEventListener('pointerup', this.onPointerUp);
|
|
109
|
+
this.unsubscribeMoveUp();
|
|
99
110
|
this.dragStartFired = false;
|
|
100
111
|
this.startPos = null;
|
|
101
112
|
this.store.draggingId = null;
|
|
@@ -127,9 +138,9 @@ class Draggable extends Component {
|
|
|
127
138
|
this.store.underOffset = null;
|
|
128
139
|
}
|
|
129
140
|
render() {
|
|
130
|
-
const { items, className, itemClassName, renderItem, children } = this.props;
|
|
141
|
+
const { items, className, itemClassName, renderItem, children, disabled } = this.props;
|
|
131
142
|
const { draggingId, underId, underOffset } = this.store;
|
|
132
|
-
return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
|
|
143
|
+
return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: disabled ? undefined : this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
|
|
133
144
|
}
|
|
134
145
|
}
|
|
135
146
|
|
|
@@ -10,6 +10,8 @@ export declare class Draggable extends Component<T.Props> {
|
|
|
10
10
|
constructor(props: any);
|
|
11
11
|
componentDidUpdate(prevProps: any): void;
|
|
12
12
|
componentWillUnmount(): void;
|
|
13
|
+
subscribeMoveUp: () => void;
|
|
14
|
+
unsubscribeMoveUp: () => void;
|
|
13
15
|
onPointerDown: (e: any) => void;
|
|
14
16
|
onPointerMove: (e: any) => void;
|
|
15
17
|
checkUnderElem: any;
|