react-native-sortable-dynamic 0.4.0 → 0.4.3
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.
|
@@ -77,6 +77,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
77
77
|
const position = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
|
|
78
78
|
const translateX = (0, _reactNativeReanimated.useSharedValue)(position.x);
|
|
79
79
|
const translateY = (0, _reactNativeReanimated.useSharedValue)(position.y);
|
|
80
|
+
const startX = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
81
|
+
const startY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
80
82
|
|
|
81
83
|
// Effect to reset isGestureActive when not in editing mode
|
|
82
84
|
(0, _react.useEffect)(() => {
|
|
@@ -95,80 +97,71 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
95
97
|
translateY.value = (0, _reactNativeReanimated.withTiming)(pos.y, _Config.animationConfig);
|
|
96
98
|
}
|
|
97
99
|
});
|
|
100
|
+
const pan = _reactNativeGestureHandler.Gesture.Pan().enabled(editing && draggable).onStart(() => {
|
|
101
|
+
if (editing && draggable) {
|
|
102
|
+
// Store the starting position
|
|
103
|
+
startX.value = translateX.value;
|
|
104
|
+
startY.value = translateY.value;
|
|
105
|
+
isGestureActive.value = false;
|
|
106
|
+
}
|
|
107
|
+
}).onUpdate(e => {
|
|
108
|
+
if (editing && draggable) {
|
|
109
|
+
// Calculate new position
|
|
110
|
+
translateX.value = startX.value + e.translationX;
|
|
111
|
+
translateY.value = startY.value + e.translationY;
|
|
98
112
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
if (
|
|
103
|
-
//
|
|
104
|
-
|
|
105
|
-
ctx.y = translateY.value;
|
|
106
|
-
isGestureActive.value = false;
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
onActive: ({
|
|
110
|
-
translationX,
|
|
111
|
-
translationY
|
|
112
|
-
}, ctx) => {
|
|
113
|
-
if (editing && draggable) {
|
|
114
|
-
// Calculate new position
|
|
115
|
-
translateX.value = ctx.x + translationX;
|
|
116
|
-
translateY.value = ctx.y + translationY;
|
|
117
|
-
|
|
118
|
-
// Calculate new order based on position
|
|
119
|
-
const newOrder = (0, _Config.getOrder)(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
|
|
120
|
-
const oldOrder = positions.value[id];
|
|
121
|
-
if (newOrder !== oldOrder) {
|
|
122
|
-
// Find the item to swap positions with
|
|
123
|
-
const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
|
|
113
|
+
// Calculate new order based on position
|
|
114
|
+
const newOrder = (0, _Config.getOrder)(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
|
|
115
|
+
const oldOrder = positions.value[id];
|
|
116
|
+
if (newOrder !== oldOrder) {
|
|
117
|
+
// Find the item to swap positions with
|
|
118
|
+
const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
|
|
124
119
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
120
|
+
// Only swap if the target item is reorderable
|
|
121
|
+
const targetItem = data.find(tile => tile.id === Number(idToSwap));
|
|
122
|
+
if (idToSwap && targetItem?.reorderable !== false) {
|
|
123
|
+
const newPositions = {
|
|
124
|
+
...positions.value
|
|
125
|
+
};
|
|
126
|
+
newPositions[id] = newOrder;
|
|
127
|
+
newPositions[idToSwap] = oldOrder;
|
|
128
|
+
positions.value = newPositions;
|
|
135
129
|
}
|
|
130
|
+
}
|
|
136
131
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
132
|
+
// Handle scrolling during drag
|
|
133
|
+
const lowerBound = scrollY.value;
|
|
134
|
+
const upperBound = lowerBound + containerHeight - SIZE;
|
|
135
|
+
const maxScroll = contentHeight - containerHeight;
|
|
136
|
+
const leftToScrollDown = maxScroll - scrollY.value;
|
|
142
137
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
// Scroll down
|
|
152
|
-
if (translateY.value > upperBound) {
|
|
153
|
-
const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
|
|
154
|
-
scrollY.value += diff;
|
|
155
|
-
(0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
|
|
156
|
-
ctx.y += diff;
|
|
157
|
-
translateY.value = ctx.y + translationY;
|
|
158
|
-
}
|
|
138
|
+
// Scroll up
|
|
139
|
+
if (translateY.value < lowerBound) {
|
|
140
|
+
const diff = Math.min(lowerBound - translateY.value, lowerBound);
|
|
141
|
+
scrollY.value -= diff;
|
|
142
|
+
(0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
|
|
143
|
+
startY.value -= diff;
|
|
144
|
+
translateY.value = startY.value + e.translationY;
|
|
159
145
|
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
(0, _reactNativeReanimated.runOnJS)(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
|
|
168
|
-
});
|
|
169
|
-
translateY.value = (0, _reactNativeReanimated.withTiming)(newPosition.y, _Config.animationConfig);
|
|
146
|
+
// Scroll down
|
|
147
|
+
if (translateY.value > upperBound) {
|
|
148
|
+
const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
|
|
149
|
+
scrollY.value += diff;
|
|
150
|
+
(0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
|
|
151
|
+
startY.value += diff;
|
|
152
|
+
translateY.value = startY.value + e.translationY;
|
|
170
153
|
}
|
|
171
154
|
}
|
|
155
|
+
}).onEnd(() => {
|
|
156
|
+
if (draggable) {
|
|
157
|
+
// Snap the item back into its place when the drag ends
|
|
158
|
+
const newPosition = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
|
|
159
|
+
translateX.value = (0, _reactNativeReanimated.withTiming)(newPosition.x, _Config.animationConfig, () => {
|
|
160
|
+
isGestureActive.value = false; // Set gesture to inactive
|
|
161
|
+
(0, _reactNativeReanimated.runOnJS)(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
|
|
162
|
+
});
|
|
163
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(newPosition.y, _Config.animationConfig);
|
|
164
|
+
}
|
|
172
165
|
});
|
|
173
166
|
|
|
174
167
|
// Animated style for the item
|
|
@@ -194,9 +187,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
194
187
|
});
|
|
195
188
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
196
189
|
style: style,
|
|
197
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.
|
|
198
|
-
|
|
199
|
-
onGestureEvent: onGestureEvent,
|
|
190
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
|
|
191
|
+
gesture: pan,
|
|
200
192
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
201
193
|
style: _reactNative.StyleSheet.absoluteFill,
|
|
202
194
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_reactNativeSafeAreaContext","_Config","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","useSafeAreaInsets","height","useWindowDimensions","containerHeight","top","bottom","COL","SIZE","MARGIN","useSortableConfig","contentHeight","keys","value","length","isGestureActive","useSharedValue","position","getPosition","translateX","x","translateY","y","useEffect","useAnimatedReaction","newOrder","pos","withTiming","animationConfig","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_reactNativeSafeAreaContext","_Config","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","useSafeAreaInsets","height","useWindowDimensions","containerHeight","top","bottom","COL","SIZE","MARGIN","useSortableConfig","contentHeight","keys","value","length","isGestureActive","useSharedValue","position","getPosition","translateX","x","translateY","y","startX","startY","useEffect","useAnimatedReaction","newOrder","pos","withTiming","animationConfig","pan","Gesture","Pan","enabled","onStart","onUpdate","translationX","translationY","getOrder","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","scrollTo","onEnd","newPosition","runOnJS","style","useAnimatedStyle","zIndex","scale","withSpring","left","width","margin","transform","jsx","View","GestureDetector","gesture","StyleSheet","absoluteFill","_default","exports"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
4
|
import { StyleSheet, useWindowDimensions } from 'react-native';
|
|
5
|
-
import Animated, {
|
|
6
|
-
import {
|
|
5
|
+
import Animated, { useAnimatedStyle, useAnimatedReaction, withSpring, scrollTo, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
|
|
6
|
+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
7
7
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
8
8
|
import { animationConfig, getOrder, getPosition } from "./Config.js";
|
|
9
9
|
import { useSortableConfig } from "./Config.js";
|
|
@@ -74,6 +74,8 @@ const SortableItemWrapper = ({
|
|
|
74
74
|
const position = getPosition(positions.value[id], COL, SIZE);
|
|
75
75
|
const translateX = useSharedValue(position.x);
|
|
76
76
|
const translateY = useSharedValue(position.y);
|
|
77
|
+
const startX = useSharedValue(0);
|
|
78
|
+
const startY = useSharedValue(0);
|
|
77
79
|
|
|
78
80
|
// Effect to reset isGestureActive when not in editing mode
|
|
79
81
|
useEffect(() => {
|
|
@@ -92,80 +94,71 @@ const SortableItemWrapper = ({
|
|
|
92
94
|
translateY.value = withTiming(pos.y, animationConfig);
|
|
93
95
|
}
|
|
94
96
|
});
|
|
97
|
+
const pan = Gesture.Pan().enabled(editing && draggable).onStart(() => {
|
|
98
|
+
if (editing && draggable) {
|
|
99
|
+
// Store the starting position
|
|
100
|
+
startX.value = translateX.value;
|
|
101
|
+
startY.value = translateY.value;
|
|
102
|
+
isGestureActive.value = false;
|
|
103
|
+
}
|
|
104
|
+
}).onUpdate(e => {
|
|
105
|
+
if (editing && draggable) {
|
|
106
|
+
// Calculate new position
|
|
107
|
+
translateX.value = startX.value + e.translationX;
|
|
108
|
+
translateY.value = startY.value + e.translationY;
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
if (
|
|
100
|
-
//
|
|
101
|
-
|
|
102
|
-
ctx.y = translateY.value;
|
|
103
|
-
isGestureActive.value = false;
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
onActive: ({
|
|
107
|
-
translationX,
|
|
108
|
-
translationY
|
|
109
|
-
}, ctx) => {
|
|
110
|
-
if (editing && draggable) {
|
|
111
|
-
// Calculate new position
|
|
112
|
-
translateX.value = ctx.x + translationX;
|
|
113
|
-
translateY.value = ctx.y + translationY;
|
|
114
|
-
|
|
115
|
-
// Calculate new order based on position
|
|
116
|
-
const newOrder = getOrder(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
|
|
117
|
-
const oldOrder = positions.value[id];
|
|
118
|
-
if (newOrder !== oldOrder) {
|
|
119
|
-
// Find the item to swap positions with
|
|
120
|
-
const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
|
|
110
|
+
// Calculate new order based on position
|
|
111
|
+
const newOrder = getOrder(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
|
|
112
|
+
const oldOrder = positions.value[id];
|
|
113
|
+
if (newOrder !== oldOrder) {
|
|
114
|
+
// Find the item to swap positions with
|
|
115
|
+
const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
|
|
121
116
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
117
|
+
// Only swap if the target item is reorderable
|
|
118
|
+
const targetItem = data.find(tile => tile.id === Number(idToSwap));
|
|
119
|
+
if (idToSwap && targetItem?.reorderable !== false) {
|
|
120
|
+
const newPositions = {
|
|
121
|
+
...positions.value
|
|
122
|
+
};
|
|
123
|
+
newPositions[id] = newOrder;
|
|
124
|
+
newPositions[idToSwap] = oldOrder;
|
|
125
|
+
positions.value = newPositions;
|
|
132
126
|
}
|
|
127
|
+
}
|
|
133
128
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
129
|
+
// Handle scrolling during drag
|
|
130
|
+
const lowerBound = scrollY.value;
|
|
131
|
+
const upperBound = lowerBound + containerHeight - SIZE;
|
|
132
|
+
const maxScroll = contentHeight - containerHeight;
|
|
133
|
+
const leftToScrollDown = maxScroll - scrollY.value;
|
|
139
134
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
// Scroll down
|
|
149
|
-
if (translateY.value > upperBound) {
|
|
150
|
-
const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
|
|
151
|
-
scrollY.value += diff;
|
|
152
|
-
scrollTo(scrollView, 0, scrollY.value, false);
|
|
153
|
-
ctx.y += diff;
|
|
154
|
-
translateY.value = ctx.y + translationY;
|
|
155
|
-
}
|
|
135
|
+
// Scroll up
|
|
136
|
+
if (translateY.value < lowerBound) {
|
|
137
|
+
const diff = Math.min(lowerBound - translateY.value, lowerBound);
|
|
138
|
+
scrollY.value -= diff;
|
|
139
|
+
scrollTo(scrollView, 0, scrollY.value, false);
|
|
140
|
+
startY.value -= diff;
|
|
141
|
+
translateY.value = startY.value + e.translationY;
|
|
156
142
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
runOnJS(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
|
|
165
|
-
});
|
|
166
|
-
translateY.value = withTiming(newPosition.y, animationConfig);
|
|
143
|
+
// Scroll down
|
|
144
|
+
if (translateY.value > upperBound) {
|
|
145
|
+
const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
|
|
146
|
+
scrollY.value += diff;
|
|
147
|
+
scrollTo(scrollView, 0, scrollY.value, false);
|
|
148
|
+
startY.value += diff;
|
|
149
|
+
translateY.value = startY.value + e.translationY;
|
|
167
150
|
}
|
|
168
151
|
}
|
|
152
|
+
}).onEnd(() => {
|
|
153
|
+
if (draggable) {
|
|
154
|
+
// Snap the item back into its place when the drag ends
|
|
155
|
+
const newPosition = getPosition(positions.value[id], COL, SIZE);
|
|
156
|
+
translateX.value = withTiming(newPosition.x, animationConfig, () => {
|
|
157
|
+
isGestureActive.value = false; // Set gesture to inactive
|
|
158
|
+
runOnJS(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
|
|
159
|
+
});
|
|
160
|
+
translateY.value = withTiming(newPosition.y, animationConfig);
|
|
161
|
+
}
|
|
169
162
|
});
|
|
170
163
|
|
|
171
164
|
// Animated style for the item
|
|
@@ -191,9 +184,8 @@ const SortableItemWrapper = ({
|
|
|
191
184
|
});
|
|
192
185
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
193
186
|
style: style,
|
|
194
|
-
children: /*#__PURE__*/_jsx(
|
|
195
|
-
|
|
196
|
-
onGestureEvent: onGestureEvent,
|
|
187
|
+
children: /*#__PURE__*/_jsx(GestureDetector, {
|
|
188
|
+
gesture: pan,
|
|
197
189
|
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
198
190
|
style: StyleSheet.absoluteFill,
|
|
199
191
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","StyleSheet","useWindowDimensions","Animated","
|
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","useWindowDimensions","Animated","useAnimatedStyle","useAnimatedReaction","withSpring","scrollTo","withTiming","useSharedValue","runOnJS","Gesture","GestureDetector","useSafeAreaInsets","animationConfig","getOrder","getPosition","useSortableConfig","jsx","_jsx","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","height","containerHeight","top","bottom","COL","SIZE","MARGIN","contentHeight","Object","keys","value","length","isGestureActive","position","translateX","x","translateY","y","startX","startY","newOrder","pos","pan","Pan","enabled","onStart","onUpdate","e","translationX","translationY","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","onEnd","newPosition","style","zIndex","scale","left","width","margin","transform","View","gesture","absoluteFill"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-sortable-dynamic",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "This package provides a highly customizable, animated, and performant sortable grid list component for React Native. It allows users to easily reorder grid items through drag-and-drop gestures, with smooth animations powered by react-native-reanimated and gesture handling by react-native-gesture-handler.",
|
|
5
5
|
"source": "./src/index.js",
|
|
6
6
|
"main": "./lib/commonjs/index.js",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import { StyleSheet, useWindowDimensions } from 'react-native';
|
|
3
3
|
import Animated, {
|
|
4
|
-
useAnimatedGestureHandler,
|
|
5
4
|
useAnimatedStyle,
|
|
6
5
|
useAnimatedReaction,
|
|
7
6
|
withSpring,
|
|
@@ -10,7 +9,7 @@ import Animated, {
|
|
|
10
9
|
useSharedValue,
|
|
11
10
|
runOnJS,
|
|
12
11
|
} from 'react-native-reanimated';
|
|
13
|
-
import {
|
|
12
|
+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
14
13
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
15
14
|
import { animationConfig, getOrder, getPosition } from './Config';
|
|
16
15
|
import { useSortableConfig } from './Config';
|
|
@@ -75,6 +74,9 @@ const SortableItemWrapper = ({
|
|
|
75
74
|
const translateX = useSharedValue(position.x);
|
|
76
75
|
const translateY = useSharedValue(position.y);
|
|
77
76
|
|
|
77
|
+
const startX = useSharedValue(0);
|
|
78
|
+
const startY = useSharedValue(0);
|
|
79
|
+
|
|
78
80
|
// Effect to reset isGestureActive when not in editing mode
|
|
79
81
|
useEffect(() => {
|
|
80
82
|
if (!editing) {
|
|
@@ -94,21 +96,21 @@ const SortableItemWrapper = ({
|
|
|
94
96
|
}
|
|
95
97
|
);
|
|
96
98
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
onStart
|
|
99
|
+
const pan = Gesture.Pan()
|
|
100
|
+
.enabled(editing && draggable)
|
|
101
|
+
.onStart(() => {
|
|
100
102
|
if (editing && draggable) {
|
|
101
103
|
// Store the starting position
|
|
102
|
-
|
|
103
|
-
|
|
104
|
+
startX.value = translateX.value;
|
|
105
|
+
startY.value = translateY.value;
|
|
104
106
|
isGestureActive.value = false;
|
|
105
107
|
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
+
})
|
|
109
|
+
.onUpdate((e) => {
|
|
108
110
|
if (editing && draggable) {
|
|
109
111
|
// Calculate new position
|
|
110
|
-
translateX.value =
|
|
111
|
-
translateY.value =
|
|
112
|
+
translateX.value = startX.value + e.translationX;
|
|
113
|
+
translateY.value = startY.value + e.translationY;
|
|
112
114
|
|
|
113
115
|
// Calculate new order based on position
|
|
114
116
|
const newOrder = getOrder(
|
|
@@ -147,8 +149,8 @@ const SortableItemWrapper = ({
|
|
|
147
149
|
const diff = Math.min(lowerBound - translateY.value, lowerBound);
|
|
148
150
|
scrollY.value -= diff;
|
|
149
151
|
scrollTo(scrollView, 0, scrollY.value, false);
|
|
150
|
-
|
|
151
|
-
translateY.value =
|
|
152
|
+
startY.value -= diff;
|
|
153
|
+
translateY.value = startY.value + e.translationY;
|
|
152
154
|
}
|
|
153
155
|
// Scroll down
|
|
154
156
|
if (translateY.value > upperBound) {
|
|
@@ -158,12 +160,12 @@ const SortableItemWrapper = ({
|
|
|
158
160
|
);
|
|
159
161
|
scrollY.value += diff;
|
|
160
162
|
scrollTo(scrollView, 0, scrollY.value, false);
|
|
161
|
-
|
|
162
|
-
translateY.value =
|
|
163
|
+
startY.value += diff;
|
|
164
|
+
translateY.value = startY.value + e.translationY;
|
|
163
165
|
}
|
|
164
166
|
}
|
|
165
|
-
}
|
|
166
|
-
onEnd
|
|
167
|
+
})
|
|
168
|
+
.onEnd(() => {
|
|
167
169
|
if (draggable) {
|
|
168
170
|
// Snap the item back into its place when the drag ends
|
|
169
171
|
const newPosition = getPosition(positions.value[id], COL, SIZE);
|
|
@@ -173,8 +175,7 @@ const SortableItemWrapper = ({
|
|
|
173
175
|
});
|
|
174
176
|
translateY.value = withTiming(newPosition.y, animationConfig);
|
|
175
177
|
}
|
|
176
|
-
}
|
|
177
|
-
});
|
|
178
|
+
});
|
|
178
179
|
|
|
179
180
|
// Animated style for the item
|
|
180
181
|
const style = useAnimatedStyle(() => {
|
|
@@ -199,11 +200,11 @@ const SortableItemWrapper = ({
|
|
|
199
200
|
|
|
200
201
|
return (
|
|
201
202
|
<Animated.View style={style}>
|
|
202
|
-
<
|
|
203
|
+
<GestureDetector gesture={pan}>
|
|
203
204
|
<Animated.View style={StyleSheet.absoluteFill}>
|
|
204
205
|
{children}
|
|
205
206
|
</Animated.View>
|
|
206
|
-
</
|
|
207
|
+
</GestureDetector>
|
|
207
208
|
</Animated.View>
|
|
208
209
|
);
|
|
209
210
|
};
|