react-native-reorderable-list 0.13.0 → 0.14.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 +69 -9
- package/lib/commonjs/components/NestedReorderableList.js +2 -0
- package/lib/commonjs/components/NestedReorderableList.js.map +1 -1
- package/lib/commonjs/components/ReorderableList.js +4 -3
- package/lib/commonjs/components/ReorderableList.js.map +1 -1
- package/lib/commonjs/components/{ReorderableListCore/useReorderableListCore.js → ReorderableListCore.js} +187 -96
- package/lib/commonjs/components/ReorderableListCore.js.map +1 -0
- package/lib/commonjs/components/ScrollViewContainer.js +26 -7
- package/lib/commonjs/components/ScrollViewContainer.js.map +1 -1
- package/lib/commonjs/components/{ReorderableListCore/animationDefaults.js → constants.js} +26 -2
- package/lib/commonjs/components/constants.js.map +1 -0
- package/lib/commonjs/contexts/ScrollViewContainerContext.js.map +1 -1
- package/lib/module/components/NestedReorderableList.js +2 -0
- package/lib/module/components/NestedReorderableList.js.map +1 -1
- package/lib/module/components/ReorderableList.js +4 -3
- package/lib/module/components/ReorderableList.js.map +1 -1
- package/lib/module/components/{ReorderableListCore/useReorderableListCore.js → ReorderableListCore.js} +188 -95
- package/lib/module/components/ReorderableListCore.js.map +1 -0
- package/lib/module/components/ScrollViewContainer.js +28 -8
- package/lib/module/components/ScrollViewContainer.js.map +1 -1
- package/lib/module/components/constants.js +52 -0
- package/lib/module/components/constants.js.map +1 -0
- package/lib/module/contexts/ScrollViewContainerContext.js.map +1 -1
- package/lib/typescript/components/NestedReorderableList.d.ts.map +1 -1
- package/lib/typescript/components/ReorderableList.d.ts.map +1 -1
- package/lib/typescript/components/{ReorderableListCore/ReorderableListCore.d.ts → ReorderableListCore.d.ts} +2 -1
- package/lib/typescript/components/ReorderableListCore.d.ts.map +1 -0
- package/lib/typescript/components/ScrollViewContainer.d.ts +2 -1
- package/lib/typescript/components/ScrollViewContainer.d.ts.map +1 -1
- package/lib/typescript/components/{ReorderableListCore/animationDefaults.d.ts → constants.d.ts} +6 -1
- package/lib/typescript/components/constants.d.ts.map +1 -0
- package/lib/typescript/contexts/ScrollViewContainerContext.d.ts +1 -0
- package/lib/typescript/contexts/ScrollViewContainerContext.d.ts.map +1 -1
- package/lib/typescript/types/props.d.ts +9 -0
- package/lib/typescript/types/props.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/NestedReorderableList.tsx +2 -0
- package/src/components/ReorderableList.tsx +3 -2
- package/src/components/{ReorderableListCore/useReorderableListCore.ts → ReorderableListCore.tsx} +321 -184
- package/src/components/ScrollViewContainer.tsx +44 -13
- package/src/components/{ReorderableListCore/animationDefaults.ts → constants.ts} +34 -0
- package/src/contexts/ScrollViewContainerContext.ts +1 -0
- package/src/types/props.ts +9 -0
- package/lib/commonjs/components/ReorderableListCore/ReorderableListCore.js +0 -121
- package/lib/commonjs/components/ReorderableListCore/ReorderableListCore.js.map +0 -1
- package/lib/commonjs/components/ReorderableListCore/animationDefaults.js.map +0 -1
- package/lib/commonjs/components/ReorderableListCore/autoscrollConfig.js +0 -31
- package/lib/commonjs/components/ReorderableListCore/autoscrollConfig.js.map +0 -1
- package/lib/commonjs/components/ReorderableListCore/index.js +0 -17
- package/lib/commonjs/components/ReorderableListCore/index.js.map +0 -1
- package/lib/commonjs/components/ReorderableListCore/useReorderableListCore.js.map +0 -1
- package/lib/module/components/ReorderableListCore/ReorderableListCore.js +0 -114
- package/lib/module/components/ReorderableListCore/ReorderableListCore.js.map +0 -1
- package/lib/module/components/ReorderableListCore/animationDefaults.js +0 -28
- package/lib/module/components/ReorderableListCore/animationDefaults.js.map +0 -1
- package/lib/module/components/ReorderableListCore/autoscrollConfig.js +0 -25
- package/lib/module/components/ReorderableListCore/autoscrollConfig.js.map +0 -1
- package/lib/module/components/ReorderableListCore/index.js +0 -2
- package/lib/module/components/ReorderableListCore/index.js.map +0 -1
- package/lib/module/components/ReorderableListCore/useReorderableListCore.js.map +0 -1
- package/lib/typescript/components/ReorderableListCore/ReorderableListCore.d.ts.map +0 -1
- package/lib/typescript/components/ReorderableListCore/animationDefaults.d.ts.map +0 -1
- package/lib/typescript/components/ReorderableListCore/autoscrollConfig.d.ts +0 -6
- package/lib/typescript/components/ReorderableListCore/autoscrollConfig.d.ts.map +0 -1
- package/lib/typescript/components/ReorderableListCore/index.d.ts +0 -2
- package/lib/typescript/components/ReorderableListCore/index.d.ts.map +0 -1
- package/lib/typescript/components/ReorderableListCore/useReorderableListCore.d.ts +0 -183
- package/lib/typescript/components/ReorderableListCore/useReorderableListCore.d.ts.map +0 -1
- package/src/components/ReorderableListCore/ReorderableListCore.tsx +0 -175
- package/src/components/ReorderableListCore/autoscrollConfig.ts +0 -31
- package/src/components/ReorderableListCore/index.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeGestureHandler","_reactNativeReanimated","_ScrollViewContainerContext","_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","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeGestureHandler","_reactNativeReanimated","_ScrollViewContainerContext","_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","ScrollViewContainerWithRef","onLayout","onScroll","scrollEnabled","rest","ref","scrollViewScrollEnabled","useSharedValue","scrollViewContainerRef","useAnimatedRef","scrollViewScrollOffsetY","scrollViewPageY","scrollViewHeightY","handleRef","useCallback","value","current","outerScrollGesture","useMemo","Gesture","Native","handleScroll","useAnimatedScrollHandler","contentOffset","y","composedScrollHandler","useComposedEventHandler","contextValue","initialScrollViewScrollEnabled","handleLayout","nativeEvent","layout","height","runOnUI","measurement","measure","pageY","createElement","ScrollViewContainerContext","Provider","GestureDetector","gesture","ScrollView","ScrollViewContainer","exports","forwardRef"],"sourceRoot":"../../../src","sources":["components/ScrollViewContainer.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,0BAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AASA,IAAAG,2BAAA,GAAAH,OAAA;AAAkF,SAAAI,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,SAAAN,wBAAAM,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;AAGlF,MAAMG,0BAA0B,GAAGA,CACjC;EAACC,QAAQ;EAAEC,QAAQ;EAAEC,aAAa,GAAG,IAAI;EAAE,GAAGC;AAA8B,CAAC,EAC7EC,GAAmC,KAChC;EACH,MAAMC,uBAAuB,GAAG,IAAAC,qCAAc,EAACJ,aAAa,CAAC;EAC7D,MAAMK,sBAAsB,GAAG,IAAAC,qCAAc,EAAsB,CAAC;EACpE,MAAMC,uBAAuB,GAAG,IAAAH,qCAAc,EAAC,CAAC,CAAC;EACjD,MAAMI,eAAe,GAAG,IAAAJ,qCAAc,EAAC,CAAC,CAAC;EACzC,MAAMK,iBAAiB,GAAG,IAAAL,qCAAc,EAAC,CAAC,CAAC;EAE3C,MAAMM,SAAS,GAAG,IAAAC,kBAAW,EAC1BC,KAA0B,IAAK;IAC9BP,sBAAsB,CAACO,KAAK,CAAC;IAE7B,IAAI,OAAOV,GAAG,KAAK,UAAU,EAAE;MAC7BA,GAAG,CAACU,KAAK,CAAC;IACZ,CAAC,MAAM,IAAIV,GAAG,EAAE;MACdA,GAAG,CAACW,OAAO,GAAGD,KAAK;IACrB;EACF,CAAC,EACD,CAACP,sBAAsB,EAAEH,GAAG,CAC9B,CAAC;EAED,MAAMY,kBAAkB,GAAG,IAAAC,cAAO,EAAC,MAAMC,kCAAO,CAACC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAE9D,MAAMC,YAAY,GAAG,IAAAC,+CAAwB,EAC3C/C,CAAC,IAAI;IACHmC,uBAAuB,CAACK,KAAK,GAAGxC,CAAC,CAACgD,aAAa,CAACC,CAAC;EACnD,CAAC,EACD,CAACd,uBAAuB,CAC1B,CAAC;EAED,MAAMe,qBAAqB,GAAG,IAAAC,8CAAuB,EAAC,CACpDL,YAAY,EACZnB,QAAQ,IAAI,IAAI,CACjB,CAAC;EAEF,MAAMyB,YAAY,GAAG,IAAAT,cAAO,EAC1B,OAAO;IACLV,sBAAsB;IACtBG,eAAe;IACfC,iBAAiB;IACjBF,uBAAuB;IACvBJ,uBAAuB;IACvBW,kBAAkB;IAClBW,8BAA8B,EAAEzB;EAClC,CAAC,CAAC,EACF,CACEK,sBAAsB,EACtBG,eAAe,EACfC,iBAAiB,EACjBF,uBAAuB,EACvBJ,uBAAuB,EACvBW,kBAAkB,EAClBd,aAAa,CAEjB,CAAC;EAED,MAAM0B,YAAY,GAAG,IAAAf,kBAAW,EAC7BvC,CAAoB,IAAK;IACxBqC,iBAAiB,CAACG,KAAK,GAAGxC,CAAC,CAACuD,WAAW,CAACC,MAAM,CAACC,MAAM;;IAErD;IACA,IAAAC,8BAAO,EAAC,MAAM;MACZ,MAAMC,WAAW,GAAG,IAAAC,8BAAO,EAAC3B,sBAAsB,CAAC;MACnD,IAAI,CAAC0B,WAAW,EAAE;QAChB;MACF;MAEAvB,eAAe,CAACI,KAAK,GAAGmB,WAAW,CAACE,KAAK;IAC3C,CAAC,CAAC,CAAC,CAAC;IAEJnC,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG1B,CAAC,CAAC;EACf,CAAC,EACD,CAAC0B,QAAQ,EAAEO,sBAAsB,EAAEI,iBAAiB,EAAED,eAAe,CACvE,CAAC;EAED,oBACE3C,MAAA,CAAAY,OAAA,CAAAyD,aAAA,CAAChE,2BAAA,CAAAiE,0BAA0B,CAACC,QAAQ;IAACxB,KAAK,EAAEY;EAAa,gBACvD3D,MAAA,CAAAY,OAAA,CAAAyD,aAAA,CAAClE,0BAAA,CAAAqE,eAAe;IAACC,OAAO,EAAExB;EAAmB,gBAC3CjD,MAAA,CAAAY,OAAA,CAAAyD,aAAA,CAACjE,sBAAA,CAAAQ,OAAQ,CAAC8D,UAAU,EAAAhD,QAAA,KACdU,IAAI;IACRC,GAAG,EAAEQ,SAAU;IACfX,QAAQ,EAAEuB,qBAAsB;IAChCxB,QAAQ,EAAE4B,YAAa;IACvB1B,aAAa,EAAEA;EAAc,EAC9B,CACc,CACkB,CAAC;AAE1C,CAAC;AAEM,MAAMwC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,gBAAG,IAAAE,iBAAU,EAAC7C,0BAA0B,CAAC","ignoreList":[]}
|
|
@@ -3,8 +3,32 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.SCALE_ANIMATION_CONFIG_DEFAULT = exports.OPACITY_ANIMATION_CONFIG_DEFAULT = void 0;
|
|
6
|
+
exports.SCALE_ANIMATION_CONFIG_DEFAULT = exports.OPACITY_ANIMATION_CONFIG_DEFAULT = exports.IS_FABRIC = exports.AUTOSCROLL_CONFIG = void 0;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
7
8
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
|
+
const IOS_AUTOSCROLL_CONFIG = {
|
|
10
|
+
delay: 80,
|
|
11
|
+
increment: 100
|
|
12
|
+
};
|
|
13
|
+
const ANDROID_FABRIC_AUTOSCROLL_CONFIG = {
|
|
14
|
+
delay: 50,
|
|
15
|
+
increment: 80
|
|
16
|
+
};
|
|
17
|
+
const ANDROID_PAPER_AUTOSCROLL_CONFIG = {
|
|
18
|
+
delay: 10,
|
|
19
|
+
increment: 4
|
|
20
|
+
};
|
|
21
|
+
const IS_FABRIC = exports.IS_FABRIC = global && typeof global === 'object' && 'nativeFabricUIManager' in global;
|
|
22
|
+
const AUTOSCROLL_CONFIG = exports.AUTOSCROLL_CONFIG = _reactNative.Platform.select({
|
|
23
|
+
// autoscroll behaves differently with Fabric and Paper on Android
|
|
24
|
+
android: IS_FABRIC ? ANDROID_FABRIC_AUTOSCROLL_CONFIG : ANDROID_PAPER_AUTOSCROLL_CONFIG,
|
|
25
|
+
ios: IOS_AUTOSCROLL_CONFIG,
|
|
26
|
+
// unsupported platforms
|
|
27
|
+
web: IOS_AUTOSCROLL_CONFIG,
|
|
28
|
+
macos: IOS_AUTOSCROLL_CONFIG,
|
|
29
|
+
windows: IOS_AUTOSCROLL_CONFIG,
|
|
30
|
+
native: IOS_AUTOSCROLL_CONFIG
|
|
31
|
+
});
|
|
8
32
|
const DURATION_START = 150;
|
|
9
33
|
const DURATION_END = 200;
|
|
10
34
|
const SCALE_ANIMATION_CONFIG_DEFAULT = exports.SCALE_ANIMATION_CONFIG_DEFAULT = {
|
|
@@ -31,4 +55,4 @@ const OPACITY_ANIMATION_CONFIG_DEFAULT = exports.OPACITY_ANIMATION_CONFIG_DEFAUL
|
|
|
31
55
|
duration: DURATION_END
|
|
32
56
|
}
|
|
33
57
|
};
|
|
34
|
-
//# sourceMappingURL=
|
|
58
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","IOS_AUTOSCROLL_CONFIG","delay","increment","ANDROID_FABRIC_AUTOSCROLL_CONFIG","ANDROID_PAPER_AUTOSCROLL_CONFIG","IS_FABRIC","exports","global","AUTOSCROLL_CONFIG","Platform","select","android","ios","web","macos","windows","native","DURATION_START","DURATION_END","SCALE_ANIMATION_CONFIG_DEFAULT","start","toValue","easing","Easing","in","ease","duration","end","out","OPACITY_ANIMATION_CONFIG_DEFAULT"],"sourceRoot":"../../../src","sources":["components/constants.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,sBAAA,GAAAD,OAAA;AAEA,MAAME,qBAAqB,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAED,MAAMC,gCAAgC,GAAG;EACvCF,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE;AACb,CAAC;AAED,MAAME,+BAA+B,GAAG;EACtCH,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,GACdF,gCAAgC,GAChCC,+BAA+B;EACnCQ,GAAG,EAAEZ,qBAAqB;EAE1B;EACAa,GAAG,EAAEb,qBAAqB;EAC1Bc,KAAK,EAAEd,qBAAqB;EAC5Be,OAAO,EAAEf,qBAAqB;EAC9BgB,MAAM,EAAEhB;AACV,CAAC,CAAC;AAEF,MAAMiB,cAAc,GAAG,GAAG;AAC1B,MAAMC,YAAY,GAAG,GAAG;AAOjB,MAAMC,8BAA+C,GAAAb,OAAA,CAAAa,8BAAA,GAAG;EAC7DC,KAAK,EAAE;IACLC,OAAO,EAAE,KAAK;IACdC,MAAM,EAAEC,6BAAM,CAACC,EAAE,CAACD,6BAAM,CAACE,IAAI,CAAC;IAC9BC,QAAQ,EAAET;EACZ,CAAC;EACDU,GAAG,EAAE;IACHN,OAAO,EAAE,CAAC;IACVC,MAAM,EAAEC,6BAAM,CAACK,GAAG,CAACL,6BAAM,CAACE,IAAI,CAAC;IAC/BC,QAAQ,EAAER;EACZ;AACF,CAAC;AAEM,MAAMW,gCAAiD,GAAAvB,OAAA,CAAAuB,gCAAA,GAAG;EAC/DT,KAAK,EAAE;IACLC,OAAO,EAAE,IAAI;IACbC,MAAM,EAAEC,6BAAM,CAACC,EAAE,CAACD,6BAAM,CAACE,IAAI,CAAC;IAC9BC,QAAQ,EAAET;EACZ,CAAC;EACDU,GAAG,EAAE;IACHN,OAAO,EAAE,CAAC;IACVC,MAAM,EAAEC,6BAAM,CAACK,GAAG,CAACL,6BAAM,CAACE,IAAI,CAAC;IAC/BC,QAAQ,EAAER;EACZ;AACF,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","e","__esModule","default","ScrollViewContainerContext","exports","React","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ScrollViewContainerContext.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","e","__esModule","default","ScrollViewContainerContext","exports","React","createContext","undefined"],"sourceRoot":"../../../src","sources":["contexts/ScrollViewContainerContext.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAgBnB,MAAMG,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,gBAAGE,cAAK,CAACC,aAAa,CAE3DC,SAAS,CAAC","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ const NestedReorderableListWithRef = ({
|
|
|
11
11
|
const {
|
|
12
12
|
scrollViewContainerRef,
|
|
13
13
|
scrollViewScrollOffsetY,
|
|
14
|
+
scrollViewPageY,
|
|
14
15
|
scrollViewHeightY,
|
|
15
16
|
scrollViewScrollEnabled,
|
|
16
17
|
outerScrollGesture,
|
|
@@ -20,6 +21,7 @@ const NestedReorderableListWithRef = ({
|
|
|
20
21
|
ref: ref,
|
|
21
22
|
scrollViewContainerRef: scrollViewContainerRef,
|
|
22
23
|
scrollViewScrollOffsetY: scrollViewScrollOffsetY,
|
|
24
|
+
scrollViewPageY: scrollViewPageY,
|
|
23
25
|
scrollViewHeightY: scrollViewHeightY,
|
|
24
26
|
outerScrollGesture: outerScrollGesture,
|
|
25
27
|
scrollViewScrollEnabled: scrollViewScrollEnabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","ReorderableListCore","ScrollViewContainerContext","useContext","NestedReorderableListWithRef","scrollable","scrollEnabled","rest","ref","scrollViewContainerRef","scrollViewScrollOffsetY","scrollViewHeightY","scrollViewScrollEnabled","outerScrollGesture","initialScrollViewScrollEnabled","createElement","_extends","nestedScrollEnabled","NestedReorderableList"],"sourceRoot":"../../../src","sources":["components/NestedReorderableList.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,UAAU,QAAO,OAAO;AAGvC,SAAQC,mBAAmB,QAAO,uBAAuB;AACzD,SAAQC,0BAA0B,QAAO,aAAa;AACtD,SAAQC,UAAU,QAAO,UAAU;AAGnC,MAAMC,4BAA4B,GAAGA,CACnC;EAACC,UAAU;EAAEC,aAAa,GAAG,IAAI;EAAE,GAAGC;AAAmC,CAAC,EAC1EC,GAAqC,KAClC;EACH,MAAM;IACJC,sBAAsB;IACtBC,uBAAuB;IACvBC,iBAAiB;IACjBC,uBAAuB;IACvBC,kBAAkB;IAClBC;EACF,CAAC,
|
|
1
|
+
{"version":3,"names":["React","forwardRef","ReorderableListCore","ScrollViewContainerContext","useContext","NestedReorderableListWithRef","scrollable","scrollEnabled","rest","ref","scrollViewContainerRef","scrollViewScrollOffsetY","scrollViewPageY","scrollViewHeightY","scrollViewScrollEnabled","outerScrollGesture","initialScrollViewScrollEnabled","createElement","_extends","nestedScrollEnabled","NestedReorderableList"],"sourceRoot":"../../../src","sources":["components/NestedReorderableList.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,UAAU,QAAO,OAAO;AAGvC,SAAQC,mBAAmB,QAAO,uBAAuB;AACzD,SAAQC,0BAA0B,QAAO,aAAa;AACtD,SAAQC,UAAU,QAAO,UAAU;AAGnC,MAAMC,4BAA4B,GAAGA,CACnC;EAACC,UAAU;EAAEC,aAAa,GAAG,IAAI;EAAE,GAAGC;AAAmC,CAAC,EAC1EC,GAAqC,KAClC;EACH,MAAM;IACJC,sBAAsB;IACtBC,uBAAuB;IACvBC,eAAe;IACfC,iBAAiB;IACjBC,uBAAuB;IACvBC,kBAAkB;IAClBC;EACF,CAAC,GAAGZ,UAAU,CAACD,0BAA0B,CAAC;EAE1C,oBACEH,KAAA,CAAAiB,aAAA,CAACf,mBAAmB,EAAAgB,QAAA,KACdV,IAAI;IACRC,GAAG,EAAEA,GAAI;IACTC,sBAAsB,EAAEA,sBAAuB;IAC/CC,uBAAuB,EAAEA,uBAAwB;IACjDC,eAAe,EAAEA,eAAgB;IACjCC,iBAAiB,EAAEA,iBAAkB;IACrCE,kBAAkB,EAAEA,kBAAmB;IACvCD,uBAAuB,EAAEA,uBAAwB;IACjDE,8BAA8B,EAAEA,8BAA+B;IAC/DV,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEA,aAAc;IAC7BY,mBAAmB;EAAA,EACpB,CAAC;AAEN,CAAC;AAED,OAAO,MAAMC,qBAAqB,gBAAGnB,UAAU,CAC7CI,4BACF,CAEgB","ignoreList":[]}
|
|
@@ -7,13 +7,14 @@ const ReorderableListWithRef = ({
|
|
|
7
7
|
}, ref) => /*#__PURE__*/React.createElement(ReorderableListCore, _extends({}, rest, {
|
|
8
8
|
ref: ref,
|
|
9
9
|
scrollEnabled: scrollEnabled,
|
|
10
|
-
initialScrollViewScrollEnabled: true,
|
|
11
|
-
scrollable: true,
|
|
12
10
|
scrollViewContainerRef: undefined,
|
|
13
11
|
scrollViewScrollOffsetY: undefined,
|
|
12
|
+
scrollViewPageY: undefined,
|
|
14
13
|
scrollViewHeightY: undefined,
|
|
15
14
|
outerScrollGesture: undefined,
|
|
16
|
-
scrollViewScrollEnabled: undefined
|
|
15
|
+
scrollViewScrollEnabled: undefined,
|
|
16
|
+
initialScrollViewScrollEnabled: true,
|
|
17
|
+
scrollable: true
|
|
17
18
|
}));
|
|
18
19
|
export const ReorderableList = /*#__PURE__*/forwardRef(ReorderableListWithRef);
|
|
19
20
|
//# sourceMappingURL=ReorderableList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","ReorderableListCore","ReorderableListWithRef","scrollEnabled","rest","ref","createElement","_extends","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","ReorderableListCore","ReorderableListWithRef","scrollEnabled","rest","ref","createElement","_extends","scrollViewContainerRef","undefined","scrollViewScrollOffsetY","scrollViewPageY","scrollViewHeightY","outerScrollGesture","scrollViewScrollEnabled","initialScrollViewScrollEnabled","scrollable","ReorderableList"],"sourceRoot":"../../../src","sources":["components/ReorderableList.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,UAAU,QAAO,OAAO;AAGvC,SAAQC,mBAAmB,QAAO,uBAAuB;AAGzD,MAAMC,sBAAsB,GAAGA,CAC7B;EAACC,aAAa,GAAG,IAAI;EAAE,GAAGC;AAA6B,CAAC,EACxDC,GAA2B,kBAE3BN,KAAA,CAAAO,aAAA,CAACL,mBAAmB,EAAAM,QAAA,KACdH,IAAI;EACRC,GAAG,EAAEA,GAAI;EACTF,aAAa,EAAEA,aAAc;EAC7BK,sBAAsB,EAAEC,SAAU;EAClCC,uBAAuB,EAAED,SAAU;EACnCE,eAAe,EAAEF,SAAU;EAC3BG,iBAAiB,EAAEH,SAAU;EAC7BI,kBAAkB,EAAEJ,SAAU;EAC9BK,uBAAuB,EAAEL,SAAU;EACnCM,8BAA8B;EAC9BC,UAAU;AAAA,EACX,CACF;AAED,OAAO,MAAMC,eAAe,gBAAGjB,UAAU,CAACE,sBAAsB,CAEhD","ignoreList":[]}
|
|
@@ -1,37 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { ReorderableListState } from '
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
autoscrollThreshold,
|
|
1
|
+
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); }
|
|
2
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { FlatList, Platform } from 'react-native';
|
|
4
|
+
import { Gesture, GestureDetector, State } from 'react-native-gesture-handler';
|
|
5
|
+
import Animated, { Easing, measure, runOnJS, runOnUI, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useComposedEventHandler, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
|
|
6
|
+
import { ReorderableListContext } from '../contexts';
|
|
7
|
+
import { ReorderableListState } from '../types';
|
|
8
|
+
import { AUTOSCROLL_CONFIG, OPACITY_ANIMATION_CONFIG_DEFAULT, SCALE_ANIMATION_CONFIG_DEFAULT } from './constants';
|
|
9
|
+
import { ReorderableListCell } from './ReorderableListCell';
|
|
10
|
+
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
11
|
+
const ReorderableListCore = ({
|
|
12
|
+
autoscrollThreshold = 0.1,
|
|
13
13
|
autoscrollThresholdOffset,
|
|
14
|
-
autoscrollSpeedScale,
|
|
15
|
-
autoscrollDelay,
|
|
16
|
-
autoscrollActivationDelta,
|
|
17
|
-
animationDuration,
|
|
14
|
+
autoscrollSpeedScale = 1,
|
|
15
|
+
autoscrollDelay = AUTOSCROLL_CONFIG.delay,
|
|
16
|
+
autoscrollActivationDelta = 5,
|
|
17
|
+
animationDuration = 200,
|
|
18
|
+
onLayout,
|
|
18
19
|
onReorder,
|
|
20
|
+
onScroll,
|
|
19
21
|
onDragStart,
|
|
20
22
|
onDragEnd,
|
|
21
|
-
onLayout,
|
|
22
23
|
onIndexChange,
|
|
23
24
|
scrollViewContainerRef,
|
|
25
|
+
scrollViewPageY,
|
|
24
26
|
scrollViewHeightY,
|
|
25
27
|
scrollViewScrollOffsetY,
|
|
26
28
|
scrollViewScrollEnabled,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
nestedScrollable,
|
|
29
|
+
scrollable,
|
|
30
|
+
outerScrollGesture,
|
|
30
31
|
cellAnimations,
|
|
31
32
|
shouldUpdateActiveItem,
|
|
33
|
+
panGesture,
|
|
34
|
+
panEnabled = true,
|
|
32
35
|
panActivateAfterLongPress,
|
|
33
|
-
|
|
34
|
-
|
|
36
|
+
data,
|
|
37
|
+
...rest
|
|
38
|
+
}, ref) => {
|
|
39
|
+
// FlatList will default to true if we pass explicitly undefined,
|
|
40
|
+
// but internally we would treat it as false, so we force true.
|
|
41
|
+
const initialScrollEnabled = typeof rest.scrollEnabled === 'undefined' ? true : rest.scrollEnabled;
|
|
42
|
+
const initialScrollViewScrollEnabled = typeof rest.initialScrollViewScrollEnabled === 'undefined' ? true : rest.initialScrollViewScrollEnabled;
|
|
35
43
|
const flatListRef = useAnimatedRef();
|
|
36
44
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
37
45
|
const scrollEnabled = useSharedValue(initialScrollEnabled);
|
|
@@ -42,7 +50,7 @@ export const useReorderableListCore = ({
|
|
|
42
50
|
const startItemDragCenterY = useSharedValue(0);
|
|
43
51
|
const flatListScrollOffsetY = useSharedValue(0);
|
|
44
52
|
const flatListHeightY = useSharedValue(0);
|
|
45
|
-
const
|
|
53
|
+
const flatListPageY = useSharedValue(0);
|
|
46
54
|
// The scroll y translation of the list since drag start
|
|
47
55
|
const dragScrollTranslationY = useSharedValue(0);
|
|
48
56
|
// The initial scroll offset y of the list on drag start
|
|
@@ -54,6 +62,9 @@ export const useReorderableListCore = ({
|
|
|
54
62
|
const draggedHeight = useSharedValue(0);
|
|
55
63
|
const itemOffset = useSharedValue([]);
|
|
56
64
|
const itemHeight = useSharedValue([]);
|
|
65
|
+
// We need to track data length since itemOffset and itemHeight might contain more data than we need.
|
|
66
|
+
// e.g. items are removed from the list, in which case layout data for those items is set to 0.
|
|
67
|
+
const itemCount = useSharedValue(data.length);
|
|
57
68
|
const autoscrollTrigger = useSharedValue(-1);
|
|
58
69
|
const lastAutoscrollTrigger = useSharedValue(-1);
|
|
59
70
|
const dragY = useSharedValue(0);
|
|
@@ -68,10 +79,30 @@ export const useReorderableListCore = ({
|
|
|
68
79
|
const dragDirection = useSharedValue(0);
|
|
69
80
|
const lastDragDirectionPivot = useSharedValue(null);
|
|
70
81
|
const autoscrollDelta = useSharedValue(autoscrollActivationDelta);
|
|
82
|
+
const prevItemCount = useRef(data.length);
|
|
83
|
+
|
|
84
|
+
// Position of the list relative to the scroll container
|
|
85
|
+
const nestedFlatListPositionY = useDerivedValue(() => flatListPageY.value - ((scrollViewPageY === null || scrollViewPageY === void 0 ? void 0 : scrollViewPageY.value) || 0));
|
|
71
86
|
useEffect(() => {
|
|
72
87
|
duration.value = animationDuration;
|
|
73
88
|
autoscrollDelta.value = autoscrollActivationDelta;
|
|
74
|
-
}, [duration, animationDuration, autoscrollDelta, autoscrollActivationDelta]);
|
|
89
|
+
}, [duration, animationDuration, autoscrollDelta, autoscrollActivationDelta, itemCount]);
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
itemCount.value = data.length;
|
|
92
|
+
|
|
93
|
+
// This could be done unmount of the removed cell, however it leads to bugs.
|
|
94
|
+
// Surprisingly the unmount gets sometimes called after the onLayout event
|
|
95
|
+
// setting all layout data to 0 and breaking the list. So we solve it like this.
|
|
96
|
+
if (data.length < prevItemCount.current) {
|
|
97
|
+
for (let i = data.length; i < prevItemCount.current; i++) {
|
|
98
|
+
runOnUI(() => {
|
|
99
|
+
itemHeight.value[i] = 0;
|
|
100
|
+
itemOffset.value[i] = 0;
|
|
101
|
+
})();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
prevItemCount.current = data.length;
|
|
105
|
+
}, [data.length, itemHeight, itemOffset, itemCount]);
|
|
75
106
|
const listContextValue = useMemo(() => ({
|
|
76
107
|
draggedHeight,
|
|
77
108
|
currentIndex,
|
|
@@ -123,7 +154,9 @@ export const useReorderableListCore = ({
|
|
|
123
154
|
currentItemDragCenterY.value = startItemDragCenterY.value + e.translationY;
|
|
124
155
|
}
|
|
125
156
|
}, [currentItemDragCenterY, currentIndex, startItemDragCenterY, itemOffset, itemHeight, flatListScrollOffsetY, scrollViewDragScrollTranslationY]);
|
|
126
|
-
const panGestureHandler = useMemo(() => Gesture.Pan().onBegin(e => {
|
|
157
|
+
const panGestureHandler = useMemo(() => (panGesture || Gesture.Pan()).onBegin(e => {
|
|
158
|
+
'worklet';
|
|
159
|
+
|
|
127
160
|
// prevent new dragging until item is completely released
|
|
128
161
|
if (state.value === ReorderableListState.IDLE) {
|
|
129
162
|
startY.value = e.y;
|
|
@@ -133,6 +166,8 @@ export const useReorderableListCore = ({
|
|
|
133
166
|
gestureState.value = e.state;
|
|
134
167
|
}
|
|
135
168
|
}).onUpdate(e => {
|
|
169
|
+
'worklet';
|
|
170
|
+
|
|
136
171
|
if (state.value === ReorderableListState.DRAGGED) {
|
|
137
172
|
setDragDirection(e);
|
|
138
173
|
}
|
|
@@ -143,8 +178,16 @@ export const useReorderableListCore = ({
|
|
|
143
178
|
dragY.value = e.translationY + dragScrollTranslationY.value + scrollViewDragScrollTranslationY.value;
|
|
144
179
|
gestureState.value = e.state;
|
|
145
180
|
}
|
|
146
|
-
}).onEnd(e =>
|
|
147
|
-
|
|
181
|
+
}).onEnd(e => {
|
|
182
|
+
'worklet';
|
|
183
|
+
|
|
184
|
+
gestureState.value = e.state;
|
|
185
|
+
}).onFinalize(e => {
|
|
186
|
+
'worklet';
|
|
187
|
+
|
|
188
|
+
gestureState.value = e.state;
|
|
189
|
+
}), [panGesture, state, startY, currentY, currentTranslationY, dragY, gestureState, dragScrollTranslationY, scrollViewDragScrollTranslationY, setDragDirection, setCurrentItemDragCenterY]);
|
|
190
|
+
const panGestureHandlerWithPropOptions = useMemo(() => {
|
|
148
191
|
if (typeof panActivateAfterLongPress === 'number') {
|
|
149
192
|
panGestureHandler.activateAfterLongPress(panActivateAfterLongPress);
|
|
150
193
|
}
|
|
@@ -153,7 +196,7 @@ export const useReorderableListCore = ({
|
|
|
153
196
|
}
|
|
154
197
|
return panGestureHandler;
|
|
155
198
|
}, [panActivateAfterLongPress, panEnabled, panGestureHandler]);
|
|
156
|
-
const gestureHandler = useMemo(() => Gesture.Simultaneous(Gesture.Native(),
|
|
199
|
+
const gestureHandler = useMemo(() => Gesture.Simultaneous(Gesture.Native(), panGestureHandlerWithPropOptions), [panGestureHandlerWithPropOptions]);
|
|
157
200
|
const setScrollEnabled = useCallback(enabled => {
|
|
158
201
|
// if scroll is enabled on list props then we can toggle it
|
|
159
202
|
if (initialScrollEnabled) {
|
|
@@ -189,17 +232,10 @@ export const useReorderableListCore = ({
|
|
|
189
232
|
const reorder = (fromIndex, toIndex) => {
|
|
190
233
|
runOnUI(resetSharedValues)();
|
|
191
234
|
if (fromIndex !== toIndex) {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
});
|
|
197
|
-
};
|
|
198
|
-
if (!hasAutomaticBatching) {
|
|
199
|
-
unstable_batchedUpdates(updateState);
|
|
200
|
-
} else {
|
|
201
|
-
updateState();
|
|
202
|
-
}
|
|
235
|
+
onReorder({
|
|
236
|
+
from: fromIndex,
|
|
237
|
+
to: toIndex
|
|
238
|
+
});
|
|
203
239
|
}
|
|
204
240
|
};
|
|
205
241
|
const recomputeLayout = useCallback((from, to) => {
|
|
@@ -237,7 +273,7 @@ export const useReorderableListCore = ({
|
|
|
237
273
|
const currentOffset = itemOffset.value[currentIndex.value];
|
|
238
274
|
const currentHeight = itemHeight.value[currentIndex.value];
|
|
239
275
|
const currentCenter = currentOffset + currentHeight * 0.5;
|
|
240
|
-
const max =
|
|
276
|
+
const max = itemCount.value;
|
|
241
277
|
const possibleIndex = relativeDragCenterY < currentCenter ? Math.max(0, currentIndex.value - 1) : Math.min(max - 1, currentIndex.value + 1);
|
|
242
278
|
if (currentIndex.value !== possibleIndex) {
|
|
243
279
|
let possibleOffset = itemOffset.value[possibleIndex];
|
|
@@ -250,7 +286,7 @@ export const useReorderableListCore = ({
|
|
|
250
286
|
return distanceFromCurrent <= distanceFromPossible ? currentIndex.value : possibleIndex;
|
|
251
287
|
}
|
|
252
288
|
return currentIndex.value;
|
|
253
|
-
}, [currentIndex, currentItemDragCenterY, itemOffset, itemHeight, flatListScrollOffsetY, scrollViewDragScrollTranslationY]);
|
|
289
|
+
}, [currentIndex, currentItemDragCenterY, itemCount, itemOffset, itemHeight, flatListScrollOffsetY, scrollViewDragScrollTranslationY]);
|
|
254
290
|
const setCurrentIndex = useCallback(() => {
|
|
255
291
|
'worklet';
|
|
256
292
|
|
|
@@ -322,7 +358,7 @@ export const useReorderableListCore = ({
|
|
|
322
358
|
}
|
|
323
359
|
}
|
|
324
360
|
});
|
|
325
|
-
const
|
|
361
|
+
const computeHiddenArea = useCallback(() => {
|
|
326
362
|
'worklet';
|
|
327
363
|
|
|
328
364
|
if (!scrollViewScrollOffsetY || !scrollViewHeightY) {
|
|
@@ -340,9 +376,10 @@ export const useReorderableListCore = ({
|
|
|
340
376
|
bottom
|
|
341
377
|
};
|
|
342
378
|
}, [scrollViewScrollOffsetY, scrollViewHeightY, nestedFlatListPositionY, flatListHeightY]);
|
|
343
|
-
const
|
|
379
|
+
const computeThresholdArea = useCallback(() => {
|
|
344
380
|
'worklet';
|
|
345
381
|
|
|
382
|
+
const hiddenArea = computeHiddenArea();
|
|
346
383
|
const offsetTop = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.top) || 0);
|
|
347
384
|
const offsetBottom = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.bottom) || 0);
|
|
348
385
|
const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
|
|
@@ -354,58 +391,73 @@ export const useReorderableListCore = ({
|
|
|
354
391
|
top,
|
|
355
392
|
bottom
|
|
356
393
|
};
|
|
357
|
-
}, [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY]);
|
|
358
|
-
const
|
|
394
|
+
}, [computeHiddenArea, autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY]);
|
|
395
|
+
const computeContainerThresholdArea = useCallback(() => {
|
|
359
396
|
'worklet';
|
|
360
397
|
|
|
398
|
+
if (!scrollViewHeightY) {
|
|
399
|
+
return {
|
|
400
|
+
top: -Infinity,
|
|
401
|
+
bottom: Infinity
|
|
402
|
+
};
|
|
403
|
+
}
|
|
361
404
|
const offsetTop = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.top) || 0);
|
|
362
405
|
const offsetBottom = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.bottom) || 0);
|
|
363
406
|
const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
|
|
364
|
-
const
|
|
407
|
+
const visibleHeight = scrollViewHeightY.value - (offsetTop + offsetBottom);
|
|
408
|
+
const area = visibleHeight * threshold;
|
|
365
409
|
const top = area + offsetTop;
|
|
366
|
-
const bottom =
|
|
367
|
-
|
|
368
|
-
// if the hidden area is 0 then we don't have a threshold area
|
|
369
|
-
// we might have floating errors like 0.0001 which we should ignore
|
|
410
|
+
const bottom = visibleHeight - area - offsetBottom;
|
|
370
411
|
return {
|
|
371
|
-
top
|
|
372
|
-
bottom
|
|
412
|
+
top,
|
|
413
|
+
bottom
|
|
373
414
|
};
|
|
374
|
-
}, [autoscrollThreshold, autoscrollThresholdOffset,
|
|
375
|
-
const
|
|
415
|
+
}, [autoscrollThreshold, autoscrollThresholdOffset, scrollViewHeightY]);
|
|
416
|
+
const shouldScrollContainer = useCallback(y => {
|
|
376
417
|
'worklet';
|
|
377
418
|
|
|
378
|
-
const
|
|
379
|
-
const
|
|
419
|
+
const containerThresholdArea = computeContainerThresholdArea();
|
|
420
|
+
const nestedListHiddenArea = computeHiddenArea();
|
|
421
|
+
|
|
422
|
+
// We should scroll the container if there's a hidden part of the nested list.
|
|
423
|
+
// We might have floating errors like 0.0001 which we should ignore.
|
|
424
|
+
return nestedListHiddenArea.top > 0.01 && y <= containerThresholdArea.top || nestedListHiddenArea.bottom > 0.01 && y >= containerThresholdArea.bottom;
|
|
425
|
+
}, [computeHiddenArea, computeContainerThresholdArea]);
|
|
426
|
+
const getRelativeContainerY = useCallback(() => {
|
|
427
|
+
'worklet';
|
|
380
428
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
const scrollDirection = useCallback(y => {
|
|
429
|
+
return currentY.value + nestedFlatListPositionY.value - scrollViewDragInitialScrollOffsetY.value;
|
|
430
|
+
}, [currentY, nestedFlatListPositionY, scrollViewDragInitialScrollOffsetY]);
|
|
431
|
+
const getRelativeListY = useCallback(() => {
|
|
385
432
|
'worklet';
|
|
386
433
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
434
|
+
return currentY.value + scrollViewDragScrollTranslationY.value;
|
|
435
|
+
}, [currentY, scrollViewDragScrollTranslationY]);
|
|
436
|
+
const scrollDirection = useCallback(() => {
|
|
437
|
+
'worklet';
|
|
438
|
+
|
|
439
|
+
const relativeContainerY = getRelativeContainerY();
|
|
440
|
+
if (shouldScrollContainer(relativeContainerY)) {
|
|
441
|
+
const containerThresholdArea = computeContainerThresholdArea();
|
|
442
|
+
if (relativeContainerY <= containerThresholdArea.top) {
|
|
391
443
|
return -1;
|
|
392
444
|
}
|
|
393
|
-
if (
|
|
445
|
+
if (relativeContainerY >= containerThresholdArea.bottom) {
|
|
394
446
|
return 1;
|
|
395
447
|
}
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
const thresholdArea =
|
|
399
|
-
if (
|
|
448
|
+
} else if (scrollable) {
|
|
449
|
+
const relativeListY = getRelativeListY();
|
|
450
|
+
const thresholdArea = computeThresholdArea();
|
|
451
|
+
if (relativeListY <= thresholdArea.top) {
|
|
400
452
|
return -1;
|
|
401
453
|
}
|
|
402
|
-
if (
|
|
454
|
+
if (relativeListY >= thresholdArea.bottom) {
|
|
403
455
|
return 1;
|
|
404
456
|
}
|
|
405
457
|
}
|
|
406
458
|
return 0;
|
|
407
|
-
}, [
|
|
408
|
-
useAnimatedReaction(() => currentY.value
|
|
459
|
+
}, [shouldScrollContainer, computeThresholdArea, computeContainerThresholdArea, getRelativeContainerY, getRelativeListY, scrollable]);
|
|
460
|
+
useAnimatedReaction(() => currentY.value, () => {
|
|
409
461
|
if (state.value === ReorderableListState.DRAGGED || state.value === ReorderableListState.AUTOSCROLL) {
|
|
410
462
|
setCurrentIndex();
|
|
411
463
|
|
|
@@ -413,7 +465,7 @@ export const useReorderableListCore = ({
|
|
|
413
465
|
// 1. Within the threshold area (top or bottom of list)
|
|
414
466
|
// 2. Have dragged in the same direction as the scroll
|
|
415
467
|
// 3. Not already in autoscroll mode
|
|
416
|
-
if (dragDirection.value === scrollDirection(
|
|
468
|
+
if (dragDirection.value === scrollDirection()) {
|
|
417
469
|
// When the first two conditions are met and it's already in autoscroll mode, we let it continue (no-op)
|
|
418
470
|
if (state.value !== ReorderableListState.AUTOSCROLL) {
|
|
419
471
|
state.value = ReorderableListState.AUTOSCROLL;
|
|
@@ -427,12 +479,15 @@ export const useReorderableListCore = ({
|
|
|
427
479
|
});
|
|
428
480
|
useAnimatedReaction(() => autoscrollTrigger.value, () => {
|
|
429
481
|
if (autoscrollTrigger.value !== lastAutoscrollTrigger.value && state.value === ReorderableListState.AUTOSCROLL) {
|
|
430
|
-
|
|
431
|
-
const autoscrollIncrement = scrollDirection(y) * AUTOSCROLL_CONFIG.increment * autoscrollSpeedScale;
|
|
482
|
+
const autoscrollIncrement = dragDirection.value * AUTOSCROLL_CONFIG.increment * autoscrollSpeedScale;
|
|
432
483
|
if (autoscrollIncrement !== 0) {
|
|
433
484
|
let scrollOffset = flatListScrollOffsetY.value;
|
|
434
485
|
let listRef = flatListRef;
|
|
435
|
-
|
|
486
|
+
|
|
487
|
+
// Checking on every autoscroll whether to scroll the container,
|
|
488
|
+
// this allows to smoothly pass the scroll from the container to the nested list
|
|
489
|
+
// without any gesture input.
|
|
490
|
+
if (scrollViewScrollOffsetY && shouldScrollContainer(getRelativeContainerY())) {
|
|
436
491
|
scrollOffset = scrollViewScrollOffsetY.value;
|
|
437
492
|
listRef = scrollViewContainerRef;
|
|
438
493
|
}
|
|
@@ -464,7 +519,7 @@ export const useReorderableListCore = ({
|
|
|
464
519
|
}
|
|
465
520
|
});
|
|
466
521
|
|
|
467
|
-
//
|
|
522
|
+
// container scroll handler
|
|
468
523
|
useAnimatedReaction(() => scrollViewScrollOffsetY === null || scrollViewScrollOffsetY === void 0 ? void 0 : scrollViewScrollOffsetY.value, value => {
|
|
469
524
|
if (value && scrollViewScrollEnabled) {
|
|
470
525
|
// checking if the list is not scrollable instead of the scrolling state
|
|
@@ -508,30 +563,68 @@ export const useReorderableListCore = ({
|
|
|
508
563
|
}
|
|
509
564
|
}, [resetSharedValues, shouldUpdateActiveItem, dragInitialScrollOffsetY, scrollViewScrollOffsetY, scrollViewDragInitialScrollOffsetY, setScrollEnabled, currentIndex, draggedHeight, draggedIndex, state, flatListScrollOffsetY, itemHeight, onDragStart, runDefaultDragAnimations]);
|
|
510
565
|
const handleFlatListLayout = useCallback(e => {
|
|
511
|
-
nestedFlatListPositionY.value = e.nativeEvent.layout.y;
|
|
512
566
|
flatListHeightY.value = e.nativeEvent.layout.height;
|
|
567
|
+
|
|
568
|
+
// If nested in a scroll container.
|
|
569
|
+
if (scrollViewScrollOffsetY) {
|
|
570
|
+
// Timeout fixes a bug where measure returns height 0.
|
|
571
|
+
setTimeout(() => {
|
|
572
|
+
runOnUI(() => {
|
|
573
|
+
const measurement = measure(flatListRef);
|
|
574
|
+
if (!measurement) {
|
|
575
|
+
return;
|
|
576
|
+
}
|
|
577
|
+
flatListPageY.value = measurement.pageY;
|
|
578
|
+
})();
|
|
579
|
+
}, 100);
|
|
580
|
+
}
|
|
513
581
|
onLayout === null || onLayout === void 0 || onLayout(e);
|
|
514
|
-
}, [
|
|
515
|
-
const handleRef = value => {
|
|
582
|
+
}, [flatListRef, flatListPageY, flatListHeightY, scrollViewScrollOffsetY, onLayout]);
|
|
583
|
+
const handleRef = useCallback(value => {
|
|
516
584
|
flatListRef(value);
|
|
517
585
|
if (typeof ref === 'function') {
|
|
518
586
|
ref(value);
|
|
519
587
|
} else if (ref) {
|
|
520
588
|
ref.current = value;
|
|
521
589
|
}
|
|
522
|
-
};
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
590
|
+
}, [flatListRef, ref]);
|
|
591
|
+
const combinedGesture = useMemo(() => {
|
|
592
|
+
// android is able to handle nested scroll view, but not the full height ones like iOS
|
|
593
|
+
if (outerScrollGesture && !(Platform.OS === 'android' && scrollable)) {
|
|
594
|
+
return Gesture.Simultaneous(outerScrollGesture, gestureHandler);
|
|
595
|
+
}
|
|
596
|
+
return gestureHandler;
|
|
597
|
+
}, [scrollable, outerScrollGesture, gestureHandler]);
|
|
598
|
+
const composedScrollHandler = useComposedEventHandler([handleScroll, onScroll || null]);
|
|
599
|
+
const renderAnimatedCell = useCallback(({
|
|
600
|
+
cellKey,
|
|
601
|
+
...props
|
|
602
|
+
}) => /*#__PURE__*/React.createElement(ReorderableListCell, _extends({}, props, {
|
|
603
|
+
// forces remount with key change on reorder
|
|
604
|
+
key: `${cellKey}+${props.index}`,
|
|
605
|
+
itemOffset: itemOffset,
|
|
606
|
+
itemHeight: itemHeight,
|
|
607
|
+
dragY: dragY,
|
|
608
|
+
draggedIndex: draggedIndex,
|
|
609
|
+
animationDuration: duration,
|
|
610
|
+
startDrag: startDrag
|
|
611
|
+
})), [itemOffset, itemHeight, dragY, draggedIndex, duration, startDrag]);
|
|
612
|
+
return /*#__PURE__*/React.createElement(ReorderableListContext.Provider, {
|
|
613
|
+
value: listContextValue
|
|
614
|
+
}, /*#__PURE__*/React.createElement(GestureDetector, {
|
|
615
|
+
gesture: combinedGesture
|
|
616
|
+
}, /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({}, rest, {
|
|
617
|
+
ref: handleRef,
|
|
618
|
+
data: data,
|
|
619
|
+
CellRendererComponent: renderAnimatedCell,
|
|
620
|
+
onLayout: handleFlatListLayout,
|
|
621
|
+
onScroll: composedScrollHandler,
|
|
622
|
+
scrollEventThrottle: 1,
|
|
623
|
+
horizontal: false,
|
|
624
|
+
removeClippedSubviews: false,
|
|
625
|
+
numColumns: 1
|
|
626
|
+
}))));
|
|
536
627
|
};
|
|
537
|
-
|
|
628
|
+
const MemoizedReorderableListCore = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(ReorderableListCore));
|
|
629
|
+
export { MemoizedReorderableListCore as ReorderableListCore };
|
|
630
|
+
//# sourceMappingURL=ReorderableListCore.js.map
|