react-native-reorderable-list 0.15.0 → 0.16.1
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 +1 -0
- package/lib/commonjs/components/NestedReorderableList.js +3 -3
- package/lib/commonjs/components/NestedReorderableList.js.map +1 -1
- package/lib/commonjs/components/ReorderableList.js +1 -1
- package/lib/commonjs/components/ReorderableList.js.map +1 -1
- package/lib/commonjs/components/ReorderableListCell.js +4 -2
- package/lib/commonjs/components/ReorderableListCell.js.map +1 -1
- package/lib/commonjs/components/ReorderableListCore.js +101 -30
- package/lib/commonjs/components/ReorderableListCore.js.map +1 -1
- package/lib/commonjs/components/ScrollViewContainer.js +7 -4
- package/lib/commonjs/components/ScrollViewContainer.js.map +1 -1
- package/lib/commonjs/contexts/ReorderableListContext.js.map +1 -1
- package/lib/commonjs/contexts/ScrollViewContainerContext.js.map +1 -1
- package/lib/commonjs/hooks/index.js +11 -0
- package/lib/commonjs/hooks/index.js.map +1 -1
- package/lib/commonjs/hooks/useStableCallback.js +21 -0
- package/lib/commonjs/hooks/useStableCallback.js.map +1 -0
- package/lib/commonjs/types/misc.js.map +1 -1
- package/lib/module/components/NestedReorderableList.js +3 -3
- package/lib/module/components/NestedReorderableList.js.map +1 -1
- package/lib/module/components/ReorderableList.js +1 -1
- package/lib/module/components/ReorderableList.js.map +1 -1
- package/lib/module/components/ReorderableListCell.js +4 -2
- package/lib/module/components/ReorderableListCell.js.map +1 -1
- package/lib/module/components/ReorderableListCore.js +103 -32
- package/lib/module/components/ReorderableListCore.js.map +1 -1
- package/lib/module/components/ScrollViewContainer.js +8 -5
- package/lib/module/components/ScrollViewContainer.js.map +1 -1
- package/lib/module/contexts/ReorderableListContext.js.map +1 -1
- package/lib/module/contexts/ScrollViewContainerContext.js.map +1 -1
- package/lib/module/hooks/index.js +1 -0
- package/lib/module/hooks/index.js.map +1 -1
- package/lib/module/hooks/useStableCallback.js +15 -0
- package/lib/module/hooks/useStableCallback.js.map +1 -0
- package/lib/module/types/misc.js.map +1 -1
- package/lib/typescript/components/ReorderableListCell.d.ts.map +1 -1
- package/lib/typescript/components/ReorderableListCore.d.ts +3 -3
- package/lib/typescript/components/ReorderableListCore.d.ts.map +1 -1
- package/lib/typescript/components/ScrollViewContainer.d.ts.map +1 -1
- package/lib/typescript/contexts/ReorderableListContext.d.ts +2 -1
- package/lib/typescript/contexts/ReorderableListContext.d.ts.map +1 -1
- package/lib/typescript/contexts/ScrollViewContainerContext.d.ts +2 -2
- package/lib/typescript/contexts/ScrollViewContainerContext.d.ts.map +1 -1
- package/lib/typescript/hooks/index.d.ts +1 -0
- package/lib/typescript/hooks/index.d.ts.map +1 -1
- package/lib/typescript/hooks/useStableCallback.d.ts +4 -0
- package/lib/typescript/hooks/useStableCallback.d.ts.map +1 -0
- package/lib/typescript/types/misc.d.ts +3 -1
- package/lib/typescript/types/misc.d.ts.map +1 -1
- package/lib/typescript/types/props.d.ts +5 -1
- package/lib/typescript/types/props.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/NestedReorderableList.tsx +2 -2
- package/src/components/ReorderableList.tsx +1 -1
- package/src/components/ReorderableListCell.tsx +12 -3
- package/src/components/ReorderableListCore.tsx +124 -42
- package/src/components/ScrollViewContainer.tsx +7 -4
- package/src/contexts/ReorderableListContext.ts +2 -1
- package/src/contexts/ScrollViewContainerContext.ts +2 -2
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useStableCallback.ts +16 -0
- package/src/types/misc.ts +8 -1
- package/src/types/props.ts +5 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useCallback","useMemo","Gesture","GestureDetector","Animated","measure","runOnUI","useAnimatedRef","useAnimatedScrollHandler","useComposedEventHandler","useSharedValue","ScrollViewContainerContext","usePropAsSharedValue","ScrollViewContainerWithRef","onLayout","onScroll","rest","ref","scrollEnabled","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useMemo","useState","Gesture","GestureDetector","Animated","measure","runOnUI","useAnimatedRef","useAnimatedScrollHandler","useComposedEventHandler","useSharedValue","ScrollViewContainerContext","usePropAsSharedValue","ScrollViewContainerWithRef","onLayout","onScroll","rest","ref","scrollEnabled","scrollViewForceDisableScroll","setScrollViewForceDisableScroll","scrollViewScrollEnabledProp","scrollViewContainerRef","scrollViewScrollOffsetY","scrollViewPageY","scrollViewHeightY","handleRef","value","current","outerScrollGesture","Native","handleScroll","e","contentOffset","y","composedScrollHandler","contextValue","handleLayout","nativeEvent","layout","height","measurement","pageY","createElement","Provider","gesture","ScrollView","_extends","ScrollViewContainer"],"sourceRoot":"../../../src","sources":["components/ScrollViewContainer.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ReorderableListContext","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ReorderableListContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;
|
|
1
|
+
{"version":3,"names":["React","ReorderableListContext","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ReorderableListContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAezB,OAAO,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAa,CAEvDC,SAAS,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ScrollViewContainerContext","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ScrollViewContainerContext.ts"],"mappings":"AAAA,OAAOA,KAAK,
|
|
1
|
+
{"version":3,"names":["React","ScrollViewContainerContext","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ScrollViewContainerContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAkC,OAAO;AAgBrD,OAAO,MAAMC,0BAA0B,gBAAGD,KAAK,CAACE,aAAa,CAE3DC,SAAS,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,wBAAwB;AACtC,cAAc,eAAe;AAC7B,cAAc,sBAAsB;AACpC,cAAc,yBAAyB;AACvC,cAAc,2BAA2B","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,wBAAwB;AACtC,cAAc,eAAe;AAC7B,cAAc,sBAAsB;AACpC,cAAc,yBAAyB;AACvC,cAAc,2BAA2B;AACzC,cAAc,qBAAqB","ignoreList":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useCallback, useLayoutEffect, useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4
|
+
|
|
5
|
+
export const useStableCallback = value => {
|
|
6
|
+
const callback = useRef(value);
|
|
7
|
+
useLayoutEffect(() => {
|
|
8
|
+
callback.current = value;
|
|
9
|
+
});
|
|
10
|
+
return useCallback((...args) => {
|
|
11
|
+
var _callback$current;
|
|
12
|
+
return (_callback$current = callback.current) === null || _callback$current === void 0 ? void 0 : _callback$current.call(callback, ...args);
|
|
13
|
+
}, []);
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=useStableCallback.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useLayoutEffect","useRef","useStableCallback","value","callback","current","args","_callback$current","call"],"sourceRoot":"../../../src","sources":["hooks/useStableCallback.ts"],"mappings":"AAAA,SAAQA,WAAW,EAAEC,eAAe,EAAEC,MAAM,QAAO,OAAO;;AAE1D;;AAGA,OAAO,MAAMC,iBAAiB,GAAkBC,KAAQ,IAAK;EAC3D,MAAMC,QAAQ,GAAGH,MAAM,CAAIE,KAAK,CAAC;EAEjCH,eAAe,CAAC,MAAM;IACpBI,QAAQ,CAACC,OAAO,GAAGF,KAAK;EAC1B,CAAC,CAAC;EAEF,OAAOJ,WAAW,CAAC,CAAC,GAAGO,IAAmB,KAAoB;IAAA,IAAAC,iBAAA;IAC5D,QAAAA,iBAAA,GAAOH,QAAQ,CAACC,OAAO,cAAAE,iBAAA,uBAAhBA,iBAAA,CAAAC,IAAA,CAAAJ,QAAQ,EAAW,GAAGE,IAAI,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;AACR,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ReorderableListState"],"sourceRoot":"../../../src","sources":["types/misc.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["ReorderableListState"],"sourceRoot":"../../../src","sources":["types/misc.ts"],"mappings":"AAIA,WAAYA,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReorderableListCell.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAoB,MAAM,cAAc,CAAC;AAElE,OAAiB,EAEf,WAAW,EAOZ,MAAM,yBAAyB,CAAC;AAMjC,UAAU,wBAAwB,CAAC,CAAC,CAClC,SAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IAClC,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IAClC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB,+
|
|
1
|
+
{"version":3,"file":"ReorderableListCell.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAoB,MAAM,cAAc,CAAC;AAElE,OAAiB,EAEf,WAAW,EAOZ,MAAM,yBAAyB,CAAC;AAMjC,UAAU,wBAAwB,CAAC,CAAC,CAClC,SAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IAClC,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IAClC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB,+LAkI/B,CAAC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { Dispatch, RefObject, SetStateAction } from 'react';
|
|
2
2
|
import { FlatList, ScrollView } from 'react-native';
|
|
3
3
|
import { NativeGesture } from 'react-native-gesture-handler';
|
|
4
4
|
import { SharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { ReorderableListProps } from '../types';
|
|
6
6
|
interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
|
|
7
|
-
scrollViewContainerRef:
|
|
7
|
+
scrollViewContainerRef: RefObject<ScrollView> | undefined;
|
|
8
8
|
scrollViewPageY: SharedValue<number> | undefined;
|
|
9
9
|
scrollViewHeightY: SharedValue<number> | undefined;
|
|
10
10
|
scrollViewScrollOffsetY: SharedValue<number> | undefined;
|
|
11
11
|
scrollViewScrollEnabledProp: SharedValue<boolean> | undefined;
|
|
12
|
-
|
|
12
|
+
setScrollViewForceDisableScroll: Dispatch<SetStateAction<boolean>> | undefined;
|
|
13
13
|
outerScrollGesture: NativeGesture | undefined;
|
|
14
14
|
scrollable: boolean | undefined;
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReorderableListCore.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableListCore.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ReorderableListCore.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableListCore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,QAAQ,EAKR,UAAU,EACX,MAAM,cAAc,CAAC;AAEtB,OAAO,EAIL,aAAa,EAGd,MAAM,8BAA8B,CAAC;AACtC,OAAiB,EAGf,WAAW,EAaZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAC,oBAAoB,EAAuB,MAAM,UAAU,CAAC;AAepE,UAAU,wBAAwB,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAEnE,sBAAsB,EAAE,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAC1D,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACnD,uBAAuB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACzD,2BAA2B,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC9D,+BAA+B,EAC3B,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GACjC,SAAS,CAAC;IACd,kBAAkB,EAAE,aAAa,GAAG,SAAS,CAAC;IAC9C,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC;AA4+BD,QAAA,MAAM,2BAA2B;;MAM5B,MAAM,YAAY,CAAC;AAExB,OAAO,EAAC,2BAA2B,IAAI,mBAAmB,EAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollViewContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollViewContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ScrollViewContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollViewContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAoB,UAAU,EAAC,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,UAAU,CAAC;AAmGvD,eAAO,MAAM,mBAAmB,6FAAyC,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SharedValue } from 'react-native-reanimated';
|
|
3
|
-
import { ReorderableListCellAnimations } from '../types';
|
|
3
|
+
import { ItemLayoutAnimation, ReorderableListCellAnimations } from '../types';
|
|
4
4
|
interface ReorderableListContextData {
|
|
5
5
|
currentIndex: SharedValue<number>;
|
|
6
6
|
draggedHeight: SharedValue<number>;
|
|
7
7
|
dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
|
|
8
8
|
activeIndex: number;
|
|
9
|
+
itemLayoutAnimation: React.MutableRefObject<ItemLayoutAnimation | undefined>;
|
|
9
10
|
cellAnimations: ReorderableListCellAnimations;
|
|
10
11
|
}
|
|
11
12
|
export declare const ReorderableListContext: React.Context<ReorderableListContextData | undefined>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReorderableListContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ReorderableListContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAC,6BAA6B,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ReorderableListContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ReorderableListContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAC,mBAAmB,EAAE,6BAA6B,EAAC,MAAM,UAAU,CAAC;AAE5E,UAAU,0BAA0B;IAClC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IACvE,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;IAC7E,cAAc,EAAE,6BAA6B,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,uDAEvB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
2
|
import { ScrollView } from 'react-native';
|
|
3
3
|
import { NativeGesture } from 'react-native-gesture-handler';
|
|
4
4
|
import { SharedValue } from 'react-native-reanimated';
|
|
@@ -8,8 +8,8 @@ interface ScrollViewContainerContextData {
|
|
|
8
8
|
scrollViewHeightY: SharedValue<number>;
|
|
9
9
|
scrollViewScrollOffsetY: SharedValue<number>;
|
|
10
10
|
scrollViewScrollEnabledProp: SharedValue<boolean>;
|
|
11
|
-
scrollViewCurrentScrollEnabled: SharedValue<boolean>;
|
|
12
11
|
outerScrollGesture: NativeGesture;
|
|
12
|
+
setScrollViewForceDisableScroll: Dispatch<SetStateAction<boolean>>;
|
|
13
13
|
}
|
|
14
14
|
export declare const ScrollViewContainerContext: React.Context<ScrollViewContainerContextData | undefined>;
|
|
15
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollViewContainerContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ScrollViewContainerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollViewContainerContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ScrollViewContainerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AACtD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,aAAa,EAAC,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAEpD,UAAU,8BAA8B;IACtC,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IACpD,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,uBAAuB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7C,2BAA2B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAClD,kBAAkB,EAAE,aAAa,CAAC;IAClC,+BAA+B,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,0BAA0B,2DAE3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStableCallback.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStableCallback.ts"],"names":[],"mappings":"AAGA,KAAK,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAElC,eAAO,MAAM,iBAAiB,uEAU7B,CAAC"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
import Animated, { SharedValue } from 'react-native-reanimated';
|
|
2
3
|
export declare enum ReorderableListState {
|
|
3
4
|
IDLE = 0,
|
|
4
5
|
DRAGGED = 1,
|
|
5
6
|
RELEASED = 2,
|
|
6
7
|
AUTOSCROLL = 3
|
|
7
8
|
}
|
|
9
|
+
export type ItemLayoutAnimation = Exclude<ComponentProps<typeof Animated.View>['layout'], undefined>;
|
|
8
10
|
export type SharedValueOrType<T> = {
|
|
9
11
|
[TKey in keyof T]?: SharedValue<T[TKey]> | T[TKey];
|
|
10
12
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/types/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/types/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAE9D,oBAAY,oBAAoB;IAC9B,IAAI,IAAI;IACR,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,UAAU,IAAA;CACX;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAC9C,SAAS,CACV,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;KAChC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,GACxE;KAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAC,GAAG;KAAE,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAC,GACvD,KAAK,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FlatListProps, MatrixTransform, PerspectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, ScrollViewProps, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform, ViewStyle } from 'react-native';
|
|
2
2
|
import { PanGesture } from 'react-native-gesture-handler';
|
|
3
3
|
import { SharedValue, useAnimatedScrollHandler } from 'react-native-reanimated';
|
|
4
|
-
import { MaximumOneOf, SharedValueOrType } from './misc';
|
|
4
|
+
import { ItemLayoutAnimation, MaximumOneOf, SharedValueOrType } from './misc';
|
|
5
5
|
export interface ReorderableListReorderEvent {
|
|
6
6
|
/**
|
|
7
7
|
* Index of the dragged item.
|
|
@@ -102,6 +102,10 @@ export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedP
|
|
|
102
102
|
* @deprecated In favor of `panGesture` prop.
|
|
103
103
|
*/
|
|
104
104
|
panActivateAfterLongPress?: number;
|
|
105
|
+
/**
|
|
106
|
+
* Layout animation when the item is added to and/or removed from the view hierarchy. To skip entering or exiting animations use the LayoutAnimationConfig component from [Reanimated](https://docs.swmansion.com/react-native-reanimated).
|
|
107
|
+
*/
|
|
108
|
+
itemLayoutAnimation?: ItemLayoutAnimation;
|
|
105
109
|
/**
|
|
106
110
|
* Event fired after an item is released and the list is reordered.
|
|
107
111
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/types/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,UAAU,EAAC,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAC,WAAW,EAAE,wBAAwB,EAAC,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/types/props.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -16,8 +16,8 @@ const NestedReorderableListWithRef = <T,>(
|
|
|
16
16
|
scrollViewPageY,
|
|
17
17
|
scrollViewHeightY,
|
|
18
18
|
scrollViewScrollEnabledProp,
|
|
19
|
-
scrollViewCurrentScrollEnabled,
|
|
20
19
|
outerScrollGesture,
|
|
20
|
+
setScrollViewForceDisableScroll,
|
|
21
21
|
} = useContext(ScrollViewContainerContext);
|
|
22
22
|
|
|
23
23
|
return (
|
|
@@ -30,7 +30,7 @@ const NestedReorderableListWithRef = <T,>(
|
|
|
30
30
|
scrollViewHeightY={scrollViewHeightY}
|
|
31
31
|
outerScrollGesture={outerScrollGesture}
|
|
32
32
|
scrollViewScrollEnabledProp={scrollViewScrollEnabledProp}
|
|
33
|
-
|
|
33
|
+
setScrollViewForceDisableScroll={setScrollViewForceDisableScroll}
|
|
34
34
|
scrollable={scrollable}
|
|
35
35
|
nestedScrollEnabled
|
|
36
36
|
/>
|
|
@@ -17,7 +17,7 @@ const ReorderableListWithRef = <T,>(
|
|
|
17
17
|
scrollViewHeightY={undefined}
|
|
18
18
|
outerScrollGesture={undefined}
|
|
19
19
|
scrollViewScrollEnabledProp={undefined}
|
|
20
|
-
|
|
20
|
+
setScrollViewForceDisableScroll={undefined}
|
|
21
21
|
scrollable
|
|
22
22
|
/>
|
|
23
23
|
);
|
|
@@ -38,8 +38,14 @@ export const ReorderableListCell = memo(
|
|
|
38
38
|
draggedIndex,
|
|
39
39
|
animationDuration,
|
|
40
40
|
}: ReorderableListCellProps<T>) => {
|
|
41
|
-
const {
|
|
42
|
-
|
|
41
|
+
const {
|
|
42
|
+
currentIndex,
|
|
43
|
+
draggedHeight,
|
|
44
|
+
activeIndex,
|
|
45
|
+
cellAnimations,
|
|
46
|
+
itemLayoutAnimation,
|
|
47
|
+
} = useContext(ReorderableListContext);
|
|
48
|
+
|
|
43
49
|
const dragHandler = useCallback(
|
|
44
50
|
() => runOnUI(startDrag)(index),
|
|
45
51
|
[startDrag, index],
|
|
@@ -141,7 +147,10 @@ export const ReorderableListCell = memo(
|
|
|
141
147
|
|
|
142
148
|
return (
|
|
143
149
|
<ReorderableCellContext.Provider value={contextValue}>
|
|
144
|
-
<Animated.View
|
|
150
|
+
<Animated.View
|
|
151
|
+
style={animatedStyle}
|
|
152
|
+
onLayout={handleLayout}
|
|
153
|
+
layout={itemLayoutAnimation.current}>
|
|
145
154
|
{children}
|
|
146
155
|
</Animated.View>
|
|
147
156
|
</ReorderableCellContext.Provider>
|
|
@@ -1,8 +1,18 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, {
|
|
2
|
+
Dispatch,
|
|
3
|
+
RefObject,
|
|
4
|
+
SetStateAction,
|
|
5
|
+
useCallback,
|
|
6
|
+
useEffect,
|
|
7
|
+
useMemo,
|
|
8
|
+
useRef,
|
|
9
|
+
useState,
|
|
10
|
+
} from 'react';
|
|
2
11
|
import {
|
|
3
12
|
CellRendererProps,
|
|
4
13
|
FlatList,
|
|
5
14
|
FlatListProps,
|
|
15
|
+
InteractionManager,
|
|
6
16
|
LayoutChangeEvent,
|
|
7
17
|
Platform,
|
|
8
18
|
ScrollView,
|
|
@@ -42,7 +52,7 @@ import {
|
|
|
42
52
|
SCALE_ANIMATION_CONFIG_DEFAULT,
|
|
43
53
|
} from './constants';
|
|
44
54
|
import {ReorderableListCell} from './ReorderableListCell';
|
|
45
|
-
import {usePropAsSharedValue} from '../hooks';
|
|
55
|
+
import {usePropAsSharedValue, useStableCallback} from '../hooks';
|
|
46
56
|
|
|
47
57
|
const AnimatedFlatList = Animated.createAnimatedComponent(
|
|
48
58
|
FlatList,
|
|
@@ -52,12 +62,14 @@ const AnimatedFlatList = Animated.createAnimatedComponent(
|
|
|
52
62
|
|
|
53
63
|
interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
|
|
54
64
|
// Not optional but undefined to force passing the prop.
|
|
55
|
-
scrollViewContainerRef:
|
|
65
|
+
scrollViewContainerRef: RefObject<ScrollView> | undefined;
|
|
56
66
|
scrollViewPageY: SharedValue<number> | undefined;
|
|
57
67
|
scrollViewHeightY: SharedValue<number> | undefined;
|
|
58
68
|
scrollViewScrollOffsetY: SharedValue<number> | undefined;
|
|
59
69
|
scrollViewScrollEnabledProp: SharedValue<boolean> | undefined;
|
|
60
|
-
|
|
70
|
+
setScrollViewForceDisableScroll:
|
|
71
|
+
| Dispatch<SetStateAction<boolean>>
|
|
72
|
+
| undefined;
|
|
61
73
|
outerScrollGesture: NativeGesture | undefined;
|
|
62
74
|
scrollable: boolean | undefined;
|
|
63
75
|
}
|
|
@@ -81,16 +93,18 @@ const ReorderableListCore = <T,>(
|
|
|
81
93
|
scrollViewHeightY,
|
|
82
94
|
scrollViewScrollOffsetY,
|
|
83
95
|
scrollViewScrollEnabledProp,
|
|
84
|
-
|
|
96
|
+
setScrollViewForceDisableScroll,
|
|
85
97
|
scrollable,
|
|
86
98
|
outerScrollGesture,
|
|
87
99
|
cellAnimations,
|
|
88
100
|
dragEnabled = true,
|
|
89
101
|
shouldUpdateActiveItem,
|
|
102
|
+
itemLayoutAnimation,
|
|
90
103
|
panGesture,
|
|
91
104
|
panEnabled = true,
|
|
92
105
|
panActivateAfterLongPress,
|
|
93
106
|
data,
|
|
107
|
+
keyExtractor,
|
|
94
108
|
...rest
|
|
95
109
|
}: ReorderableListCoreProps<T>,
|
|
96
110
|
ref: React.ForwardedRef<FlatList<T>>,
|
|
@@ -98,10 +112,14 @@ const ReorderableListCore = <T,>(
|
|
|
98
112
|
const scrollEnabled = rest.scrollEnabled ?? true;
|
|
99
113
|
|
|
100
114
|
const flatListRef = useAnimatedRef<FlatList>();
|
|
115
|
+
const markedCellsRef = useRef<Map<string, 1>>();
|
|
101
116
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
102
117
|
const prevItemCount = useRef(data.length);
|
|
103
118
|
|
|
119
|
+
const [forceDisableScroll, setForceDisableScroll] = useState(false);
|
|
120
|
+
const scrollEnabledProp = usePropAsSharedValue(scrollEnabled);
|
|
104
121
|
const currentScrollEnabled = useSharedValue(scrollEnabled);
|
|
122
|
+
|
|
105
123
|
const gestureState = useSharedValue<State>(State.UNDETERMINED);
|
|
106
124
|
const currentY = useSharedValue(0);
|
|
107
125
|
const currentTranslationY = useSharedValue(0);
|
|
@@ -139,7 +157,12 @@ const ReorderableListCore = <T,>(
|
|
|
139
157
|
const dragDirection = useSharedValue(0);
|
|
140
158
|
const lastDragDirectionPivot = useSharedValue<number | null>(null);
|
|
141
159
|
|
|
142
|
-
const
|
|
160
|
+
const itemLayoutAnimationPropRef = useRef(itemLayoutAnimation);
|
|
161
|
+
itemLayoutAnimationPropRef.current = itemLayoutAnimation;
|
|
162
|
+
|
|
163
|
+
const keyExtractorPropRef = useRef(keyExtractor);
|
|
164
|
+
keyExtractorPropRef.current = keyExtractor;
|
|
165
|
+
|
|
143
166
|
const animationDurationProp = usePropAsSharedValue(animationDuration);
|
|
144
167
|
const autoscrollActivationDeltaProp = usePropAsSharedValue(
|
|
145
168
|
autoscrollActivationDelta,
|
|
@@ -169,6 +192,42 @@ const ReorderableListCore = <T,>(
|
|
|
169
192
|
prevItemCount.current = data.length;
|
|
170
193
|
}, [data.length, itemHeight, itemOffset, itemCount]);
|
|
171
194
|
|
|
195
|
+
useEffect(() => {
|
|
196
|
+
if (
|
|
197
|
+
!markedCellsRef.current ||
|
|
198
|
+
// Clean keys once they surpass by 10% the size of the list itself.
|
|
199
|
+
markedCellsRef.current.size <= data.length + Math.ceil(data.length * 0.1)
|
|
200
|
+
) {
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Can be heavy to loop through all items, defer the task to run after interactions.
|
|
205
|
+
const task = InteractionManager.runAfterInteractions(() => {
|
|
206
|
+
if (!markedCellsRef.current) {
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
const map = new Map<string, 1>();
|
|
211
|
+
for (let i = 0; i < data.length; i++) {
|
|
212
|
+
const key = keyExtractorPropRef.current?.(data[i], i) || i.toString();
|
|
213
|
+
if (markedCellsRef.current.has(key)) {
|
|
214
|
+
map.set(key, markedCellsRef.current.get(key)!);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
markedCellsRef.current = map;
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
return () => {
|
|
222
|
+
task.cancel();
|
|
223
|
+
};
|
|
224
|
+
}, [data]);
|
|
225
|
+
|
|
226
|
+
const createCellKey = useCallback((cellKey: string) => {
|
|
227
|
+
const mark = markedCellsRef.current?.get(cellKey) || 0;
|
|
228
|
+
return `${cellKey}#${mark}`;
|
|
229
|
+
}, []);
|
|
230
|
+
|
|
172
231
|
const listContextValue = useMemo(
|
|
173
232
|
() => ({
|
|
174
233
|
draggedHeight,
|
|
@@ -176,6 +235,7 @@ const ReorderableListCore = <T,>(
|
|
|
176
235
|
draggedIndex,
|
|
177
236
|
dragEndHandlers,
|
|
178
237
|
activeIndex,
|
|
238
|
+
itemLayoutAnimation: itemLayoutAnimationPropRef,
|
|
179
239
|
cellAnimations: {
|
|
180
240
|
...cellAnimations,
|
|
181
241
|
transform:
|
|
@@ -195,6 +255,7 @@ const ReorderableListCore = <T,>(
|
|
|
195
255
|
dragEndHandlers,
|
|
196
256
|
activeIndex,
|
|
197
257
|
cellAnimations,
|
|
258
|
+
itemLayoutAnimationPropRef,
|
|
198
259
|
scaleDefault,
|
|
199
260
|
opacityDefault,
|
|
200
261
|
],
|
|
@@ -339,32 +400,38 @@ const ReorderableListCore = <T,>(
|
|
|
339
400
|
|
|
340
401
|
const setScrollEnabled = useCallback(
|
|
341
402
|
(enabled: boolean) => {
|
|
342
|
-
|
|
343
|
-
if ((enabled && scrollEnabledProp.value) || !enabled) {
|
|
344
|
-
currentScrollEnabled.value = enabled;
|
|
345
|
-
flatListRef.current?.setNativeProps({scrollEnabled: enabled});
|
|
346
|
-
}
|
|
403
|
+
currentScrollEnabled.value = enabled;
|
|
347
404
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
405
|
+
// IMPORTANT:
|
|
406
|
+
// On web setNativeProps API is not available, so disabling scroll is controlled by a state.
|
|
407
|
+
// On Android/iOS we can keep using setNativeProps which performs better and doesn't require re-renders.
|
|
408
|
+
if (Platform.OS === 'web') {
|
|
409
|
+
setForceDisableScroll(!enabled);
|
|
410
|
+
|
|
411
|
+
if (setScrollViewForceDisableScroll) {
|
|
412
|
+
setScrollViewForceDisableScroll(!enabled);
|
|
413
|
+
}
|
|
414
|
+
} else {
|
|
415
|
+
if (!enabled || scrollEnabledProp.value) {
|
|
416
|
+
// We disable the scroll or when re-enabling the scroll of the container we set it back to the current prop value.
|
|
417
|
+
flatListRef.current?.setNativeProps({scrollEnabled: enabled});
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
if (!enabled || scrollViewScrollEnabledProp?.value) {
|
|
421
|
+
// We disable the scroll or when re-enabling the scroll of the container we set it back to the current prop value.
|
|
422
|
+
scrollViewContainerRef?.current?.setNativeProps({
|
|
423
|
+
scrollEnabled: enabled,
|
|
424
|
+
});
|
|
425
|
+
}
|
|
359
426
|
}
|
|
360
427
|
},
|
|
361
428
|
[
|
|
429
|
+
currentScrollEnabled,
|
|
362
430
|
flatListRef,
|
|
363
431
|
scrollEnabledProp,
|
|
364
|
-
currentScrollEnabled,
|
|
365
|
-
scrollViewScrollEnabledProp,
|
|
366
|
-
scrollViewCurrentScrollEnabled,
|
|
367
432
|
scrollViewContainerRef,
|
|
433
|
+
scrollViewScrollEnabledProp,
|
|
434
|
+
setScrollViewForceDisableScroll,
|
|
368
435
|
],
|
|
369
436
|
);
|
|
370
437
|
|
|
@@ -394,9 +461,28 @@ const ReorderableListCore = <T,>(
|
|
|
394
461
|
setTimeout(runOnUI(resetSharedValues), animationDurationProp.value);
|
|
395
462
|
}, [resetSharedValues, animationDurationProp]);
|
|
396
463
|
|
|
464
|
+
const markCells = (fromIndex: number, toIndex: number) => {
|
|
465
|
+
if (!markedCellsRef.current) {
|
|
466
|
+
markedCellsRef.current = new Map();
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
const start = Math.min(fromIndex, toIndex);
|
|
470
|
+
const end = Math.max(fromIndex, toIndex);
|
|
471
|
+
for (let i = start; i <= end; i++) {
|
|
472
|
+
const cellKey = keyExtractorPropRef.current?.(data[i], i) || i.toString();
|
|
473
|
+
if (!markedCellsRef.current.has(cellKey)) {
|
|
474
|
+
markedCellsRef.current.set(cellKey, 1);
|
|
475
|
+
} else {
|
|
476
|
+
markedCellsRef.current.delete(cellKey);
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
};
|
|
480
|
+
|
|
397
481
|
const reorder = (fromIndex: number, toIndex: number) => {
|
|
398
482
|
runOnUI(resetSharedValues)();
|
|
399
483
|
|
|
484
|
+
markCells(fromIndex, toIndex);
|
|
485
|
+
|
|
400
486
|
if (fromIndex !== toIndex) {
|
|
401
487
|
onReorder({from: fromIndex, to: toIndex});
|
|
402
488
|
}
|
|
@@ -788,9 +874,9 @@ const ReorderableListCore = <T,>(
|
|
|
788
874
|
const handleScroll = useAnimatedScrollHandler(e => {
|
|
789
875
|
flatListScrollOffsetY.value = e.contentOffset.y;
|
|
790
876
|
|
|
791
|
-
//
|
|
792
|
-
//
|
|
793
|
-
// moving away from
|
|
877
|
+
// Checking if the list is not scrollable instead of the scrolling state.
|
|
878
|
+
// Fixes a bug on iOS where the item is shifted after autoscrolling and then
|
|
879
|
+
// moving away from the area.
|
|
794
880
|
if (!currentScrollEnabled.value) {
|
|
795
881
|
dragScrollTranslationY.value =
|
|
796
882
|
flatListScrollOffsetY.value - dragInitialScrollOffsetY.value;
|
|
@@ -814,10 +900,11 @@ const ReorderableListCore = <T,>(
|
|
|
814
900
|
useAnimatedReaction(
|
|
815
901
|
() => scrollViewScrollOffsetY?.value,
|
|
816
902
|
value => {
|
|
817
|
-
if (value
|
|
818
|
-
//
|
|
819
|
-
//
|
|
820
|
-
|
|
903
|
+
if (value) {
|
|
904
|
+
// Checking if the list is not scrollable instead of the scrolling state.
|
|
905
|
+
// Fixes a bug on iOS where the item is shifted after autoscrolling and then
|
|
906
|
+
// moving away from the area.
|
|
907
|
+
if (!currentScrollEnabled.value) {
|
|
821
908
|
scrollViewDragScrollTranslationY.value =
|
|
822
909
|
value - scrollViewDragInitialScrollOffsetY.value;
|
|
823
910
|
}
|
|
@@ -950,12 +1037,12 @@ const ReorderableListCore = <T,>(
|
|
|
950
1037
|
onScroll || null,
|
|
951
1038
|
]);
|
|
952
1039
|
|
|
953
|
-
const renderAnimatedCell =
|
|
1040
|
+
const renderAnimatedCell = useStableCallback(
|
|
954
1041
|
({cellKey, ...props}: CellRendererProps<T>) => (
|
|
955
1042
|
<ReorderableListCell
|
|
956
1043
|
{...props}
|
|
957
1044
|
// forces remount with key change on reorder
|
|
958
|
-
key={
|
|
1045
|
+
key={createCellKey(cellKey)}
|
|
959
1046
|
itemOffset={itemOffset}
|
|
960
1047
|
itemHeight={itemHeight}
|
|
961
1048
|
dragY={dragY}
|
|
@@ -964,14 +1051,6 @@ const ReorderableListCore = <T,>(
|
|
|
964
1051
|
startDrag={startDrag}
|
|
965
1052
|
/>
|
|
966
1053
|
),
|
|
967
|
-
[
|
|
968
|
-
itemOffset,
|
|
969
|
-
itemHeight,
|
|
970
|
-
dragY,
|
|
971
|
-
draggedIndex,
|
|
972
|
-
animationDurationProp,
|
|
973
|
-
startDrag,
|
|
974
|
-
],
|
|
975
1054
|
);
|
|
976
1055
|
|
|
977
1056
|
return (
|
|
@@ -981,6 +1060,7 @@ const ReorderableListCore = <T,>(
|
|
|
981
1060
|
{...rest}
|
|
982
1061
|
ref={handleRef}
|
|
983
1062
|
data={data}
|
|
1063
|
+
keyExtractor={keyExtractor}
|
|
984
1064
|
CellRendererComponent={renderAnimatedCell}
|
|
985
1065
|
onLayout={handleFlatListLayout}
|
|
986
1066
|
onScroll={composedScrollHandler}
|
|
@@ -988,6 +1068,8 @@ const ReorderableListCore = <T,>(
|
|
|
988
1068
|
horizontal={false}
|
|
989
1069
|
removeClippedSubviews={false}
|
|
990
1070
|
numColumns={1}
|
|
1071
|
+
// We force disable scroll or let the component prop control it.
|
|
1072
|
+
scrollEnabled={forceDisableScroll ? false : scrollEnabled}
|
|
991
1073
|
/>
|
|
992
1074
|
</GestureDetector>
|
|
993
1075
|
</ReorderableListContext.Provider>
|