Skip to content

Commit ab97f77

Browse files
gorhomgorhom
committed
refactor: added isForcedClosing to animation state
1 parent b81a1fd commit ab97f77

File tree

2 files changed

+47
-36
lines changed

2 files changed

+47
-36
lines changed

‎src/components/bottomSheet/BottomSheet.tsx‎

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
260260
);
261261
}, [animatedLayoutState, animatedSnapPoints, handleComponent]);
262262
const isInTemporaryPosition = useSharedValue(false);
263-
const isForcedClosing = useSharedValue(false);
264263
const animatedContainerHeightDidChange = useSharedValue(false);
265264

266265
// gesture
@@ -554,12 +553,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
554553
animatedCurrentIndex.set(nextIndex);
555554

556555
// reset values
557-
isForcedClosing.value = false;
558556
animatedAnimationState.set({
559557
status: ANIMATION_STATUS.STOPPED,
560558
source: ANIMATION_SOURCE.NONE,
561559
nextIndex: undefined,
562560
nextPosition: undefined,
561+
isForcedClosing: undefined,
563562
});
564563
animatedContainerHeightDidChange.value = false;
565564
},
@@ -570,7 +569,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
570569
animatedAnimationState,
571570
animatedContainerHeightDidChange,
572571
isAnimatedOnMount,
573-
isForcedClosing,
574572
]
575573
);
576574
const animateToPosition: AnimateToPositionType = useCallback(
@@ -634,11 +632,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
634632
/**
635633
* set the animation state
636634
*/
637-
animatedAnimationState.set({
638-
status: ANIMATION_STATUS.RUNNING,
639-
source,
640-
nextIndex: index,
641-
nextPosition: position,
635+
animatedAnimationState.set(state => {
636+
'worklet';
637+
return {
638+
...state,
639+
status: ANIMATION_STATUS.RUNNING,
640+
source,
641+
nextIndex: index,
642+
nextPosition: position,
643+
};
642644
});
643645

644646
/**
@@ -860,10 +862,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
860862
animationConfigs?: WithSpringConfig | WithTimingConfig
861863
) {
862864
'worklet';
865+
const {
866+
status: animationStatus,
867+
nextIndex,
868+
isForcedClosing,
869+
} = animatedAnimationState.get();
870+
863871
/**
864872
* if a force closing is running and source not from user, then we early exit
865873
*/
866-
if (isForcedClosing.value && source !== ANIMATION_SOURCE.USER) {
874+
if (isForcedClosing && source !== ANIMATION_SOURCE.USER) {
867875
return;
868876
}
869877
/**
@@ -898,8 +906,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
898906
return;
899907
}
900908

901-
const { status: animationStatus, nextIndex } =
902-
animatedAnimationState.get();
903909
/**
904910
* when evaluating the position while the bottom sheet is animating.
905911
*/
@@ -986,7 +992,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
986992
animatedPosition,
987993
animatedSnapPoints,
988994
isAnimatedOnMount,
989-
isForcedClosing,
990995
isInTemporaryPosition,
991996
isLayoutCalculated,
992997
]
@@ -1030,12 +1035,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
10301035
* - already animating to next position.
10311036
* - sheet is forced closing.
10321037
*/
1033-
const { nextPosition, nextIndex } = animatedAnimationState.get();
1038+
const { nextPosition, nextIndex, isForcedClosing } =
1039+
animatedAnimationState.get();
10341040
if (
10351041
!isLayoutCalculated.value ||
10361042
index === nextIndex ||
10371043
targetPosition === nextPosition ||
1038-
isForcedClosing.value
1044+
isForcedClosing
10391045
) {
10401046
return;
10411047
}
@@ -1080,11 +1086,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
10801086
* - already animating to next position.
10811087
* - sheet is forced closing.
10821088
*/
1083-
const { nextPosition } = animatedAnimationState.get();
1089+
const { nextPosition, isForcedClosing } = animatedAnimationState.get();
10841090
if (
10851091
!isLayoutCalculated ||
10861092
targetPosition === nextPosition ||
1087-
isForcedClosing.value
1093+
isForcedClosing
10881094
) {
10891095
return;
10901096
}
@@ -1105,7 +1111,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
11051111
animateToPosition,
11061112
isInTemporaryPosition,
11071113
isLayoutCalculated,
1108-
isForcedClosing,
11091114
animatedLayoutState,
11101115
animatedAnimationState,
11111116
]
@@ -1129,11 +1134,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
11291134
* - already animating to next position.
11301135
* - sheet is forced closing.
11311136
*/
1132-
const { nextPosition } = animatedAnimationState.get();
1137+
const { nextPosition, isForcedClosing } = animatedAnimationState.get();
11331138
if (
11341139
!isLayoutCalculated.value ||
11351140
targetPosition === nextPosition ||
1136-
isForcedClosing.value
1141+
isForcedClosing
11371142
) {
11381143
return;
11391144
}
@@ -1152,7 +1157,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
11521157
},
11531158
[
11541159
animateToPosition,
1155-
isForcedClosing,
11561160
isLayoutCalculated,
11571161
isInTemporaryPosition,
11581162
animatedClosedPosition,
@@ -1177,8 +1181,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
11771181
* - already animating to next position.
11781182
* - sheet is forced closing.
11791183
*/
1180-
const { nextPosition } = animatedAnimationState.get();
1181-
if (targetPosition === nextPosition || isForcedClosing.value) {
1184+
const { nextPosition, isForcedClosing } = animatedAnimationState.get();
1185+
if (targetPosition === nextPosition || isForcedClosing) {
11821186
return;
11831187
}
11841188

@@ -1190,7 +1194,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
11901194
/**
11911195
* set force closing variable.
11921196
*/
1193-
isForcedClosing.value = true;
1197+
animatedAnimationState.set(state => {
1198+
'worklet';
1199+
return {
1200+
...state,
1201+
isForcedClosing: true,
1202+
};
1203+
});
11941204

11951205
runOnUI(animateToPosition)(
11961206
targetPosition,
@@ -1201,21 +1211,19 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
12011211
},
12021212
[
12031213
animateToPosition,
1204-
isForcedClosing,
12051214
isInTemporaryPosition,
12061215
animatedClosedPosition,
12071216
animatedAnimationState,
12081217
]
12091218
);
1210-
// biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheet.name): used for debug only
12111219
const handleExpand = useCallback(
12121220
function handleExpand(
12131221
animationConfigs?: WithSpringConfig | WithTimingConfig
12141222
) {
12151223
if (__DEV__) {
12161224
print({
1217-
component: BottomSheet.name,
1218-
method: handleExpand.name,
1225+
component: 'BottomSheet',
1226+
method: 'handleExpand',
12191227
});
12201228
}
12211229

@@ -1229,12 +1237,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
12291237
* - already animating to next position.
12301238
* - sheet is forced closing.
12311239
*/
1232-
const { nextPosition, nextIndex } = animatedAnimationState.get();
1240+
const { nextPosition, nextIndex, isForcedClosing } =
1241+
animatedAnimationState.get();
12331242
if (
12341243
!isLayoutCalculated.value ||
12351244
targetIndex === nextIndex ||
12361245
targetPosition === nextPosition ||
1237-
isForcedClosing.value
1246+
isForcedClosing
12381247
) {
12391248
return;
12401249
}
@@ -1255,20 +1264,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
12551264
animateToPosition,
12561265
isInTemporaryPosition,
12571266
isLayoutCalculated,
1258-
isForcedClosing,
12591267
animatedSnapPoints,
12601268
animatedAnimationState,
12611269
]
12621270
);
1263-
// biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheet.name): used for debug only
12641271
const handleCollapse = useCallback(
12651272
function handleCollapse(
12661273
animationConfigs?: WithSpringConfig | WithTimingConfig
12671274
) {
12681275
if (__DEV__) {
12691276
print({
1270-
component: BottomSheet.name,
1271-
method: handleCollapse.name,
1277+
component: 'BottomSheet',
1278+
method: 'handleCollapse',
12721279
});
12731280
}
12741281

@@ -1280,12 +1287,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
12801287
* - already animating to next position.
12811288
* - sheet is forced closing.
12821289
*/
1283-
const { nextPosition, nextIndex } = animatedAnimationState.get();
1290+
const { nextPosition, nextIndex, isForcedClosing } =
1291+
animatedAnimationState.get();
12841292
if (
12851293
!isLayoutCalculated ||
12861294
nextIndex === 0 ||
12871295
targetPosition === nextPosition ||
1288-
isForcedClosing.value
1296+
isForcedClosing
12891297
) {
12901298
return;
12911299
}
@@ -1304,7 +1312,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
13041312
},
13051313
[
13061314
animateToPosition,
1307-
isForcedClosing,
13081315
isLayoutCalculated,
13091316
isInTemporaryPosition,
13101317
animatedSnapPoints,

‎src/types.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,10 @@ export type AnimationState = {
244244
* The next position in pixels that the animation is targeting.
245245
*/
246246
nextPosition?: number;
247+
/**
248+
* Indicates whether the animation is forced closing to prevent any interruptions.
249+
*/
250+
isForcedClosing?: boolean;
247251
};
248252

249253
/**

0 commit comments

Comments
 (0)