react-native-sortable-dynamic 0.2.0 → 0.2.2

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.
Files changed (12) hide show
  1. package/README.md +14 -12
  2. package/lib/commonjs/SortableContainer.js +11 -7
  3. package/lib/commonjs/SortableContainer.js.map +1 -1
  4. package/lib/commonjs/SortableView.js +6 -0
  5. package/lib/commonjs/SortableView.js.map +1 -1
  6. package/lib/module/SortableContainer.js +11 -7
  7. package/lib/module/SortableContainer.js.map +1 -1
  8. package/lib/module/SortableView.js +6 -0
  9. package/lib/module/SortableView.js.map +1 -1
  10. package/package.json +6 -6
  11. package/src/SortableContainer.js +16 -8
  12. package/src/SortableView.js +6 -0
package/README.md CHANGED
@@ -101,7 +101,7 @@ Here's a simple example of how to use `react-native-sortable-dynamic` in your Re
101
101
  import React, { useState } from 'react';
102
102
  import { Text, View } from 'react-native';
103
103
  import { SafeAreaView } from 'react-native-safe-area-context';
104
- import SortableView from 'react-native-sortable-dynamic';
104
+ import { SortableView } from 'react-native-sortable-dynamic';
105
105
 
106
106
  const data = [
107
107
  { id: 1, text: 'Tile 1' },
@@ -161,17 +161,19 @@ export default App;
161
161
 
162
162
  #### `SortableView`
163
163
 
164
- | Prop | Type | Description |
165
- | ------------- | ---------- | -------------------------------------------------------------------------------------------------- |
166
- | `config` | `object` | Configuration options such as `MARGIN` and `COL`. Use this to dynamically adjust the grid layout. |
167
- | `data` | `array` | Array of items to be rendered and sorted. |
168
- | `editing` | `boolean` | If true, allows items to be dragged and reordered. |
169
- | `onDragEnd` | `function` | Callback function that receives updated positions when the drag ends. |
170
- | `renderItem` | `function` | Function to render each item inside the sortable container. Receives item and index as parameters. |
171
- | `onPress` | `function` | Function to handle the press event on a sortable item. |
172
- | `onLongPress` | `function` | Function to handle the long press event on a sortable item. |
173
- | `itemStyle` | `object` | Custom style to apply to each SortableItem. |
174
- | `itemProps` | `object` | Additional props to be passed to each SortableItem. |
164
+ | Prop | Type | Description |
165
+ | ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------- |
166
+ | `config` | `object` | Configuration options such as `MARGIN` and `COL`. Use this to dynamically adjust the grid layout. |
167
+ | `data` | `array` | Array of items to be rendered and sorted. |
168
+ | `editing` | `boolean` | If true, allows items to be dragged and reordered. |
169
+ | `onDragEnd` | `function` | Callback function that receives updated positions when the drag ends. |
170
+ | `renderItem` | `function` | Function to render each item inside the sortable container. Receives item and index as parameters. |
171
+ | `onPress` | `function` | Function to handle the press event on a sortable item. |
172
+ | `onLongPress` | `function` | Function to handle the long press event on a sortable item. |
173
+ | `itemStyle` | `object` | Custom style to apply to each SortableItem. |
174
+ | `itemProps` | `object` | Additional props to be passed to each SortableItem. |
175
+ | `scrollContainerStyle` | `object` | Custom style to apply to the scroll container. |
176
+ | `scrollContentContainerStyle` | `object` | Custom style to apply to the scroll content container. |
175
177
 
176
178
  ### Note
177
179
 
package/lib/commonjs/SortableContainer.js CHANGED
@@ -27,6 +27,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
27
27
  * @param {function} renderItem - Function to render the content of each item inside the sortable container. Receives an object containing `item` and `index`.
28
28
  * @param {function} onPress - Function to handle the press event on a sortable item.
29
29
  * @param {function} onLongPress - Function to handle the long press event on a sortable item.
30
+ * @param {object} scrollContainerStyle - Custom style to apply to the scroll container.
31
+ * @param {object} scrollContentContainerStyle - Custom style to apply to the scroll content container.
30
32
  * @param {object} itemStyle - Custom style to apply to each SortableItem.
31
33
  * @param {...object} itemProps - Additional props to be passed to each SortableItem.
32
34
  *
@@ -47,6 +49,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
47
49
  renderItem,
48
50
  onPress,
49
51
  onLongPress,
52
+ scrollContainerStyle,
53
+ scrollContentContainerStyle,
50
54
  itemStyle,
51
55
  ...itemProps
52
56
  }) => {
@@ -77,16 +81,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
77
81
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView, {
78
82
  onScroll: onScroll,
79
83
  ref: scrollView,
80
- contentContainerStyle: {
84
+ contentContainerStyle: [{
81
85
  // Calculate the total height needed for the scroll view content
82
86
  height: Math.ceil(data.length / COL) * SIZE
83
- },
87
+ }, scrollContentContainerStyle],
84
88
  showsVerticalScrollIndicator: false,
85
89
  bounces: false,
86
- scrollEventThrottle: 16 // Control scroll event frequency
87
- ,
90
+ scrollEventThrottle: 16,
91
+ style: scrollContainerStyle,
88
92
  children: data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SortableItemWrapper.default, {
89
- id: item.id,
93
+ id: item.id.toString(),
90
94
  positions: positions,
91
95
  editing: editing,
92
96
  draggable: item.draggable,
@@ -96,7 +100,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
96
100
  scrollView: scrollView,
97
101
  scrollY: scrollY,
98
102
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SortableItem.default, {
99
- id: item.id,
103
+ id: item.id.toString(),
100
104
  draggable: item.draggable,
101
105
  reorderable: item.reorderable,
102
106
  onPress: () => onPress && onPress(item),
@@ -108,7 +112,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
108
112
  index
109
113
  })
110
114
  })
111
- }, item.id))
115
+ }, item.id.toString()))
112
116
  });
113
117
  };
114
118
  var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SortableContainer);
package/lib/commonjs/SortableContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_SortableItemWrapper","_interopRequireDefault","_SortableItem","_Config","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableContainer","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","COL","SIZE","useSortableConfig","scrollY","useSharedValue","scrollView","useAnimatedRef","positions","reduce","acc","item","index","id","onScroll","useAnimatedScrollHandler","contentOffset","y","value","jsx","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","children","map","draggable","reorderable","style","_default","exports","memo"],"sourceRoot":"../../src","sources":["SortableContainer.js"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_SortableItemWrapper","_interopRequireDefault","_SortableItem","_Config","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableContainer","data","editing","onDragEnd","renderItem","onPress","onLongPress","scrollContainerStyle","scrollContentContainerStyle","itemStyle","itemProps","COL","SIZE","useSortableConfig","scrollY","useSharedValue","scrollView","useAnimatedRef","positions","reduce","acc","item","index","id","onScroll","useAnimatedScrollHandler","contentOffset","y","value","jsx","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","style","children","map","toString","draggable","reorderable","_default","exports","memo"],"sourceRoot":"../../src","sources":["SortableContainer.js"],"mappings":"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","ignoreList":[]}
package/lib/commonjs/SortableView.js CHANGED
@@ -24,6 +24,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
24
24
  * @param {function} renderItem - Function to render each item inside the sortable view. Receives an object containing `item` and `index`.
25
25
  * @param {function} onPress - Function to handle the press event on an item.
26
26
  * @param {function} onLongPress - Function to handle the long press event on an item.
27
+ * @param {object} scrollContainerStyle - Custom style to apply to the scroll container.
28
+ * @param {object} scrollContentContainerStyle - Custom style to apply to the scroll content container.
27
29
  * @param {object} itemStyle - Custom style to apply to each SortableItem.
28
30
  * @param {object} itemProps - Additional props to be passed to each SortableItem.
29
31
  *
@@ -47,6 +49,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
47
49
  renderItem,
48
50
  onPress,
49
51
  onLongPress,
52
+ scrollContainerStyle,
53
+ scrollContentContainerStyle,
50
54
  itemStyle,
51
55
  itemProps
52
56
  }) => {
@@ -61,6 +65,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
61
65
  renderItem: renderItem,
62
66
  onPress: onPress,
63
67
  onLongPress: onLongPress,
68
+ scrollContainerStyle: scrollContainerStyle,
69
+ scrollContentContainerStyle: scrollContentContainerStyle,
64
70
  style: itemStyle,
65
71
  ...itemProps
66
72
  })
package/lib/commonjs/SortableView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireDefault","require","_Config","_SortableContainer","_jsxRuntime","e","__esModule","default","SortableView","config","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","jsx","children","positions","style","_default","exports"],"sourceRoot":"../../src","sources":["SortableView.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAoD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpD;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,GACA,MAAMG,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAb,WAAA,CAAAc,GAAA,EAAChB,OAAA,CAAAK,OAAoB;IAACE,MAAM,EAAEA,MAAO;IAAAU,QAAA,eACnC,IAAAf,WAAA,CAAAc,GAAA,EAACf,kBAAA,CAAAI,OAAiB;MAChBI,OAAO,EAAEA,OAAQ;MACjBD,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAGQ,SAAS,IAAK;QACxBR,SAAS,CAACQ,SAAS,CAAC;MACtB,CAAE;MACFP,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBM,KAAK,EAAEL,SAAU;MAAA,GACbC;IAAS,CACd;EAAC,CACkB,CAAC;AAE3B,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEaC,YAAY","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_Config","_SortableContainer","_jsxRuntime","e","__esModule","default","SortableView","config","data","editing","onDragEnd","renderItem","onPress","onLongPress","scrollContainerStyle","scrollContentContainerStyle","itemStyle","itemProps","jsx","children","positions","style","_default","exports"],"sourceRoot":"../../src","sources":["SortableView.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAoD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpD;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;AACA,GACA,MAAMG,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,oBAAoB;EACpBC,2BAA2B;EAC3BC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAf,WAAA,CAAAgB,GAAA,EAAClB,OAAA,CAAAK,OAAoB;IAACE,MAAM,EAAEA,MAAO;IAAAY,QAAA,eACnC,IAAAjB,WAAA,CAAAgB,GAAA,EAACjB,kBAAA,CAAAI,OAAiB;MAChBI,OAAO,EAAEA,OAAQ;MACjBD,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAGU,SAAS,IAAK;QACxBV,SAAS,CAACU,SAAS,CAAC;MACtB,CAAE;MACFT,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,oBAAoB,EAAEA,oBAAqB;MAC3CC,2BAA2B,EAAEA,2BAA4B;MACzDM,KAAK,EAAEL,SAAU;MAAA,GACbC;IAAS,CACd;EAAC,CACkB,CAAC;AAE3B,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAlB,OAAA,GAEaC,YAAY","ignoreList":[]}
package/lib/module/SortableContainer.js CHANGED
@@ -20,6 +20,8 @@ import { useSortableConfig } from "./Config.js";
20
20
  * @param {function} renderItem - Function to render the content of each item inside the sortable container. Receives an object containing `item` and `index`.
21
21
  * @param {function} onPress - Function to handle the press event on a sortable item.
22
22
  * @param {function} onLongPress - Function to handle the long press event on a sortable item.
23
+ * @param {object} scrollContainerStyle - Custom style to apply to the scroll container.
24
+ * @param {object} scrollContentContainerStyle - Custom style to apply to the scroll content container.
23
25
  * @param {object} itemStyle - Custom style to apply to each SortableItem.
24
26
  * @param {...object} itemProps - Additional props to be passed to each SortableItem.
25
27
  *
@@ -42,6 +44,8 @@ const SortableContainer = ({
42
44
  renderItem,
43
45
  onPress,
44
46
  onLongPress,
47
+ scrollContainerStyle,
48
+ scrollContentContainerStyle,
45
49
  itemStyle,
46
50
  ...itemProps
47
51
  }) => {
@@ -72,16 +76,16 @@ const SortableContainer = ({
72
76
  return /*#__PURE__*/_jsx(Animated.ScrollView, {
73
77
  onScroll: onScroll,
74
78
  ref: scrollView,
75
- contentContainerStyle: {
79
+ contentContainerStyle: [{
76
80
  // Calculate the total height needed for the scroll view content
77
81
  height: Math.ceil(data.length / COL) * SIZE
78
- },
82
+ }, scrollContentContainerStyle],
79
83
  showsVerticalScrollIndicator: false,
80
84
  bounces: false,
81
- scrollEventThrottle: 16 // Control scroll event frequency
82
- ,
85
+ scrollEventThrottle: 16,
86
+ style: scrollContainerStyle,
83
87
  children: data.map((item, index) => /*#__PURE__*/_jsx(SortableItemWrapper, {
84
- id: item.id,
88
+ id: item.id.toString(),
85
89
  positions: positions,
86
90
  editing: editing,
87
91
  draggable: item.draggable,
@@ -91,7 +95,7 @@ const SortableContainer = ({
91
95
  scrollView: scrollView,
92
96
  scrollY: scrollY,
93
97
  children: /*#__PURE__*/_jsx(SortableItem, {
94
- id: item.id,
98
+ id: item.id.toString(),
95
99
  draggable: item.draggable,
96
100
  reorderable: item.reorderable,
97
101
  onPress: () => onPress && onPress(item),
@@ -103,7 +107,7 @@ const SortableContainer = ({
103
107
  index
104
108
  })
105
109
  })
106
- }, item.id))
110
+ }, item.id.toString()))
107
111
  });
108
112
  };
109
113
  export default /*#__PURE__*/memo(SortableContainer);
package/lib/module/SortableContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","memo","Animated","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","SortableItemWrapper","SortableItem","useSortableConfig","jsx","_jsx","SortableContainer","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","COL","SIZE","scrollY","scrollView","positions","reduce","acc","item","index","id","onScroll","contentOffset","y","value","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","children","map","draggable","reorderable","style"],"sourceRoot":"../../src","sources":["SortableContainer.js"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,OAAOC,QAAQ,IACbC,cAAc,EACdC,wBAAwB,EACxBC,cAAc,QACT,yBAAyB;AAChC,OAAOC,mBAAmB,MAAM,0BAAuB;AACvD,OAAOC,YAAY,MAAM,mBAAgB;AACzC,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;AA3BA,SAAAC,GAAA,IAAAC,IAAA;AA4BA,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,SAAS;EACT,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,MAAM;IAAEC,GAAG;IAAEC;EAAK,CAAC,GAAGb,iBAAiB,CAAC,CAAC;;EAEzC;EACA,MAAMc,OAAO,GAAGjB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;EACnC,MAAMkB,UAAU,GAAGpB,cAAc,CAAC,CAAC,CAAC,CAAC;EACrC,MAAMqB,SAAS,GAAGnB,cAAc,CAC9BO,IAAI,CAACa,MAAM,CAAC,CAACC,GAAG,EAAEC,IAAI,EAAEC,KAAK,MAAM;IAAE,GAAGF,GAAG;IAAE,CAACC,IAAI,CAACE,EAAE,GAAGD;EAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CACtE,CAAC;;EAED;EACA,MAAME,QAAQ,GAAG1B,wBAAwB,CAAC;IACxC0B,QAAQ,EAAEA,CAAC;MAAEC,aAAa,EAAE;QAAEC;MAAE;IAAE,CAAC,KAAK;MACtCV,OAAO,CAACW,KAAK,GAAGD,CAAC;IACnB;EACF,CAAC,CAAC;EAEF,oBACEtB,IAAA,CAACR,QAAQ,CAACgC,UAAU;IAClBJ,QAAQ,EAAEA,QAAS;IACnBK,GAAG,EAAEZ,UAAW;IAChBa,qBAAqB,EAAE;MACrB;MACAC,MAAM,EAAEC,IAAI,CAACC,IAAI,CAAC3B,IAAI,CAAC4B,MAAM,GAAGpB,GAAG,CAAC,GAAGC;IACzC,CAAE;IACFoB,4BAA4B,EAAE,KAAM;IACpCC,OAAO,EAAE,KAAM;IACfC,mBAAmB,EAAE,EAAG,CAAC;IAAA;IAAAC,QAAA,EAGxBhC,IAAI,CAACiC,GAAG,CAAC,CAAClB,IAAI,EAAEC,KAAK,kBACpBlB,IAAA,CAACJ,mBAAmB;MAElBuB,EAAE,EAAEF,IAAI,CAACE,EAAG;MACZL,SAAS,EAAEA,SAAU;MACrBX,OAAO,EAAEA,OAAQ;MACjBiC,SAAS,EAAEnB,IAAI,CAACmB,SAAU;MAC1BC,WAAW,EAAEpB,IAAI,CAACoB,WAAY;MAC9BnC,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAEA,SAAU;MACrBS,UAAU,EAAEA,UAAW;MACvBD,OAAO,EAAEA,OAAQ;MAAAsB,QAAA,eAGjBlC,IAAA,CAACH,YAAY;QACXsB,EAAE,EAAEF,IAAI,CAACE,EAAG;QACZiB,SAAS,EAAEnB,IAAI,CAACmB,SAAU;QAC1BC,WAAW,EAAEpB,IAAI,CAACoB,WAAY;QAC9B/B,OAAO,EAAEA,CAAA,KAAMA,OAAO,IAAIA,OAAO,CAACW,IAAI,CAAE;QACxCV,WAAW,EAAEA,CAAA,KAAMA,WAAW,IAAIA,WAAW,CAACU,IAAI,CAAE;QACpDqB,KAAK,EAAE9B,SAAU;QAAA,GACbC,SAAS;QAAAyB,QAAA,EAEZ7B,UAAU,CAAC;UAAEY,IAAI,EAAEA,IAAI;UAAEC;QAAM,CAAC;MAAC,CACtB;IAAC,GAtBVD,IAAI,CAACE,EAuBS,CACtB;EAAC,CACiB,CAAC;AAE1B,CAAC;AAED,4BAAe5B,IAAI,CAACU,iBAAiB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","memo","Animated","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","SortableItemWrapper","SortableItem","useSortableConfig","jsx","_jsx","SortableContainer","data","editing","onDragEnd","renderItem","onPress","onLongPress","scrollContainerStyle","scrollContentContainerStyle","itemStyle","itemProps","COL","SIZE","scrollY","scrollView","positions","reduce","acc","item","index","id","onScroll","contentOffset","y","value","ScrollView","ref","contentContainerStyle","height","Math","ceil","length","showsVerticalScrollIndicator","bounces","scrollEventThrottle","style","children","map","toString","draggable","reorderable"],"sourceRoot":"../../src","sources":["SortableContainer.js"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,OAAOC,QAAQ,IACbC,cAAc,EACdC,wBAAwB,EACxBC,cAAc,QACT,yBAAyB;AAChC,OAAOC,mBAAmB,MAAM,0BAAuB;AACvD,OAAOC,YAAY,MAAM,mBAAgB;AACzC,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;AA7BA,SAAAC,GAAA,IAAAC,IAAA;AA8BA,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,oBAAoB;EACpBC,2BAA2B;EAC3BC,SAAS;EACT,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,MAAM;IAAEC,GAAG;IAAEC;EAAK,CAAC,GAAGf,iBAAiB,CAAC,CAAC;;EAEzC;EACA,MAAMgB,OAAO,GAAGnB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;EACnC,MAAMoB,UAAU,GAAGtB,cAAc,CAAC,CAAC,CAAC,CAAC;EACrC,MAAMuB,SAAS,GAAGrB,cAAc,CAC9BO,IAAI,CAACe,MAAM,CAAC,CAACC,GAAG,EAAEC,IAAI,EAAEC,KAAK,MAAM;IAAE,GAAGF,GAAG;IAAE,CAACC,IAAI,CAACE,EAAE,GAAGD;EAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CACtE,CAAC;;EAED;EACA,MAAME,QAAQ,GAAG5B,wBAAwB,CAAC;IACxC4B,QAAQ,EAAEA,CAAC;MAAEC,aAAa,EAAE;QAAEC;MAAE;IAAE,CAAC,KAAK;MACtCV,OAAO,CAACW,KAAK,GAAGD,CAAC;IACnB;EACF,CAAC,CAAC;EAEF,oBACExB,IAAA,CAACR,QAAQ,CAACkC,UAAU;IAClBJ,QAAQ,EAAEA,QAAS;IACnBK,GAAG,EAAEZ,UAAW;IAChBa,qBAAqB,EAAE,CACrB;MACE;MACAC,MAAM,EAAEC,IAAI,CAACC,IAAI,CAAC7B,IAAI,CAAC8B,MAAM,GAAGpB,GAAG,CAAC,GAAGC;IACzC,CAAC,EACDJ,2BAA2B,CAC3B;IACFwB,4BAA4B,EAAE,KAAM;IACpCC,OAAO,EAAE,KAAM;IACfC,mBAAmB,EAAE,EAAG;IACxBC,KAAK,EAAE5B,oBAAqB;IAAA6B,QAAA,EAG3BnC,IAAI,CAACoC,GAAG,CAAC,CAACnB,IAAI,EAAEC,KAAK,kBACpBpB,IAAA,CAACJ,mBAAmB;MAElByB,EAAE,EAAEF,IAAI,CAACE,EAAE,CAACkB,QAAQ,CAAC,CAAE;MACvBvB,SAAS,EAAEA,SAAU;MACrBb,OAAO,EAAEA,OAAQ;MACjBqC,SAAS,EAAErB,IAAI,CAACqB,SAAU;MAC1BC,WAAW,EAAEtB,IAAI,CAACsB,WAAY;MAC9BvC,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAEA,SAAU;MACrBW,UAAU,EAAEA,UAAW;MACvBD,OAAO,EAAEA,OAAQ;MAAAuB,QAAA,eAGjBrC,IAAA,CAACH,YAAY;QACXwB,EAAE,EAAEF,IAAI,CAACE,EAAE,CAACkB,QAAQ,CAAC,CAAE;QACvBC,SAAS,EAAErB,IAAI,CAACqB,SAAU;QAC1BC,WAAW,EAAEtB,IAAI,CAACsB,WAAY;QAC9BnC,OAAO,EAAEA,CAAA,KAAMA,OAAO,IAAIA,OAAO,CAACa,IAAI,CAAE;QACxCZ,WAAW,EAAEA,CAAA,KAAMA,WAAW,IAAIA,WAAW,CAACY,IAAI,CAAE;QACpDiB,KAAK,EAAE1B,SAAU;QAAA,GACbC,SAAS;QAAA0B,QAAA,EAEZhC,UAAU,CAAC;UAAEc,IAAI,EAAEA,IAAI;UAAEC;QAAM,CAAC;MAAC,CACtB;IAAC,GAtBVD,IAAI,CAACE,EAAE,CAACkB,QAAQ,CAAC,CAuBH,CACtB;EAAC,CACiB,CAAC;AAE1B,CAAC;AAED,4BAAehD,IAAI,CAACU,iBAAiB,CAAC","ignoreList":[]}
package/lib/module/SortableView.js CHANGED
@@ -19,6 +19,8 @@ import SortableContainer from "./SortableContainer.js";
19
19
  * @param {function} renderItem - Function to render each item inside the sortable view. Receives an object containing `item` and `index`.
20
20
  * @param {function} onPress - Function to handle the press event on an item.
21
21
  * @param {function} onLongPress - Function to handle the long press event on an item.
22
+ * @param {object} scrollContainerStyle - Custom style to apply to the scroll container.
23
+ * @param {object} scrollContentContainerStyle - Custom style to apply to the scroll content container.
22
24
  * @param {object} itemStyle - Custom style to apply to each SortableItem.
23
25
  * @param {object} itemProps - Additional props to be passed to each SortableItem.
24
26
  *
@@ -44,6 +46,8 @@ const SortableView = ({
44
46
  renderItem,
45
47
  onPress,
46
48
  onLongPress,
49
+ scrollContainerStyle,
50
+ scrollContentContainerStyle,
47
51
  itemStyle,
48
52
  itemProps
49
53
  }) => {
@@ -58,6 +62,8 @@ const SortableView = ({
58
62
  renderItem: renderItem,
59
63
  onPress: onPress,
60
64
  onLongPress: onLongPress,
65
+ scrollContainerStyle: scrollContainerStyle,
66
+ scrollContentContainerStyle: scrollContentContainerStyle,
61
67
  style: itemStyle,
62
68
  ...itemProps
63
69
  })
package/lib/module/SortableView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","SortableListProvider","SortableContainer","jsx","_jsx","SortableView","config","data","editing","onDragEnd","renderItem","onPress","onLongPress","itemStyle","itemProps","children","positions","style"],"sourceRoot":"../../src","sources":["SortableView.js"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAAM,aAAU;AAC3C,OAAOC,iBAAiB,MAAM,wBAAqB;;AAEnD;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;AA9BA,SAAAC,GAAA,IAAAC,IAAA;AA+BA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,oBACEV,IAAA,CAACH,oBAAoB;IAACK,MAAM,EAAEA,MAAO;IAAAS,QAAA,eACnCX,IAAA,CAACF,iBAAiB;MAChBM,OAAO,EAAEA,OAAQ;MACjBD,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAGO,SAAS,IAAK;QACxBP,SAAS,CAACO,SAAS,CAAC;MACtB,CAAE;MACFN,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBK,KAAK,EAAEJ,SAAU;MAAA,GACbC;IAAS,CACd;EAAC,CACkB,CAAC;AAE3B,CAAC;AAED,eAAeT,YAAY","ignoreList":[]}
1
+ {"version":3,"names":["React","SortableListProvider","SortableContainer","jsx","_jsx","SortableView","config","data","editing","onDragEnd","renderItem","onPress","onLongPress","scrollContainerStyle","scrollContentContainerStyle","itemStyle","itemProps","children","positions","style"],"sourceRoot":"../../src","sources":["SortableView.js"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAAM,aAAU;AAC3C,OAAOC,iBAAiB,MAAM,wBAAqB;;AAEnD;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;AACA;AAhCA,SAAAC,GAAA,IAAAC,IAAA;AAiCA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,WAAW;EACXC,oBAAoB;EACpBC,2BAA2B;EAC3BC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,oBACEZ,IAAA,CAACH,oBAAoB;IAACK,MAAM,EAAEA,MAAO;IAAAW,QAAA,eACnCb,IAAA,CAACF,iBAAiB;MAChBM,OAAO,EAAEA,OAAQ;MACjBD,IAAI,EAAEA,IAAK;MACXE,SAAS,EAAGS,SAAS,IAAK;QACxBT,SAAS,CAACS,SAAS,CAAC;MACtB,CAAE;MACFR,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,oBAAoB,EAAEA,oBAAqB;MAC3CC,2BAA2B,EAAEA,2BAA4B;MACzDK,KAAK,EAAEJ,SAAU;MAAA,GACbC;IAAS,CACd;EAAC,CACkB,CAAC;AAE3B,CAAC;AAED,eAAeX,YAAY","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-sortable-dynamic",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
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",
@@ -72,10 +72,10 @@
72
72
  "react": "18.2.0",
73
73
  "react-native": "0.74.5",
74
74
  "react-native-builder-bob": "^0.30.2",
75
- "release-it": "^15.0.0",
76
- "typescript": "^5.2.2",
75
+ "react-native-gesture-handler": "^2.0.0",
77
76
  "react-native-reanimated": "^3.0.0",
78
- "react-native-gesture-handler": "^2.0.0"
77
+ "release-it": "^15.0.0",
78
+ "typescript": "^5.2.2"
79
79
  },
80
80
  "resolutions": {
81
81
  "@types/react": "^18.2.44"
@@ -83,8 +83,8 @@
83
83
  "peerDependencies": {
84
84
  "react": "*",
85
85
  "react-native": "*",
86
- "react-native-reanimated": "^2.0.0",
87
- "react-native-gesture-handler": "^1.10.0"
86
+ "react-native-gesture-handler": "^1.10.0",
87
+ "react-native-reanimated": "^2.0.0"
88
88
  },
89
89
  "workspaces": [
90
90
  "example"
package/src/SortableContainer.js CHANGED
@@ -22,6 +22,8 @@ import { useSortableConfig } from './Config';
22
22
  * @param {function} renderItem - Function to render the content of each item inside the sortable container. Receives an object containing `item` and `index`.
23
23
  * @param {function} onPress - Function to handle the press event on a sortable item.
24
24
  * @param {function} onLongPress - Function to handle the long press event on a sortable item.
25
+ * @param {object} scrollContainerStyle - Custom style to apply to the scroll container.
26
+ * @param {object} scrollContentContainerStyle - Custom style to apply to the scroll content container.
25
27
  * @param {object} itemStyle - Custom style to apply to each SortableItem.
26
28
  * @param {...object} itemProps - Additional props to be passed to each SortableItem.
27
29
  *
@@ -43,6 +45,8 @@ const SortableContainer = ({
43
45
  renderItem,
44
46
  onPress,
45
47
  onLongPress,
48
+ scrollContainerStyle,
49
+ scrollContentContainerStyle,
46
50
  itemStyle,
47
51
  ...itemProps
48
52
  }) => {
@@ -67,19 +71,23 @@ const SortableContainer = ({
67
71
  <Animated.ScrollView
68
72
  onScroll={onScroll}
69
73
  ref={scrollView}
70
- contentContainerStyle={{
71
- // Calculate the total height needed for the scroll view content
72
- height: Math.ceil(data.length / COL) * SIZE,
73
- }}
74
+ contentContainerStyle={[
75
+ {
76
+ // Calculate the total height needed for the scroll view content
77
+ height: Math.ceil(data.length / COL) * SIZE,
78
+ },
79
+ scrollContentContainerStyle,
80
+ ]}
74
81
  showsVerticalScrollIndicator={false}
75
82
  bounces={false}
76
- scrollEventThrottle={16} // Control scroll event frequency
83
+ scrollEventThrottle={16}
84
+ style={scrollContainerStyle}
77
85
  >
78
86
  {/* Render each item using the SortableItemWrapper and SortableItem components */}
79
87
  {data.map((item, index) => (
80
88
  <SortableItemWrapper
81
- key={item.id}
82
- id={item.id}
89
+ key={item.id.toString()}
90
+ id={item.id.toString()}
83
91
  positions={positions}
84
92
  editing={editing}
85
93
  draggable={item.draggable}
@@ -91,7 +99,7 @@ const SortableContainer = ({
91
99
  >
92
100
  {/* Render each sortable item using SortableItem */}
93
101
  <SortableItem
94
- id={item.id}
102
+ id={item.id.toString()}
95
103
  draggable={item.draggable}
96
104
  reorderable={item.reorderable}
97
105
  onPress={() => onPress && onPress(item)}
package/src/SortableView.js CHANGED
@@ -17,6 +17,8 @@ import SortableContainer from './SortableContainer';
17
17
  * @param {function} renderItem - Function to render each item inside the sortable view. Receives an object containing `item` and `index`.
18
18
  * @param {function} onPress - Function to handle the press event on an item.
19
19
  * @param {function} onLongPress - Function to handle the long press event on an item.
20
+ * @param {object} scrollContainerStyle - Custom style to apply to the scroll container.
21
+ * @param {object} scrollContentContainerStyle - Custom style to apply to the scroll content container.
20
22
  * @param {object} itemStyle - Custom style to apply to each SortableItem.
21
23
  * @param {object} itemProps - Additional props to be passed to each SortableItem.
22
24
  *
@@ -41,6 +43,8 @@ const SortableView = ({
41
43
  renderItem,
42
44
  onPress,
43
45
  onLongPress,
46
+ scrollContainerStyle,
47
+ scrollContentContainerStyle,
44
48
  itemStyle,
45
49
  itemProps,
46
50
  }) => {
@@ -55,6 +59,8 @@ const SortableView = ({
55
59
  renderItem={renderItem}
56
60
  onPress={onPress}
57
61
  onLongPress={onLongPress}
62
+ scrollContainerStyle={scrollContainerStyle}
63
+ scrollContentContainerStyle={scrollContentContainerStyle}
58
64
  style={itemStyle}
59
65
  {...itemProps}
60
66
  />