react-native-reorderable-list 0.4.0 → 0.5.1
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.
- package/LICENSE +1 -1
- package/README.md +118 -60
- package/lib/commonjs/components/ReorderableList/ReorderableList.js +91 -0
- package/lib/commonjs/components/ReorderableList/ReorderableList.js.map +1 -0
- package/lib/commonjs/components/ReorderableList/constants.ios.js +10 -0
- package/lib/commonjs/components/ReorderableList/constants.ios.js.map +1 -0
- package/lib/commonjs/components/ReorderableList/constants.js +10 -0
- package/lib/commonjs/components/ReorderableList/constants.js.map +1 -0
- package/lib/commonjs/components/ReorderableList/index.js +17 -0
- package/lib/commonjs/components/ReorderableList/index.js.map +1 -0
- package/lib/commonjs/components/ReorderableList/useReorderableList.js +313 -0
- package/lib/commonjs/components/ReorderableList/useReorderableList.js.map +1 -0
- package/lib/commonjs/components/ReorderableListCell.js +93 -0
- package/lib/commonjs/components/ReorderableListCell.js.map +1 -0
- package/lib/commonjs/components/ReorderableListItem.js +87 -0
- package/lib/commonjs/components/ReorderableListItem.js.map +1 -0
- package/lib/commonjs/components/index.js +39 -0
- package/lib/commonjs/components/index.js.map +1 -0
- package/lib/commonjs/contexts/ReorderableCellContext.js +10 -0
- package/lib/commonjs/contexts/ReorderableCellContext.js.map +1 -0
- package/lib/commonjs/contexts/ReorderableListContext.js +10 -0
- package/lib/commonjs/contexts/ReorderableListContext.js.map +1 -0
- package/lib/commonjs/contexts/index.js +28 -0
- package/lib/commonjs/contexts/index.js.map +1 -0
- package/lib/commonjs/hooks/index.js +50 -0
- package/lib/commonjs/hooks/index.js.map +1 -0
- package/lib/commonjs/hooks/useContext.js +16 -0
- package/lib/commonjs/hooks/useContext.js.map +1 -0
- package/lib/commonjs/hooks/useReorderableDrag.js +16 -0
- package/lib/commonjs/hooks/useReorderableDrag.js.map +1 -0
- package/lib/commonjs/hooks/useReorderableDragEnd.js +25 -0
- package/lib/commonjs/hooks/useReorderableDragEnd.js.map +1 -0
- package/lib/commonjs/hooks/useReorderableDragStart.js +22 -0
- package/lib/commonjs/hooks/useReorderableDragStart.js.map +1 -0
- package/lib/commonjs/index.js +41 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/types/index.js +28 -0
- package/lib/commonjs/types/index.js.map +1 -0
- package/lib/commonjs/types/misc.js +14 -0
- package/lib/commonjs/types/misc.js.map +1 -0
- package/lib/commonjs/types/props.js +6 -0
- package/lib/commonjs/types/props.js.map +1 -0
- package/lib/commonjs/utils.js +23 -0
- package/lib/commonjs/utils.js.map +1 -0
- package/lib/module/components/ReorderableList/ReorderableList.js +83 -0
- package/lib/module/components/ReorderableList/ReorderableList.js.map +1 -0
- package/lib/module/components/ReorderableList/constants.ios.js +4 -0
- package/lib/module/components/ReorderableList/constants.ios.js.map +1 -0
- package/lib/module/components/ReorderableList/constants.js +4 -0
- package/lib/module/components/ReorderableList/constants.js.map +1 -0
- package/lib/module/components/ReorderableList/index.js +2 -0
- package/lib/module/components/ReorderableList/index.js.map +1 -0
- package/lib/module/components/ReorderableList/useReorderableList.js +304 -0
- package/lib/module/components/ReorderableList/useReorderableList.js.map +1 -0
- package/lib/module/components/ReorderableListCell.js +85 -0
- package/lib/module/components/ReorderableListCell.js.map +1 -0
- package/lib/module/components/ReorderableListItem.js +78 -0
- package/lib/module/components/ReorderableListItem.js.map +1 -0
- package/lib/module/components/index.js +4 -0
- package/lib/module/components/index.js.map +1 -0
- package/lib/module/contexts/ReorderableCellContext.js +3 -0
- package/lib/module/contexts/ReorderableCellContext.js.map +1 -0
- package/lib/module/contexts/ReorderableListContext.js +3 -0
- package/lib/module/contexts/ReorderableListContext.js.map +1 -0
- package/lib/module/contexts/index.js +3 -0
- package/lib/module/contexts/index.js.map +1 -0
- package/lib/module/hooks/index.js +5 -0
- package/lib/module/hooks/index.js.map +1 -0
- package/lib/module/hooks/useContext.js +9 -0
- package/lib/module/hooks/useContext.js.map +1 -0
- package/lib/module/hooks/useReorderableDrag.js +9 -0
- package/lib/module/hooks/useReorderableDrag.js.map +1 -0
- package/lib/module/hooks/useReorderableDragEnd.js +18 -0
- package/lib/module/hooks/useReorderableDragEnd.js.map +1 -0
- package/lib/module/hooks/useReorderableDragStart.js +15 -0
- package/lib/module/hooks/useReorderableDragStart.js.map +1 -0
- package/lib/module/index.js +6 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/types/index.js +3 -0
- package/lib/module/types/index.js.map +1 -0
- package/lib/module/types/misc.js +8 -0
- package/lib/module/types/misc.js.map +1 -0
- package/lib/module/types/props.js +2 -0
- package/lib/module/types/props.js.map +1 -0
- package/lib/module/utils.js +16 -0
- package/lib/module/utils.js.map +1 -0
- package/lib/typescript/components/ReorderableList/ReorderableList.d.ts +8 -0
- package/lib/typescript/components/ReorderableList/ReorderableList.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableList/constants.d.ts +3 -0
- package/lib/typescript/components/ReorderableList/constants.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableList/constants.ios.d.ts +3 -0
- package/lib/typescript/components/ReorderableList/constants.ios.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableList/index.d.ts +2 -0
- package/lib/typescript/components/ReorderableList/index.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableList/useReorderableList.d.ts +34 -0
- package/lib/typescript/components/ReorderableList/useReorderableList.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableListCell.d.ts +15 -0
- package/lib/typescript/components/ReorderableListCell.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableListItem.d.ts +4 -0
- package/lib/typescript/components/ReorderableListItem.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +4 -0
- package/lib/typescript/components/index.d.ts.map +1 -0
- package/lib/typescript/contexts/ReorderableCellContext.d.ts +11 -0
- package/lib/typescript/contexts/ReorderableCellContext.d.ts.map +1 -0
- package/lib/typescript/contexts/ReorderableListContext.d.ts +9 -0
- package/lib/typescript/contexts/ReorderableListContext.d.ts.map +1 -0
- package/lib/typescript/contexts/index.d.ts +3 -0
- package/lib/typescript/contexts/index.d.ts.map +1 -0
- package/lib/typescript/hooks/index.d.ts +5 -0
- package/lib/typescript/hooks/index.d.ts.map +1 -0
- package/lib/typescript/hooks/useContext.d.ts +3 -0
- package/lib/typescript/hooks/useContext.d.ts.map +1 -0
- package/lib/typescript/hooks/useReorderableDrag.d.ts +2 -0
- package/lib/typescript/hooks/useReorderableDrag.d.ts.map +1 -0
- package/lib/typescript/hooks/useReorderableDragEnd.d.ts +2 -0
- package/lib/typescript/hooks/useReorderableDragEnd.d.ts.map +1 -0
- package/lib/typescript/hooks/useReorderableDragStart.d.ts +2 -0
- package/lib/typescript/hooks/useReorderableDragStart.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +7 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/types/index.d.ts +3 -0
- package/lib/typescript/types/index.d.ts.map +1 -0
- package/lib/typescript/types/misc.d.ts +7 -0
- package/lib/typescript/types/misc.d.ts.map +1 -0
- package/lib/typescript/types/props.d.ts +90 -0
- package/lib/typescript/types/props.d.ts.map +1 -0
- package/lib/typescript/utils.d.ts +12 -0
- package/lib/typescript/utils.d.ts.map +1 -0
- package/package.json +199 -36
- package/src/components/ReorderableList/ReorderableList.tsx +117 -0
- package/src/components/ReorderableList/constants.ios.ts +3 -0
- package/src/components/ReorderableList/constants.ts +3 -0
- package/src/components/ReorderableList/index.ts +1 -0
- package/src/components/ReorderableList/useReorderableList.ts +489 -0
- package/src/components/ReorderableListCell.tsx +138 -0
- package/src/components/ReorderableListItem.tsx +108 -0
- package/src/components/index.ts +3 -0
- package/src/contexts/ReorderableCellContext.ts +14 -0
- package/src/contexts/ReorderableListContext.ts +12 -0
- package/src/contexts/index.ts +2 -0
- package/src/hooks/index.ts +4 -0
- package/src/hooks/useContext.ts +11 -0
- package/src/hooks/useReorderableDrag.ts +7 -0
- package/src/hooks/useReorderableDragEnd.ts +21 -0
- package/src/hooks/useReorderableDragStart.ts +18 -0
- package/src/index.ts +26 -0
- package/src/types/index.ts +2 -0
- package/src/types/misc.ts +6 -0
- package/src/types/props.ts +101 -0
- package/src/utils.ts +15 -0
- package/dist/components/ReorderableList.d.ts +0 -7
- package/dist/components/ReorderableList.js +0 -314
- package/dist/components/ReorderableListItem.d.ts +0 -14
- package/dist/components/ReorderableListItem.js +0 -57
- package/dist/hooks/useAnimatedSharedValues.d.ts +0 -3
- package/dist/hooks/useAnimatedSharedValues.js +0 -33
- package/dist/index.d.ts +0 -4
- package/dist/index.js +0 -2
- package/dist/types/misc.d.ts +0 -15
- package/dist/types/misc.js +0 -7
- package/dist/types/props.d.ts +0 -29
- package/dist/types/props.js +0 -1
|
@@ -0,0 +1,304 @@
|
|
|
1
|
+
import React, { useCallback, useMemo } from 'react';
|
|
2
|
+
import { unstable_batchedUpdates } from 'react-native';
|
|
3
|
+
import { Gesture, State } from 'react-native-gesture-handler';
|
|
4
|
+
import { Easing, cancelAnimation, measure, runOnJS, runOnUI, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
|
|
5
|
+
import { AUTOSCROLL_INCREMENT } from './constants';
|
|
6
|
+
import { ReorderableListState } from '../../types';
|
|
7
|
+
const version = React.version.split('.');
|
|
8
|
+
const hasAutomaticBatching = version.length ? parseInt(version[0], 10) >= 18 : false;
|
|
9
|
+
export const useReorderableList = ({
|
|
10
|
+
ref,
|
|
11
|
+
autoscrollThreshold,
|
|
12
|
+
autoscrollSpeedScale,
|
|
13
|
+
autoscrollDelay,
|
|
14
|
+
animationDuration,
|
|
15
|
+
dragReorderThreshold,
|
|
16
|
+
onLayout,
|
|
17
|
+
onReorder,
|
|
18
|
+
onScroll
|
|
19
|
+
}) => {
|
|
20
|
+
const scrollEnabled = useSharedValue(true);
|
|
21
|
+
const flatList = useAnimatedRef();
|
|
22
|
+
const gestureState = useSharedValue(State.UNDETERMINED);
|
|
23
|
+
const currentY = useSharedValue(0);
|
|
24
|
+
const currentTranslationY = useSharedValue(0);
|
|
25
|
+
const containerPositionY = useSharedValue(0);
|
|
26
|
+
const currentScrollOffsetY = useSharedValue(0);
|
|
27
|
+
const dragScrollTranslationY = useSharedValue(0);
|
|
28
|
+
const dragInitialScrollOffsetY = useSharedValue(0);
|
|
29
|
+
const draggedHeight = useSharedValue(0);
|
|
30
|
+
const itemOffset = useSharedValue([]);
|
|
31
|
+
const itemHeight = useSharedValue([]);
|
|
32
|
+
const topAutoscrollArea = useSharedValue(0);
|
|
33
|
+
const bottomAutoscrollArea = useSharedValue(0);
|
|
34
|
+
const autoscrollTrigger = useSharedValue(-1);
|
|
35
|
+
const lastAutoscrollTrigger = useSharedValue(-1);
|
|
36
|
+
const previousY = useSharedValue(0);
|
|
37
|
+
const dragY = useSharedValue(0);
|
|
38
|
+
const previousDirection = useSharedValue(0);
|
|
39
|
+
const previousIndex = useSharedValue(-1);
|
|
40
|
+
const currentIndex = useSharedValue(-1);
|
|
41
|
+
const draggedIndex = useSharedValue(-1);
|
|
42
|
+
const releasedIndex = useSharedValue(-1);
|
|
43
|
+
const state = useSharedValue(ReorderableListState.IDLE);
|
|
44
|
+
|
|
45
|
+
// animation duration as a shared value allows to avoid re-rendering of all cells on value change
|
|
46
|
+
const duration = useSharedValue(animationDuration);
|
|
47
|
+
if (duration.value !== animationDuration) {
|
|
48
|
+
duration.value = animationDuration;
|
|
49
|
+
}
|
|
50
|
+
const listContextValue = useMemo(() => ({
|
|
51
|
+
draggedHeight,
|
|
52
|
+
currentIndex,
|
|
53
|
+
draggedIndex
|
|
54
|
+
}), [draggedHeight, currentIndex, draggedIndex]);
|
|
55
|
+
const startY = useSharedValue(0);
|
|
56
|
+
const panGestureHandler = useMemo(() => Gesture.Pan().onBegin(e => {
|
|
57
|
+
// prevent new dragging until item is completely released
|
|
58
|
+
if (state.value === ReorderableListState.IDLE) {
|
|
59
|
+
const relativeY = e.absoluteY - containerPositionY.value;
|
|
60
|
+
startY.value = relativeY;
|
|
61
|
+
currentY.value = relativeY;
|
|
62
|
+
currentTranslationY.value = e.translationY;
|
|
63
|
+
if (draggedIndex.value >= 0) {
|
|
64
|
+
dragY.value = e.translationY;
|
|
65
|
+
}
|
|
66
|
+
gestureState.value = e.state;
|
|
67
|
+
}
|
|
68
|
+
}).onUpdate(e => {
|
|
69
|
+
if (state.value !== ReorderableListState.RELEASING) {
|
|
70
|
+
currentY.value = startY.value + e.translationY;
|
|
71
|
+
currentTranslationY.value = e.translationY;
|
|
72
|
+
if (draggedIndex.value >= 0) {
|
|
73
|
+
dragY.value = e.translationY + dragScrollTranslationY.value;
|
|
74
|
+
}
|
|
75
|
+
gestureState.value = e.state;
|
|
76
|
+
}
|
|
77
|
+
}).onEnd(e => gestureState.value = e.state).onFinalize(e => gestureState.value = e.state), [containerPositionY, currentTranslationY, currentY, dragScrollTranslationY, draggedIndex, gestureState, dragY, startY, state]);
|
|
78
|
+
const gestureHandler = useMemo(() => Gesture.Simultaneous(Gesture.Native(), panGestureHandler), [panGestureHandler]);
|
|
79
|
+
const setScrollEnabled = useCallback(enabled => {
|
|
80
|
+
var _flatList$current;
|
|
81
|
+
scrollEnabled.value = enabled;
|
|
82
|
+
(_flatList$current = flatList.current) === null || _flatList$current === void 0 || _flatList$current.setNativeProps({
|
|
83
|
+
scrollEnabled: enabled
|
|
84
|
+
});
|
|
85
|
+
}, [flatList, scrollEnabled]);
|
|
86
|
+
const resetSharedValues = useCallback(() => {
|
|
87
|
+
'worklet';
|
|
88
|
+
|
|
89
|
+
// must be reset before the reorder function is called
|
|
90
|
+
// to avoid triggering on drag end event twice
|
|
91
|
+
releasedIndex.value = -1;
|
|
92
|
+
draggedIndex.value = -1;
|
|
93
|
+
// current index is reset on item render for the on end event
|
|
94
|
+
dragY.value = 0;
|
|
95
|
+
// released flag is reset after release is triggered in the item
|
|
96
|
+
state.value = ReorderableListState.IDLE;
|
|
97
|
+
dragScrollTranslationY.value = 0;
|
|
98
|
+
}, [releasedIndex, draggedIndex, dragY, state, dragScrollTranslationY]);
|
|
99
|
+
const reorder = (fromIndex, toIndex) => {
|
|
100
|
+
runOnUI(resetSharedValues)();
|
|
101
|
+
if (fromIndex !== toIndex) {
|
|
102
|
+
const updateState = () => {
|
|
103
|
+
onReorder({
|
|
104
|
+
from: fromIndex,
|
|
105
|
+
to: toIndex
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
if (!hasAutomaticBatching) {
|
|
109
|
+
unstable_batchedUpdates(updateState);
|
|
110
|
+
} else {
|
|
111
|
+
updateState();
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
const getIndexFromY = useCallback(y => {
|
|
116
|
+
'worklet';
|
|
117
|
+
|
|
118
|
+
const relativeY = currentScrollOffsetY.value + y;
|
|
119
|
+
const count = itemOffset.value.length;
|
|
120
|
+
for (let i = 0; i < count; i++) {
|
|
121
|
+
if (currentIndex.value === i) {
|
|
122
|
+
continue;
|
|
123
|
+
}
|
|
124
|
+
const direction = i > currentIndex.value ? 1 : -1;
|
|
125
|
+
const threshold = Math.max(0, Math.min(1, dragReorderThreshold));
|
|
126
|
+
const height = itemHeight.value[i];
|
|
127
|
+
const offset = itemOffset.value[i] + height * threshold * direction;
|
|
128
|
+
if (i === 0 && relativeY <= offset || i === count - 1 && relativeY >= offset + height || relativeY >= offset && relativeY <= offset + height) {
|
|
129
|
+
return {
|
|
130
|
+
index: i,
|
|
131
|
+
direction
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
return {
|
|
136
|
+
index: currentIndex.value,
|
|
137
|
+
direction: previousDirection.value
|
|
138
|
+
};
|
|
139
|
+
}, [dragReorderThreshold, currentIndex, currentScrollOffsetY, previousDirection, itemOffset, itemHeight]);
|
|
140
|
+
const setCurrentIndex = useCallback(y => {
|
|
141
|
+
'worklet';
|
|
142
|
+
|
|
143
|
+
const {
|
|
144
|
+
index: newIndex,
|
|
145
|
+
direction: newDirection
|
|
146
|
+
} = getIndexFromY(y);
|
|
147
|
+
const delta = Math.abs(previousY.value - y);
|
|
148
|
+
if (currentIndex.value !== newIndex && (
|
|
149
|
+
// if the same two items re-swap index check delta and direction to avoid swap flickering
|
|
150
|
+
previousIndex.value !== newIndex || previousDirection.value !== newDirection && delta >= 5)) {
|
|
151
|
+
const itemDirection = newIndex > currentIndex.value;
|
|
152
|
+
const index1 = itemDirection ? currentIndex.value : newIndex;
|
|
153
|
+
const index2 = itemDirection ? newIndex : currentIndex.value;
|
|
154
|
+
const newOffset1 = itemOffset.value[index1];
|
|
155
|
+
const newHeight1 = itemHeight.value[index2];
|
|
156
|
+
const newOffset2 = itemOffset.value[index2] + (itemHeight.value[index2] - itemHeight.value[index1]);
|
|
157
|
+
const newHeight2 = itemHeight.value[index1];
|
|
158
|
+
itemOffset.value[index1] = newOffset1;
|
|
159
|
+
itemHeight.value[index1] = newHeight1;
|
|
160
|
+
itemOffset.value[index2] = newOffset2;
|
|
161
|
+
itemHeight.value[index2] = newHeight2;
|
|
162
|
+
previousY.value = y;
|
|
163
|
+
previousDirection.value = newDirection;
|
|
164
|
+
previousIndex.value = currentIndex.value;
|
|
165
|
+
currentIndex.value = newIndex;
|
|
166
|
+
}
|
|
167
|
+
}, [currentIndex, previousIndex, previousDirection, previousY, itemOffset, itemHeight, getIndexFromY]);
|
|
168
|
+
useAnimatedReaction(() => gestureState.value, () => {
|
|
169
|
+
if (gestureState.value !== State.ACTIVE && gestureState.value !== State.BEGAN && (state.value === ReorderableListState.DRAGGING || state.value === ReorderableListState.AUTO_SCROLL)) {
|
|
170
|
+
state.value = ReorderableListState.RELEASING;
|
|
171
|
+
releasedIndex.value = draggedIndex.value;
|
|
172
|
+
|
|
173
|
+
// enable back scroll on releasing
|
|
174
|
+
runOnJS(setScrollEnabled)(true);
|
|
175
|
+
|
|
176
|
+
// they are actually swapped on drag translation
|
|
177
|
+
const currentItemOffset = itemOffset.value[draggedIndex.value];
|
|
178
|
+
const currentItemHeight = itemHeight.value[draggedIndex.value];
|
|
179
|
+
const draggedItemOffset = itemOffset.value[currentIndex.value];
|
|
180
|
+
const draggedItemHeight = itemHeight.value[currentIndex.value];
|
|
181
|
+
const newTopPosition = currentIndex.value > draggedIndex.value ? draggedItemOffset - currentItemOffset : draggedItemOffset - currentItemOffset + (draggedItemHeight - currentItemHeight);
|
|
182
|
+
if (dragY.value !== newTopPosition) {
|
|
183
|
+
// animate dragged item to its new position on release
|
|
184
|
+
dragY.value = withTiming(newTopPosition, {
|
|
185
|
+
duration: duration.value,
|
|
186
|
+
easing: Easing.out(Easing.ease)
|
|
187
|
+
}, () => {
|
|
188
|
+
runOnJS(reorder)(draggedIndex.value, currentIndex.value);
|
|
189
|
+
});
|
|
190
|
+
} else {
|
|
191
|
+
// user might drag and release the item without moving it so,
|
|
192
|
+
// since the animation end callback is not executed in that case
|
|
193
|
+
// we need to reset values as the reorder function would do
|
|
194
|
+
resetSharedValues();
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
useAnimatedReaction(() => currentY.value, y => {
|
|
199
|
+
if (state.value === ReorderableListState.DRAGGING || state.value === ReorderableListState.AUTO_SCROLL) {
|
|
200
|
+
setCurrentIndex(y);
|
|
201
|
+
if (y <= topAutoscrollArea.value || y >= bottomAutoscrollArea.value) {
|
|
202
|
+
if (state.value !== ReorderableListState.AUTO_SCROLL) {
|
|
203
|
+
// trigger autoscroll
|
|
204
|
+
lastAutoscrollTrigger.value = autoscrollTrigger.value;
|
|
205
|
+
autoscrollTrigger.value *= -1;
|
|
206
|
+
}
|
|
207
|
+
state.value = ReorderableListState.AUTO_SCROLL;
|
|
208
|
+
} else {
|
|
209
|
+
state.value = ReorderableListState.DRAGGING;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
useAnimatedReaction(() => autoscrollTrigger.value, () => {
|
|
214
|
+
if (autoscrollTrigger.value !== lastAutoscrollTrigger.value && state.value === ReorderableListState.AUTO_SCROLL) {
|
|
215
|
+
const autoscrollIncrement = (currentY.value <= topAutoscrollArea.value ? -AUTOSCROLL_INCREMENT : AUTOSCROLL_INCREMENT) * autoscrollSpeedScale;
|
|
216
|
+
if (autoscrollIncrement !== 0) {
|
|
217
|
+
scrollTo(flatList, 0, currentScrollOffsetY.value + autoscrollIncrement, true);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// when autoscrolling user may not be moving his finger so we need
|
|
221
|
+
// to update the current position of the dragged item here
|
|
222
|
+
setCurrentIndex(currentY.value);
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
const handleScroll = useAnimatedScrollHandler(e => {
|
|
226
|
+
currentScrollOffsetY.value = e.contentOffset.y;
|
|
227
|
+
|
|
228
|
+
// checking if the list is not scrollable instead of the scrolling state
|
|
229
|
+
// fixes a bug on iOS where the item is shifted after autoscrolling and then
|
|
230
|
+
// moving await from autoscroll area
|
|
231
|
+
if (!scrollEnabled.value) {
|
|
232
|
+
dragScrollTranslationY.value = currentScrollOffsetY.value - dragInitialScrollOffsetY.value;
|
|
233
|
+
}
|
|
234
|
+
if (state.value === ReorderableListState.AUTO_SCROLL) {
|
|
235
|
+
dragY.value = currentTranslationY.value + dragScrollTranslationY.value;
|
|
236
|
+
cancelAnimation(autoscrollTrigger);
|
|
237
|
+
lastAutoscrollTrigger.value = autoscrollTrigger.value;
|
|
238
|
+
autoscrollTrigger.value = withDelay(autoscrollDelay, withTiming(autoscrollTrigger.value * -1, {
|
|
239
|
+
duration: 0
|
|
240
|
+
}));
|
|
241
|
+
} else {}
|
|
242
|
+
if (onScroll) {
|
|
243
|
+
onScroll(e);
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
const startDrag = useCallback(index => {
|
|
247
|
+
'worklet';
|
|
248
|
+
|
|
249
|
+
// allow new drag when item is completely released
|
|
250
|
+
if (state.value === ReorderableListState.IDLE) {
|
|
251
|
+
draggedHeight.value = itemHeight.value[index];
|
|
252
|
+
draggedIndex.value = index;
|
|
253
|
+
previousIndex.value = -1;
|
|
254
|
+
currentIndex.value = index;
|
|
255
|
+
state.value = ReorderableListState.DRAGGING;
|
|
256
|
+
dragInitialScrollOffsetY.value = currentScrollOffsetY.value;
|
|
257
|
+
runOnJS(setScrollEnabled)(false);
|
|
258
|
+
}
|
|
259
|
+
}, [setScrollEnabled, currentIndex, previousIndex, draggedHeight, draggedIndex, state, currentScrollOffsetY, dragInitialScrollOffsetY, itemHeight]);
|
|
260
|
+
const measureFlatList = useCallback(() => {
|
|
261
|
+
'worklet';
|
|
262
|
+
|
|
263
|
+
const measurement = measure(flatList);
|
|
264
|
+
if (measurement === null) {
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
containerPositionY.value = measurement.pageY;
|
|
268
|
+
}, [flatList, containerPositionY]);
|
|
269
|
+
const handleFlatListLayout = useCallback(e => {
|
|
270
|
+
runOnUI(measureFlatList)();
|
|
271
|
+
const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
|
|
272
|
+
const {
|
|
273
|
+
height
|
|
274
|
+
} = e.nativeEvent.layout;
|
|
275
|
+
topAutoscrollArea.value = height * threshold;
|
|
276
|
+
bottomAutoscrollArea.value = height * (1 - threshold);
|
|
277
|
+
if (onLayout) {
|
|
278
|
+
onLayout(e);
|
|
279
|
+
}
|
|
280
|
+
}, [measureFlatList, topAutoscrollArea, bottomAutoscrollArea, autoscrollThreshold, onLayout]);
|
|
281
|
+
const handleRef = value => {
|
|
282
|
+
flatList(value);
|
|
283
|
+
if (typeof ref === 'function') {
|
|
284
|
+
ref(value);
|
|
285
|
+
} else if (ref) {
|
|
286
|
+
ref.current = value;
|
|
287
|
+
}
|
|
288
|
+
};
|
|
289
|
+
return {
|
|
290
|
+
gestureHandler,
|
|
291
|
+
handleScroll,
|
|
292
|
+
handleFlatListLayout,
|
|
293
|
+
handleRef,
|
|
294
|
+
startDrag,
|
|
295
|
+
listContextValue,
|
|
296
|
+
itemOffset,
|
|
297
|
+
itemHeight,
|
|
298
|
+
draggedIndex,
|
|
299
|
+
releasedIndex,
|
|
300
|
+
dragY,
|
|
301
|
+
duration
|
|
302
|
+
};
|
|
303
|
+
};
|
|
304
|
+
//# sourceMappingURL=useReorderableList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","unstable_batchedUpdates","Gesture","State","Easing","cancelAnimation","measure","runOnJS","runOnUI","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","withDelay","withTiming","AUTOSCROLL_INCREMENT","ReorderableListState","version","split","hasAutomaticBatching","length","parseInt","useReorderableList","ref","autoscrollThreshold","autoscrollSpeedScale","autoscrollDelay","animationDuration","dragReorderThreshold","onLayout","onReorder","onScroll","scrollEnabled","flatList","gestureState","UNDETERMINED","currentY","currentTranslationY","containerPositionY","currentScrollOffsetY","dragScrollTranslationY","dragInitialScrollOffsetY","draggedHeight","itemOffset","itemHeight","topAutoscrollArea","bottomAutoscrollArea","autoscrollTrigger","lastAutoscrollTrigger","previousY","dragY","previousDirection","previousIndex","currentIndex","draggedIndex","releasedIndex","state","IDLE","duration","value","listContextValue","startY","panGestureHandler","Pan","onBegin","e","relativeY","absoluteY","translationY","onUpdate","RELEASING","onEnd","onFinalize","gestureHandler","Simultaneous","Native","setScrollEnabled","enabled","_flatList$current","current","setNativeProps","resetSharedValues","reorder","fromIndex","toIndex","updateState","from","to","getIndexFromY","y","count","i","direction","threshold","Math","max","min","height","offset","index","setCurrentIndex","newIndex","newDirection","delta","abs","itemDirection","index1","index2","newOffset1","newHeight1","newOffset2","newHeight2","ACTIVE","BEGAN","DRAGGING","AUTO_SCROLL","currentItemOffset","currentItemHeight","draggedItemOffset","draggedItemHeight","newTopPosition","easing","out","ease","autoscrollIncrement","handleScroll","contentOffset","startDrag","measureFlatList","measurement","pageY","handleFlatListLayout","nativeEvent","layout","handleRef"],"sourceRoot":"../../../../src","sources":["components/ReorderableList/useReorderableList.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React, { memo, useCallback, useMemo } from 'react';
|
|
2
|
+
import Animated, { Easing, runOnUI, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
3
|
+
import { ReorderableCellContext, ReorderableListContext } from '../contexts';
|
|
4
|
+
import { useContext } from '../hooks';
|
|
5
|
+
export const ReorderableListCell = /*#__PURE__*/memo(({
|
|
6
|
+
index,
|
|
7
|
+
startDrag,
|
|
8
|
+
children,
|
|
9
|
+
onLayout,
|
|
10
|
+
itemOffset,
|
|
11
|
+
itemHeight,
|
|
12
|
+
dragY,
|
|
13
|
+
draggedIndex,
|
|
14
|
+
releasedIndex,
|
|
15
|
+
animationDuration
|
|
16
|
+
}) => {
|
|
17
|
+
const dragHandler = useCallback(() => {
|
|
18
|
+
'worklet';
|
|
19
|
+
|
|
20
|
+
startDrag(index);
|
|
21
|
+
}, [startDrag, index]);
|
|
22
|
+
const contextValue = useMemo(() => ({
|
|
23
|
+
index,
|
|
24
|
+
dragHandler,
|
|
25
|
+
draggedIndex,
|
|
26
|
+
releasedIndex
|
|
27
|
+
}), [index, dragHandler, draggedIndex, releasedIndex]);
|
|
28
|
+
const {
|
|
29
|
+
currentIndex,
|
|
30
|
+
draggedHeight
|
|
31
|
+
} = useContext(ReorderableListContext);
|
|
32
|
+
const itemZIndex = useSharedValue(0);
|
|
33
|
+
const itemPositionY = useSharedValue(0);
|
|
34
|
+
const itemDragY = useSharedValue(0);
|
|
35
|
+
const itemIndex = useSharedValue(index);
|
|
36
|
+
useAnimatedReaction(() => dragY.value, () => {
|
|
37
|
+
if (itemIndex.value === draggedIndex.value && currentIndex.value >= 0 && draggedIndex.value >= 0) {
|
|
38
|
+
itemDragY.value = dragY.value;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
useAnimatedReaction(() => currentIndex.value, () => {
|
|
42
|
+
if (itemIndex.value !== draggedIndex.value && currentIndex.value >= 0 && draggedIndex.value >= 0) {
|
|
43
|
+
const moveDown = currentIndex.value > draggedIndex.value;
|
|
44
|
+
const startMove = Math.min(draggedIndex.value, currentIndex.value);
|
|
45
|
+
const endMove = Math.max(draggedIndex.value, currentIndex.value);
|
|
46
|
+
let newValue = 0;
|
|
47
|
+
if (itemIndex.value >= startMove && itemIndex.value <= endMove) {
|
|
48
|
+
newValue = moveDown ? -draggedHeight.value : draggedHeight.value;
|
|
49
|
+
}
|
|
50
|
+
if (newValue !== itemPositionY.value) {
|
|
51
|
+
itemPositionY.value = withTiming(newValue, {
|
|
52
|
+
duration: animationDuration.value,
|
|
53
|
+
easing: Easing.out(Easing.ease)
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
useAnimatedReaction(() => draggedIndex.value === index, newValue => {
|
|
59
|
+
itemZIndex.value = newValue ? 999 : 0;
|
|
60
|
+
});
|
|
61
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
62
|
+
zIndex: itemZIndex.value,
|
|
63
|
+
transform: [{
|
|
64
|
+
translateY: itemDragY.value
|
|
65
|
+
}, {
|
|
66
|
+
translateY: itemPositionY.value
|
|
67
|
+
}]
|
|
68
|
+
}));
|
|
69
|
+
const handleLayout = e => {
|
|
70
|
+
runOnUI((y, height) => {
|
|
71
|
+
itemOffset.value[index] = y;
|
|
72
|
+
itemHeight.value[index] = height;
|
|
73
|
+
})(e.nativeEvent.layout.y, e.nativeEvent.layout.height);
|
|
74
|
+
if (onLayout) {
|
|
75
|
+
onLayout(e);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
return /*#__PURE__*/React.createElement(ReorderableCellContext.Provider, {
|
|
79
|
+
value: contextValue
|
|
80
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
81
|
+
style: animatedStyle,
|
|
82
|
+
onLayout: handleLayout
|
|
83
|
+
}, children));
|
|
84
|
+
});
|
|
85
|
+
//# sourceMappingURL=ReorderableListCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","memo","useCallback","useMemo","Animated","Easing","runOnUI","useAnimatedReaction","useAnimatedStyle","useSharedValue","withTiming","ReorderableCellContext","ReorderableListContext","useContext","ReorderableListCell","index","startDrag","children","onLayout","itemOffset","itemHeight","dragY","draggedIndex","releasedIndex","animationDuration","dragHandler","contextValue","currentIndex","draggedHeight","itemZIndex","itemPositionY","itemDragY","itemIndex","value","moveDown","startMove","Math","min","endMove","max","newValue","duration","easing","out","ease","animatedStyle","zIndex","transform","translateY","handleLayout","e","y","height","nativeEvent","layout","createElement","Provider","View","style"],"sourceRoot":"../../../src","sources":["components/ReorderableListCell.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAGC,IAAI,EAAEC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAGvD,OAAOC,QAAQ,IACbC,MAAM,EAENC,OAAO,EACPC,mBAAmB,EACnBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAEhC,SAAQC,sBAAsB,EAAEC,sBAAsB,QAAO,aAAa;AAC1E,SAAQC,UAAU,QAAO,UAAU;AAcnC,OAAO,MAAMC,mBAAmB,gBAAGb,IAAI,CACrC,CAAK;EACHc,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,UAAU;EACVC,KAAK;EACLC,YAAY;EACZC,aAAa;EACbC;AAC2B,CAAC,KAAK;EACjC,MAAMC,WAAW,GAAGvB,WAAW,CAAC,MAAM;IACpC,SAAS;;IAETc,SAAS,CAACD,KAAK,CAAC;EAClB,CAAC,EAAE,CAACC,SAAS,EAAED,KAAK,CAAC,CAAC;EAEtB,MAAMW,YAAY,GAAGvB,OAAO,CAC1B,OAAO;IACLY,KAAK;IACLU,WAAW;IACXH,YAAY;IACZC;EACF,CAAC,CAAC,EACF,CAACR,KAAK,EAAEU,WAAW,EAAEH,YAAY,EAAEC,aAAa,CAClD,CAAC;EACD,MAAM;IAACI,YAAY;IAAEC;EAAa,CAAC,GAAGf,UAAU,CAACD,sBAAsB,CAAC;EAExE,MAAMiB,UAAU,GAAGpB,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMqB,aAAa,GAAGrB,cAAc,CAAC,CAAC,CAAC;EACvC,MAAMsB,SAAS,GAAGtB,cAAc,CAAC,CAAC,CAAC;EACnC,MAAMuB,SAAS,GAAGvB,cAAc,CAACM,KAAK,CAAC;EAEvCR,mBAAmB,CACjB,MAAMc,KAAK,CAACY,KAAK,EACjB,MAAM;IACJ,IACED,SAAS,CAACC,KAAK,KAAKX,YAAY,CAACW,KAAK,IACtCN,YAAY,CAACM,KAAK,IAAI,CAAC,IACvBX,YAAY,CAACW,KAAK,IAAI,CAAC,EACvB;MACAF,SAAS,CAACE,KAAK,GAAGZ,KAAK,CAACY,KAAK;IAC/B;EACF,CACF,CAAC;EAED1B,mBAAmB,CACjB,MAAMoB,YAAY,CAACM,KAAK,EACxB,MAAM;IACJ,IACED,SAAS,CAACC,KAAK,KAAKX,YAAY,CAACW,KAAK,IACtCN,YAAY,CAACM,KAAK,IAAI,CAAC,IACvBX,YAAY,CAACW,KAAK,IAAI,CAAC,EACvB;MACA,MAAMC,QAAQ,GAAGP,YAAY,CAACM,KAAK,GAAGX,YAAY,CAACW,KAAK;MACxD,MAAME,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACf,YAAY,CAACW,KAAK,EAAEN,YAAY,CAACM,KAAK,CAAC;MAClE,MAAMK,OAAO,GAAGF,IAAI,CAACG,GAAG,CAACjB,YAAY,CAACW,KAAK,EAAEN,YAAY,CAACM,KAAK,CAAC;MAChE,IAAIO,QAAQ,GAAG,CAAC;MAEhB,IAAIR,SAAS,CAACC,KAAK,IAAIE,SAAS,IAAIH,SAAS,CAACC,KAAK,IAAIK,OAAO,EAAE;QAC9DE,QAAQ,GAAGN,QAAQ,GAAG,CAACN,aAAa,CAACK,KAAK,GAAGL,aAAa,CAACK,KAAK;MAClE;MAEA,IAAIO,QAAQ,KAAKV,aAAa,CAACG,KAAK,EAAE;QACpCH,aAAa,CAACG,KAAK,GAAGvB,UAAU,CAAC8B,QAAQ,EAAE;UACzCC,QAAQ,EAAEjB,iBAAiB,CAACS,KAAK;UACjCS,MAAM,EAAErC,MAAM,CAACsC,GAAG,CAACtC,MAAM,CAACuC,IAAI;QAChC,CAAC,CAAC;MACJ;IACF;EACF,CACF,CAAC;EAEDrC,mBAAmB,CACjB,MAAMe,YAAY,CAACW,KAAK,KAAKlB,KAAK,EAClCyB,QAAQ,IAAI;IACVX,UAAU,CAACI,KAAK,GAAGO,QAAQ,GAAG,GAAG,GAAG,CAAC;EACvC,CACF,CAAC;EAED,MAAMK,aAAa,GAAGrC,gBAAgB,CAAC,OAAO;IAC5CsC,MAAM,EAAEjB,UAAU,CAACI,KAAK;IACxBc,SAAS,EAAE,CACT;MAACC,UAAU,EAAEjB,SAAS,CAACE;IAAK,CAAC,EAC7B;MAACe,UAAU,EAAElB,aAAa,CAACG;IAAK,CAAC;EAErC,CAAC,CAAC,CAAC;EAEH,MAAMgB,YAAY,GAAIC,CAAoB,IAAK;IAC7C5C,OAAO,CAAC,CAAC6C,CAAS,EAAEC,MAAc,KAAK;MACrCjC,UAAU,CAACc,KAAK,CAAClB,KAAK,CAAC,GAAGoC,CAAC;MAC3B/B,UAAU,CAACa,KAAK,CAAClB,KAAK,CAAC,GAAGqC,MAAM;IAClC,CAAC,CAAC,CAACF,CAAC,CAACG,WAAW,CAACC,MAAM,CAACH,CAAC,EAAED,CAAC,CAACG,WAAW,CAACC,MAAM,CAACF,MAAM,CAAC;IAEvD,IAAIlC,QAAQ,EAAE;MACZA,QAAQ,CAACgC,CAAC,CAAC;IACb;EACF,CAAC;EAED,oBACElD,KAAA,CAAAuD,aAAA,CAAC5C,sBAAsB,CAAC6C,QAAQ;IAACvB,KAAK,EAAEP;EAAa,gBACnD1B,KAAA,CAAAuD,aAAA,CAACnD,QAAQ,CAACqD,IAAI;IAACC,KAAK,EAAEb,aAAc;IAAC3B,QAAQ,EAAE+B;EAAa,GACzDhC,QACY,CACgB,CAAC;AAEtC,CACF,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React, { useCallback, useMemo } from 'react';
|
|
3
|
+
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
|
+
import { useReorderableDragEnd, useReorderableDragStart } from '../hooks';
|
|
5
|
+
const scaleDefaultConfig = {
|
|
6
|
+
enabled: true,
|
|
7
|
+
valueEnd: 1,
|
|
8
|
+
valueStart: 1.025,
|
|
9
|
+
easingStart: Easing.in(Easing.ease),
|
|
10
|
+
easingEnd: Easing.out(Easing.ease),
|
|
11
|
+
duration: 200
|
|
12
|
+
};
|
|
13
|
+
const opacityDefaultConfig = {
|
|
14
|
+
enabled: true,
|
|
15
|
+
valueEnd: 1,
|
|
16
|
+
valueStart: 0.75,
|
|
17
|
+
easingStart: Easing.in(Easing.ease),
|
|
18
|
+
easingEnd: Easing.out(Easing.ease),
|
|
19
|
+
duration: 200
|
|
20
|
+
};
|
|
21
|
+
export const ReorderableListItem = ({
|
|
22
|
+
scaleAnimationConfig = scaleDefaultConfig,
|
|
23
|
+
opacityAnimationConfig = opacityDefaultConfig,
|
|
24
|
+
...rest
|
|
25
|
+
}) => {
|
|
26
|
+
const scaleConfigWithDefaults = useMemo(() => ({
|
|
27
|
+
...scaleDefaultConfig,
|
|
28
|
+
...scaleAnimationConfig
|
|
29
|
+
}), [scaleAnimationConfig]);
|
|
30
|
+
const opacityConfigWithDefaults = useMemo(() => ({
|
|
31
|
+
...opacityDefaultConfig,
|
|
32
|
+
...opacityAnimationConfig
|
|
33
|
+
}), [opacityAnimationConfig]);
|
|
34
|
+
const scale = useSharedValue(scaleConfigWithDefaults.enabled ? scaleConfigWithDefaults.valueEnd : 1);
|
|
35
|
+
const opacity = useSharedValue(opacityConfigWithDefaults.enabled ? opacityConfigWithDefaults.valueEnd : 1);
|
|
36
|
+
useReorderableDragStart(useCallback(() => {
|
|
37
|
+
'worklet';
|
|
38
|
+
|
|
39
|
+
if (scaleConfigWithDefaults.enabled) {
|
|
40
|
+
scale.value = withTiming(scaleConfigWithDefaults.valueStart, {
|
|
41
|
+
easing: scaleConfigWithDefaults.easingStart,
|
|
42
|
+
duration: scaleConfigWithDefaults.duration
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
if (opacityConfigWithDefaults.enabled) {
|
|
46
|
+
opacity.value = withTiming(opacityConfigWithDefaults.valueStart, {
|
|
47
|
+
easing: opacityConfigWithDefaults.easingStart,
|
|
48
|
+
duration: opacityConfigWithDefaults.duration
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
}, [opacity, scale, opacityConfigWithDefaults, scaleConfigWithDefaults]));
|
|
52
|
+
useReorderableDragEnd(useCallback(() => {
|
|
53
|
+
'worklet';
|
|
54
|
+
|
|
55
|
+
if (scaleConfigWithDefaults.enabled) {
|
|
56
|
+
scale.value = withTiming(scaleConfigWithDefaults.valueEnd, {
|
|
57
|
+
easing: scaleConfigWithDefaults.easingEnd,
|
|
58
|
+
duration: scaleConfigWithDefaults.duration
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
if (opacityConfigWithDefaults.enabled) {
|
|
62
|
+
opacity.value = withTiming(opacityConfigWithDefaults.valueEnd, {
|
|
63
|
+
easing: opacityConfigWithDefaults.easingEnd,
|
|
64
|
+
duration: opacityConfigWithDefaults.duration
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}, [opacity, scale, opacityConfigWithDefaults, scaleConfigWithDefaults]));
|
|
68
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
69
|
+
transform: [{
|
|
70
|
+
scale: scale.value
|
|
71
|
+
}],
|
|
72
|
+
opacity: opacity.value
|
|
73
|
+
}), [scale, opacity]);
|
|
74
|
+
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
|
75
|
+
style: [animatedStyle, rest.style]
|
|
76
|
+
}));
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=ReorderableListItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","useReorderableDragEnd","useReorderableDragStart","scaleDefaultConfig","enabled","valueEnd","valueStart","easingStart","in","ease","easingEnd","out","duration","opacityDefaultConfig","ReorderableListItem","scaleAnimationConfig","opacityAnimationConfig","rest","scaleConfigWithDefaults","opacityConfigWithDefaults","scale","opacity","value","easing","animatedStyle","transform","createElement","View","_extends","style"],"sourceRoot":"../../../src","sources":["components/ReorderableListItem.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,uBAAuB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","ReorderableCellContext","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ReorderableCellContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAWzB,OAAO,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAa,CAEvDC,SAAS,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","ReorderableListContext","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ReorderableListContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,OAAO,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAa,CAEvDC,SAAS,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["contexts/index.ts"],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,0BAA0B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,yBAAyB;AACvC,cAAc,cAAc","ignoreList":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { useContext as useReactContext } from 'react';
|
|
2
|
+
export const useContext = context => {
|
|
3
|
+
const value = useReactContext(context);
|
|
4
|
+
if (value !== undefined) {
|
|
5
|
+
return value;
|
|
6
|
+
}
|
|
7
|
+
throw 'Please consume ReorderableList context within its provider.';
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useContext","useReactContext","context","value","undefined"],"sourceRoot":"../../../src","sources":["hooks/useContext.ts"],"mappings":"AAAA,SAAQA,UAAU,IAAIC,eAAe,QAAO,OAAO;AAEnD,OAAO,MAAMD,UAAU,GAAOE,OAAqC,IAAK;EACtE,MAAMC,KAAK,GAAGF,eAAe,CAACC,OAAO,CAAC;EAEtC,IAAIC,KAAK,KAAKC,SAAS,EAAE;IACvB,OAAOD,KAAK;EACd;EAEA,MAAM,6DAA6D;AACrE,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { useContext } from './useContext';
|
|
2
|
+
import { ReorderableCellContext } from '../contexts';
|
|
3
|
+
export const useReorderableDrag = () => {
|
|
4
|
+
const {
|
|
5
|
+
dragHandler
|
|
6
|
+
} = useContext(ReorderableCellContext);
|
|
7
|
+
return dragHandler;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useReorderableDrag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useContext","ReorderableCellContext","useReorderableDrag","dragHandler"],"sourceRoot":"../../../src","sources":["hooks/useReorderableDrag.ts"],"mappings":"AAAA,SAAQA,UAAU,QAAO,cAAc;AACvC,SAAQC,sBAAsB,QAAO,aAAa;AAElD,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAACC;EAAW,CAAC,GAAGH,UAAU,CAACC,sBAAsB,CAAC;EACxD,OAAOE,WAAW;AACpB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useAnimatedReaction } from 'react-native-reanimated';
|
|
2
|
+
import { useContext } from './useContext';
|
|
3
|
+
import { ReorderableCellContext, ReorderableListContext } from '../contexts';
|
|
4
|
+
export const useReorderableDragEnd = onEnd => {
|
|
5
|
+
const {
|
|
6
|
+
currentIndex
|
|
7
|
+
} = useContext(ReorderableListContext);
|
|
8
|
+
const {
|
|
9
|
+
releasedIndex,
|
|
10
|
+
index
|
|
11
|
+
} = useContext(ReorderableCellContext);
|
|
12
|
+
useAnimatedReaction(() => releasedIndex.value === index, newValue => {
|
|
13
|
+
if (newValue) {
|
|
14
|
+
onEnd(index, currentIndex.value);
|
|
15
|
+
}
|
|
16
|
+
}, [onEnd]);
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=useReorderableDragEnd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useAnimatedReaction","useContext","ReorderableCellContext","ReorderableListContext","useReorderableDragEnd","onEnd","currentIndex","releasedIndex","index","value","newValue"],"sourceRoot":"../../../src","sources":["hooks/useReorderableDragEnd.ts"],"mappings":"AAAA,SAAQA,mBAAmB,QAAO,yBAAyB;AAE3D,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,sBAAsB,EAAEC,sBAAsB,QAAO,aAAa;AAE1E,OAAO,MAAMC,qBAAqB,GAChCC,KAAyC,IACtC;EACH,MAAM;IAACC;EAAY,CAAC,GAAGL,UAAU,CAACE,sBAAsB,CAAC;EACzD,MAAM;IAACI,aAAa;IAAEC;EAAK,CAAC,GAAGP,UAAU,CAACC,sBAAsB,CAAC;EAEjEF,mBAAmB,CACjB,MAAMO,aAAa,CAACE,KAAK,KAAKD,KAAK,EACnCE,QAAQ,IAAI;IACV,IAAIA,QAAQ,EAAE;MACZL,KAAK,CAACG,KAAK,EAAEF,YAAY,CAACG,KAAK,CAAC;IAClC;EACF,CAAC,EACD,CAACJ,KAAK,CACR,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useAnimatedReaction } from 'react-native-reanimated';
|
|
2
|
+
import { useContext } from './useContext';
|
|
3
|
+
import { ReorderableCellContext } from '../contexts';
|
|
4
|
+
export const useReorderableDragStart = onStart => {
|
|
5
|
+
const {
|
|
6
|
+
draggedIndex,
|
|
7
|
+
index
|
|
8
|
+
} = useContext(ReorderableCellContext);
|
|
9
|
+
useAnimatedReaction(() => draggedIndex.value === index, newValue => {
|
|
10
|
+
if (newValue && onStart) {
|
|
11
|
+
onStart(index);
|
|
12
|
+
}
|
|
13
|
+
}, [onStart]);
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=useReorderableDragStart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useAnimatedReaction","useContext","ReorderableCellContext","useReorderableDragStart","onStart","draggedIndex","index","value","newValue"],"sourceRoot":"../../../src","sources":["hooks/useReorderableDragStart.ts"],"mappings":"AAAA,SAAQA,mBAAmB,QAAO,yBAAyB;AAE3D,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,sBAAsB,QAAO,aAAa;AAElD,OAAO,MAAMC,uBAAuB,GAAIC,OAAgC,IAAK;EAC3E,MAAM;IAACC,YAAY;IAAEC;EAAK,CAAC,GAAGL,UAAU,CAACC,sBAAsB,CAAC;EAEhEF,mBAAmB,CACjB,MAAMK,YAAY,CAACE,KAAK,KAAKD,KAAK,EAClCE,QAAQ,IAAI;IACV,IAAIA,QAAQ,IAAIJ,OAAO,EAAE;MACvBA,OAAO,CAACE,KAAK,CAAC;IAChB;EACF,CAAC,EACD,CAACF,OAAO,CACV,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ReorderableList, ReorderableListItem } from './components';
|
|
2
|
+
import { useReorderableDrag, useReorderableDragEnd, useReorderableDragStart } from './hooks';
|
|
3
|
+
import { reorderItems } from './utils';
|
|
4
|
+
export { useReorderableDrag, useReorderableDragStart, useReorderableDragEnd, ReorderableListItem, reorderItems };
|
|
5
|
+
export default ReorderableList;
|
|
6
|
+
//# sourceMappingURL=index.js.map
|