react-native-reorderable-list 0.4.0 → 0.5.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 (162) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +118 -60
  3. package/lib/commonjs/components/ReorderableList/ReorderableList.js +99 -0
  4. package/lib/commonjs/components/ReorderableList/ReorderableList.js.map +1 -0
  5. package/lib/commonjs/components/ReorderableList/constants.ios.js +10 -0
  6. package/lib/commonjs/components/ReorderableList/constants.ios.js.map +1 -0
  7. package/lib/commonjs/components/ReorderableList/constants.js +10 -0
  8. package/lib/commonjs/components/ReorderableList/constants.js.map +1 -0
  9. package/lib/commonjs/components/ReorderableList/index.js +17 -0
  10. package/lib/commonjs/components/ReorderableList/index.js.map +1 -0
  11. package/lib/commonjs/components/ReorderableList/useReorderableList.js +311 -0
  12. package/lib/commonjs/components/ReorderableList/useReorderableList.js.map +1 -0
  13. package/lib/commonjs/components/ReorderableListCell.js +93 -0
  14. package/lib/commonjs/components/ReorderableListCell.js.map +1 -0
  15. package/lib/commonjs/components/ReorderableListItem.js +87 -0
  16. package/lib/commonjs/components/ReorderableListItem.js.map +1 -0
  17. package/lib/commonjs/components/index.js +39 -0
  18. package/lib/commonjs/components/index.js.map +1 -0
  19. package/lib/commonjs/contexts/ReorderableCellContext.js +10 -0
  20. package/lib/commonjs/contexts/ReorderableCellContext.js.map +1 -0
  21. package/lib/commonjs/contexts/ReorderableListContext.js +10 -0
  22. package/lib/commonjs/contexts/ReorderableListContext.js.map +1 -0
  23. package/lib/commonjs/contexts/index.js +28 -0
  24. package/lib/commonjs/contexts/index.js.map +1 -0
  25. package/lib/commonjs/hooks/index.js +50 -0
  26. package/lib/commonjs/hooks/index.js.map +1 -0
  27. package/lib/commonjs/hooks/useContext.js +16 -0
  28. package/lib/commonjs/hooks/useContext.js.map +1 -0
  29. package/lib/commonjs/hooks/useReorderableDrag.js +16 -0
  30. package/lib/commonjs/hooks/useReorderableDrag.js.map +1 -0
  31. package/lib/commonjs/hooks/useReorderableDragEnd.js +28 -0
  32. package/lib/commonjs/hooks/useReorderableDragEnd.js.map +1 -0
  33. package/lib/commonjs/hooks/useReorderableDragStart.js +22 -0
  34. package/lib/commonjs/hooks/useReorderableDragStart.js.map +1 -0
  35. package/lib/commonjs/index.js +41 -0
  36. package/lib/commonjs/index.js.map +1 -0
  37. package/lib/commonjs/types/index.js +28 -0
  38. package/lib/commonjs/types/index.js.map +1 -0
  39. package/lib/commonjs/types/misc.js +14 -0
  40. package/lib/commonjs/types/misc.js.map +1 -0
  41. package/lib/commonjs/types/props.js +6 -0
  42. package/lib/commonjs/types/props.js.map +1 -0
  43. package/lib/commonjs/utils.js +23 -0
  44. package/lib/commonjs/utils.js.map +1 -0
  45. package/lib/module/components/ReorderableList/ReorderableList.js +91 -0
  46. package/lib/module/components/ReorderableList/ReorderableList.js.map +1 -0
  47. package/lib/module/components/ReorderableList/constants.ios.js +4 -0
  48. package/lib/module/components/ReorderableList/constants.ios.js.map +1 -0
  49. package/lib/module/components/ReorderableList/constants.js +4 -0
  50. package/lib/module/components/ReorderableList/constants.js.map +1 -0
  51. package/lib/module/components/ReorderableList/index.js +2 -0
  52. package/lib/module/components/ReorderableList/index.js.map +1 -0
  53. package/lib/module/components/ReorderableList/useReorderableList.js +302 -0
  54. package/lib/module/components/ReorderableList/useReorderableList.js.map +1 -0
  55. package/lib/module/components/ReorderableListCell.js +85 -0
  56. package/lib/module/components/ReorderableListCell.js.map +1 -0
  57. package/lib/module/components/ReorderableListItem.js +78 -0
  58. package/lib/module/components/ReorderableListItem.js.map +1 -0
  59. package/lib/module/components/index.js +4 -0
  60. package/lib/module/components/index.js.map +1 -0
  61. package/lib/module/contexts/ReorderableCellContext.js +3 -0
  62. package/lib/module/contexts/ReorderableCellContext.js.map +1 -0
  63. package/lib/module/contexts/ReorderableListContext.js +3 -0
  64. package/lib/module/contexts/ReorderableListContext.js.map +1 -0
  65. package/lib/module/contexts/index.js +3 -0
  66. package/lib/module/contexts/index.js.map +1 -0
  67. package/lib/module/hooks/index.js +5 -0
  68. package/lib/module/hooks/index.js.map +1 -0
  69. package/lib/module/hooks/useContext.js +9 -0
  70. package/lib/module/hooks/useContext.js.map +1 -0
  71. package/lib/module/hooks/useReorderableDrag.js +9 -0
  72. package/lib/module/hooks/useReorderableDrag.js.map +1 -0
  73. package/lib/module/hooks/useReorderableDragEnd.js +21 -0
  74. package/lib/module/hooks/useReorderableDragEnd.js.map +1 -0
  75. package/lib/module/hooks/useReorderableDragStart.js +15 -0
  76. package/lib/module/hooks/useReorderableDragStart.js.map +1 -0
  77. package/lib/module/index.js +6 -0
  78. package/lib/module/index.js.map +1 -0
  79. package/lib/module/types/index.js +3 -0
  80. package/lib/module/types/index.js.map +1 -0
  81. package/lib/module/types/misc.js +8 -0
  82. package/lib/module/types/misc.js.map +1 -0
  83. package/lib/module/types/props.js +2 -0
  84. package/lib/module/types/props.js.map +1 -0
  85. package/lib/module/utils.js +16 -0
  86. package/lib/module/utils.js.map +1 -0
  87. package/lib/typescript/components/ReorderableList/ReorderableList.d.ts +8 -0
  88. package/lib/typescript/components/ReorderableList/ReorderableList.d.ts.map +1 -0
  89. package/lib/typescript/components/ReorderableList/constants.d.ts +3 -0
  90. package/lib/typescript/components/ReorderableList/constants.d.ts.map +1 -0
  91. package/lib/typescript/components/ReorderableList/constants.ios.d.ts +3 -0
  92. package/lib/typescript/components/ReorderableList/constants.ios.d.ts.map +1 -0
  93. package/lib/typescript/components/ReorderableList/index.d.ts +2 -0
  94. package/lib/typescript/components/ReorderableList/index.d.ts.map +1 -0
  95. package/lib/typescript/components/ReorderableList/useReorderableList.d.ts +34 -0
  96. package/lib/typescript/components/ReorderableList/useReorderableList.d.ts.map +1 -0
  97. package/lib/typescript/components/ReorderableListCell.d.ts +20 -0
  98. package/lib/typescript/components/ReorderableListCell.d.ts.map +1 -0
  99. package/lib/typescript/components/ReorderableListItem.d.ts +4 -0
  100. package/lib/typescript/components/ReorderableListItem.d.ts.map +1 -0
  101. package/lib/typescript/components/index.d.ts +4 -0
  102. package/lib/typescript/components/index.d.ts.map +1 -0
  103. package/lib/typescript/contexts/ReorderableCellContext.d.ts +11 -0
  104. package/lib/typescript/contexts/ReorderableCellContext.d.ts.map +1 -0
  105. package/lib/typescript/contexts/ReorderableListContext.d.ts +9 -0
  106. package/lib/typescript/contexts/ReorderableListContext.d.ts.map +1 -0
  107. package/lib/typescript/contexts/index.d.ts +3 -0
  108. package/lib/typescript/contexts/index.d.ts.map +1 -0
  109. package/lib/typescript/hooks/index.d.ts +5 -0
  110. package/lib/typescript/hooks/index.d.ts.map +1 -0
  111. package/lib/typescript/hooks/useContext.d.ts +3 -0
  112. package/lib/typescript/hooks/useContext.d.ts.map +1 -0
  113. package/lib/typescript/hooks/useReorderableDrag.d.ts +2 -0
  114. package/lib/typescript/hooks/useReorderableDrag.d.ts.map +1 -0
  115. package/lib/typescript/hooks/useReorderableDragEnd.d.ts +2 -0
  116. package/lib/typescript/hooks/useReorderableDragEnd.d.ts.map +1 -0
  117. package/lib/typescript/hooks/useReorderableDragStart.d.ts +2 -0
  118. package/lib/typescript/hooks/useReorderableDragStart.d.ts.map +1 -0
  119. package/lib/typescript/index.d.ts +7 -0
  120. package/lib/typescript/index.d.ts.map +1 -0
  121. package/lib/typescript/types/index.d.ts +3 -0
  122. package/lib/typescript/types/index.d.ts.map +1 -0
  123. package/lib/typescript/types/misc.d.ts +7 -0
  124. package/lib/typescript/types/misc.d.ts.map +1 -0
  125. package/lib/typescript/types/props.d.ts +90 -0
  126. package/lib/typescript/types/props.d.ts.map +1 -0
  127. package/lib/typescript/utils.d.ts +12 -0
  128. package/lib/typescript/utils.d.ts.map +1 -0
  129. package/package.json +199 -39
  130. package/src/components/ReorderableList/ReorderableList.tsx +123 -0
  131. package/src/components/ReorderableList/constants.ios.ts +3 -0
  132. package/src/components/ReorderableList/constants.ts +3 -0
  133. package/src/components/ReorderableList/index.ts +1 -0
  134. package/src/components/ReorderableList/useReorderableList.ts +487 -0
  135. package/src/components/ReorderableListCell.tsx +143 -0
  136. package/src/components/ReorderableListItem.tsx +108 -0
  137. package/src/components/index.ts +3 -0
  138. package/src/contexts/ReorderableCellContext.ts +14 -0
  139. package/src/contexts/ReorderableListContext.ts +12 -0
  140. package/src/contexts/index.ts +2 -0
  141. package/src/hooks/index.ts +4 -0
  142. package/src/hooks/useContext.ts +11 -0
  143. package/src/hooks/useReorderableDrag.ts +7 -0
  144. package/src/hooks/useReorderableDragEnd.ts +25 -0
  145. package/src/hooks/useReorderableDragStart.ts +18 -0
  146. package/src/index.ts +26 -0
  147. package/src/types/index.ts +2 -0
  148. package/src/types/misc.ts +6 -0
  149. package/src/types/props.ts +101 -0
  150. package/src/utils.ts +15 -0
  151. package/dist/components/ReorderableList.d.ts +0 -7
  152. package/dist/components/ReorderableList.js +0 -314
  153. package/dist/components/ReorderableListItem.d.ts +0 -14
  154. package/dist/components/ReorderableListItem.js +0 -57
  155. package/dist/hooks/useAnimatedSharedValues.d.ts +0 -3
  156. package/dist/hooks/useAnimatedSharedValues.js +0 -33
  157. package/dist/index.d.ts +0 -4
  158. package/dist/index.js +0 -2
  159. package/dist/types/misc.d.ts +0 -15
  160. package/dist/types/misc.js +0 -7
  161. package/dist/types/props.d.ts +0 -29
  162. package/dist/types/props.js +0 -1
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2021 Omar Mahili
3
+ Copyright (c) 2024 Omar Mahili
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,76 +1,129 @@
1
1
  # React Native Reorderable List
2
2
 
3
- A reorderable list for React Native applications, powered by Reanimated 2 🚀
3
+ A reorderable list for React Native applications, powered by Reanimated 🚀
4
4
 
5
- ![Example](https://media.giphy.com/media/EVQOjtGx61QS8s9Y0z/giphy.gif)
5
+ ![Playlist](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3JpY200bHoxeDVneGV1YTUxaHIxaGNuNjQ3ZjRlZWZ1NmluYjFlZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/rk5aZKXYVMBktawoTr/giphy.gif)
6
+ ![Example](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNzBhdWZoM3F4bGlnajB6NGdsbjA3MW54aHk5NGxkZnp3aXJrdDJ6ciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/oJhSawgWA1OtR1IPgT/giphy.gif)
7
+
8
+ ## Index
9
+
10
+ - [Install](#install)
11
+ - [Components](#components)
12
+ - [ReorderableList](#reorderablelist)
13
+ - [ReorderableListItem](#reorderableitemanimation)
14
+ - [Hooks](#hooks)
15
+ - [useReorderableDrag](#usereorderabledrag)
16
+ - [useReorderableDragStart](#usereorderabledragstart)
17
+ - [useReorderableDragEnd](#usereorderabledragend)
18
+ - [Utils](#utils)
19
+ - [Example](#example)
20
+ - [License](#license)
6
21
 
7
22
  ## Install
8
23
 
9
- ### Npm
24
+ Npm:
10
25
 
11
- ```
12
- npm install --save react-native-reorderable-list
13
- ```
26
+ ```bash
27
+ npm install --save react-native-reorderable-list
28
+ ```
14
29
 
15
- ### Yarn
30
+ Yarn:
16
31
 
17
- ```
18
- yarn add react-native-reorderable-list
19
- ```
32
+ ```bash
33
+ yarn add react-native-reorderable-list
34
+ ```
20
35
 
21
36
  Then you need to install these two peer dependencies:
22
37
 
23
- - [**React Native Reanimated**](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) >=2.2.0
24
- - [**React Native Gesture Handler**](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation) >=1.10.0
38
+ - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated) >=3.6.0
39
+ - [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler) >=2.0.0
40
+
41
+ ## Components
42
+
43
+ ### ReorderableList
44
+
45
+ This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it extends its props:
46
+
47
+ | Props | Type | Required | Default | Description |
48
+ | -------------------- | ------------------------------------------------ | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
49
+ | autoscrollThreshold | `number` | No | `0.1` | Threshold at the extremity of the list that triggers autoscroll when an item is dragged to it. A value of `0.1` means that 10% of the area at the top and 10% at the bottom will trigger autoscroll. Min value: `0`. Max value: `0.4`. |
50
+ | autoscrollSpeedScale | `number` | No | `1` | Scales the autoscroll speed at which the list scrolls when an item is dragged to the scroll areas. |
51
+ | autoscrollDelay | `number` | No | `0` (Android), `100` (iOS) | Delay in between autoscroll triggers. Can be used to tune the autoscroll smoothness. Default values differ between platforms: `0` for Android and `100` for iOS. |
52
+ | dragReorderThreshold | `number` | No | `0.2` | Specifies the fraction of an item's size at which it will shift when a dragged item crosses over it. For example, `0.2` means the item shifts when the dragged item passes 20% of its height (in a vertical list). |
53
+ | animationDuration | `number` | No | `200` | Duration of the animations in milliseconds. Users won't be able to drag a new item until the dragged item is released and its animation to its new position ends. |
54
+ | onReorder | `(event: { from: number, to: number }) => void` | Yes | N/A | Event fired after an item is released and the list is reordered. |
55
+ | onScroll | `(event: NativeScrollEvent) => void` | No | N/A | Event fired at most once per frame during scrolling. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info. |
56
+
57
+ The following props from FlatList are not supported:
58
+
59
+ - horizontal
60
+ - scrollEventThrottle
61
+ - removeClippedSubviews
62
+ - CellRendererComponent
63
+ - numColumns
64
+
65
+ ### ReorderableListItem
66
+
67
+ This component allows you to animate the item when it's dragged. It currently supports two animations: `scale` and `opacity`. Using this component is optional.
68
+
69
+ | Props | Type | Required | Default | Description |
70
+ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
71
+ | scaleAnimationConfig | `{ enabled?: boolean, valueEnd?: number, valueStart?: number, easingEnd?: EasingFunction, easingStart?: EasingFunction, duration?: number }` | false | `{ enabled: true, valueEnd: 1, valueStart: 1.025, easingStart: Easing.in(Easing.ease), easingEnd: Easing.out(Easing.ease), duration: 200 }` | Configures the scale animation of the reorderable item. |
72
+ | opacityAnimationConfig | `{ enabled?: boolean, valueEnd?: number, valueStart?: number, easingEnd?: EasingFunction, easingStart?: EasingFunction, duration?: number }` | false | `{ enabled: true, valueEnd: 1, valueStart: 0.75, easingStart: Easing.in(Easing.ease), easingEnd: Easing.out(Easing.ease), duration: 200, }` | Configures the opacity animation of the reorderable item. |
73
+
74
+ ## Hooks
75
+
76
+ ### useReorderableDrag
77
+
78
+ This hook creates a function that triggers the drag of a list item. It's usually called on a long press event. This hook can only be used inside of a list item component.
79
+
80
+ ##### Returns
25
81
 
26
- So head down to their docs and follow their instructions.
82
+ - `() => void`
27
83
 
28
- ## API
84
+ ### useReorderableDragStart
29
85
 
30
- This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it extends its props. See [Known Limitations](#known-limitations) for unsupported props.
86
+ This hook allows handling the drag start event of a list item. It receives a worklet callback that is called when the drag starts. It's recommended to wrap the handler function in a useCallback as follows: `useReorderableDragStart(useCallback(...))`. This hook can only be used inside of a list item component.
31
87
 
32
- Additional props:
88
+ ##### Parameters
33
89
 
34
- | Prop | Type | Required | Default | Description |
35
- |---------------------------|---------------------------------------|------------|-----------|-------------------------------------------------------|
36
- | renderItem | `(info: {item: T, index: number, separators: ItemSeparators, drag?: () => void, isDragged?: boolean}) => ReactElement` | yes | | Renders into the list an item from data. The function `drag` needs to be called when the drag gesture should be enabled, for example `onLongPress` event. The property `isDragged` becomes true for the dragged item. |
37
- | onReorder | `(event: {fromIndex: number, toIndex: number}) => void` | yes | | Function called when an item is released and the list is reordered. |
38
- | containerStyle | `StyleProp<ViewStyle>` | no | | Style for the FlatList container. |
39
- | scrollAreaSize | `number` | no | `0.1` | Portion at the extremeties of the list which triggers scrolling when dragging an item. Accepts a value between `0` and `0.5`. |
40
- | scrollSpeed | `number` | no | `2` | Speed at which the list scrolls. |
41
- | dragScale | `number` | no | `1` | Size ratio to which an item scales when dragged. |
90
+ - onStart: `(index: number) => void`
42
91
 
43
- ## Known Limitations
92
+ ### useReorderableDragEnd\*\*
44
93
 
45
- At the moment it doesn't support these FlatList props:
94
+ This hook allows handling the drag end event of a list item. It receives a worklet callback that is called when the drag ends. It's recommended to wrap the handler function in a useCallback as follows: `useReorderableDragEnd(useCallback(...))`. This hook can only be used inside of a list item component.
46
95
 
47
- - `horizontal`
48
- - `onScroll`
49
- - `scrollEventThrottle`
50
- - `numColumns`
96
+ ##### Parameters
51
97
 
52
- ## Usage
98
+ - onEnd: `(from: number, to: number) => void`
99
+
100
+ ## Utils
101
+
102
+ - **reorderItems**: `<T>(data: T[], from: number, to: number) => T[]`
103
+
104
+ This function receives an array of items, the index of the item to be moved, and the index of the new position and it returns a new array with the items reordered.
105
+
106
+ ## Example
107
+
108
+ Here is an example of how to use this component. More examples can be found in the `example` directory of the repository.
53
109
 
54
110
  ```typescript
55
111
  import React, {useState} from 'react';
56
- import {Pressable, StyleSheet, Text} from 'react-native';
112
+ import {ListRenderItemInfo, Pressable, StyleSheet, Text} from 'react-native';
57
113
  import ReorderableList, {
58
- ReorderableListRenderItemInfo,
114
+ ReorderableListItem,
59
115
  ReorderableListReorderEvent,
116
+ reorderItems,
117
+ useReorderableDrag,
60
118
  } from 'react-native-reorderable-list';
61
119
 
62
- interface CardInfo {
120
+ interface CardProps {
63
121
  id: string;
64
122
  color: string;
65
123
  height: number;
66
124
  }
67
125
 
68
- interface CardProps extends CardInfo {
69
- drag?: () => void;
70
- isDragged?: boolean;
71
- }
72
-
73
- const list: CardInfo[] = [
126
+ const list: CardProps[] = [
74
127
  {id: '0', color: 'red', height: 100},
75
128
  {id: '1', color: 'blue', height: 150},
76
129
  {id: '2', color: 'green', height: 80},
@@ -83,26 +136,27 @@ const list: CardInfo[] = [
83
136
  {id: '9', color: 'seagreen', height: 90},
84
137
  ];
85
138
 
86
- const Card: React.FC<CardProps> = React.memo(
87
- ({id, color, height, drag, isDragged}) => (
88
- <Pressable
89
- style={[styles.card, isDragged && styles.dragged, {height}]}
90
- onLongPress={drag}>
91
- <Text style={[styles.text, {color}]}>Card {id}</Text>
92
- </Pressable>
93
- ),
94
- );
139
+ const Card: React.FC<CardProps> = React.memo(({id, color, height}) => {
140
+ const drag = useReorderableDrag();
141
+
142
+ return (
143
+ <ReorderableListItem>
144
+ <Pressable style={[styles.card, {height}]} onLongPress={drag}>
145
+ <Text style={[styles.text, {color}]}>Card {id}</Text>
146
+ </Pressable>
147
+ </ReorderableListItem>
148
+ );
149
+ });
95
150
 
96
151
  const App = () => {
97
152
  const [data, setData] = useState(list);
98
153
 
99
- const renderItem = (
100
- {item, ...rest}: ReorderableListRenderItemInfo<CardInfo>,
101
- ) => <Card {...item} {...rest} />;
154
+ const renderItem = ({item}: ListRenderItemInfo<CardProps>) => (
155
+ <Card {...item} />
156
+ );
102
157
 
103
- const handleReorder = ({fromIndex, toIndex}: ReorderableListReorderEvent) => {
104
- const newData = [...data];
105
- newData.splice(toIndex, 0, newData.splice(fromIndex, 1)[0]);
158
+ const handleReorder = ({from, to}: ReorderableListReorderEvent) => {
159
+ const newData = reorderItems(data, from, to);
106
160
  setData(newData);
107
161
  };
108
162
 
@@ -111,8 +165,7 @@ const App = () => {
111
165
  data={data}
112
166
  onReorder={handleReorder}
113
167
  renderItem={renderItem}
114
- keyExtractor={(item: CardInfo) => item.id}
115
- dragScale={1.025}
168
+ keyExtractor={item => item.id}
116
169
  />
117
170
  );
118
171
  };
@@ -127,9 +180,6 @@ const styles = StyleSheet.create({
127
180
  borderWidth: 1,
128
181
  borderColor: '#ddd',
129
182
  },
130
- dragged: {
131
- opacity: 0.7,
132
- },
133
183
  text: {
134
184
  fontSize: 20,
135
185
  },
@@ -137,3 +187,11 @@ const styles = StyleSheet.create({
137
187
 
138
188
  export default App;
139
189
  ```
190
+
191
+ ## License
192
+
193
+ MIT
194
+
195
+ ---
196
+
197
+ Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
@@ -0,0 +1,99 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ReorderableList = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeGestureHandler = require("react-native-gesture-handler");
10
+ var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
11
+ var _constants = require("./constants");
12
+ var _useReorderableList = require("./useReorderableList");
13
+ var _contexts = require("../../contexts");
14
+ var _ReorderableListCell = require("../ReorderableListCell");
15
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
+ 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); }
17
+ 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; }
18
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
19
+ const AnimatedFlatList = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.FlatList);
20
+ const ReorderableList = ({
21
+ data,
22
+ autoscrollThreshold = 0.1,
23
+ autoscrollSpeedScale = 1,
24
+ autoscrollDelay = _constants.AUTOSCROLL_DELAY,
25
+ animationDuration = 200,
26
+ dragReorderThreshold = 0.2,
27
+ onLayout,
28
+ onReorder,
29
+ onScroll,
30
+ keyExtractor,
31
+ extraData,
32
+ ...rest
33
+ }, ref) => {
34
+ const {
35
+ gestureHandler,
36
+ handleScroll,
37
+ handleFlatListLayout,
38
+ handleRef,
39
+ startDrag,
40
+ listContextValue,
41
+ itemOffset,
42
+ itemHeight,
43
+ dragY,
44
+ draggedIndex,
45
+ releasedIndex,
46
+ duration
47
+ } = (0, _useReorderableList.useReorderableList)({
48
+ ref,
49
+ autoscrollThreshold,
50
+ autoscrollSpeedScale,
51
+ autoscrollDelay,
52
+ animationDuration,
53
+ dragReorderThreshold,
54
+ onLayout,
55
+ onReorder,
56
+ onScroll
57
+ });
58
+ const renderAnimatedCell = (0, _react.useCallback)(({
59
+ index,
60
+ children,
61
+ item,
62
+ onLayout: onCellLayout
63
+ }) => /*#__PURE__*/_react.default.createElement(_ReorderableListCell.ReorderableListCell
64
+ // forces remount of components with key change
65
+ , {
66
+ key: keyExtractor ? keyExtractor(item, index) : index,
67
+ item: item,
68
+ extraData: extraData,
69
+ index: index,
70
+ itemOffset: itemOffset,
71
+ itemHeight: itemHeight,
72
+ dragY: dragY,
73
+ draggedIndex: draggedIndex,
74
+ releasedIndex: releasedIndex,
75
+ animationDuration: duration,
76
+ startDrag: startDrag,
77
+ children: children,
78
+ onLayout: onCellLayout
79
+ }), [itemOffset, itemHeight, startDrag, dragY, draggedIndex, releasedIndex, duration, keyExtractor, extraData]);
80
+ return /*#__PURE__*/_react.default.createElement(_contexts.ReorderableListContext.Provider, {
81
+ value: listContextValue
82
+ }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
83
+ gesture: gestureHandler
84
+ }, /*#__PURE__*/_react.default.createElement(AnimatedFlatList, _extends({}, rest, {
85
+ ref: handleRef,
86
+ data: data,
87
+ CellRendererComponent: renderAnimatedCell,
88
+ onLayout: handleFlatListLayout,
89
+ onScroll: handleScroll,
90
+ scrollEventThrottle: 1,
91
+ horizontal: false,
92
+ removeClippedSubviews: false,
93
+ keyExtractor: keyExtractor,
94
+ extraData: extraData,
95
+ numColumns: 1
96
+ }))));
97
+ };
98
+ const MemoizedReorderableList = exports.ReorderableList = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef(ReorderableList));
99
+ //# sourceMappingURL=ReorderableList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_interopRequireDefault","_constants","_useReorderableList","_contexts","_ReorderableListCell","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AnimatedFlatList","Animated","createAnimatedComponent","FlatList","ReorderableList","data","autoscrollThreshold","autoscrollSpeedScale","autoscrollDelay","AUTOSCROLL_DELAY","animationDuration","dragReorderThreshold","onLayout","onReorder","onScroll","keyExtractor","extraData","rest","ref","gestureHandler","handleScroll","handleFlatListLayout","handleRef","startDrag","listContextValue","itemOffset","itemHeight","dragY","draggedIndex","releasedIndex","duration","useReorderableList","renderAnimatedCell","useCallback","index","children","item","onCellLayout","createElement","ReorderableListCell","key","ReorderableListContext","Provider","value","GestureDetector","gesture","CellRendererComponent","scrollEventThrottle","horizontal","removeClippedSubviews","numColumns","MemoizedReorderableList","exports","React","memo","forwardRef"],"sourceRoot":"../../../../src","sources":["components/ReorderableList/ReorderableList.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.AUTOSCROLL_INCREMENT = exports.AUTOSCROLL_DELAY = void 0;
7
+ // iOS specific constants
8
+ const AUTOSCROLL_INCREMENT = exports.AUTOSCROLL_INCREMENT = 80;
9
+ const AUTOSCROLL_DELAY = exports.AUTOSCROLL_DELAY = 100;
10
+ //# sourceMappingURL=constants.ios.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["AUTOSCROLL_INCREMENT","exports","AUTOSCROLL_DELAY"],"sourceRoot":"../../../../src","sources":["components/ReorderableList/constants.ios.ts"],"mappings":";;;;;;AAAA;AACO,MAAMA,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,EAAE;AAC/B,MAAME,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,GAAG,GAAG","ignoreList":[]}
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.AUTOSCROLL_INCREMENT = exports.AUTOSCROLL_DELAY = void 0;
7
+ // Default constants
8
+ const AUTOSCROLL_INCREMENT = exports.AUTOSCROLL_INCREMENT = 5;
9
+ const AUTOSCROLL_DELAY = exports.AUTOSCROLL_DELAY = 0;
10
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["AUTOSCROLL_INCREMENT","exports","AUTOSCROLL_DELAY"],"sourceRoot":"../../../../src","sources":["components/ReorderableList/constants.ts"],"mappings":";;;;;;AAAA;AACO,MAAMA,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,CAAC;AAC9B,MAAME,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,GAAG,CAAC","ignoreList":[]}
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _ReorderableList = require("./ReorderableList");
7
+ Object.keys(_ReorderableList).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _ReorderableList[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _ReorderableList[key];
14
+ }
15
+ });
16
+ });
17
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_ReorderableList","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../../src","sources":["components/ReorderableList/index.ts"],"mappings":";;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,gBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,gBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,gBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}