react-native-sortable-dynamic 0.1.0 → 0.2.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.
Files changed (43) hide show
  1. package/README.md +56 -52
  2. package/lib/commonjs/Config.js +12 -12
  3. package/lib/commonjs/Config.js.map +1 -1
  4. package/lib/commonjs/{SortableList.js → SortableContainer.js} +55 -31
  5. package/lib/commonjs/SortableContainer.js.map +1 -0
  6. package/lib/commonjs/SortableItem.js +61 -0
  7. package/lib/commonjs/SortableItem.js.map +1 -0
  8. package/lib/commonjs/{Item.js → SortableItemWrapper.js} +34 -17
  9. package/lib/commonjs/SortableItemWrapper.js.map +1 -0
  10. package/lib/commonjs/SortableView.js +70 -0
  11. package/lib/commonjs/SortableView.js.map +1 -0
  12. package/lib/commonjs/index.js +3 -17
  13. package/lib/commonjs/index.js.map +1 -1
  14. package/lib/module/Config.js +12 -12
  15. package/lib/module/Config.js.map +1 -1
  16. package/lib/module/SortableContainer.js +110 -0
  17. package/lib/module/SortableContainer.js.map +1 -0
  18. package/lib/module/SortableItem.js +58 -0
  19. package/lib/module/SortableItem.js.map +1 -0
  20. package/lib/module/{Item.js → SortableItemWrapper.js} +34 -17
  21. package/lib/module/SortableItemWrapper.js.map +1 -0
  22. package/lib/module/SortableView.js +67 -0
  23. package/lib/module/SortableView.js.map +1 -0
  24. package/lib/module/index.js +1 -3
  25. package/lib/module/index.js.map +1 -1
  26. package/package.json +1 -1
  27. package/src/Config.js +12 -12
  28. package/src/SortableContainer.js +110 -0
  29. package/src/SortableItem.js +57 -0
  30. package/src/{Item.js → SortableItemWrapper.js} +32 -17
  31. package/src/SortableView.js +65 -0
  32. package/src/index.js +1 -3
  33. package/lib/commonjs/Item.js.map +0 -1
  34. package/lib/commonjs/SortableList.js.map +0 -1
  35. package/lib/commonjs/Tile.js +0 -56
  36. package/lib/commonjs/Tile.js.map +0 -1
  37. package/lib/module/Item.js.map +0 -1
  38. package/lib/module/SortableList.js +0 -86
  39. package/lib/module/SortableList.js.map +0 -1
  40. package/lib/module/Tile.js +0 -53
  41. package/lib/module/Tile.js.map +0 -1
  42. package/src/SortableList.js +0 -86
  43. package/src/Tile.js +0 -47
package/README.md CHANGED
@@ -22,7 +22,7 @@
22
22
  npm install react-native-sortable-dynamic
23
23
  ```
24
24
 
25
- ##### or
25
+ #### or
26
26
 
27
27
  ```bash
28
28
  yarn add react-native-sortable-dynamic
@@ -36,7 +36,7 @@ You'll also need to install dependencies like react-native-reanimated and react-
36
36
  npm install react-native-reanimated react-native-gesture-handler
37
37
  ```
38
38
 
39
- ##### or
39
+ #### or
40
40
 
41
41
  ```bash
42
42
  yarn add react-native-reanimated react-native-gesture-handler
@@ -100,49 +100,57 @@ Here's a simple example of how to use `react-native-sortable-dynamic` in your Re
100
100
  ```jsx
101
101
  import React, { useState } from 'react';
102
102
  import { Text, View } from 'react-native';
103
- import {
104
- SortableListProvider,
105
- SortableList,
106
- Tile,
107
- } from 'react-native-sortable-dynamic';
103
+ import { SafeAreaView } from 'react-native-safe-area-context';
104
+ import SortableView from 'react-native-sortable-dynamic';
108
105
 
109
- const tiles = [
106
+ const data = [
110
107
  { id: 1, text: 'Tile 1' },
111
108
  { id: 2, text: 'Tile 2' },
112
109
  { id: 3, text: 'Tile 3' },
113
- { id: 4, text: 'Tile 4' },
110
+ { id: 4, text: 'Tile 4', reorderable: false },
114
111
  ];
115
112
 
116
113
  const App = () => {
117
114
  const [enableEditing, setEnableEditing] = useState(false);
118
115
 
116
+ const handleLongPress = () => {
117
+ setEnableEditing((prev) => !prev);
118
+ };
119
+
120
+ const renderItem = ({ item, index }) => (
121
+ <View
122
+ key={`${item.id}-${index}`}
123
+ style={{
124
+ backgroundColor: 'red',
125
+ flex: 1,
126
+ justifyContent: 'center',
127
+ alignItems: 'center',
128
+ borderRadius: 5,
129
+ margin: 10,
130
+ opacity:
131
+ enableEditing &&
132
+ item.draggable !== false &&
133
+ item.reorderable !== false
134
+ ? 0.5
135
+ : 1,
136
+ }}
137
+ >
138
+ <Text style={{ color: 'white', fontSize: 20 }}>{item.text}</Text>
139
+ </View>
140
+ );
141
+
119
142
  return (
120
- <SortableListProvider config={{ MARGIN: 10, COL: 2 }}>
121
- <SortableList
122
- tiles={tiles}
143
+ <SafeAreaView style={{ flex: 1 }}>
144
+ <SortableView
145
+ config={{ MARGIN: 10, COL: 2 }}
146
+ data={data}
123
147
  editing={enableEditing}
124
148
  onDragEnd={(positions) => console.log(positions)}
125
- >
126
- {tiles.map((tile) => (
127
- <Tile
128
- key={tile.id}
129
- id={tile.id}
130
- onLongPress={() => setEnableEditing(!enableEditing)}
131
- >
132
- <View
133
- style={{
134
- flex: 1,
135
- justifyContent: 'center',
136
- alignItems: 'center',
137
- backgroundColor: 'red',
138
- }}
139
- >
140
- <Text style={{ color: 'white', fontSize: 20 }}>{tile.text}</Text>
141
- </View>
142
- </Tile>
143
- ))}
144
- </SortableList>
145
- </SortableListProvider>
149
+ renderItem={renderItem}
150
+ onPress={handleLongPress}
151
+ onLongPress={handleLongPress}
152
+ />
153
+ </SafeAreaView>
146
154
  );
147
155
  };
148
156
 
@@ -151,34 +159,30 @@ export default App;
151
159
 
152
160
  ### Props
153
161
 
154
- #### `SortableListProvider`
155
-
156
- | Prop | Type | Description |
157
- | -------- | -------- | ------------------------------------------------------------------------------------------------- |
158
- | `config` | `object` | Configuration options such as `MARGIN` and `COL`. Use this to dynamically adjust the grid layout. |
159
-
160
- #### `SortableList`
162
+ #### `SortableView`
161
163
 
162
- | Prop | Type | Description |
163
- | ----------- | ---------- | --------------------------------------------------------------------- |
164
- | `tiles` | `array` | Array of items to be rendered and sorted. |
165
- | `editing` | `boolean` | If true, allows items to be dragged and reordered. |
166
- | `onDragEnd` | `function` | Callback function that receives updated positions when the drag ends. |
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. |
167
175
 
168
- #### `Tile`
176
+ ### Note
169
177
 
170
- | Prop | Type | Description |
171
- | --------------- | ---------- | ------------------------------------------------------------- |
172
- | `onPress` | `function` | Function called when the tile is pressed. |
173
- | `onLongPress` | `function` | Function called when the tile is long-pressed. |
174
- | `activeOpacity` | `number` | The opacity of the tile when it is pressed. Default is `0.7`. |
178
+ renderItem function will receive the item and index as parameters, allowing you to customize the rendering of each item.
175
179
 
176
180
  ## Roadmap
177
181
 
178
182
  - ✅ Support for grid layouts
183
+ - ✅ Improve accessibility and performance
179
184
  - 🔜 Support for list layouts
180
185
  - 🔜 Add more customization options for animations and gestures
181
- - 🔜 Improve accessibility and performance
182
186
 
183
187
  ## License
184
188
 
@@ -15,17 +15,16 @@ const {
15
15
  width
16
16
  } = _reactNative.Dimensions.get('window');
17
17
 
18
- // Default configuration for the sortable list
18
+ // Default configuration for the sortable grid/list
19
19
  const defaultConfig = {
20
20
  MARGIN: 10,
21
21
  // Default margin between items
22
22
  COL: 2,
23
23
  // Default number of columns
24
- // Default size for each item, calculated based on the number of columns and margin
25
- SIZE: width / 2 - 10 // (width / COL - MARGIN)
24
+ SIZE: width / 2 - 10 // Default size for each item, calculated based on the number of columns and margin
26
25
  };
27
26
 
28
- // Create a Context for the sortable list configuration
27
+ // Create a Context for the sortable grid/list configuration
29
28
  const ConfigContext = /*#__PURE__*/(0, _react.createContext)(defaultConfig);
30
29
 
31
30
  // Custom hook to use the sortable configuration context
@@ -39,7 +38,7 @@ const animationConfig = exports.animationConfig = {
39
38
  };
40
39
 
41
40
  // Helper function to calculate the item's position based on its index
42
- // This is used to position items in a grid layout
41
+ // Used to position items in a grid layout
43
42
  const getPosition = (position, COL, SIZE) => {
44
43
  'worklet';
45
44
 
@@ -64,9 +63,10 @@ const getOrder = (tx, ty, max, COL, SIZE) => {
64
63
  };
65
64
 
66
65
  /**
67
- * SortableListProvider component
66
+ * SortableConfigProvider component
68
67
  *
69
- * Wrap your sortable list components with this provider to set custom configuration.
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
70
  *
71
71
  * @param {Object} config - Custom configuration to override the default settings.
72
72
  * @param {number} config.MARGIN - Margin between items.
@@ -75,12 +75,12 @@ const getOrder = (tx, ty, max, COL, SIZE) => {
75
75
  *
76
76
  * Usage:
77
77
  *
78
- * <SortableListProvider config={{ MARGIN: 15, COL: 3 }}>
79
- * <YourSortableList />
80
- * </SortableListProvider>
78
+ * <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
79
+ * <YourSortableComponent />
80
+ * </SortableConfigProvider>
81
81
  */
82
82
  exports.getOrder = getOrder;
83
- const SortableListProvider = ({
83
+ const SortableConfigProvider = ({
84
84
  children,
85
85
  config
86
86
  }) => {
@@ -97,5 +97,5 @@ const SortableListProvider = ({
97
97
  children: children
98
98
  });
99
99
  };
100
- var _default = exports.default = SortableListProvider;
100
+ var _default = exports.default = SortableConfigProvider;
101
101
  //# sourceMappingURL=Config.js.map
@@ -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","width","Dimensions","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","SortableListProvider","children","config","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}
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","width","Dimensions","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","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}
@@ -6,37 +6,49 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
9
- var _Item = _interopRequireDefault(require("./Item.js"));
9
+ var _SortableItemWrapper = _interopRequireDefault(require("./SortableItemWrapper.js"));
10
+ var _SortableItem = _interopRequireDefault(require("./SortableItem.js"));
10
11
  var _Config = require("./Config.js");
11
12
  var _jsxRuntime = require("react/jsx-runtime");
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
14
  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); }
14
15
  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; }
15
16
  /**
16
- * SortableList Component
17
+ * SortableContainer Component
17
18
  *
18
- * This component renders a scrollable list of items that can be reordered using drag-and-drop gestures.
19
- * It manages the overall layout of the items and provides the necessary props to each child `Item` component
20
- * to enable dragging, scrolling, and reordering functionality.
19
+ * This component renders a scrollable grid or list of items that can be reordered using drag-and-drop gestures.
20
+ * It manages the layout and drag-and-drop logic for the items, providing the necessary props
21
+ * to each child `SortableItemWrapper` component to enable dragging, scrolling, and reordering functionality.
21
22
  *
22
23
  * Props:
23
- * @param {React.ReactNode[]} children - The list of items to render inside the sortable list.
24
- * @param {boolean} editing - Whether the list is in editing mode, enabling drag-and-drop.
25
- * @param {Array} tiles - Array of tile data to manage the reordering state.
26
- * @param {function} onDragEnd - Callback function called with the updated positions when the drag ends.
24
+ * @param {Array} data - Array of data objects to render and reorder. Each object should have a unique `id`.
25
+ * @param {boolean} editing - Whether the container is in editing mode, enabling drag-and-drop functionality.
26
+ * @param {function} onDragEnd - Callback function called with the updated positions when a drag ends.
27
+ * @param {function} renderItem - Function to render the content of each item inside the sortable container. Receives an object containing `item` and `index`.
28
+ * @param {function} onPress - Function to handle the press event on a sortable item.
29
+ * @param {function} onLongPress - Function to handle the long press event on a sortable item.
30
+ * @param {object} itemStyle - Custom style to apply to each SortableItem.
31
+ * @param {...object} itemProps - Additional props to be passed to each SortableItem.
27
32
  *
28
33
  * Usage:
29
- *
30
- * <SortableList editing={isEditing} tiles={tiles} onDragEnd={handleDragEnd}>
31
- * {tiles.map((tile) => (
32
- * <YourTileComponent key={tile.id} id={tile.id} />
33
- * ))}
34
- * </SortableList>
35
- */const SortableList = ({
36
- children,
34
+ * <SortableContainer
35
+ * data={dataArray}
36
+ * editing={isEditing}
37
+ * onDragEnd={handleDragEnd}
38
+ * renderItem={({ item }) => <YourCustomComponent item={item} />}
39
+ * onPress={handlePress}
40
+ * onLongPress={handleLongPress}
41
+ * accessible={true}
42
+ * />
43
+ */const SortableContainer = ({
44
+ data,
37
45
  editing,
38
- tiles,
39
- onDragEnd
46
+ onDragEnd,
47
+ renderItem,
48
+ onPress,
49
+ onLongPress,
50
+ itemStyle,
51
+ ...itemProps
40
52
  }) => {
41
53
  // Get the configuration for columns and size from context
42
54
  const {
@@ -47,9 +59,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
47
59
  // Shared values to track scrolling and item positions
48
60
  const scrollY = (0, _reactNativeReanimated.useSharedValue)(0); // Current scroll position
49
61
  const scrollView = (0, _reactNativeReanimated.useAnimatedRef)(); // Reference to the scroll view
50
- const positions = (0, _reactNativeReanimated.useSharedValue)(children.reduce((acc, child, index) => ({
62
+ const positions = (0, _reactNativeReanimated.useSharedValue)(data.reduce((acc, item, index) => ({
51
63
  ...acc,
52
- [child.props.id]: index
64
+ [item.id]: index
53
65
  }), {}));
54
66
 
55
67
  // Scroll event handler to update scrollY shared value
@@ -67,25 +79,37 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
67
79
  ref: scrollView,
68
80
  contentContainerStyle: {
69
81
  // Calculate the total height needed for the scroll view content
70
- height: Math.ceil(children.length / COL) * SIZE
82
+ height: Math.ceil(data.length / COL) * SIZE
71
83
  },
72
84
  showsVerticalScrollIndicator: false,
73
85
  bounces: false,
74
86
  scrollEventThrottle: 16 // Control scroll event frequency
75
87
  ,
76
- children: children.map(child => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
77
- id: child.props.id,
88
+ children: data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SortableItemWrapper.default, {
89
+ id: item.id,
78
90
  positions: positions,
79
91
  editing: editing,
80
- draggable: child.props.draggable,
81
- reorderable: child.props.reorderable,
82
- tiles: tiles,
92
+ draggable: item.draggable,
93
+ reorderable: item.reorderable,
94
+ data: data,
83
95
  onDragEnd: onDragEnd,
84
96
  scrollView: scrollView,
85
97
  scrollY: scrollY,
86
- children: child
87
- }, child.props.id))
98
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SortableItem.default, {
99
+ id: item.id,
100
+ draggable: item.draggable,
101
+ reorderable: item.reorderable,
102
+ onPress: () => onPress && onPress(item),
103
+ onLongPress: () => onLongPress && onLongPress(item),
104
+ style: itemStyle,
105
+ ...itemProps,
106
+ children: renderItem({
107
+ item: item,
108
+ index
109
+ })
110
+ })
111
+ }, item.id))
88
112
  });
89
113
  };
90
- var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SortableList);
91
- //# sourceMappingURL=SortableList.js.map
114
+ var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SortableContainer);
115
+ //# sourceMappingURL=SortableContainer.js.map
@@ -0,0 +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":[]}
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _reactNative = require("react-native");
9
+ var _Config = require("./Config.js");
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ /**
13
+ * SortableItem Component
14
+ *
15
+ * This component represents a single item in the sortable grid or list. It is designed to be flexible
16
+ * and supports various user interactions, including press and long press events. The size of each item
17
+ * is dynamically adjusted based on the configuration provided by the `SortableConfigProvider`.
18
+ *
19
+ * Props:
20
+ * Accepts all TouchableOpacity props, including but not limited to:
21
+ * @param {function} onPress - Callback function called when the item is pressed.
22
+ * @param {function} onLongPress - Callback function called when the item is long-pressed.
23
+ * @param {number} activeOpacity - The opacity of the item when it is pressed. Default is 0.7.
24
+ * @param {object} style - Additional style for the item.
25
+ * @param {React.ReactNode} children - The content to render inside the item.
26
+ * @param {...object} rest - Other TouchableOpacity props such as `accessible`, `accessibilityLabel`, etc.
27
+ *
28
+ * Usage:
29
+ *
30
+ * <SortableItem onPress={handlePress} onLongPress={handleLongPress} accessibilityLabel="Custom Item">
31
+ * <Text>Item Content</Text>
32
+ * </SortableItem>
33
+ */const SortableItem = ({
34
+ onPress,
35
+ onLongPress,
36
+ activeOpacity = 0.7,
37
+ children,
38
+ style,
39
+ ...rest
40
+ }) => {
41
+ // Get the size of the item from the sortable config context
42
+ const {
43
+ SIZE
44
+ } = (0, _Config.useSortableConfig)();
45
+
46
+ // Define the style for the item, ensuring that its size is consistent across the grid or list
47
+ const containerStyle = {
48
+ width: SIZE,
49
+ height: SIZE
50
+ };
51
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
52
+ style: [containerStyle, style],
53
+ onPress: onPress,
54
+ onLongPress: onLongPress,
55
+ activeOpacity: activeOpacity,
56
+ ...rest,
57
+ children: children
58
+ });
59
+ };
60
+ var _default = exports.default = SortableItem;
61
+ //# sourceMappingURL=SortableItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Config","_jsxRuntime","e","__esModule","default","SortableItem","onPress","onLongPress","activeOpacity","children","style","rest","SIZE","useSortableConfig","containerStyle","width","height","jsx","TouchableOpacity","_default","exports"],"sourceRoot":"../../src","sources":["SortableItem.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA6C,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE7C;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,OAAO;EACPC,WAAW;EACXC,aAAa,GAAG,GAAG;EACnBC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,yBAAiB,EAAC,CAAC;;EAEpC;EACA,MAAMC,cAAc,GAAG;IACrBC,KAAK,EAAEH,IAAI;IACXI,MAAM,EAAEJ;EACV,CAAC;EAED,oBACE,IAAAX,WAAA,CAAAgB,GAAA,EAAClB,YAAA,CAAAmB,gBAAgB;IACfR,KAAK,EAAE,CAACI,cAAc,EAAEJ,KAAK,CAAE;IAC/BJ,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,aAAa,EAAEA,aAAc;IAAA,GACzBG,IAAI;IAAAF,QAAA,EAEPA;EAAQ,CACO,CAAC;AAEvB,CAAC;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEaC,YAAY","ignoreList":[]}
@@ -14,22 +14,37 @@ var _jsxRuntime = require("react/jsx-runtime");
14
14
  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); }
15
15
  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; }
16
16
  /**
17
- * Item Component
17
+ * SortableItemWrapper Component
18
18
  *
19
- * This component represents a draggable item in the sortable grid. It manages the gesture handling
20
- * and animations needed to drag and reorder the item within the grid.
19
+ * This component manages the gesture handling and animations for a draggable item in the sortable grid or list.
20
+ * It uses the Reanimated 2 and Gesture Handler libraries to provide smooth drag-and-drop functionality.
21
+ * The component calculates the item's position and handles reordering logic when the item is dragged.
21
22
  *
22
23
  * Props:
23
- * @param {React.ReactNode} children - The content to render inside the item.
24
+ * @param {React.ReactNode} children - The content to render inside the draggable item.
24
25
  * @param {object} positions - Shared value that contains the current positions of all items.
25
26
  * @param {number} id - Unique identifier for the item.
26
- * @param {function} onDragEnd - Callback function triggered when dragging ends.
27
- * @param {object} scrollView - Reference to the scroll view for scrolling during drag.
27
+ * @param {function} onDragEnd - Callback function triggered when dragging ends, providing the updated item positions.
28
+ * @param {object} scrollView - Reference to the scroll view for scrolling the list during drag.
28
29
  * @param {object} scrollY - Shared value representing the current scroll position.
29
- * @param {boolean} editing - Whether the list is in editing mode.
30
+ * @param {boolean} editing - Whether the grid or list is in editing mode, enabling drag-and-drop.
30
31
  * @param {boolean} draggable - Whether the item is draggable (default: true).
31
- * @param {Array} tiles - Array of tile items used to check reorderable state.
32
- */const Item = ({
32
+ * @param {Array} data - Array of items used to determine the reorderable state of items.
33
+ *
34
+ * Usage:
35
+ * <SortableItemWrapper
36
+ * id={item.id}
37
+ * positions={positions}
38
+ * editing={isEditing}
39
+ * draggable={item.draggable}
40
+ * data={itemsArray}
41
+ * onDragEnd={handleDragEnd}
42
+ * scrollView={scrollView}
43
+ * scrollY={scrollY}
44
+ * >
45
+ * <YourItemComponent />
46
+ * </SortableItemWrapper>
47
+ */const SortableItemWrapper = ({
33
48
  children,
34
49
  positions,
35
50
  id,
@@ -38,7 +53,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
38
53
  scrollY,
39
54
  editing,
40
55
  draggable = true,
41
- tiles
56
+ data
42
57
  }) => {
43
58
  // Get safe area insets for accurate height calculation
44
59
  const inset = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
@@ -47,12 +62,13 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
47
62
  // Get the configuration for columns and size
48
63
  const {
49
64
  COL,
50
- SIZE
65
+ SIZE,
66
+ MARGIN
51
67
  } = (0, _Config.useSortableConfig)();
52
68
 
53
69
  // Calculate content height based on the number of items
54
70
  const contentHeight = Object.keys(positions.value).length / COL * SIZE;
55
- const isGestureActive = (0, _reactNativeReanimated.useSharedValue)(false); // Whether the item is being actively dragged
71
+ const isGestureActive = (0, _reactNativeReanimated.useSharedValue)(false); // Whether the item is actively being dragged
56
72
 
57
73
  // Calculate initial position of the item
58
74
  const position = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
@@ -84,7 +100,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
84
100
  // Store the starting position
85
101
  ctx.x = translateX.value;
86
102
  ctx.y = translateY.value;
87
- isGestureActive.value = false; // TODO: Set to false when grouping is implemented
103
+ isGestureActive.value = false;
88
104
  }
89
105
  },
90
106
  onActive: ({
@@ -104,7 +120,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
104
120
  const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
105
121
 
106
122
  // Only swap if the target item is reorderable
107
- const targetItem = tiles.find(tile => tile.id === Number(idToSwap));
123
+ const targetItem = data.find(tile => tile.id === Number(idToSwap));
108
124
  if (idToSwap && targetItem?.reorderable !== false) {
109
125
  const newPositions = {
110
126
  ...positions.value
@@ -154,7 +170,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
154
170
 
155
171
  // Animated style for the item
156
172
  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
157
- const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to front when active
173
+ const zIndex = isGestureActive.value ? 100 : 0; // Bring the item to the front when active
158
174
  const scale = editing && isGestureActive.value ? (0, _reactNativeReanimated.withSpring)(1.05) : (0, _reactNativeReanimated.withSpring)(1); // Slightly enlarge the item when dragging
159
175
  return {
160
176
  position: 'absolute',
@@ -162,6 +178,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
162
178
  left: 0,
163
179
  width: SIZE,
164
180
  height: SIZE,
181
+ margin: MARGIN,
165
182
  zIndex,
166
183
  transform: [{
167
184
  translateX: translateX.value
@@ -184,5 +201,5 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
184
201
  })
185
202
  });
186
203
  };
187
- var _default = exports.default = Item;
188
- //# sourceMappingURL=Item.js.map
204
+ var _default = exports.default = SortableItemWrapper;
205
+ //# sourceMappingURL=SortableItemWrapper.js.map
@@ -0,0 +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","containerHeight","Dimensions","height","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":[]}