Skip to content

Commit

Permalink
Move lockableScrollableContentOffsetY into scrollable props (discord#15)
Browse files Browse the repository at this point in the history
* Revert "Add lockableScrollableContentOffsetY which does not change when scrollable is locked (discord#14)"

This reverts commit 859ab16.

* Move lockableScrollableContentOffsetY into scrollable props
  • Loading branch information
lsdimagine authored and yayvery committed Feb 24, 2024
1 parent 31b533d commit c2ee40f
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 20 deletions.
2 changes: 0 additions & 2 deletions src/components/bottomSheet/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
animatedScrollableOverrideState,
isScrollableRefreshable,
isScrollableLocked,
lockableScrollableContentOffsetY,
setScrollableRef,
removeScrollableRef,
} = useScrollable();
Expand Down Expand Up @@ -1110,7 +1109,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
isContentHeightFixed,
isScrollableRefreshable,
isScrollableLocked,
lockableScrollableContentOffsetY,
shouldHandleKeyboardEvents,
simultaneousHandlers: _providedSimultaneousHandlers,
waitFor: _providedWaitFor,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export function createBottomSheetScrollableComponent<T, P>(
refreshControl,
scrollBuffer,
preserveScrollMomentum,
lockableScrollableContentOffsetY,
// events
onScroll,
onScrollBeginDrag,
Expand All @@ -61,7 +62,8 @@ export function createBottomSheetScrollableComponent<T, P>(
onScrollBeginDrag,
onScrollEndDrag,
scrollBuffer,
preserveScrollMomentum
preserveScrollMomentum,
lockableScrollableContentOffsetY
);
const {
enableContentPanningGesture,
Expand Down
5 changes: 5 additions & 0 deletions src/components/bottomSheetScrollable/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@ export interface BottomSheetScrollableProps {
* Whether or not to preserve scroll momentum when expanding a scrollable bottom sheet component.
*/
preserveScrollMomentum?: boolean;

/**
* The optional lockable scrollable content offset ref, which will remain the same value when scrollable is locked.
*/
lockableScrollableContentOffsetY?: Animated.SharedValue<number>;
}

export type ScrollableProps<T> =
Expand Down
2 changes: 0 additions & 2 deletions src/contexts/internal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,6 @@ export interface BottomSheetInternalContextType
animatedScrollableContentOffsetY: Animated.SharedValue<number>;
animatedScrollableOverrideState: Animated.SharedValue<SCROLLABLE_STATE>;
isScrollableLocked: Animated.SharedValue<boolean>;
// the real content offset when the scrollable is locked
lockableScrollableContentOffsetY: Animated.SharedValue<number>;
isScrollableRefreshable: Animated.SharedValue<boolean>;
isContentHeightFixed: Animated.SharedValue<boolean>;
isInTemporaryPosition: Animated.SharedValue<boolean>;
Expand Down
30 changes: 20 additions & 10 deletions src/hooks/useScrollEventsHandlersDefault.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { scrollTo, useSharedValue, useWorkletCallback } from 'react-native-reanimated';
import { scrollTo, useSharedValue, useWorkletCallback, useAnimatedReaction } from 'react-native-reanimated';
import { useBottomSheetInternal } from './useBottomSheetInternal';
import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
import type {
Expand All @@ -16,7 +16,8 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
scrollableRef,
scrollableContentOffsetY,
scrollBuffer,
preserveScrollMomentum
preserveScrollMomentum,
lockableScrollableContentOffsetY,
) => {
// hooks
const {
Expand All @@ -25,10 +26,19 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
animatedAnimationState,
animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
isScrollableLocked,
lockableScrollableContentOffsetY,
} = useBottomSheetInternal();
const awaitingFirstScroll = useSharedValue(false);
const scrollEnded = useSharedValue(false);
const _lockableScrollableContentOffsetY = useSharedValue(0);

useAnimatedReaction(
() => _lockableScrollableContentOffsetY.value,
_lockableScrollableContentOffsetY => {
if (lockableScrollableContentOffsetY) {
lockableScrollableContentOffsetY.value = _lockableScrollableContentOffsetY;
}
}
);

//#region callbacks
const handleOnScroll: ScrollEventHandlerCallbackType<ScrollEventContextType> =
Expand Down Expand Up @@ -71,11 +81,11 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
// @ts-ignore
scrollTo(scrollableRef, 0, lockPosition, false);
scrollableContentOffsetY.value = lockPosition;
lockableScrollableContentOffsetY.value = lockPosition;
_lockableScrollableContentOffsetY.value = lockPosition;
}
return;
}
lockableScrollableContentOffsetY.value = event.contentOffset.y;
_lockableScrollableContentOffsetY.value = event.contentOffset.y;
},
[
scrollableRef,
Expand All @@ -89,7 +99,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
(event, context) => {
const y = event.contentOffset.y;
scrollableContentOffsetY.value = y;
lockableScrollableContentOffsetY.value = y;
_lockableScrollableContentOffsetY.value = y;
rootScrollableContentOffsetY.value = y;
context.initialContentOffsetY = y;
awaitingFirstScroll.value = true;
Expand Down Expand Up @@ -150,12 +160,12 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
// @ts-ignore
scrollTo(scrollableRef, 0, lockPosition, false);
scrollableContentOffsetY.value = lockPosition;
lockableScrollableContentOffsetY.value = lockPosition;
_lockableScrollableContentOffsetY.value = lockPosition;
return;
}
if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
scrollableContentOffsetY.value = y;
lockableScrollableContentOffsetY.value = y;
_lockableScrollableContentOffsetY.value = y;
rootScrollableContentOffsetY.value = y;
}
},
Expand All @@ -178,13 +188,13 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
// @ts-ignore
scrollTo(scrollableRef, 0, lockPosition, false);
scrollableContentOffsetY.value = 0;
lockableScrollableContentOffsetY.value = 0;
_lockableScrollableContentOffsetY.value = 0;
}
return;
}
if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
scrollableContentOffsetY.value = y;
lockableScrollableContentOffsetY.value = y;
_lockableScrollableContentOffsetY.value = y;
rootScrollableContentOffsetY.value = y;
}
},
Expand Down
6 changes: 4 additions & 2 deletions src/hooks/useScrollHandler.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
SharedValue,
runOnJS,
useAnimatedRef,
useAnimatedScrollHandler,
Expand All @@ -14,7 +15,8 @@ export const useScrollHandler = (
onScrollBeginDrag?: ScrollableEvent,
onScrollEndDrag?: ScrollableEvent,
scrollBuffer?: number,
preserveScrollMomentum?: boolean
preserveScrollMomentum?: boolean,
lockableScrollableContentOffsetY?: SharedValue<number>,
) => {
// refs
const scrollableRef = useAnimatedRef<Scrollable>();
Expand All @@ -29,7 +31,7 @@ export const useScrollHandler = (
handleOnEndDrag = noop,
handleOnMomentumEnd = noop,
handleOnMomentumBegin = noop,
} = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY, scrollBuffer, preserveScrollMomentum);
} = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY, scrollBuffer, preserveScrollMomentum, lockableScrollableContentOffsetY);

// callbacks
const scrollHandler = useAnimatedScrollHandler(
Expand Down
2 changes: 0 additions & 2 deletions src/hooks/useScrollable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export const useScrollable = () => {
);
const isScrollableRefreshable = useSharedValue<boolean>(false);
const isScrollableLocked = useSharedValue<boolean>(true);
const lockableScrollableContentOffsetY = useSharedValue<number>(0);

// callbacks
const setScrollableRef = useCallback((ref: ScrollableRef) => {
Expand Down Expand Up @@ -66,7 +65,6 @@ export const useScrollable = () => {
animatedScrollableOverrideState,
isScrollableRefreshable,
isScrollableLocked,
lockableScrollableContentOffsetY,
setScrollableRef,
removeScrollableRef,
};
Expand Down
3 changes: 2 additions & 1 deletion src/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ export type ScrollEventsHandlersHookType = (
ref: React.RefObject<Scrollable>,
contentOffsetY: SharedValue<number>,
scrollBuffer: number | undefined,
preserveScrollMomentum: boolean | undefined
preserveScrollMomentum: boolean | undefined,
lockableScrollableContentOffsetY: SharedValue<number> | undefined
) => {
handleOnScroll?: ScrollEventHandlerCallbackType;
handleOnBeginDrag?: ScrollEventHandlerCallbackType;
Expand Down

0 comments on commit c2ee40f

Please sign in to comment.