react-native-sortable-dynamic 0.3.2 → 0.4.0
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/lib/commonjs/Config.js +6 -23
- package/lib/commonjs/Config.js.map +1 -1
- package/lib/commonjs/SortableItemWrapper.js +4 -1
- package/lib/commonjs/SortableItemWrapper.js.map +1 -1
- package/lib/module/Config.js +7 -24
- package/lib/module/Config.js.map +1 -1
- package/lib/module/SortableItemWrapper.js +5 -2
- package/lib/module/SortableItemWrapper.js.map +1 -1
- package/package.json +2 -2
- package/src/Config.js +8 -21
- package/src/SortableItemWrapper.js +3 -3
package/lib/commonjs/Config.js
CHANGED
|
@@ -10,18 +10,13 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
//
|
|
14
|
-
const {
|
|
15
|
-
width
|
|
16
|
-
} = _reactNative.Dimensions.get('window');
|
|
17
|
-
|
|
18
|
-
// Default configuration for the sortable grid/list
|
|
13
|
+
// Default configuration for the sortable grid/list (static fallback values)
|
|
19
14
|
const defaultConfig = {
|
|
20
15
|
MARGIN: 10,
|
|
21
16
|
// Default margin between items
|
|
22
17
|
COL: 2,
|
|
23
18
|
// Default number of columns
|
|
24
|
-
SIZE:
|
|
19
|
+
SIZE: 100 // Temporary fallback size
|
|
25
20
|
};
|
|
26
21
|
|
|
27
22
|
// Create a Context for the sortable grid/list configuration
|
|
@@ -38,11 +33,9 @@ const animationConfig = exports.animationConfig = {
|
|
|
38
33
|
};
|
|
39
34
|
|
|
40
35
|
// Helper function to calculate the item's position based on its index
|
|
41
|
-
// Used to position items in a grid layout
|
|
42
36
|
const getPosition = (position, COL, SIZE) => {
|
|
43
37
|
'worklet';
|
|
44
38
|
|
|
45
|
-
// Necessary for Reanimated 2 to run this function on the UI thread
|
|
46
39
|
return {
|
|
47
40
|
x: position % COL === 0 ? 0 : SIZE * (position % COL),
|
|
48
41
|
y: Math.floor(position / COL) * SIZE
|
|
@@ -54,7 +47,6 @@ exports.getPosition = getPosition;
|
|
|
54
47
|
const getOrder = (tx, ty, max, COL, SIZE) => {
|
|
55
48
|
'worklet';
|
|
56
49
|
|
|
57
|
-
// Necessary for Reanimated 2 to run this function on the UI thread
|
|
58
50
|
const x = Math.round(tx / SIZE) * SIZE;
|
|
59
51
|
const y = Math.round(ty / SIZE) * SIZE;
|
|
60
52
|
const row = Math.max(y, 0) / SIZE;
|
|
@@ -65,32 +57,23 @@ const getOrder = (tx, ty, max, COL, SIZE) => {
|
|
|
65
57
|
/**
|
|
66
58
|
* SortableConfigProvider component
|
|
67
59
|
*
|
|
68
|
-
* Wrap your sortable grid/list components with this provider to set custom configuration.
|
|
69
|
-
* This provider allows for overriding default settings like margin and the number of columns.
|
|
70
|
-
*
|
|
71
60
|
* @param {Object} config - Custom configuration to override the default settings.
|
|
72
61
|
* @param {number} config.MARGIN - Margin between items.
|
|
73
62
|
* @param {number} config.COL - Number of columns in the grid.
|
|
74
63
|
* @param {React.ReactNode} children - Child components that will use this configuration.
|
|
75
|
-
*
|
|
76
|
-
* Usage:
|
|
77
|
-
*
|
|
78
|
-
* <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
|
|
79
|
-
* <YourSortableComponent />
|
|
80
|
-
* </SortableConfigProvider>
|
|
81
64
|
*/
|
|
82
65
|
exports.getOrder = getOrder;
|
|
83
66
|
const SortableConfigProvider = ({
|
|
84
67
|
children,
|
|
85
|
-
config
|
|
68
|
+
config = {}
|
|
86
69
|
}) => {
|
|
87
|
-
|
|
70
|
+
const {
|
|
71
|
+
width
|
|
72
|
+
} = (0, _reactNative.useWindowDimensions)();
|
|
88
73
|
const mergedConfig = {
|
|
89
74
|
...defaultConfig,
|
|
90
75
|
...config
|
|
91
76
|
};
|
|
92
|
-
|
|
93
|
-
// Recalculate SIZE based on COL and MARGIN
|
|
94
77
|
mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
|
|
95
78
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfigContext.Provider, {
|
|
96
79
|
value: mergedConfig,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_react","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_react","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultConfig","MARGIN","COL","SIZE","ConfigContext","createContext","useSortableConfig","useContext","exports","animationConfig","easing","Easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","width","useWindowDimensions","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}
|
|
@@ -57,7 +57,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
57
57
|
}) => {
|
|
58
58
|
// Get safe area insets for accurate height calculation
|
|
59
59
|
const inset = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
60
|
-
const
|
|
60
|
+
const {
|
|
61
|
+
height
|
|
62
|
+
} = (0, _reactNative.useWindowDimensions)();
|
|
63
|
+
const containerHeight = height - inset.top - inset.bottom;
|
|
61
64
|
|
|
62
65
|
// Get the configuration for columns and size
|
|
63
66
|
const {
|
|
@@ -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","
|
|
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","onGestureEvent","useAnimatedGestureHandler","onStart","_","ctx","onActive","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","PanGestureHandler","enabled","StyleSheet","absoluteFill","_default","exports"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}
|
package/lib/module/Config.js
CHANGED
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { useWindowDimensions } from 'react-native';
|
|
4
4
|
import { Easing } from 'react-native-reanimated';
|
|
5
5
|
import React, { createContext, useContext } from 'react';
|
|
6
6
|
|
|
7
|
-
//
|
|
7
|
+
// Default configuration for the sortable grid/list (static fallback values)
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
const {
|
|
10
|
-
width
|
|
11
|
-
} = Dimensions.get('window');
|
|
12
|
-
|
|
13
|
-
// Default configuration for the sortable grid/list
|
|
14
9
|
const defaultConfig = {
|
|
15
10
|
MARGIN: 10,
|
|
16
11
|
// Default margin between items
|
|
17
12
|
COL: 2,
|
|
18
13
|
// Default number of columns
|
|
19
|
-
SIZE:
|
|
14
|
+
SIZE: 100 // Temporary fallback size
|
|
20
15
|
};
|
|
21
16
|
|
|
22
17
|
// Create a Context for the sortable grid/list configuration
|
|
@@ -32,11 +27,9 @@ export const animationConfig = {
|
|
|
32
27
|
};
|
|
33
28
|
|
|
34
29
|
// Helper function to calculate the item's position based on its index
|
|
35
|
-
// Used to position items in a grid layout
|
|
36
30
|
export const getPosition = (position, COL, SIZE) => {
|
|
37
31
|
'worklet';
|
|
38
32
|
|
|
39
|
-
// Necessary for Reanimated 2 to run this function on the UI thread
|
|
40
33
|
return {
|
|
41
34
|
x: position % COL === 0 ? 0 : SIZE * (position % COL),
|
|
42
35
|
y: Math.floor(position / COL) * SIZE
|
|
@@ -47,7 +40,6 @@ export const getPosition = (position, COL, SIZE) => {
|
|
|
47
40
|
export const getOrder = (tx, ty, max, COL, SIZE) => {
|
|
48
41
|
'worklet';
|
|
49
42
|
|
|
50
|
-
// Necessary for Reanimated 2 to run this function on the UI thread
|
|
51
43
|
const x = Math.round(tx / SIZE) * SIZE;
|
|
52
44
|
const y = Math.round(ty / SIZE) * SIZE;
|
|
53
45
|
const row = Math.max(y, 0) / SIZE;
|
|
@@ -58,31 +50,22 @@ export const getOrder = (tx, ty, max, COL, SIZE) => {
|
|
|
58
50
|
/**
|
|
59
51
|
* SortableConfigProvider component
|
|
60
52
|
*
|
|
61
|
-
* Wrap your sortable grid/list components with this provider to set custom configuration.
|
|
62
|
-
* This provider allows for overriding default settings like margin and the number of columns.
|
|
63
|
-
*
|
|
64
53
|
* @param {Object} config - Custom configuration to override the default settings.
|
|
65
54
|
* @param {number} config.MARGIN - Margin between items.
|
|
66
55
|
* @param {number} config.COL - Number of columns in the grid.
|
|
67
56
|
* @param {React.ReactNode} children - Child components that will use this configuration.
|
|
68
|
-
*
|
|
69
|
-
* Usage:
|
|
70
|
-
*
|
|
71
|
-
* <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
|
|
72
|
-
* <YourSortableComponent />
|
|
73
|
-
* </SortableConfigProvider>
|
|
74
57
|
*/
|
|
75
58
|
const SortableConfigProvider = ({
|
|
76
59
|
children,
|
|
77
|
-
config
|
|
60
|
+
config = {}
|
|
78
61
|
}) => {
|
|
79
|
-
|
|
62
|
+
const {
|
|
63
|
+
width
|
|
64
|
+
} = useWindowDimensions();
|
|
80
65
|
const mergedConfig = {
|
|
81
66
|
...defaultConfig,
|
|
82
67
|
...config
|
|
83
68
|
};
|
|
84
|
-
|
|
85
|
-
// Recalculate SIZE based on COL and MARGIN
|
|
86
69
|
mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
|
|
87
70
|
return /*#__PURE__*/_jsx(ConfigContext.Provider, {
|
|
88
71
|
value: mergedConfig,
|
package/lib/module/Config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useWindowDimensions","Easing","React","createContext","useContext","jsx","_jsx","defaultConfig","MARGIN","COL","SIZE","ConfigContext","useSortableConfig","animationConfig","easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","width","mergedConfig","Provider","value"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,OAAOC,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAExD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,aAAa,GAAG;EACpBC,MAAM,EAAE,EAAE;EAAE;EACZC,GAAG,EAAE,CAAC;EAAE;EACRC,IAAI,EAAE,GAAG,CAAE;AACb,CAAC;;AAED;AACA,MAAMC,aAAa,gBAAGR,aAAa,CAACI,aAAa,CAAC;;AAElD;AACA,OAAO,MAAMK,iBAAiB,GAAGA,CAAA,KAAMR,UAAU,CAACO,aAAa,CAAC;;AAEhE;AACA,OAAO,MAAME,eAAe,GAAG;EAC7BC,MAAM,EAAEb,MAAM,CAACc,KAAK,CAACd,MAAM,CAACe,IAAI,CAAC;EACjCC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA,OAAO,MAAMC,WAAW,GAAGA,CAACC,QAAQ,EAAEV,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EACT,OAAO;IACLU,CAAC,EAAED,QAAQ,GAAGV,GAAG,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,IAAIS,QAAQ,GAAGV,GAAG,CAAC;IACrDY,CAAC,EAAEC,IAAI,CAACC,KAAK,CAACJ,QAAQ,GAAGV,GAAG,CAAC,GAAGC;EAClC,CAAC;AACH,CAAC;;AAED;AACA,OAAO,MAAMc,QAAQ,GAAGA,CAACC,EAAE,EAAEC,EAAE,EAAEC,GAAG,EAAElB,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EACT,MAAMU,CAAC,GAAGE,IAAI,CAACM,KAAK,CAACH,EAAE,GAAGf,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMW,CAAC,GAAGC,IAAI,CAACM,KAAK,CAACF,EAAE,GAAGhB,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMmB,GAAG,GAAGP,IAAI,CAACK,GAAG,CAACN,CAAC,EAAE,CAAC,CAAC,GAAGX,IAAI;EACjC,MAAMoB,GAAG,GAAGR,IAAI,CAACK,GAAG,CAACP,CAAC,EAAE,CAAC,CAAC,GAAGV,IAAI;EACjC,OAAOY,IAAI,CAACS,GAAG,CAACF,GAAG,GAAGpB,GAAG,GAAGqB,GAAG,EAAEH,GAAG,CAAC;AACvC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM,GAAG,CAAC;AAAE,CAAC,KAAK;EAC5D,MAAM;IAAEC;EAAM,CAAC,GAAGnC,mBAAmB,CAAC,CAAC;EAEvC,MAAMoC,YAAY,GAAG;IACnB,GAAG7B,aAAa;IAChB,GAAG2B;EACL,CAAC;EAEDE,YAAY,CAAC1B,IAAI,GAAGyB,KAAK,GAAGC,YAAY,CAAC3B,GAAG,GAAG2B,YAAY,CAAC5B,MAAM;EAElE,oBACEF,IAAA,CAACK,aAAa,CAAC0B,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAH,QAAA,EACzCA;EAAQ,CACa,CAAC;AAE7B,CAAC;AAED,eAAeD,sBAAsB","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { StyleSheet, useWindowDimensions } from 'react-native';
|
|
5
5
|
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useAnimatedReaction, withSpring, scrollTo, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
|
|
6
6
|
import { PanGestureHandler } from 'react-native-gesture-handler';
|
|
7
7
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
@@ -54,7 +54,10 @@ const SortableItemWrapper = ({
|
|
|
54
54
|
}) => {
|
|
55
55
|
// Get safe area insets for accurate height calculation
|
|
56
56
|
const inset = useSafeAreaInsets();
|
|
57
|
-
const
|
|
57
|
+
const {
|
|
58
|
+
height
|
|
59
|
+
} = useWindowDimensions();
|
|
60
|
+
const containerHeight = height - inset.top - inset.bottom;
|
|
58
61
|
|
|
59
62
|
// Get the configuration for columns and size
|
|
60
63
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","
|
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","useWindowDimensions","Animated","useAnimatedGestureHandler","useAnimatedStyle","useAnimatedReaction","withSpring","scrollTo","withTiming","useSharedValue","runOnJS","PanGestureHandler","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","newOrder","pos","onGestureEvent","onStart","_","ctx","onActive","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","enabled","absoluteFill"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,cAAc;AAC9D,OAAOC,QAAQ,IACbC,yBAAyB,EACzBC,gBAAgB,EAChBC,mBAAmB,EACnBC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACdC,OAAO,QACF,yBAAyB;AAChC,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,aAAU;AACjE,SAASC,iBAAiB,QAAQ,aAAU;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA/BA,SAAAC,GAAA,IAAAC,IAAA;AAgCA,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,QAAQ;EACRC,SAAS;EACTC,EAAE;EACFC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,SAAS,GAAG,IAAI;EAChBC;AACF,CAAC,KAAK;EACJ;EACA,MAAMC,KAAK,GAAGjB,iBAAiB,CAAC,CAAC;EACjC,MAAM;IAAEkB;EAAO,CAAC,GAAG7B,mBAAmB,CAAC,CAAC;EACxC,MAAM8B,eAAe,GAAGD,MAAM,GAAGD,KAAK,CAACG,GAAG,GAAGH,KAAK,CAACI,MAAM;;EAEzD;EACA,MAAM;IAAEC,GAAG;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGpB,iBAAiB,CAAC,CAAC;;EAEjD;EACA,MAAMqB,aAAa,GAAIC,MAAM,CAACC,IAAI,CAAClB,SAAS,CAACmB,KAAK,CAAC,CAACC,MAAM,GAAGP,GAAG,GAAIC,IAAI;EACxE,MAAMO,eAAe,GAAGjC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;;EAE/C;EACA,MAAMkC,QAAQ,GAAG5B,WAAW,CAACM,SAAS,CAACmB,KAAK,CAAClB,EAAE,CAAC,EAAEY,GAAG,EAAEC,IAAI,CAAC;EAC5D,MAAMS,UAAU,GAAGnC,cAAc,CAACkC,QAAQ,CAACE,CAAC,CAAC;EAC7C,MAAMC,UAAU,GAAGrC,cAAc,CAACkC,QAAQ,CAACI,CAAC,CAAC;;EAE7C;EACAhD,SAAS,CAAC,MAAM;IACd,IAAI,CAAC2B,OAAO,EAAE;MACZgB,eAAe,CAACF,KAAK,GAAG,KAAK;IAC/B;EACF,CAAC,EAAE,CAACd,OAAO,EAAEgB,eAAe,CAAC,CAAC;;EAE9B;EACArC,mBAAmB,CACjB,MAAMgB,SAAS,CAACmB,KAAK,CAAClB,EAAE,CAAC;EAAE;EAC1B0B,QAAQ,IAAK;IACZ,IAAI,CAACN,eAAe,CAACF,KAAK,EAAE;MAC1B,MAAMS,GAAG,GAAGlC,WAAW,CAACiC,QAAQ,EAAEd,GAAG,EAAEC,IAAI,CAAC;MAC5CS,UAAU,CAACJ,KAAK,GAAGhC,UAAU,CAACyC,GAAG,CAACJ,CAAC,EAAEhC,eAAe,CAAC;MACrDiC,UAAU,CAACN,KAAK,GAAGhC,UAAU,CAACyC,GAAG,CAACF,CAAC,EAAElC,eAAe,CAAC;IACvD;EACF,CACF,CAAC;;EAED;EACA,MAAMqC,cAAc,GAAG/C,yBAAyB,CAAC;IAC/CgD,OAAO,EAAEA,CAACC,CAAC,EAAEC,GAAG,KAAK;MACnB,IAAI3B,OAAO,IAAIC,SAAS,EAAE;QACxB;QACA0B,GAAG,CAACR,CAAC,GAAGD,UAAU,CAACJ,KAAK;QACxBa,GAAG,CAACN,CAAC,GAAGD,UAAU,CAACN,KAAK;QACxBE,eAAe,CAACF,KAAK,GAAG,KAAK;MAC/B;IACF,CAAC;IACDc,QAAQ,EAAEA,CAAC;MAAEC,YAAY;MAAEC;IAAa,CAAC,EAAEH,GAAG,KAAK;MACjD,IAAI3B,OAAO,IAAIC,SAAS,EAAE;QACxB;QACAiB,UAAU,CAACJ,KAAK,GAAGa,GAAG,CAACR,CAAC,GAAGU,YAAY;QACvCT,UAAU,CAACN,KAAK,GAAGa,GAAG,CAACN,CAAC,GAAGS,YAAY;;QAEvC;QACA,MAAMR,QAAQ,GAAGlC,QAAQ,CACvB8B,UAAU,CAACJ,KAAK,EAChBM,UAAU,CAACN,KAAK,EAChBF,MAAM,CAACC,IAAI,CAAClB,SAAS,CAACmB,KAAK,CAAC,CAACC,MAAM,GAAG,CAAC,EACvCP,GAAG,EACHC,IACF,CAAC;QAED,MAAMsB,QAAQ,GAAGpC,SAAS,CAACmB,KAAK,CAAClB,EAAE,CAAC;QACpC,IAAI0B,QAAQ,KAAKS,QAAQ,EAAE;UACzB;UACA,MAAMC,QAAQ,GAAGpB,MAAM,CAACC,IAAI,CAAClB,SAAS,CAACmB,KAAK,CAAC,CAACmB,IAAI,CAC/CC,GAAG,IAAKvC,SAAS,CAACmB,KAAK,CAACoB,GAAG,CAAC,KAAKZ,QACpC,CAAC;;UAED;UACA,MAAMa,UAAU,GAAGjC,IAAI,CAAC+B,IAAI,CAAEG,IAAI,IAAKA,IAAI,CAACxC,EAAE,KAAKyC,MAAM,CAACL,QAAQ,CAAC,CAAC;UACpE,IAAIA,QAAQ,IAAIG,UAAU,EAAEG,WAAW,KAAK,KAAK,EAAE;YACjD,MAAMC,YAAY,GAAG;cAAE,GAAG5C,SAAS,CAACmB;YAAM,CAAC;YAC3CyB,YAAY,CAAC3C,EAAE,CAAC,GAAG0B,QAAQ;YAC3BiB,YAAY,CAACP,QAAQ,CAAC,GAAGD,QAAQ;YACjCpC,SAAS,CAACmB,KAAK,GAAGyB,YAAY;UAChC;QACF;;QAEA;QACA,MAAMC,UAAU,GAAGzC,OAAO,CAACe,KAAK;QAChC,MAAM2B,UAAU,GAAGD,UAAU,GAAGnC,eAAe,GAAGI,IAAI;QACtD,MAAMiC,SAAS,GAAG/B,aAAa,GAAGN,eAAe;QACjD,MAAMsC,gBAAgB,GAAGD,SAAS,GAAG3C,OAAO,CAACe,KAAK;;QAElD;QACA,IAAIM,UAAU,CAACN,KAAK,GAAG0B,UAAU,EAAE;UACjC,MAAMI,IAAI,GAAGC,IAAI,CAACC,GAAG,CAACN,UAAU,GAAGpB,UAAU,CAACN,KAAK,EAAE0B,UAAU,CAAC;UAChEzC,OAAO,CAACe,KAAK,IAAI8B,IAAI;UACrB/D,QAAQ,CAACiB,UAAU,EAAE,CAAC,EAAEC,OAAO,CAACe,KAAK,EAAE,KAAK,CAAC;UAC7Ca,GAAG,CAACN,CAAC,IAAIuB,IAAI;UACbxB,UAAU,CAACN,KAAK,GAAGa,GAAG,CAACN,CAAC,GAAGS,YAAY;QACzC;QACA;QACA,IAAIV,UAAU,CAACN,KAAK,GAAG2B,UAAU,EAAE;UACjC,MAAMG,IAAI,GAAGC,IAAI,CAACC,GAAG,CACnB1B,UAAU,CAACN,KAAK,GAAG2B,UAAU,EAC7BE,gBACF,CAAC;UACD5C,OAAO,CAACe,KAAK,IAAI8B,IAAI;UACrB/D,QAAQ,CAACiB,UAAU,EAAE,CAAC,EAAEC,OAAO,CAACe,KAAK,EAAE,KAAK,CAAC;UAC7Ca,GAAG,CAACN,CAAC,IAAIuB,IAAI;UACbxB,UAAU,CAACN,KAAK,GAAGa,GAAG,CAACN,CAAC,GAAGS,YAAY;QACzC;MACF;IACF,CAAC;IACDiB,KAAK,EAAEA,CAAA,KAAM;MACX,IAAI9C,SAAS,EAAE;QACb;QACA,MAAM+C,WAAW,GAAG3D,WAAW,CAACM,SAAS,CAACmB,KAAK,CAAClB,EAAE,CAAC,EAAEY,GAAG,EAAEC,IAAI,CAAC;QAC/DS,UAAU,CAACJ,KAAK,GAAGhC,UAAU,CAACkE,WAAW,CAAC7B,CAAC,EAAEhC,eAAe,EAAE,MAAM;UAClE6B,eAAe,CAACF,KAAK,GAAG,KAAK,CAAC,CAAC;UAC/B9B,OAAO,CAACa,SAAS,CAAC,CAACF,SAAS,CAACmB,KAAK,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC;QACFM,UAAU,CAACN,KAAK,GAAGhC,UAAU,CAACkE,WAAW,CAAC3B,CAAC,EAAElC,eAAe,CAAC;MAC/D;IACF;EACF,CAAC,CAAC;;EAEF;EACA,MAAM8D,KAAK,GAAGvE,gBAAgB,CAAC,MAAM;IACnC,MAAMwE,MAAM,GAAGlC,eAAe,CAACF,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;IAChD,MAAMqC,KAAK,GACTnD,OAAO,IAAIgB,eAAe,CAACF,KAAK,GAAGlC,UAAU,CAAC,IAAI,CAAC,GAAGA,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,OAAO;MACLqC,QAAQ,EAAE,UAAU;MACpBX,GAAG,EAAE,CAAC;MACN8C,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE5C,IAAI;MACXL,MAAM,EAAEK,IAAI;MACZ6C,MAAM,EAAE5C,MAAM;MACdwC,MAAM;MACNK,SAAS,EAAE,CACT;QAAErC,UAAU,EAAEA,UAAU,CAACJ;MAAM,CAAC,EAChC;QAAEM,UAAU,EAAEA,UAAU,CAACN;MAAM,CAAC,EAChC;QAAEqC;MAAM,CAAC;IAEb,CAAC;EACH,CAAC,CAAC;EAEF,oBACE3D,IAAA,CAAChB,QAAQ,CAACgF,IAAI;IAACP,KAAK,EAAEA,KAAM;IAAAvD,QAAA,eAC1BF,IAAA,CAACP,iBAAiB;MAACwE,OAAO,EAAEzD,OAAQ;MAACwB,cAAc,EAAEA,cAAe;MAAA9B,QAAA,eAClEF,IAAA,CAAChB,QAAQ,CAACgF,IAAI;QAACP,KAAK,EAAE3E,UAAU,CAACoF,YAAa;QAAAhE,QAAA,EAC3CA;MAAQ,CACI;IAAC,CACC;EAAC,CACP,CAAC;AAEpB,CAAC;AAED,eAAeD,mBAAmB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-sortable-dynamic",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
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",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"react": "*",
|
|
85
85
|
"react-native": "*",
|
|
86
86
|
"react-native-gesture-handler": "*",
|
|
87
|
-
"react-native-reanimated": "
|
|
87
|
+
"react-native-reanimated": "*"
|
|
88
88
|
},
|
|
89
89
|
"workspaces": [
|
|
90
90
|
"example"
|
package/src/Config.js
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useWindowDimensions } from 'react-native';
|
|
2
2
|
import { Easing } from 'react-native-reanimated';
|
|
3
3
|
import React, { createContext, useContext } from 'react';
|
|
4
4
|
|
|
5
|
-
//
|
|
6
|
-
const { width } = Dimensions.get('window');
|
|
7
|
-
|
|
8
|
-
// Default configuration for the sortable grid/list
|
|
5
|
+
// Default configuration for the sortable grid/list (static fallback values)
|
|
9
6
|
const defaultConfig = {
|
|
10
7
|
MARGIN: 10, // Default margin between items
|
|
11
8
|
COL: 2, // Default number of columns
|
|
12
|
-
SIZE:
|
|
9
|
+
SIZE: 100, // Temporary fallback size
|
|
13
10
|
};
|
|
14
11
|
|
|
15
12
|
// Create a Context for the sortable grid/list configuration
|
|
@@ -25,9 +22,8 @@ export const animationConfig = {
|
|
|
25
22
|
};
|
|
26
23
|
|
|
27
24
|
// Helper function to calculate the item's position based on its index
|
|
28
|
-
// Used to position items in a grid layout
|
|
29
25
|
export const getPosition = (position, COL, SIZE) => {
|
|
30
|
-
'worklet';
|
|
26
|
+
'worklet';
|
|
31
27
|
return {
|
|
32
28
|
x: position % COL === 0 ? 0 : SIZE * (position % COL),
|
|
33
29
|
y: Math.floor(position / COL) * SIZE,
|
|
@@ -36,7 +32,7 @@ export const getPosition = (position, COL, SIZE) => {
|
|
|
36
32
|
|
|
37
33
|
// Helper function to determine the new order of items during drag-and-drop
|
|
38
34
|
export const getOrder = (tx, ty, max, COL, SIZE) => {
|
|
39
|
-
'worklet';
|
|
35
|
+
'worklet';
|
|
40
36
|
const x = Math.round(tx / SIZE) * SIZE;
|
|
41
37
|
const y = Math.round(ty / SIZE) * SIZE;
|
|
42
38
|
const row = Math.max(y, 0) / SIZE;
|
|
@@ -47,28 +43,19 @@ export const getOrder = (tx, ty, max, COL, SIZE) => {
|
|
|
47
43
|
/**
|
|
48
44
|
* SortableConfigProvider component
|
|
49
45
|
*
|
|
50
|
-
* Wrap your sortable grid/list components with this provider to set custom configuration.
|
|
51
|
-
* This provider allows for overriding default settings like margin and the number of columns.
|
|
52
|
-
*
|
|
53
46
|
* @param {Object} config - Custom configuration to override the default settings.
|
|
54
47
|
* @param {number} config.MARGIN - Margin between items.
|
|
55
48
|
* @param {number} config.COL - Number of columns in the grid.
|
|
56
49
|
* @param {React.ReactNode} children - Child components that will use this configuration.
|
|
57
|
-
*
|
|
58
|
-
* Usage:
|
|
59
|
-
*
|
|
60
|
-
* <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
|
|
61
|
-
* <YourSortableComponent />
|
|
62
|
-
* </SortableConfigProvider>
|
|
63
50
|
*/
|
|
64
|
-
const SortableConfigProvider = ({ children, config }) => {
|
|
65
|
-
|
|
51
|
+
const SortableConfigProvider = ({ children, config = {} }) => {
|
|
52
|
+
const { width } = useWindowDimensions();
|
|
53
|
+
|
|
66
54
|
const mergedConfig = {
|
|
67
55
|
...defaultConfig,
|
|
68
56
|
...config,
|
|
69
57
|
};
|
|
70
58
|
|
|
71
|
-
// Recalculate SIZE based on COL and MARGIN
|
|
72
59
|
mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
|
|
73
60
|
|
|
74
61
|
return (
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { StyleSheet, useWindowDimensions } from 'react-native';
|
|
3
3
|
import Animated, {
|
|
4
4
|
useAnimatedGestureHandler,
|
|
5
5
|
useAnimatedStyle,
|
|
@@ -60,8 +60,8 @@ const SortableItemWrapper = ({
|
|
|
60
60
|
}) => {
|
|
61
61
|
// Get safe area insets for accurate height calculation
|
|
62
62
|
const inset = useSafeAreaInsets();
|
|
63
|
-
const
|
|
64
|
-
|
|
63
|
+
const { height } = useWindowDimensions();
|
|
64
|
+
const containerHeight = height - inset.top - inset.bottom;
|
|
65
65
|
|
|
66
66
|
// Get the configuration for columns and size
|
|
67
67
|
const { COL, SIZE, MARGIN } = useSortableConfig();
|