react-native-reorderable-list 0.7.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -47
- package/lib/commonjs/components/ReorderableList.js +11 -13
- package/lib/commonjs/components/ReorderableList.js.map +1 -1
- package/lib/commonjs/components/ReorderableListCell.js +39 -29
- package/lib/commonjs/components/ReorderableListCell.js.map +1 -1
- package/lib/commonjs/components/ReorderableListCore/ReorderableListCore.js +10 -7
- package/lib/commonjs/components/ReorderableListCore/ReorderableListCore.js.map +1 -1
- package/lib/commonjs/components/ReorderableListCore/animationDefaults.js +34 -0
- package/lib/commonjs/components/ReorderableListCore/animationDefaults.js.map +1 -0
- package/lib/commonjs/components/ReorderableListCore/{constants.js → autoscrollConfig.js} +1 -1
- package/lib/commonjs/components/ReorderableListCore/autoscrollConfig.js.map +1 -0
- package/lib/commonjs/components/ReorderableListCore/useReorderableListCore.js +61 -32
- package/lib/commonjs/components/ReorderableListCore/useReorderableListCore.js.map +1 -1
- package/lib/commonjs/components/ScrollViewContainer.js +2 -2
- package/lib/commonjs/components/ScrollViewContainer.js.map +1 -1
- package/lib/commonjs/components/index.js +0 -11
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/contexts/ReorderableListContext.js.map +1 -1
- package/lib/commonjs/index.js +0 -6
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/misc.js +3 -3
- package/lib/module/components/ReorderableList.js +11 -13
- package/lib/module/components/ReorderableList.js.map +1 -1
- package/lib/module/components/ReorderableListCell.js +40 -30
- package/lib/module/components/ReorderableListCell.js.map +1 -1
- package/lib/module/components/ReorderableListCore/ReorderableListCore.js +9 -5
- package/lib/module/components/ReorderableListCore/ReorderableListCore.js.map +1 -1
- package/lib/module/components/ReorderableListCore/animationDefaults.js +28 -0
- package/lib/module/components/ReorderableListCore/animationDefaults.js.map +1 -0
- package/lib/module/components/ReorderableListCore/{constants.js → autoscrollConfig.js} +1 -1
- package/lib/module/components/ReorderableListCore/autoscrollConfig.js.map +1 -0
- package/lib/module/components/ReorderableListCore/useReorderableListCore.js +60 -31
- package/lib/module/components/ReorderableListCore/useReorderableListCore.js.map +1 -1
- package/lib/module/components/ScrollViewContainer.js +3 -3
- package/lib/module/components/ScrollViewContainer.js.map +1 -1
- package/lib/module/components/index.js +0 -1
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/contexts/ReorderableListContext.js.map +1 -1
- package/lib/module/index.js +2 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/misc.js +3 -3
- package/lib/typescript/components/ReorderableList.d.ts.map +1 -1
- package/lib/typescript/components/ReorderableListCell.d.ts +1 -1
- package/lib/typescript/components/ReorderableListCell.d.ts.map +1 -1
- package/lib/typescript/components/ReorderableListCore/ReorderableListCore.d.ts.map +1 -1
- package/lib/typescript/components/ReorderableListCore/animationDefaults.d.ts +13 -0
- package/lib/typescript/components/ReorderableListCore/animationDefaults.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableListCore/{constants.d.ts → autoscrollConfig.d.ts} +1 -1
- package/lib/typescript/components/ReorderableListCore/autoscrollConfig.d.ts.map +1 -0
- package/lib/typescript/components/ReorderableListCore/useReorderableListCore.d.ts +7 -4
- package/lib/typescript/components/ReorderableListCore/useReorderableListCore.d.ts.map +1 -1
- package/lib/typescript/components/ScrollViewContainer.d.ts.map +1 -1
- package/lib/typescript/components/index.d.ts +0 -1
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/contexts/ReorderableListContext.d.ts +2 -0
- package/lib/typescript/contexts/ReorderableListContext.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +3 -3
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/types/misc.d.ts +3 -3
- package/lib/typescript/types/misc.d.ts.map +1 -1
- package/lib/typescript/types/props.d.ts +25 -37
- package/lib/typescript/types/props.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/components/ReorderableList.tsx +14 -16
- package/src/components/ReorderableListCell.tsx +36 -32
- package/src/components/ReorderableListCore/ReorderableListCore.tsx +15 -4
- package/src/components/ReorderableListCore/animationDefaults.ts +35 -0
- package/src/components/ReorderableListCore/useReorderableListCore.ts +84 -37
- package/src/components/ScrollViewContainer.tsx +7 -3
- package/src/components/index.ts +0 -1
- package/src/contexts/ReorderableListContext.ts +2 -0
- package/src/index.ts +4 -6
- package/src/types/misc.ts +3 -3
- package/src/types/props.ts +26 -43
- package/lib/commonjs/components/ReorderableListCore/constants.js.map +0 -1
- package/lib/commonjs/components/ReorderableListItem.js +0 -87
- package/lib/commonjs/components/ReorderableListItem.js.map +0 -1
- package/lib/module/components/ReorderableListCore/constants.js.map +0 -1
- package/lib/module/components/ReorderableListItem.js +0 -78
- package/lib/module/components/ReorderableListItem.js.map +0 -1
- package/lib/typescript/components/ReorderableListCore/constants.d.ts.map +0 -1
- package/lib/typescript/components/ReorderableListItem.d.ts +0 -4
- package/lib/typescript/components/ReorderableListItem.d.ts.map +0 -1
- package/src/components/ReorderableListItem.tsx +0 -108
- /package/src/components/ReorderableListCore/{constants.ts → autoscrollConfig.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-

|
|
2
|
-

|
|
3
|
-

|
|
1
|
+
[](https://www.npmjs.com/package/react-native-reorderable-list)
|
|
2
|
+
[](https://github.com/omahili/react-native-reorderable-list?tab=MIT-1-ov-file#readme)
|
|
3
|
+
[](https://www.npmjs.com/package/react-native-reorderable-list?activeTab=versions)
|
|
4
4
|
<br />
|
|
5
5
|

|
|
6
6
|

|
|
@@ -17,7 +17,6 @@ A reorderable list for React Native applications, powered by Reanimated 🚀
|
|
|
17
17
|
- [Install](#install)
|
|
18
18
|
- [Components](#components)
|
|
19
19
|
- [ReorderableList](#reorderablelist)
|
|
20
|
-
- [ReorderableListItem](#reorderablelistitem)
|
|
21
20
|
- [ScrollViewContainer](#scrollviewcontainer)
|
|
22
21
|
- [NestedReorderableList](#nestedreorderablelist)
|
|
23
22
|
- [Hooks](#hooks)
|
|
@@ -30,6 +29,8 @@ A reorderable list for React Native applications, powered by Reanimated 🚀
|
|
|
30
29
|
|
|
31
30
|
## Install
|
|
32
31
|
|
|
32
|
+
> **NOTE**: This package follows [semantic versioning](https://semver.org/). Versions 0.X.0 are safe to use but may introduce breaking changes, as the public API is not considered stable yet.
|
|
33
|
+
|
|
33
34
|
Npm:
|
|
34
35
|
|
|
35
36
|
```bash
|
|
@@ -44,8 +45,8 @@ yarn add react-native-reorderable-list
|
|
|
44
45
|
|
|
45
46
|
Then you need to install these two peer dependencies:
|
|
46
47
|
|
|
47
|
-
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated) >=3.
|
|
48
|
-
- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler) >=2.
|
|
48
|
+
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated) >=3.12.0
|
|
49
|
+
- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler) >=2.12.0
|
|
49
50
|
|
|
50
51
|
## Components
|
|
51
52
|
|
|
@@ -53,16 +54,18 @@ Then you need to install these two peer dependencies:
|
|
|
53
54
|
|
|
54
55
|
This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it extends its props:
|
|
55
56
|
|
|
56
|
-
| Props | Type
|
|
57
|
-
| -------------------- |
|
|
58
|
-
| autoscrollThreshold | `number`
|
|
59
|
-
| autoscrollSpeedScale | `number`
|
|
60
|
-
| autoscrollDelay | `number`
|
|
61
|
-
| dragReorderThreshold | `number`
|
|
62
|
-
| animationDuration | `number`
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
57
|
+
| Props | Type | Required | Default | Description |
|
|
58
|
+
| -------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
59
|
+
| 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`. |
|
|
60
|
+
| autoscrollSpeedScale | `number` | No | `1` | Scales the autoscroll speed at which the list scrolls when an item is dragged to the scroll areas. |
|
|
61
|
+
| 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. |
|
|
62
|
+
| 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). |
|
|
63
|
+
| 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. |
|
|
64
|
+
| cellAnimations | `{ scale: SharedValue<number> \| false, opacity: SharedValue<number> \| false }` | No | N/A | Allows passing an object with shared values that can animate a cell by using the `onDragStart` and `onDragEnd` events. Set the property in the object to false to disable the animation. Check the [examples](https://github.com/omahili/react-native-reorderable-list/tree/master/example) for more details. |
|
|
65
|
+
| onReorder | `(event: { from: number, to: number }) => void` | Yes | N/A | Event fired after an item is released and the list is reordered. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info. |
|
|
66
|
+
| onDragStart | `(event: { index: number }) => void` | No | N/A | Event fired when an item is dragged. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info. |
|
|
67
|
+
| onDragEnd | `(event: { from: number, to: number }) => void` | No | N/A | Event fired when the dragged item is released. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info. |
|
|
68
|
+
| onScroll | `ReturnType<typeof useAnimatedScrollHandler>` | No | N/A | An animated scroll handler created with useAnimatedScrollHandler. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info. |
|
|
66
69
|
|
|
67
70
|
The following props from FlatList are not supported:
|
|
68
71
|
|
|
@@ -72,22 +75,13 @@ The following props from FlatList are not supported:
|
|
|
72
75
|
- CellRendererComponent
|
|
73
76
|
- numColumns
|
|
74
77
|
|
|
75
|
-
### ReorderableListItem
|
|
76
|
-
|
|
77
|
-
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.
|
|
78
|
-
|
|
79
|
-
| Props | Type | Required | Default | Description |
|
|
80
|
-
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
|
|
81
|
-
| 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. |
|
|
82
|
-
| 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. |
|
|
83
|
-
|
|
84
78
|
### ScrollViewContainer
|
|
85
79
|
|
|
86
80
|
This component extends the [ScrollView](https://reactnative.dev/docs/scrollview) component and is used for nesting a [NestedReorderableList](#nestedreorderablelist) within a scrollable container:
|
|
87
81
|
|
|
88
|
-
| Props | Type
|
|
89
|
-
| -------- |
|
|
90
|
-
| onScroll | `
|
|
82
|
+
| Props | Type | Required | Default | Description |
|
|
83
|
+
| -------- | --------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
84
|
+
| onScroll | `ReturnType<typeof useAnimatedScrollHandler>` | No | N/A | An animated scroll handler created with useAnimatedScrollHandler. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info. |
|
|
91
85
|
|
|
92
86
|
### NestedReorderableList
|
|
93
87
|
|
|
@@ -109,19 +103,35 @@ This hook creates a function that triggers the drag of a list item. It's usually
|
|
|
109
103
|
|
|
110
104
|
### useReorderableDragStart
|
|
111
105
|
|
|
112
|
-
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:
|
|
106
|
+
This hook allows handling the drag start event of a list item. This hook can only be used inside of a list item component. 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:
|
|
113
107
|
|
|
114
|
-
|
|
108
|
+
```typescript
|
|
109
|
+
useReorderableDragStart(
|
|
110
|
+
useCallback((index: number) => {
|
|
111
|
+
'worklet';
|
|
112
|
+
|
|
113
|
+
// ...
|
|
114
|
+
}, []),
|
|
115
|
+
);
|
|
116
|
+
```
|
|
115
117
|
|
|
116
|
-
|
|
118
|
+
Using this hook in large lists is discouraged due to performance bottlenecks, prefer `onDragStart` on the ReorderableList instead.
|
|
117
119
|
|
|
118
120
|
### useReorderableDragEnd
|
|
119
121
|
|
|
120
|
-
This hook allows handling the drag end event of a list item. It receives a worklet callback that is called when the drag
|
|
122
|
+
This hook allows handling the drag end event of a list item. This hook can only be used inside of a list item component. 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:
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
useReorderableDragEnd(
|
|
126
|
+
useCallback((from: number, to: number) => {
|
|
127
|
+
'worklet';
|
|
121
128
|
|
|
122
|
-
|
|
129
|
+
// ...
|
|
130
|
+
}, []),
|
|
131
|
+
);
|
|
132
|
+
```
|
|
123
133
|
|
|
124
|
-
|
|
134
|
+
Using this hook in large lists is discouraged due to performance bottlenecks, prefer `onDragEnd` on the ReorderableList instead.
|
|
125
135
|
|
|
126
136
|
## Utils
|
|
127
137
|
|
|
@@ -134,10 +144,9 @@ This hook allows handling the drag end event of a list item. It receives a workl
|
|
|
134
144
|
Here is simple example of how to use this component. Examples of nested lists and much more can be found in the [example](https://github.com/omahili/react-native-reorderable-list/tree/feat/nested-lists/example) directory.
|
|
135
145
|
|
|
136
146
|
```typescript
|
|
137
|
-
import React, {useState} from 'react';
|
|
147
|
+
import React, {memo, useState} from 'react';
|
|
138
148
|
import {ListRenderItemInfo, Pressable, StyleSheet, Text} from 'react-native';
|
|
139
149
|
import ReorderableList, {
|
|
140
|
-
ReorderableListItem,
|
|
141
150
|
ReorderableListReorderEvent,
|
|
142
151
|
reorderItems,
|
|
143
152
|
useReorderableDrag,
|
|
@@ -162,30 +171,27 @@ const list: CardProps[] = [
|
|
|
162
171
|
{id: '9', color: 'seagreen', height: 90},
|
|
163
172
|
];
|
|
164
173
|
|
|
165
|
-
const Card: React.FC<CardProps> =
|
|
174
|
+
const Card: React.FC<CardProps> = memo(({id, color, height}) => {
|
|
166
175
|
const drag = useReorderableDrag();
|
|
167
176
|
|
|
168
177
|
return (
|
|
169
|
-
<
|
|
170
|
-
<
|
|
171
|
-
|
|
172
|
-
</Pressable>
|
|
173
|
-
</ReorderableListItem>
|
|
178
|
+
<Pressable style={[styles.card, {height}]} onLongPress={drag}>
|
|
179
|
+
<Text style={[styles.text, {color}]}>Card {id}</Text>
|
|
180
|
+
</Pressable>
|
|
174
181
|
);
|
|
175
182
|
});
|
|
176
183
|
|
|
177
184
|
const Example = () => {
|
|
178
185
|
const [data, setData] = useState(list);
|
|
179
186
|
|
|
187
|
+
const handleReorder = ({from, to}: ReorderableListReorderEvent) => {
|
|
188
|
+
setData(value => reorderItems(value, from, to));
|
|
189
|
+
};
|
|
190
|
+
|
|
180
191
|
const renderItem = ({item}: ListRenderItemInfo<CardProps>) => (
|
|
181
192
|
<Card {...item} />
|
|
182
193
|
);
|
|
183
194
|
|
|
184
|
-
const handleReorder = ({from, to}: ReorderableListReorderEvent) => {
|
|
185
|
-
const newData = reorderItems(data, from, to);
|
|
186
|
-
setData(newData);
|
|
187
|
-
};
|
|
188
|
-
|
|
189
195
|
return (
|
|
190
196
|
<ReorderableList
|
|
191
197
|
data={data}
|
|
@@ -12,18 +12,16 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
12
12
|
const ReorderableListWithRef = ({
|
|
13
13
|
scrollEnabled = true,
|
|
14
14
|
...rest
|
|
15
|
-
}, ref) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}));
|
|
27
|
-
};
|
|
15
|
+
}, ref) => /*#__PURE__*/_react.default.createElement(_ReorderableListCore.ReorderableListCore, _extends({}, rest, {
|
|
16
|
+
ref: ref,
|
|
17
|
+
scrollEnabled: scrollEnabled,
|
|
18
|
+
initialScrollViewScrollEnabled: true,
|
|
19
|
+
scrollable: true,
|
|
20
|
+
scrollViewContainerRef: undefined,
|
|
21
|
+
scrollViewScrollOffsetY: undefined,
|
|
22
|
+
scrollViewHeightY: undefined,
|
|
23
|
+
outerScrollGesture: undefined,
|
|
24
|
+
scrollViewScrollEnabled: undefined
|
|
25
|
+
}));
|
|
28
26
|
const ReorderableList = exports.ReorderableList = /*#__PURE__*/(0, _react.forwardRef)(ReorderableListWithRef);
|
|
29
27
|
//# sourceMappingURL=ReorderableList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_ReorderableListCore","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","ReorderableListWithRef","scrollEnabled","rest","ref","createElement","ReorderableListCore","initialScrollViewScrollEnabled","scrollable","scrollViewContainerRef","undefined","scrollViewScrollOffsetY","scrollViewHeightY","outerScrollGesture","scrollViewScrollEnabled","ReorderableList","exports","forwardRef"],"sourceRoot":"../../../src","sources":["components/ReorderableList.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,oBAAA,GAAAD,OAAA;AAA0D,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,SAAA,WAAAA,QAAA,GAAAR,MAAA,CAAAS,MAAA,GAAAT,MAAA,CAAAS,MAAA,CAAAC,IAAA,eAAAb,CAAA,aAAAR,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAE,CAAA,IAAAC,CAAA,OAAAY,cAAA,CAAAC,IAAA,CAAAb,CAAA,EAAAD,CAAA,MAAAM,CAAA,CAAAN,CAAA,IAAAC,CAAA,CAAAD,CAAA,aAAAM,CAAA,KAAAW,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAG1D,MAAMG,sBAAsB,GAAGA,CAC7B;EAACC,aAAa,GAAG,IAAI;EAAE,GAAGC;AAA6B,CAAC,EACxDC,GAA2B,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_ReorderableListCore","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","ReorderableListWithRef","scrollEnabled","rest","ref","createElement","ReorderableListCore","initialScrollViewScrollEnabled","scrollable","scrollViewContainerRef","undefined","scrollViewScrollOffsetY","scrollViewHeightY","outerScrollGesture","scrollViewScrollEnabled","ReorderableList","exports","forwardRef"],"sourceRoot":"../../../src","sources":["components/ReorderableList.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,oBAAA,GAAAD,OAAA;AAA0D,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,SAAA,WAAAA,QAAA,GAAAR,MAAA,CAAAS,MAAA,GAAAT,MAAA,CAAAS,MAAA,CAAAC,IAAA,eAAAb,CAAA,aAAAR,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAE,CAAA,IAAAC,CAAA,OAAAY,cAAA,CAAAC,IAAA,CAAAb,CAAA,EAAAD,CAAA,MAAAM,CAAA,CAAAN,CAAA,IAAAC,CAAA,CAAAD,CAAA,aAAAM,CAAA,KAAAW,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAG1D,MAAMG,sBAAsB,GAAGA,CAC7B;EAACC,aAAa,GAAG,IAAI;EAAE,GAAGC;AAA6B,CAAC,EACxDC,GAA2B,kBAE3BjC,MAAA,CAAAU,OAAA,CAAAwB,aAAA,CAAC/B,oBAAA,CAAAgC,mBAAmB,EAAAX,QAAA,KACdQ,IAAI;EACRC,GAAG,EAAEA,GAAI;EACTF,aAAa,EAAEA,aAAc;EAC7BK,8BAA8B,EAAE,IAAK;EACrCC,UAAU,EAAE,IAAK;EACjBC,sBAAsB,EAAEC,SAAU;EAClCC,uBAAuB,EAAED,SAAU;EACnCE,iBAAiB,EAAEF,SAAU;EAC7BG,kBAAkB,EAAEH,SAAU;EAC9BI,uBAAuB,EAAEJ;AAAU,EACpC,CACF;AAEM,MAAMK,eAAe,GAAAC,OAAA,CAAAD,eAAA,gBAAG,IAAAE,iBAAU,EAAChB,sBAAsB,CAEhD","ignoreList":[]}
|
|
@@ -21,57 +21,67 @@ const ReorderableListCell = exports.ReorderableListCell = /*#__PURE__*/(0, _reac
|
|
|
21
21
|
draggedIndex,
|
|
22
22
|
animationDuration
|
|
23
23
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
const {
|
|
25
|
+
currentIndex,
|
|
26
|
+
draggedHeight,
|
|
27
|
+
scale,
|
|
28
|
+
opacity
|
|
29
|
+
} = (0, _hooks.useContext)(_contexts.ReorderableListContext);
|
|
30
|
+
const dragHandler = (0, _react.useCallback)(() => (0, _reactNativeReanimated.runOnUI)(startDrag)(index), [startDrag, index]);
|
|
29
31
|
const contextValue = (0, _react.useMemo)(() => ({
|
|
30
32
|
index,
|
|
31
33
|
dragHandler,
|
|
32
34
|
draggedIndex
|
|
33
35
|
}), [index, dragHandler, draggedIndex]);
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const itemDragY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
41
|
-
const itemIndex = (0, _reactNativeReanimated.useSharedValue)(index);
|
|
36
|
+
|
|
37
|
+
// Keep separate animated reactions that update itemTranslateY
|
|
38
|
+
// otherwise animations might stutter if multiple are triggered
|
|
39
|
+
// (even in other cells, e.g. released item and reordering cells)
|
|
40
|
+
const itemTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
41
|
+
const isActive = (0, _reactNativeReanimated.useDerivedValue)(() => draggedIndex.value === index);
|
|
42
42
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => dragY.value, () => {
|
|
43
|
-
if (
|
|
44
|
-
|
|
43
|
+
if (index === draggedIndex.value && currentIndex.value >= 0 && draggedIndex.value >= 0) {
|
|
44
|
+
itemTranslateY.value = dragY.value;
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
47
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => currentIndex.value, () => {
|
|
48
|
-
if (
|
|
48
|
+
if (index !== draggedIndex.value && currentIndex.value >= 0 && draggedIndex.value >= 0) {
|
|
49
49
|
const moveDown = currentIndex.value > draggedIndex.value;
|
|
50
50
|
const startMove = Math.min(draggedIndex.value, currentIndex.value);
|
|
51
51
|
const endMove = Math.max(draggedIndex.value, currentIndex.value);
|
|
52
52
|
let newValue = 0;
|
|
53
|
-
if (
|
|
53
|
+
if (index >= startMove && index <= endMove) {
|
|
54
54
|
newValue = moveDown ? -draggedHeight.value : draggedHeight.value;
|
|
55
55
|
}
|
|
56
|
-
if (newValue !==
|
|
57
|
-
|
|
56
|
+
if (newValue !== itemTranslateY.value) {
|
|
57
|
+
itemTranslateY.value = (0, _reactNativeReanimated.withTiming)(newValue, {
|
|
58
58
|
duration: animationDuration.value,
|
|
59
59
|
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
|
|
60
60
|
});
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
|
-
(0, _reactNativeReanimated.
|
|
65
|
-
|
|
64
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
65
|
+
if (isActive.value) {
|
|
66
|
+
return {
|
|
67
|
+
transform: [{
|
|
68
|
+
translateY: itemTranslateY.value
|
|
69
|
+
}, {
|
|
70
|
+
scale: scale.value
|
|
71
|
+
}],
|
|
72
|
+
opacity: opacity.value,
|
|
73
|
+
zIndex: 999
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
return {
|
|
77
|
+
transform: [{
|
|
78
|
+
translateY: itemTranslateY.value
|
|
79
|
+
}],
|
|
80
|
+
// TODO: move to stylesheet when this is fixed
|
|
81
|
+
// https://github.com/software-mansion/react-native-reanimated/issues/6681#issuecomment-2514228447
|
|
82
|
+
zIndex: 0
|
|
83
|
+
};
|
|
66
84
|
});
|
|
67
|
-
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
68
|
-
zIndex: itemZIndex.value,
|
|
69
|
-
transform: [{
|
|
70
|
-
translateY: itemDragY.value
|
|
71
|
-
}, {
|
|
72
|
-
translateY: itemPositionY.value
|
|
73
|
-
}]
|
|
74
|
-
}));
|
|
75
85
|
const handleLayout = e => {
|
|
76
86
|
(0, _reactNativeReanimated.runOnUI)((y, height) => {
|
|
77
87
|
itemOffset.value[index] = y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_contexts","_hooks","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReorderableListCell","exports","memo","index","startDrag","children","onLayout","itemOffset","itemHeight","dragY","draggedIndex","animationDuration","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_contexts","_hooks","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReorderableListCell","exports","memo","index","startDrag","children","onLayout","itemOffset","itemHeight","dragY","draggedIndex","animationDuration","currentIndex","draggedHeight","scale","opacity","useContext","ReorderableListContext","dragHandler","useCallback","runOnUI","contextValue","useMemo","itemTranslateY","useSharedValue","isActive","useDerivedValue","value","useAnimatedReaction","moveDown","startMove","Math","min","endMove","max","newValue","withTiming","duration","easing","Easing","out","ease","animatedStyle","useAnimatedStyle","transform","translateY","zIndex","handleLayout","y","height","nativeEvent","layout","createElement","ReorderableCellContext","Provider","View","style"],"sourceRoot":"../../../src","sources":["components/ReorderableListCell.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,12 +7,11 @@ exports.ReorderableListCore = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _reactNativeGestureHandler = require("react-native-gesture-handler");
|
|
10
|
-
var _reactNativeReanimated =
|
|
11
|
-
var
|
|
10
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
11
|
+
var _autoscrollConfig = require("./autoscrollConfig");
|
|
12
12
|
var _useReorderableListCore = require("./useReorderableListCore");
|
|
13
13
|
var _contexts = require("../../contexts");
|
|
14
14
|
var _ReorderableListCell = require("../ReorderableListCell");
|
|
15
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
15
|
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
16
|
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
17
|
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); }
|
|
@@ -21,12 +20,13 @@ const ReorderableListCore = ({
|
|
|
21
20
|
data,
|
|
22
21
|
autoscrollThreshold = 0.1,
|
|
23
22
|
autoscrollSpeedScale = 1,
|
|
24
|
-
autoscrollDelay =
|
|
23
|
+
autoscrollDelay = _autoscrollConfig.AUTOSCROLL_CONFIG.delay,
|
|
25
24
|
animationDuration = 200,
|
|
26
25
|
dragReorderThreshold = 0.2,
|
|
27
26
|
onLayout,
|
|
28
27
|
onReorder,
|
|
29
28
|
onScroll,
|
|
29
|
+
onDragStart,
|
|
30
30
|
onDragEnd,
|
|
31
31
|
keyExtractor,
|
|
32
32
|
extraData,
|
|
@@ -38,6 +38,7 @@ const ReorderableListCore = ({
|
|
|
38
38
|
initialScrollViewScrollEnabled,
|
|
39
39
|
scrollable,
|
|
40
40
|
outerScrollGesture,
|
|
41
|
+
cellAnimations,
|
|
41
42
|
...rest
|
|
42
43
|
}, ref) => {
|
|
43
44
|
const {
|
|
@@ -61,7 +62,7 @@ const ReorderableListCore = ({
|
|
|
61
62
|
dragReorderThreshold,
|
|
62
63
|
onLayout,
|
|
63
64
|
onReorder,
|
|
64
|
-
|
|
65
|
+
onDragStart,
|
|
65
66
|
onDragEnd,
|
|
66
67
|
scrollViewContainerRef,
|
|
67
68
|
scrollViewHeightY,
|
|
@@ -71,7 +72,8 @@ const ReorderableListCore = ({
|
|
|
71
72
|
// but internally we would treat it as false, so we force true
|
|
72
73
|
initialScrollEnabled: typeof scrollEnabled === 'undefined' ? true : scrollEnabled,
|
|
73
74
|
initialScrollViewScrollEnabled: typeof initialScrollViewScrollEnabled === 'undefined' ? true : initialScrollViewScrollEnabled,
|
|
74
|
-
nestedScrollable: scrollable
|
|
75
|
+
nestedScrollable: scrollable,
|
|
76
|
+
cellAnimations
|
|
75
77
|
});
|
|
76
78
|
const combinedGesture = (0, _react.useMemo)(() => {
|
|
77
79
|
// android is able to handle nested scroll view, but not the full height ones like iOS
|
|
@@ -80,6 +82,7 @@ const ReorderableListCore = ({
|
|
|
80
82
|
}
|
|
81
83
|
return gestureHandler;
|
|
82
84
|
}, [scrollable, outerScrollGesture, gestureHandler]);
|
|
85
|
+
const composedScrollHandler = (0, _reactNativeReanimated.useComposedEventHandler)([handleScroll, onScroll || null]);
|
|
83
86
|
const renderAnimatedCell = (0, _react.useCallback)(({
|
|
84
87
|
cellKey,
|
|
85
88
|
...props
|
|
@@ -102,7 +105,7 @@ const ReorderableListCore = ({
|
|
|
102
105
|
data: data,
|
|
103
106
|
CellRendererComponent: renderAnimatedCell,
|
|
104
107
|
onLayout: handleFlatListLayout,
|
|
105
|
-
onScroll:
|
|
108
|
+
onScroll: composedScrollHandler,
|
|
106
109
|
scrollEventThrottle: 1,
|
|
107
110
|
horizontal: false,
|
|
108
111
|
removeClippedSubviews: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_autoscrollConfig","_useReorderableListCore","_contexts","_ReorderableListCell","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AnimatedFlatList","Animated","createAnimatedComponent","FlatList","ReorderableListCore","data","autoscrollThreshold","autoscrollSpeedScale","autoscrollDelay","AUTOSCROLL_CONFIG","delay","animationDuration","dragReorderThreshold","onLayout","onReorder","onScroll","onDragStart","onDragEnd","keyExtractor","extraData","scrollViewContainerRef","scrollViewHeightY","scrollViewScrollOffsetY","scrollViewScrollEnabled","scrollEnabled","initialScrollViewScrollEnabled","scrollable","outerScrollGesture","cellAnimations","rest","ref","gestureHandler","handleScroll","handleFlatListLayout","handleRef","startDrag","listContextValue","itemOffset","itemHeight","dragY","draggedIndex","duration","useReorderableListCore","initialScrollEnabled","nestedScrollable","combinedGesture","useMemo","Platform","OS","Gesture","Simultaneous","composedScrollHandler","useComposedEventHandler","renderAnimatedCell","useCallback","cellKey","props","createElement","ReorderableListCell","key","index","ReorderableListContext","Provider","value","GestureDetector","gesture","CellRendererComponent","scrollEventThrottle","horizontal","removeClippedSubviews","numColumns","MemoizedReorderableListCore","exports","React","memo","forwardRef"],"sourceRoot":"../../../../src","sources":["components/ReorderableListCore/ReorderableListCore.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SCALE_ANIMATION_CONFIG_DEFAULT = exports.OPACITY_ANIMATION_CONFIG_DEFAULT = void 0;
|
|
7
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
8
|
+
const DURATION_START = 150;
|
|
9
|
+
const DURATION_END = 200;
|
|
10
|
+
const SCALE_ANIMATION_CONFIG_DEFAULT = exports.SCALE_ANIMATION_CONFIG_DEFAULT = {
|
|
11
|
+
start: {
|
|
12
|
+
toValue: 1.025,
|
|
13
|
+
easing: _reactNativeReanimated.Easing.in(_reactNativeReanimated.Easing.ease),
|
|
14
|
+
duration: DURATION_START
|
|
15
|
+
},
|
|
16
|
+
end: {
|
|
17
|
+
toValue: 1,
|
|
18
|
+
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease),
|
|
19
|
+
duration: DURATION_END
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
const OPACITY_ANIMATION_CONFIG_DEFAULT = exports.OPACITY_ANIMATION_CONFIG_DEFAULT = {
|
|
23
|
+
start: {
|
|
24
|
+
toValue: 0.75,
|
|
25
|
+
easing: _reactNativeReanimated.Easing.in(_reactNativeReanimated.Easing.ease),
|
|
26
|
+
duration: DURATION_START
|
|
27
|
+
},
|
|
28
|
+
end: {
|
|
29
|
+
toValue: 1,
|
|
30
|
+
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease),
|
|
31
|
+
duration: DURATION_END
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=animationDefaults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNativeReanimated","require","DURATION_START","DURATION_END","SCALE_ANIMATION_CONFIG_DEFAULT","exports","start","toValue","easing","Easing","in","ease","duration","end","out","OPACITY_ANIMATION_CONFIG_DEFAULT"],"sourceRoot":"../../../../src","sources":["components/ReorderableListCore/animationDefaults.ts"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAEA,MAAMC,cAAc,GAAG,GAAG;AAC1B,MAAMC,YAAY,GAAG,GAAG;AAOjB,MAAMC,8BAA+C,GAAAC,OAAA,CAAAD,8BAAA,GAAG;EAC7DE,KAAK,EAAE;IACLC,OAAO,EAAE,KAAK;IACdC,MAAM,EAAEC,6BAAM,CAACC,EAAE,CAACD,6BAAM,CAACE,IAAI,CAAC;IAC9BC,QAAQ,EAAEV;EACZ,CAAC;EACDW,GAAG,EAAE;IACHN,OAAO,EAAE,CAAC;IACVC,MAAM,EAAEC,6BAAM,CAACK,GAAG,CAACL,6BAAM,CAACE,IAAI,CAAC;IAC/BC,QAAQ,EAAET;EACZ;AACF,CAAC;AAEM,MAAMY,gCAAiD,GAAAV,OAAA,CAAAU,gCAAA,GAAG;EAC/DT,KAAK,EAAE;IACLC,OAAO,EAAE,IAAI;IACbC,MAAM,EAAEC,6BAAM,CAACC,EAAE,CAACD,6BAAM,CAACE,IAAI,CAAC;IAC9BC,QAAQ,EAAEV;EACZ,CAAC;EACDW,GAAG,EAAE;IACHN,OAAO,EAAE,CAAC;IACVC,MAAM,EAAEC,6BAAM,CAACK,GAAG,CAACL,6BAAM,CAACE,IAAI,CAAC;IAC/BC,QAAQ,EAAET;EACZ;AACF,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNative","require","IOS_CONFIG","delay","increment","ANDROID_FABRIC_CONFIG","ANDROID_PAPER_CONFIG","IS_FABRIC","exports","global","AUTOSCROLL_CONFIG","Platform","select","android","ios","web","macos","windows","native"],"sourceRoot":"../../../../src","sources":["components/ReorderableListCore/autoscrollConfig.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,MAAMC,UAAU,GAAG;EACjBC,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAED,MAAMC,qBAAqB,GAAG;EAC5BF,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAED,MAAME,oBAAoB,GAAG;EAC3BH,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAEM,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GACpBE,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,uBAAuB,IAAIA,MAAM;AAEpE,MAAMC,iBAAiB,GAAAF,OAAA,CAAAE,iBAAA,GAAGC,qBAAQ,CAACC,MAAM,CAAC;EAC/C;EACAC,OAAO,EAAEN,SAAS,GAAGF,qBAAqB,GAAGC,oBAAoB;EACjEQ,GAAG,EAAEZ,UAAU;EAEf;EACAa,GAAG,EAAEb,UAAU;EACfc,KAAK,EAAEd,UAAU;EACjBe,OAAO,EAAEf,UAAU;EACnBgB,MAAM,EAAEhB;AACV,CAAC,CAAC","ignoreList":[]}
|