@r0b0t3d/react-native-collapsible 1.3.5-beta.2 → 1.3.5-beta.4
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/lib/commonjs/components/CollapsibleContainer.js +1 -2
- package/lib/commonjs/components/CollapsibleContainer.js.map +1 -1
- package/lib/commonjs/components/CollapsibleView.js +1 -1
- package/lib/commonjs/components/CollapsibleView.js.map +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js +84 -23
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map +1 -1
- package/lib/commonjs/components/header/StickyView.js +24 -19
- package/lib/commonjs/components/header/StickyView.js.map +1 -1
- package/lib/commonjs/components/scrollable/useAnimatedScroll.js +2 -3
- package/lib/commonjs/components/scrollable/useAnimatedScroll.js.map +1 -1
- package/lib/commonjs/hooks/useCollapsibleHeaderContext.js.map +1 -1
- package/lib/commonjs/utils/useSharedValueRef.js +21 -0
- package/lib/commonjs/utils/useSharedValueRef.js.map +1 -0
- package/lib/commonjs/withCollapsibleContext.js +37 -92
- package/lib/commonjs/withCollapsibleContext.js.map +1 -1
- package/lib/module/components/CollapsibleContainer.js +1 -2
- package/lib/module/components/CollapsibleContainer.js.map +1 -1
- package/lib/module/components/CollapsibleView.js +1 -1
- package/lib/module/components/CollapsibleView.js.map +1 -1
- package/lib/module/components/header/CollapsibleHeaderContainer.js +86 -24
- package/lib/module/components/header/CollapsibleHeaderContainer.js.map +1 -1
- package/lib/module/components/header/StickyView.js +25 -20
- package/lib/module/components/header/StickyView.js.map +1 -1
- package/lib/module/components/scrollable/useAnimatedScroll.js +2 -3
- package/lib/module/components/scrollable/useAnimatedScroll.js.map +1 -1
- package/lib/module/hooks/useCollapsibleHeaderContext.js.map +1 -1
- package/lib/module/utils/useSharedValueRef.js +15 -0
- package/lib/module/utils/useSharedValueRef.js.map +1 -0
- package/lib/module/withCollapsibleContext.js +38 -92
- package/lib/module/withCollapsibleContext.js.map +1 -1
- package/lib/typescript/components/CollapsibleContainer.d.ts.map +1 -1
- package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts +2 -2
- package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts.map +1 -1
- package/lib/typescript/components/header/StickyView.d.ts.map +1 -1
- package/lib/typescript/components/scrollable/useAnimatedScroll.d.ts.map +1 -1
- package/lib/typescript/hooks/useCollapsibleHeaderContext.d.ts +6 -11
- package/lib/typescript/hooks/useCollapsibleHeaderContext.d.ts.map +1 -1
- package/lib/typescript/types.d.ts +6 -6
- package/lib/typescript/types.d.ts.map +1 -1
- package/lib/typescript/utils/useSharedValueRef.d.ts +3 -0
- package/lib/typescript/utils/useSharedValueRef.d.ts.map +1 -0
- package/lib/typescript/withCollapsibleContext.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/CollapsibleContainer.tsx +0 -2
- package/src/components/CollapsibleView.tsx +1 -1
- package/src/components/header/CollapsibleHeaderContainer.tsx +143 -25
- package/src/components/header/StickyView.tsx +30 -17
- package/src/components/scrollable/useAnimatedScroll.ts +3 -9
- package/src/hooks/useCollapsibleHeaderContext.ts +6 -8
- package/src/types.ts +8 -8
- package/src/utils/useSharedValueRef.ts +22 -0
- package/src/withCollapsibleContext.tsx +46 -110
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js +0 -59
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js.map +0 -1
- package/lib/commonjs/components/header/CollapsibleHeaderProvider.js +0 -58
- package/lib/commonjs/components/header/CollapsibleHeaderProvider.js.map +0 -1
- package/lib/module/components/header/CollapsibleHeaderConsumer.js +0 -50
- package/lib/module/components/header/CollapsibleHeaderConsumer.js.map +0 -1
- package/lib/module/components/header/CollapsibleHeaderProvider.js +0 -49
- package/lib/module/components/header/CollapsibleHeaderProvider.js.map +0 -1
- package/lib/typescript/components/header/CollapsibleHeaderConsumer.d.ts +0 -3
- package/lib/typescript/components/header/CollapsibleHeaderConsumer.d.ts.map +0 -1
- package/lib/typescript/components/header/CollapsibleHeaderProvider.d.ts +0 -5
- package/lib/typescript/components/header/CollapsibleHeaderProvider.d.ts.map +0 -1
- package/src/components/header/CollapsibleHeaderConsumer.tsx +0 -62
- package/src/components/header/CollapsibleHeaderProvider.tsx +0 -70
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useDerivedValue","useSharedValue","withTiming","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","fixedHeaderHeight","containerHeight","containerRef","scrollViewRef","headerContainerLayouts","headerViewPositions","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","handleHeaderContainerLayout","key","layout","stickyHeight","undefined","headerContainers","Object","keys","filter","k","totalHeight","reduce","acc","_headerContainerLayou","height","duration","sortedHeaders","sort","a","b","_headerContainerLayou2","_headerContainerLayou3","y","values","aStickyHeight","index","length","_headerContainerLayou4","headerKey","sHeight","top","handleContainerHeight","context","collapse","animated","_collapsibleHandlers$","expand","_collapsibleHandlers$2","scrollTo","offset","animate","_collapsibleHandlers$3","scrollToIndex","params","_collapsibleHandlers$4","internalContext","createElement","Provider"],"sourceRoot":"../../src","sources":["withCollapsibleContext.tsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,yBAAyB,EAIzB,SAAS,EACV,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,yBAAyB,EAIzB,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACjD,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IACtD,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,yBAAyB,EACzB,aAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,qBAuDP"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
type Props = {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
containerStyle?: StyleProp<ViewStyle>;
|
|
6
6
|
};
|
|
7
|
-
export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props):
|
|
7
|
+
export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props): React.JSX.Element;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=CollapsibleHeaderContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsibleHeaderContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/header/CollapsibleHeaderContainer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CollapsibleHeaderContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/header/CollapsibleHeaderContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAC1E,OAAO,EACL,SAAS,EACT,SAAS,EAIV,MAAM,cAAc,CAAC;AAkBtB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,QAAQ,EACR,cAAc,GACf,EAAE,KAAK,qBA8HP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StickyView.d.ts","sourceRoot":"","sources":["../../../../src/components/header/StickyView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,
|
|
1
|
+
{"version":3,"file":"StickyView.d.ts","sourceRoot":"","sources":["../../../../src/components/header/StickyView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAGL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,qBAuD5D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/scrollable/useAnimatedScroll.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMvD,KAAK,KAAK,GAAG;IACX,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,QAAQ,EACR,aAAa,GACd,EAAE,KAAK;;;;
|
|
1
|
+
{"version":3,"file":"useAnimatedScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/scrollable/useAnimatedScroll.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMvD,KAAK,KAAK,GAAG;IACX,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,QAAQ,EACR,aAAa,GACd,EAAE,KAAK;;;;EA8DP"}
|
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
headers: HeaderItem[];
|
|
8
|
-
mount: (key: string, header: ReactNode) => void;
|
|
9
|
-
update: (key: string, header: ReactNode) => void;
|
|
10
|
-
unmount: (key: string) => void;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LayoutRectangle } from 'react-native';
|
|
3
|
+
import Animated from 'react-native-reanimated';
|
|
4
|
+
export type CollapsibleContextHeaderType = {
|
|
5
|
+
handleStickyViewLayout: (key: string, layout?: LayoutRectangle) => void;
|
|
6
|
+
animatedY: Animated.SharedValue<number>;
|
|
11
7
|
};
|
|
12
8
|
export declare const CollapsibleHeaderContext: import("react").Context<CollapsibleContextHeaderType>;
|
|
13
9
|
export default function useCollapsibleHeaderContext(): CollapsibleContextHeaderType;
|
|
14
|
-
export {};
|
|
15
10
|
//# sourceMappingURL=useCollapsibleHeaderContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCollapsibleHeaderContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCollapsibleHeaderContext.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCollapsibleHeaderContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCollapsibleHeaderContext.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAE/C,MAAM,MAAM,4BAA4B,GAAG;IACzC,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACxE,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,wBAAwB,uDAEY,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,iCAMlD"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type { View } from 'react-native';
|
|
2
|
+
import type { LayoutRectangle, View } from 'react-native';
|
|
3
3
|
import type Animated from 'react-native-reanimated';
|
|
4
4
|
export type ScrollToIndexParams = {
|
|
5
5
|
animated?: boolean | null;
|
|
@@ -28,13 +28,13 @@ export type CollapsibleContextInternalType = {
|
|
|
28
28
|
scrollViewRef: React.RefObject<any>;
|
|
29
29
|
containerRef: React.RefObject<View>;
|
|
30
30
|
contentMinHeight: Animated.SharedValue<number>;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
headerViewPositions: Animated.SharedValue<Record<string, {
|
|
32
|
+
top: number;
|
|
33
|
+
stickyHeight: number;
|
|
34
|
+
}>>;
|
|
34
35
|
fixedHeaderHeight: Animated.SharedValue<number>;
|
|
35
36
|
handleContainerHeight: (height: number) => void;
|
|
36
|
-
|
|
37
|
-
handleHeaderContainerLayout: (height: number) => void;
|
|
37
|
+
handleHeaderContainerLayout: (key: string, layout?: LayoutRectangle, stickyHeight?: number) => void;
|
|
38
38
|
setCollapsibleHandlers: (handlers: CollapsibleHandles) => void;
|
|
39
39
|
};
|
|
40
40
|
export type CollapsibleProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACxD,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACpC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/C,mBAAmB,EAAE,QAAQ,CAAC,WAAW,CACvC,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC,CACtD,CAAC;IACF,iBAAiB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAChD,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,2BAA2B,EAAE,CAC3B,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,eAAe,EACxB,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,kBAAkB,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAClD,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSharedValueRef.d.ts","sourceRoot":"","sources":["../../../src/utils/useSharedValueRef.ts"],"names":[],"mappings":"AACA,OAAO,QAA4B,MAAM,yBAAyB,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EACzC,YAAY,EAAE,CAAC,GACd,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAgB/C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withCollapsibleContext.d.ts","sourceRoot":"","sources":["../../src/withCollapsibleContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"withCollapsibleContext.d.ts","sourceRoot":"","sources":["../../src/withCollapsibleContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,EAAE,EAAE,MAAM,OAAO,CAAC;AAWhE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WACjD,CAAC,uBAwHjB"}
|
package/package.json
CHANGED
|
@@ -11,7 +11,6 @@ import {
|
|
|
11
11
|
import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
|
|
12
12
|
import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
|
|
13
13
|
import useCollapsibleContext from '../hooks/useCollapsibleContext';
|
|
14
|
-
import CollapsibleHeaderConsumer from './header/CollapsibleHeaderConsumer';
|
|
15
14
|
|
|
16
15
|
type Props = Omit<ViewProps, 'ref' | 'onLayout'> & {
|
|
17
16
|
children: Element;
|
|
@@ -76,7 +75,6 @@ export default function CollapsibleContainer({
|
|
|
76
75
|
collapsable={false}
|
|
77
76
|
>
|
|
78
77
|
{children}
|
|
79
|
-
<CollapsibleHeaderConsumer />
|
|
80
78
|
</View>
|
|
81
79
|
</KeyboardAvoidingView>
|
|
82
80
|
);
|
|
@@ -1,7 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
StyleProp,
|
|
4
|
+
ViewStyle,
|
|
5
|
+
LayoutChangeEvent,
|
|
6
|
+
LayoutRectangle,
|
|
7
|
+
StyleSheet,
|
|
8
|
+
} from 'react-native';
|
|
9
|
+
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
10
|
+
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
11
|
+
import Animated, {
|
|
12
|
+
Extrapolate,
|
|
13
|
+
interpolate,
|
|
14
|
+
runOnJS,
|
|
15
|
+
useAnimatedReaction,
|
|
16
|
+
useAnimatedStyle,
|
|
17
|
+
useDerivedValue,
|
|
18
|
+
useSharedValue,
|
|
19
|
+
} from 'react-native-reanimated';
|
|
20
|
+
import {
|
|
21
|
+
CollapsibleContextHeaderType,
|
|
22
|
+
CollapsibleHeaderContext,
|
|
23
|
+
} from '../../hooks/useCollapsibleHeaderContext';
|
|
24
|
+
import useSharedValueRef from '../../utils/useSharedValueRef';
|
|
5
25
|
|
|
6
26
|
type Props = {
|
|
7
27
|
children: ReactNode;
|
|
@@ -15,7 +35,63 @@ export default function CollapsibleHeaderContainer({
|
|
|
15
35
|
containerStyle,
|
|
16
36
|
}: Props) {
|
|
17
37
|
const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
|
|
18
|
-
const {
|
|
38
|
+
const { handleHeaderContainerLayout, headerViewPositions } =
|
|
39
|
+
useInternalCollapsibleContext();
|
|
40
|
+
const { scrollY } = useCollapsibleContext();
|
|
41
|
+
const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
|
|
42
|
+
const [stickyLayouts, setStickyLayouts] = useSharedValueRef<
|
|
43
|
+
Record<string, LayoutRectangle | undefined>
|
|
44
|
+
>({});
|
|
45
|
+
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
return () => {
|
|
48
|
+
handleHeaderContainerLayout(contentKey);
|
|
49
|
+
};
|
|
50
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
+
}, [contentKey]);
|
|
52
|
+
|
|
53
|
+
const stickyHeight = useDerivedValue(
|
|
54
|
+
() =>
|
|
55
|
+
Object.values(stickyLayouts.value).reduce(
|
|
56
|
+
(acc, value) => acc + (value?.height ?? 0),
|
|
57
|
+
0
|
|
58
|
+
),
|
|
59
|
+
[]
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
useAnimatedReaction(
|
|
63
|
+
() => {
|
|
64
|
+
if (!currentLayout.value) {
|
|
65
|
+
return -1;
|
|
66
|
+
}
|
|
67
|
+
return currentLayout.value.height - stickyHeight.value;
|
|
68
|
+
},
|
|
69
|
+
(result, previous) => {
|
|
70
|
+
if (result !== -1 && result !== previous) {
|
|
71
|
+
runOnJS(handleHeaderContainerLayout)(
|
|
72
|
+
contentKey,
|
|
73
|
+
currentLayout.value,
|
|
74
|
+
stickyHeight.value
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
const handleLayout = useCallback(
|
|
81
|
+
({ nativeEvent: { layout } }: LayoutChangeEvent) => {
|
|
82
|
+
currentLayout.value = layout;
|
|
83
|
+
},
|
|
84
|
+
[currentLayout]
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
const handleStickyViewLayout = useCallback(
|
|
88
|
+
(stickyKey: string, layout?: LayoutRectangle) => {
|
|
89
|
+
setStickyLayouts({
|
|
90
|
+
[stickyKey]: layout,
|
|
91
|
+
});
|
|
92
|
+
},
|
|
93
|
+
[setStickyLayouts]
|
|
94
|
+
);
|
|
19
95
|
|
|
20
96
|
const internalStyle = useMemo(() => {
|
|
21
97
|
return {
|
|
@@ -23,29 +99,71 @@ export default function CollapsibleHeaderContainer({
|
|
|
23
99
|
};
|
|
24
100
|
}, []);
|
|
25
101
|
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}, [children, containerStyle]);
|
|
102
|
+
const translateY = useDerivedValue(() => {
|
|
103
|
+
const position = headerViewPositions.value[contentKey];
|
|
104
|
+
if (!currentLayout.value || !position) {
|
|
105
|
+
return scrollY.value;
|
|
106
|
+
}
|
|
107
|
+
const topPosition =
|
|
108
|
+
currentLayout.value.height +
|
|
109
|
+
currentLayout.value.y -
|
|
110
|
+
position.top -
|
|
111
|
+
position.stickyHeight;
|
|
37
112
|
|
|
38
|
-
|
|
39
|
-
|
|
113
|
+
return interpolate(
|
|
114
|
+
scrollY.value,
|
|
115
|
+
[0, topPosition, 10000],
|
|
116
|
+
[0, -topPosition, -topPosition],
|
|
117
|
+
Extrapolate.CLAMP
|
|
118
|
+
);
|
|
119
|
+
});
|
|
40
120
|
|
|
41
|
-
|
|
42
|
-
|
|
121
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
122
|
+
return {
|
|
123
|
+
transform: [
|
|
124
|
+
{
|
|
125
|
+
translateY: translateY.value,
|
|
126
|
+
},
|
|
127
|
+
],
|
|
43
128
|
};
|
|
44
|
-
}
|
|
129
|
+
});
|
|
45
130
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
131
|
+
const animatedY = useDerivedValue(() => {
|
|
132
|
+
const position = headerViewPositions.value[contentKey];
|
|
133
|
+
if (!currentLayout.value || !position) {
|
|
134
|
+
return 0;
|
|
135
|
+
}
|
|
136
|
+
const value = scrollY.value - currentLayout.value.y + position.top;
|
|
137
|
+
const maxV = currentLayout.value.height - stickyHeight.value;
|
|
138
|
+
|
|
139
|
+
return Math.max(0, Math.min(value, maxV));
|
|
140
|
+
});
|
|
49
141
|
|
|
50
|
-
|
|
142
|
+
const value: CollapsibleContextHeaderType = useMemo(
|
|
143
|
+
() => ({
|
|
144
|
+
handleStickyViewLayout,
|
|
145
|
+
animatedY,
|
|
146
|
+
}),
|
|
147
|
+
[handleStickyViewLayout, animatedY]
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
return (
|
|
151
|
+
<CollapsibleHeaderContext.Provider value={value}>
|
|
152
|
+
<Animated.View
|
|
153
|
+
key={contentKey}
|
|
154
|
+
style={[styles.container, containerStyle, internalStyle, animatedStyle]}
|
|
155
|
+
pointerEvents="box-none"
|
|
156
|
+
onLayout={handleLayout}
|
|
157
|
+
>
|
|
158
|
+
{children}
|
|
159
|
+
</Animated.View>
|
|
160
|
+
</CollapsibleHeaderContext.Provider>
|
|
161
|
+
);
|
|
51
162
|
}
|
|
163
|
+
|
|
164
|
+
const styles = StyleSheet.create({
|
|
165
|
+
container: {
|
|
166
|
+
overflow: 'hidden',
|
|
167
|
+
backgroundColor: 'white',
|
|
168
|
+
},
|
|
169
|
+
});
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import {
|
|
4
|
+
LayoutChangeEvent,
|
|
5
|
+
LayoutRectangle,
|
|
6
|
+
StyleProp,
|
|
7
|
+
StyleSheet,
|
|
8
|
+
View,
|
|
9
|
+
ViewStyle,
|
|
10
|
+
} from 'react-native';
|
|
6
11
|
import Animated, {
|
|
7
12
|
Extrapolate,
|
|
8
13
|
interpolate,
|
|
9
14
|
useAnimatedStyle,
|
|
10
15
|
useDerivedValue,
|
|
16
|
+
useSharedValue,
|
|
11
17
|
} from 'react-native-reanimated';
|
|
18
|
+
import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
|
|
12
19
|
|
|
13
20
|
type Props = {
|
|
14
21
|
style?: StyleProp<ViewStyle>;
|
|
@@ -20,29 +27,35 @@ let stickyKey = 0;
|
|
|
20
27
|
export default function StickyView({ children, style }: Props) {
|
|
21
28
|
const key = useMemo(() => `sticky_${stickyKey++}`, []);
|
|
22
29
|
const viewRef = useRef<View>(null);
|
|
23
|
-
const { handleStickyViewLayout,
|
|
24
|
-
|
|
25
|
-
const { scrollY } = useCollapsibleContext();
|
|
30
|
+
const { handleStickyViewLayout, animatedY } = useCollapsibleHeaderContext();
|
|
31
|
+
const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
|
|
26
32
|
|
|
27
33
|
useEffect(() => {
|
|
28
34
|
return () => handleStickyViewLayout(key, undefined);
|
|
29
35
|
}, [key]);
|
|
30
36
|
|
|
31
|
-
const handleLayout = useCallback(
|
|
32
|
-
|
|
33
|
-
|
|
37
|
+
const handleLayout = useCallback(
|
|
38
|
+
({ nativeEvent: { layout } }: LayoutChangeEvent) => {
|
|
39
|
+
currentLayout.value = layout;
|
|
40
|
+
handleStickyViewLayout(key, layout);
|
|
41
|
+
},
|
|
42
|
+
[key, handleStickyViewLayout]
|
|
43
|
+
);
|
|
34
44
|
|
|
35
45
|
const translateY = useDerivedValue(() => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
46
|
+
if (!currentLayout.value) {
|
|
47
|
+
return 0;
|
|
48
|
+
}
|
|
49
|
+
const { height: stickyHeight, y: top } = currentLayout.value;
|
|
50
|
+
const topValue = top;
|
|
51
|
+
|
|
39
52
|
return interpolate(
|
|
40
|
-
|
|
41
|
-
[0,
|
|
42
|
-
[0, 0,
|
|
53
|
+
animatedY.value,
|
|
54
|
+
[0, topValue, topValue + stickyHeight + 100],
|
|
55
|
+
[0, 0, stickyHeight + 100],
|
|
43
56
|
Extrapolate.CLAMP
|
|
44
57
|
);
|
|
45
|
-
}, [
|
|
58
|
+
}, []);
|
|
46
59
|
|
|
47
60
|
const animatedStyle = useAnimatedStyle(() => {
|
|
48
61
|
return {
|
|
@@ -60,7 +73,7 @@ export default function StickyView({ children, style }: Props) {
|
|
|
60
73
|
// @ts-ignore
|
|
61
74
|
ref={viewRef}
|
|
62
75
|
onLayout={handleLayout}
|
|
63
|
-
style={[styles.container,
|
|
76
|
+
style={[styles.container, style, animatedStyle]}
|
|
64
77
|
pointerEvents="box-none"
|
|
65
78
|
>
|
|
66
79
|
{children}
|
|
@@ -25,7 +25,7 @@ export default function useAnimatedScroll({
|
|
|
25
25
|
}: Props) {
|
|
26
26
|
const scrollDirection = useSharedValue('unknown');
|
|
27
27
|
const { scrollY } = useCollapsibleContext();
|
|
28
|
-
const { setCollapsibleHandlers,
|
|
28
|
+
const { setCollapsibleHandlers, fixedHeaderHeight } =
|
|
29
29
|
useInternalCollapsibleContext();
|
|
30
30
|
|
|
31
31
|
useEffect(() => {
|
|
@@ -36,10 +36,7 @@ export default function useAnimatedScroll({
|
|
|
36
36
|
|
|
37
37
|
const collapse = useCallback(
|
|
38
38
|
(animated = true) => {
|
|
39
|
-
scrollTo(
|
|
40
|
-
Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),
|
|
41
|
-
animated
|
|
42
|
-
);
|
|
39
|
+
scrollTo(fixedHeaderHeight.value, animated);
|
|
43
40
|
},
|
|
44
41
|
[scrollTo]
|
|
45
42
|
);
|
|
@@ -65,10 +62,7 @@ export default function useAnimatedScroll({
|
|
|
65
62
|
},
|
|
66
63
|
onEndDrag: () => {
|
|
67
64
|
if (!headerSnappable) return;
|
|
68
|
-
const maxY =
|
|
69
|
-
firstStickyViewY.value && firstStickyViewY.value > 0
|
|
70
|
-
? firstStickyViewY.value
|
|
71
|
-
: fixedHeaderHeight.value || 0;
|
|
65
|
+
const maxY = fixedHeaderHeight.value;
|
|
72
66
|
|
|
73
67
|
if (scrollY.value < maxY) {
|
|
74
68
|
const delta = Math.abs(scrollY.value - maxY);
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import { createContext,
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
import { LayoutRectangle } from 'react-native';
|
|
3
|
+
import Animated from 'react-native-reanimated';
|
|
2
4
|
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
headers: HeaderItem[];
|
|
7
|
-
mount: (key: string, header: ReactNode) => void;
|
|
8
|
-
update: (key: string, header: ReactNode) => void;
|
|
9
|
-
unmount: (key: string) => void;
|
|
5
|
+
export type CollapsibleContextHeaderType = {
|
|
6
|
+
handleStickyViewLayout: (key: string, layout?: LayoutRectangle) => void;
|
|
7
|
+
animatedY: Animated.SharedValue<number>;
|
|
10
8
|
};
|
|
11
9
|
|
|
12
10
|
export const CollapsibleHeaderContext =
|
package/src/types.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type { View } from 'react-native';
|
|
2
|
+
import type { LayoutRectangle, View } from 'react-native';
|
|
3
3
|
import type Animated from 'react-native-reanimated';
|
|
4
4
|
|
|
5
5
|
export type ScrollToIndexParams = {
|
|
@@ -33,16 +33,16 @@ export type CollapsibleContextInternalType = {
|
|
|
33
33
|
scrollViewRef: React.RefObject<any>;
|
|
34
34
|
containerRef: React.RefObject<View>;
|
|
35
35
|
contentMinHeight: Animated.SharedValue<number>;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
headerViewPositions: Animated.SharedValue<
|
|
37
|
+
Record<string, { top: number; stickyHeight: number }>
|
|
38
|
+
>;
|
|
39
39
|
fixedHeaderHeight: Animated.SharedValue<number>;
|
|
40
40
|
handleContainerHeight: (height: number) => void;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
handleHeaderContainerLayout: (
|
|
42
|
+
key: string,
|
|
43
|
+
layout?: LayoutRectangle,
|
|
44
|
+
stickyHeight?: number
|
|
44
45
|
) => void;
|
|
45
|
-
handleHeaderContainerLayout: (height: number) => void;
|
|
46
46
|
setCollapsibleHandlers: (handlers: CollapsibleHandles) => void;
|
|
47
47
|
};
|
|
48
48
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useCallback, useRef } from 'react';
|
|
2
|
+
import Animated, { useSharedValue } from 'react-native-reanimated';
|
|
3
|
+
|
|
4
|
+
export default function useSharedValueRef<T>(
|
|
5
|
+
defaultValue: T
|
|
6
|
+
): [Animated.SharedValue<T>, (value: T) => void] {
|
|
7
|
+
const sharedValue = useSharedValue<T>(defaultValue);
|
|
8
|
+
const savedValue = useRef<T>(defaultValue);
|
|
9
|
+
|
|
10
|
+
const appendValue = useCallback(
|
|
11
|
+
(value: T) => {
|
|
12
|
+
savedValue.current = {
|
|
13
|
+
...savedValue.current,
|
|
14
|
+
...value,
|
|
15
|
+
};
|
|
16
|
+
sharedValue.value = savedValue.current;
|
|
17
|
+
},
|
|
18
|
+
[sharedValue]
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
return [sharedValue, appendValue];
|
|
22
|
+
}
|