Skip to content

Commit 8da83d2

Browse files
ammarahm-edammarahm-ed
committed
fix scrollhandler events
1 parent 48c95f2 commit 8da83d2

File tree

7 files changed

+45
-34
lines changed

7 files changed

+45
-34
lines changed

‎dist/src/hooks/use-scroll-handlers.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/src/hooks/use-scroll-handlers.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable curly */
22
import React, { useEffect, useRef } from 'react';
33
import { Platform, } from 'react-native';
4-
import { actionSheetEventManager } from '../eventmanager';
54
/**
65
* If you are using a `ScrollView` or `FlatList` in ActionSheet. You must attach `scrollHandlers`
76
* with it to enable vertical scrolling. For horizontal ScrollViews, you should not use this hook.
@@ -15,6 +14,7 @@ export function useScrollHandlers(id, ref) {
1514
var scrollLayout = useRef();
1615
var scrollOffset = useRef(0);
1716
var prevState = useRef(false);
17+
var subscription = useRef();
1818
var onScroll = function (event) {
1919
var _a;
2020
scrollOffset.current = event.nativeEvent.contentOffset.y;
@@ -47,7 +47,15 @@ export function useScrollHandlers(id, ref) {
4747
}
4848
}, [scrollRef]);
4949
useEffect(function () {
50-
var subscription = actionSheetEventManager.subscribe('onoffsetchange', function (offset) {
50+
return function () {
51+
var _a;
52+
(_a = subscription.current) === null || _a === void 0 ? void 0 : _a.unsubscribe();
53+
};
54+
}, [id, ref, disableScrolling, enableScrolling]);
55+
var onLayout = function (event) {
56+
var _a, _b;
57+
scrollLayout.current = event.nativeEvent.layout;
58+
subscription.current = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.ev.subscribe('onoffsetchange', function (offset) {
5159
var _a;
5260
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.modifyGesturesForLayout(id, scrollLayout.current, scrollOffset.current);
5361
if (offset < 3) {
@@ -63,14 +71,7 @@ export function useScrollHandlers(id, ref) {
6371
disableScrolling();
6472
}
6573
});
66-
return function () {
67-
subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
68-
};
69-
}, [id, ref, disableScrolling, enableScrolling]);
70-
var onLayout = function (event) {
71-
var _a;
72-
scrollLayout.current = event.nativeEvent.layout;
73-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.modifyGesturesForLayout(id, scrollLayout.current, scrollOffset.current);
74+
(_b = ref.current) === null || _b === void 0 ? void 0 : _b.modifyGesturesForLayout(id, scrollLayout.current, scrollOffset.current);
7475
};
7576
return {
7677
scrollEnabled: false,

‎dist/src/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { LayoutRectangle } from 'react-native';
3+
import EventManager from './eventmanager';
34
import type { ActionSheetProps } from './types';
45
export declare type ActionSheetRef = {
56
/**
@@ -36,6 +37,7 @@ export declare type ActionSheetRef = {
3637
modifyGesturesForLayout: (id: string, layout: LayoutRectangle | undefined, scrollOffset: number) => void;
3738
isGestureEnabled: () => boolean;
3839
isOpen: () => boolean;
40+
ev: EventManager;
3941
};
4042
declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef>>;
4143
export default _default;

‎dist/src/index.d.ts.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/src/index.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3232
/* eslint-disable curly */
3333
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
3434
import { Animated, BackHandler, Dimensions, Easing, Modal, PanResponder, Platform, SafeAreaView, StatusBar, TouchableOpacity, View, } from 'react-native';
35-
import { actionSheetEventManager } from './eventmanager';
35+
import EventManager, { actionSheetEventManager } from './eventmanager';
3636
import useSheetManager from './hooks/use-sheet-manager';
3737
import { useKeyboard } from './hooks/useKeyboard';
3838
import { getZIndexFromStack, isRenderedOnTop, SheetManager, } from './sheetmanager';
@@ -48,6 +48,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
4848
var initialValue = useRef(-1);
4949
var actionSheetHeight = useRef(0);
5050
var safeAreaPaddingTop = useRef();
51+
var internalEventManager = React.useMemo(function () { return new EventManager(); }, []);
5152
var contextRef = useRef('global');
5253
var currentSnapIndex = useRef(initialSnapIndex);
5354
var minTranslateValue = useRef(0);
@@ -94,7 +95,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
9495
keyboardAnimation(false);
9596
});
9697
var notifyOffsetChange = function (value) {
97-
actionSheetEventManager.publish('onoffsetchange', value);
98+
internalEventManager.publish('onoffsetchange', value);
9899
};
99100
var returnAnimation = React.useCallback(function (velocity) {
100101
if (!animated) {
@@ -204,7 +205,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
204205
if (keyboard.keyboardShown && !isModal) {
205206
return;
206207
}
207-
var subscription = actionSheetEventManager.subscribe('safeAreaLayout', function () {
208+
var subscription = internalEventManager.subscribe('safeAreaLayout', function () {
208209
subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
209210
var safeMarginFromTop = Platform.OS === 'ios'
210211
? safeAreaPaddingTop.current || 0
@@ -222,9 +223,9 @@ export default forwardRef(function ActionSheet(_a, ref) {
222223
});
223224
});
224225
if (safeAreaPaddingTop.current !== undefined || Platform.OS !== 'ios') {
225-
actionSheetEventManager.publish('safeAreaLayout');
226+
internalEventManager.publish('safeAreaLayout');
226227
}
227-
}, [dimensions.width, isModal, keyboard.keyboardShown]);
228+
}, [dimensions.width, isModal, keyboard.keyboardShown, internalEventManager]);
228229
var hideSheet = React.useCallback(function (vy, data) {
229230
if (!closable) {
230231
returnAnimation(vy);
@@ -545,7 +546,8 @@ export default forwardRef(function ActionSheet(_a, ref) {
545546
gestureBoundaries.current[id] = __assign(__assign({}, layout), { scrollOffset: scrollOffset });
546547
},
547548
isGestureEnabled: function () { return gestureEnabled; },
548-
isOpen: function () { return visible; }
549+
isOpen: function () { return visible; },
550+
ev: internalEventManager
549551
}); }, [
550552
animations.translateY,
551553
gestureEnabled,
@@ -555,6 +557,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
555557
setVisible,
556558
snapPoints.length,
557559
visible,
560+
internalEventManager,
558561
]);
559562
useImperativeHandle(ref, getRef, [getRef]);
560563
useEffect(function () {
@@ -639,7 +642,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
639642
{Platform.OS === 'ios' ? (<SafeAreaView pointerEvents="none" collapsable={false} onLayout={function (event) {
640643
var height = event.nativeEvent.layout.height;
641644
if (height !== undefined) {
642-
actionSheetEventManager.publish('safeAreaLayout');
645+
internalEventManager.publish('safeAreaLayout');
643646
safeAreaPaddingTop.current = event.nativeEvent.layout.height;
644647
}
645648
}} style={{

‎src/hooks/use-scroll-handlers.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
NativeSyntheticEvent,
88
Platform,
99
} from 'react-native';
10-
import {actionSheetEventManager} from '../eventmanager';
10+
import {EventHandlerSubscription} from '../eventmanager';
1111
import {ActionSheetRef} from '../index';
1212

1313
/**
@@ -26,6 +26,7 @@ export function useScrollHandlers<T>(
2626
const scrollLayout = useRef<LayoutRectangle>();
2727
const scrollOffset = useRef(0);
2828
const prevState = useRef(false);
29+
const subscription = useRef<EventHandlerSubscription>();
2930
const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
3031
scrollOffset.current = event.nativeEvent.contentOffset.y;
3132
ref.current?.modifyGesturesForLayout(
@@ -62,7 +63,14 @@ export function useScrollHandlers<T>(
6263
}, [scrollRef]);
6364

6465
useEffect(() => {
65-
const subscription = actionSheetEventManager.subscribe(
66+
return () => {
67+
subscription.current?.unsubscribe();
68+
};
69+
}, [id, ref, disableScrolling, enableScrolling]);
70+
71+
const onLayout = (event: LayoutChangeEvent) => {
72+
scrollLayout.current = event.nativeEvent.layout;
73+
subscription.current = ref.current?.ev.subscribe(
6674
'onoffsetchange',
6775
(offset: number) => {
6876
ref.current?.modifyGesturesForLayout(
@@ -81,13 +89,6 @@ export function useScrollHandlers<T>(
8189
}
8290
},
8391
);
84-
return () => {
85-
subscription?.unsubscribe();
86-
};
87-
}, [id, ref, disableScrolling, enableScrolling]);
88-
89-
const onLayout = (event: LayoutChangeEvent) => {
90-
scrollLayout.current = event.nativeEvent.layout;
9192
ref.current?.modifyGesturesForLayout(
9293
id,
9394
scrollLayout.current,

‎src/index.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
TouchableOpacity,
2525
View,
2626
} from 'react-native';
27-
import {actionSheetEventManager} from './eventmanager';
27+
import EventManager, {actionSheetEventManager} from './eventmanager';
2828
import useSheetManager from './hooks/use-sheet-manager';
2929
import {useKeyboard} from './hooks/useKeyboard';
3030
import {
@@ -79,6 +79,7 @@ export type ActionSheetRef = {
7979
isGestureEnabled: () => boolean;
8080

8181
isOpen: () => boolean;
82+
ev: EventManager;
8283
};
8384

8485
const CALCULATED_DEVICE_HEIGHT = 0;
@@ -116,6 +117,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
116117
const initialValue = useRef(-1);
117118
const actionSheetHeight = useRef(0);
118119
const safeAreaPaddingTop = useRef<number>();
120+
const internalEventManager = React.useMemo(() => new EventManager(), []);
119121
const contextRef = useRef('global');
120122
const currentSnapIndex = useRef(initialSnapIndex);
121123
const minTranslateValue = useRef(0);
@@ -178,7 +180,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
178180
);
179181

180182
const notifyOffsetChange = (value: number) => {
181-
actionSheetEventManager.publish('onoffsetchange', value);
183+
internalEventManager.publish('onoffsetchange', value);
182184
};
183185
const returnAnimation = React.useCallback(
184186
(velocity?: number) => {
@@ -323,7 +325,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
323325
if (keyboard.keyboardShown && !isModal) {
324326
return;
325327
}
326-
let subscription = actionSheetEventManager.subscribe(
328+
let subscription = internalEventManager.subscribe(
327329
'safeAreaLayout',
328330
() => {
329331
subscription?.unsubscribe();
@@ -349,10 +351,10 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
349351
);
350352

351353
if (safeAreaPaddingTop.current !== undefined || Platform.OS !== 'ios') {
352-
actionSheetEventManager.publish('safeAreaLayout');
354+
internalEventManager.publish('safeAreaLayout');
353355
}
354356
},
355-
[dimensions.width, isModal, keyboard.keyboardShown],
357+
[dimensions.width, isModal, keyboard.keyboardShown, internalEventManager],
356358
);
357359

358360
const hideSheet = React.useCallback(
@@ -720,6 +722,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
720722
},
721723
isGestureEnabled: () => gestureEnabled,
722724
isOpen: () => visible,
725+
ev: internalEventManager,
723726
}),
724727
[
725728
animations.translateY,
@@ -730,6 +733,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
730733
setVisible,
731734
snapPoints.length,
732735
visible,
736+
internalEventManager,
733737
],
734738
);
735739

@@ -834,7 +838,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
834838
onLayout={event => {
835839
let height = event.nativeEvent.layout.height;
836840
if (height !== undefined) {
837-
actionSheetEventManager.publish('safeAreaLayout');
841+
internalEventManager.publish('safeAreaLayout');
838842
safeAreaPaddingTop.current = event.nativeEvent.layout.height;
839843
}
840844
}}

0 commit comments

Comments
 (0)