Skip to content

Commit

Permalink
feat: added snap to position (#443)
Browse files Browse the repository at this point in the history 
* chore: added snapToPosition and rename snapToIndex

* chore: updated example

* fix: allow temporary position to snap to top
  • Loading branch information
@gorhom
gorhom committed May 16, 2021
1 parent 73a7ad9 commit 9ca5f29
Show file tree
Hide file tree
Showing 12 changed files with 191 additions and 111 deletions.
6 changes: 3 additions & 3 deletions example/src/Dev.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ const BasicExample = () => {
console.log('handleSheetChanges', index);
}, []);
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapTo(index);
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleSnapPosition = useCallback(position => {
bottomSheetRef.current?.snapTo(position);
bottomSheetRef.current?.snapToIndex(position);
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
Expand All @@ -103,7 +103,7 @@ const BasicExample = () => {
setOptions({
headerShown: shownHeader.current,
});
}, []);
}, [setOptions]);
//#endregion

// renders
Expand Down
2 changes: 1 addition & 1 deletion example/src/Perf.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const App = () => {
loop++;
}

bottomSheetRef.current?.snapTo(index++);
bottomSheetRef.current?.snapToIndex(index++);
}, 1000);

return () => {
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/advanced/CustomBackgroundExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const CustomBackgroundExample = () => {

// callbacks
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapTo(index);
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/advanced/CustomHandleExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const CustomHandleExample = () => {

// callbacks
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapTo(index);
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
Expand Down
14 changes: 5 additions & 9 deletions example/src/screens/basic/BasicExamples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,10 @@ interface ExampleScreenProps {
const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
memo(() => {
//#region state
const [
enableContentPanningGesture,
setEnableContentPanningGesture,
] = useState(true);
const [
enableHandlePanningGesture,
setEnableHandlePanningGesture,
] = useState(true);
const [enableContentPanningGesture, setEnableContentPanningGesture] =
useState(true);
const [enableHandlePanningGesture, setEnableHandlePanningGesture] =
useState(true);
//#endregion

//#region refs
Expand Down Expand Up @@ -65,7 +61,7 @@ const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
[]
);
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapTo(index);
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/integrations/NavigatorExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const NavigatorExample = () => {
console.log('handleSheetChange', index);
}, []);
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapTo(index);
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
Expand Down
110 changes: 77 additions & 33 deletions src/components/bottomSheet/BottomSheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ import {
SCROLLABLE_STATE,
KEYBOARD_BLUR_BEHAVIOR,
} from '../../constants';
import { animate, getKeyboardAnimationConfigs, print } from '../../utilities';
import {
animate,
getKeyboardAnimationConfigs,
normalizeSnapPoint,
print,
} from '../../utilities';
import {
DEFAULT_ANIMATION_EASING,
DEFAULT_ANIMATION_DURATION,
Expand Down Expand Up @@ -514,7 +519,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
animatedPosition,
animatedSnapPoints,
animatedContainerHeight,
isExtendedByKeyboard: isInTemporaryPosition,
isInTemporaryPosition,
scrollableContentOffsetY,
animateToPoint: animateToPosition,
});
Expand All @@ -530,17 +535,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
animatedPosition,
animatedSnapPoints,
animatedContainerHeight,
isExtendedByKeyboard: isInTemporaryPosition,
isInTemporaryPosition,
animateToPoint: animateToPosition,
});
//#endregion

//#region public methods
const handleSnapTo = useCallback(
function handleSnapToPoint(
const handleSnapToIndex = useCallback(
function handleSnapToIndex(
index: number,
animationDuration: number = DEFAULT_ANIMATION_DURATION,
animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) {
const snapPoints = animatedSnapPoints.value;
invariant(
Expand All @@ -565,22 +569,61 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
}

const newSnapPoint = snapPoints[index];
runOnUI(animateToPosition)(newSnapPoint, 0, {
duration: animationDuration,
easing: animationEasing,
});
runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs);
},
[
animateToPosition,
animatedSnapPoints,
animatedContainerHeight.value,
animatedContainerHeight,
animatedPosition,
]
);
const handleSnapToPosition = useWorkletCallback(
function handleSnapToPosition(
position: number | string,
animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) {
/**
* verify if sheet is closed.
*/
if (animatedPosition.value === animatedContainerHeight.value) {
isClosing.current = false;
}

/**
* exit method if sheet is closing.
*/
if (isClosing.current) {
return;
}

/**
* mark the new position as temporary.
*/
isInTemporaryPosition.value = true;

/**
* normalized provided position.
*/
const nextPosition = normalizeSnapPoint(
position,
animatedContainerHeight.value,
topInset,
bottomInset
);
animateToPosition(nextPosition, 0, animationConfigs);
},
[
animateToPosition,
animatedContainerHeight,
animatedPosition,
bottomInset,
topInset,
]
);
const handleClose = useCallback(
function handleClose(
animationDuration: number = DEFAULT_ANIMATION_DURATION,
animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) {
print({
component: BottomSheet.name,
Expand All @@ -601,17 +644,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
}

isClosing.current = true;
runOnUI(animateToPosition)(animatedContainerHeight.value, 0, {
duration: animationDuration,
easing: animationEasing,
});
runOnUI(animateToPosition)(
animatedContainerHeight.value,
0,
animationConfigs
);
},
[animateToPosition, animatedContainerHeight, animatedPosition]
);
const handleExpand = useCallback(
function handleExpand(
animationDuration: number = DEFAULT_ANIMATION_DURATION,
animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) {
/**
* verify if sheet is closed.
Expand All @@ -628,10 +671,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
}
const snapPoints = animatedSnapPoints.value;
const newSnapPoint = snapPoints[snapPoints.length - 1];
runOnUI(animateToPosition)(newSnapPoint, 0, {
duration: animationDuration,
easing: animationEasing,
});
runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs);
},
[
animateToPosition,
Expand All @@ -642,8 +682,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
);
const handleCollapse = useCallback(
function handleCollapse(
animationDuration: number = DEFAULT_ANIMATION_DURATION,
animationEasing: Animated.EasingFunction = DEFAULT_ANIMATION_EASING
animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) {
/**
* verify if sheet is closed.
Expand All @@ -661,10 +700,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(

const snapPoints = animatedSnapPoints.value;
const newSnapPoint = snapPoints[0];
runOnUI(animateToPosition)(newSnapPoint, 0, {
duration: animationDuration,
easing: animationEasing,
});
runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs);
},
[
animateToPosition,
Expand All @@ -675,7 +711,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
);

useImperativeHandle(ref, () => ({
snapTo: handleSnapTo,
snapToIndex: handleSnapToIndex,
snapToPosition: handleSnapToPosition,
expand: handleExpand,
collapse: handleCollapse,
close: handleClose,
Expand Down Expand Up @@ -725,12 +762,19 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
);
const externalContextVariables = useMemo(
() => ({
snapTo: handleSnapTo,
snapToIndex: handleSnapToIndex,
snapToPosition: handleSnapToPosition,
expand: handleExpand,
collapse: handleCollapse,
close: handleClose,
}),
[handleSnapTo, handleExpand, handleCollapse, handleClose]
[
handleSnapToIndex,
handleSnapToPosition,
handleExpand,
handleCollapse,
handleClose,
]
);
//#endregion

Expand Down
8 changes: 4 additions & 4 deletions src/components/bottomSheetBackdrop/usePressBehavior.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const usePressBehavior = ({
'closeOnPress' | 'disappearsOnIndex' | 'pressBehavior'
>) => {
//#region hooks
const { snapTo, close } = useBottomSheet();
const { snapToIndex, close } = useBottomSheet();
//#endregion

//#region variables
Expand All @@ -35,11 +35,11 @@ export const usePressBehavior = ({
if (syntheticPressBehavior === 'close') {
close();
} else if (syntheticPressBehavior === 'collapse') {
snapTo(disappearsOnIndex as number);
snapToIndex(disappearsOnIndex as number);
} else if (typeof syntheticPressBehavior === 'number') {
snapTo(syntheticPressBehavior);
snapToIndex(syntheticPressBehavior);
}
}, [close, disappearsOnIndex, syntheticPressBehavior, snapTo]);
}, [snapToIndex, close, disappearsOnIndex, syntheticPressBehavior]);
//#endregion

//#region effects
Expand Down
28 changes: 18 additions & 10 deletions src/components/bottomSheetModal/BottomSheetModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,8 @@ const BottomSheetModalComponent = forwardRef<
//#endregion

//#region hooks
const {
containerHeight,
mountSheet,
unmountSheet,
willUnmountSheet,
} = useBottomSheetModalInternal();
const { containerHeight, mountSheet, unmountSheet, willUnmountSheet } =
useBottomSheetModalInternal();
const { removePortal: unmountPortal } = usePortal();
//#endregion

Expand Down Expand Up @@ -112,11 +108,22 @@ const BottomSheetModalComponent = forwardRef<
//#endregion

//#region bottom sheet methods
const handleSnapTo = useCallback<BottomSheetMethods['snapTo']>((...args) => {
const handleSnapToIndex = useCallback<BottomSheetMethods['snapToIndex']>(
(...args) => {
if (minimized.current) {
return;
}
bottomSheetRef.current?.snapToIndex(...args);
},
[]
);
const handleSnapToPosition = useCallback<
BottomSheetMethods['snapToPosition']
>((...args) => {
if (minimized.current) {
return;
}
bottomSheetRef.current?.snapTo(...args);
bottomSheetRef.current?.snapToPosition(...args);
}, []);
const handleExpand = useCallback((...args) => {
if (minimized.current) {
Expand Down Expand Up @@ -224,7 +231,7 @@ const BottomSheetModalComponent = forwardRef<
return;
}
minimized.current = false;
bottomSheetRef.current?.snapTo(restoreIndexRef.current);
bottomSheetRef.current?.snapToIndex(restoreIndexRef.current);
}, []);
//#endregion

Expand Down Expand Up @@ -289,7 +296,8 @@ const BottomSheetModalComponent = forwardRef<
//#region expose methods
useImperativeHandle(ref, () => ({
// sheet
snapTo: handleSnapTo,
snapToIndex: handleSnapToIndex,
snapToPosition: handleSnapToPosition,
expand: handleExpand,
collapse: handleCollapse,
close: handleClose,
Expand Down
Loading

0 comments on commit 9ca5f29

Please sign in to comment.