|
|
|
@@ -1,876 +0,0 @@
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/commonjs/index.js b/node_modules/react-native-drawer-layout/lib/commonjs/index.js
|
|
|
|
|
index 3dce76e..6c4b3e5 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/lib/commonjs/index.js
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/commonjs/index.js
|
|
|
|
|
@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Drawer", {
|
|
|
|
|
return _Drawer.Drawer;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
+Object.defineProperty(exports, "DrawerGestureContext", {
|
|
|
|
|
+ enumerable: true,
|
|
|
|
|
+ get: function () {
|
|
|
|
|
+ return _DrawerGestureContext.DrawerGestureContext;
|
|
|
|
|
+ }
|
|
|
|
|
+});
|
|
|
|
|
Object.defineProperty(exports, "DrawerProgressContext", {
|
|
|
|
|
enumerable: true,
|
|
|
|
|
get: function () {
|
|
|
|
|
@@ -21,6 +27,7 @@ Object.defineProperty(exports, "useDrawerProgress", {
|
|
|
|
|
return _useDrawerProgress.useDrawerProgress;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
+var _DrawerGestureContext = require("./utils/DrawerGestureContext.js");
|
|
|
|
|
var _DrawerProgressContext = require("./utils/DrawerProgressContext.js");
|
|
|
|
|
var _useDrawerProgress = require("./utils/useDrawerProgress.js");
|
|
|
|
|
var _Drawer = require("./views/Drawer");
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/commonjs/utils/DrawerGestureContext.js b/node_modules/react-native-drawer-layout/lib/commonjs/utils/DrawerGestureContext.js
|
|
|
|
|
new file mode 100644
|
|
|
|
|
index 0000000..de6d793
|
|
|
|
|
--- /dev/null
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/commonjs/utils/DrawerGestureContext.js
|
|
|
|
|
@@ -0,0 +1,11 @@
|
|
|
|
|
+"use strict";
|
|
|
|
|
+
|
|
|
|
|
+Object.defineProperty(exports, "__esModule", {
|
|
|
|
|
+ value: true
|
|
|
|
|
+});
|
|
|
|
|
+exports.DrawerGestureContext = void 0;
|
|
|
|
|
+var React = _interopRequireWildcard(require("react"));
|
|
|
|
|
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
|
|
|
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
|
|
|
+const DrawerGestureContext = exports.DrawerGestureContext = /*#__PURE__*/React.createContext(undefined);
|
|
|
|
|
+//# sourceMappingURL=DrawerGestureContext.js.map
|
|
|
|
|
\ No newline at end of file
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js b/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js
|
|
|
|
|
index fd65ab8..86a9a6a 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js
|
|
|
|
|
@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
|
|
var _reactNative = require("react-native");
|
|
|
|
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
|
|
|
var _useLatestCallback = _interopRequireDefault(require("use-latest-callback"));
|
|
|
|
|
+var _DrawerGestureContext = require("../utils/DrawerGestureContext.js");
|
|
|
|
|
var _DrawerProgressContext = require("../utils/DrawerProgressContext.js");
|
|
|
|
|
var _getDrawerWidth = require("../utils/getDrawerWidth.js");
|
|
|
|
|
var _GestureHandler = require("./GestureHandler");
|
|
|
|
|
@@ -79,38 +80,38 @@ function Drawer({
|
|
|
|
|
return () => hideStatusBar(false);
|
|
|
|
|
}, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
|
|
|
|
|
const interactionHandleRef = React.useRef(null);
|
|
|
|
|
- const startInteraction = () => {
|
|
|
|
|
+ const startInteraction = React.useCallback(() => {
|
|
|
|
|
interactionHandleRef.current = _reactNative.InteractionManager.createInteractionHandle();
|
|
|
|
|
- };
|
|
|
|
|
- const endInteraction = () => {
|
|
|
|
|
+ }, []);
|
|
|
|
|
+ const endInteraction = React.useCallback(() => {
|
|
|
|
|
if (interactionHandleRef.current != null) {
|
|
|
|
|
_reactNative.InteractionManager.clearInteractionHandle(interactionHandleRef.current);
|
|
|
|
|
interactionHandleRef.current = null;
|
|
|
|
|
}
|
|
|
|
|
- };
|
|
|
|
|
- const hideKeyboard = () => {
|
|
|
|
|
+ }, []);
|
|
|
|
|
+ const hideKeyboard = React.useCallback(() => {
|
|
|
|
|
if (keyboardDismissMode === 'on-drag') {
|
|
|
|
|
_reactNative.Keyboard.dismiss();
|
|
|
|
|
}
|
|
|
|
|
- };
|
|
|
|
|
- const onGestureBegin = () => {
|
|
|
|
|
+ }, [keyboardDismissMode]);
|
|
|
|
|
+ const onGestureBegin = React.useCallback(() => {
|
|
|
|
|
onGestureStart?.();
|
|
|
|
|
startInteraction();
|
|
|
|
|
hideKeyboard();
|
|
|
|
|
hideStatusBar(true);
|
|
|
|
|
- };
|
|
|
|
|
- const onGestureFinish = () => {
|
|
|
|
|
+ }, [onGestureStart, startInteraction, hideKeyboard, hideStatusBar]);
|
|
|
|
|
+ const onGestureFinish = React.useCallback(() => {
|
|
|
|
|
onGestureEnd?.();
|
|
|
|
|
endInteraction();
|
|
|
|
|
- };
|
|
|
|
|
- const onGestureAbort = () => {
|
|
|
|
|
+ }, [onGestureEnd, endInteraction]);
|
|
|
|
|
+ const onGestureAbort = React.useCallback(() => {
|
|
|
|
|
onGestureCancel?.();
|
|
|
|
|
endInteraction();
|
|
|
|
|
- };
|
|
|
|
|
+ }, [onGestureCancel, endInteraction]);
|
|
|
|
|
|
|
|
|
|
// FIXME: Currently hitSlop is broken when on Android when drawer is on right
|
|
|
|
|
// https://github.com/software-mansion/react-native-gesture-handler/issues/569
|
|
|
|
|
- const hitSlop = isRight ?
|
|
|
|
|
+ const hitSlop = React.useMemo(() => isRight ?
|
|
|
|
|
// Extend hitSlop to the side of the screen when drawer is closed
|
|
|
|
|
// This lets the user drag the drawer from the side of the screen
|
|
|
|
|
{
|
|
|
|
|
@@ -119,7 +120,7 @@ function Drawer({
|
|
|
|
|
} : {
|
|
|
|
|
left: 0,
|
|
|
|
|
width: isOpen ? undefined : swipeEdgeWidth
|
|
|
|
|
- };
|
|
|
|
|
+ }, [isRight, isOpen, swipeEdgeWidth]);
|
|
|
|
|
const touchStartX = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
|
|
|
const touchX = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
|
|
|
const translationX = (0, _reactNativeReanimated.useSharedValue)(getDrawerTranslationX(open));
|
|
|
|
|
@@ -158,40 +159,43 @@ function Drawer({
|
|
|
|
|
}, [getDrawerTranslationX, handleAnimationEnd, handleAnimationStart, onClose, onOpen, touchStartX, touchX, translationX]);
|
|
|
|
|
React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
|
|
|
|
|
const startX = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
|
|
|
- let pan = _GestureHandler.Gesture?.Pan().onBegin(event => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ const pan = React.useMemo(() => {
|
|
|
|
|
+ let panGesture = _GestureHandler.Gesture?.Pan().onBegin(event => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- startX.value = translationX.value;
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- touchStartX.value = event.x;
|
|
|
|
|
- }).onStart(() => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ startX.value = translationX.value;
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ touchStartX.value = event.x;
|
|
|
|
|
+ }).onStart(() => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- (0, _reactNativeReanimated.runOnJS)(onGestureBegin)();
|
|
|
|
|
- }).onChange(event => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ (0, _reactNativeReanimated.runOnJS)(onGestureBegin)();
|
|
|
|
|
+ }).onChange(event => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- touchX.value = event.x;
|
|
|
|
|
- translationX.value = startX.value + event.translationX;
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- }).onEnd((event, success) => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ touchX.value = event.x;
|
|
|
|
|
+ translationX.value = startX.value + event.translationX;
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ }).onEnd((event, success) => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- if (!success) {
|
|
|
|
|
- (0, _reactNativeReanimated.runOnJS)(onGestureAbort)();
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ if (!success) {
|
|
|
|
|
+ (0, _reactNativeReanimated.runOnJS)(onGestureAbort)();
|
|
|
|
|
+ }
|
|
|
|
|
+ const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
|
|
|
|
|
+ // If swiped to right, open the drawer, otherwise close it
|
|
|
|
|
+ (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
|
|
|
|
|
+ // If swiped to left, open the drawer, otherwise close it
|
|
|
|
|
+ (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
|
|
|
|
|
+ toggleDrawer(nextOpen, event.velocityX);
|
|
|
|
|
+ (0, _reactNativeReanimated.runOnJS)(onGestureFinish)();
|
|
|
|
|
+ }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
|
|
|
|
|
+ if (panGesture && configureGestureHandler) {
|
|
|
|
|
+ panGesture = configureGestureHandler(panGesture);
|
|
|
|
|
}
|
|
|
|
|
- const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
|
|
|
|
|
- // If swiped to right, open the drawer, otherwise close it
|
|
|
|
|
- (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
|
|
|
|
|
- // If swiped to left, open the drawer, otherwise close it
|
|
|
|
|
- (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
|
|
|
|
|
- toggleDrawer(nextOpen, event.velocityX);
|
|
|
|
|
- (0, _reactNativeReanimated.runOnJS)(onGestureFinish)();
|
|
|
|
|
- }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
|
|
|
|
|
- if (pan && configureGestureHandler) {
|
|
|
|
|
- pan = configureGestureHandler(pan);
|
|
|
|
|
- }
|
|
|
|
|
+ return panGesture;
|
|
|
|
|
+ }, [configureGestureHandler, drawerPosition, drawerType, gestureState, hitSlop, onGestureBegin, onGestureAbort, onGestureFinish, open, startX, swipeEnabled, swipeMinDistance, swipeMinVelocity, toggleDrawer, touchStartX, touchX, translationX]);
|
|
|
|
|
const translateX = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
|
|
|
// Comment stolen from react-native-gesture-handler/DrawerLayout
|
|
|
|
|
//
|
|
|
|
|
@@ -254,35 +258,38 @@ function Drawer({
|
|
|
|
|
style: [styles.container, style],
|
|
|
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerProgressContext.DrawerProgressContext.Provider, {
|
|
|
|
|
value: progress,
|
|
|
|
|
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GestureHandler.GestureDetector, {
|
|
|
|
|
- gesture: pan,
|
|
|
|
|
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
|
|
|
- style: [styles.main, {
|
|
|
|
|
- flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
|
|
|
|
|
- }],
|
|
|
|
|
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
|
|
|
- style: [styles.content, contentAnimatedStyle],
|
|
|
|
|
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
|
|
|
- accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
|
|
|
|
|
- importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
|
|
|
|
|
- style: styles.content,
|
|
|
|
|
- children: children
|
|
|
|
|
- }), drawerType !== 'permanent' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
|
|
|
|
|
- open: open,
|
|
|
|
|
- progress: progress,
|
|
|
|
|
- onPress: () => toggleDrawer(false),
|
|
|
|
|
- style: overlayStyle,
|
|
|
|
|
- accessibilityLabel: overlayAccessibilityLabel
|
|
|
|
|
- }) : null]
|
|
|
|
|
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
|
|
|
- removeClippedSubviews: _reactNative.Platform.OS !== 'ios',
|
|
|
|
|
- style: [styles.drawer, {
|
|
|
|
|
- width: drawerWidth,
|
|
|
|
|
- position: drawerType === 'permanent' ? 'relative' : 'absolute',
|
|
|
|
|
- zIndex: drawerType === 'back' ? -1 : 0
|
|
|
|
|
- }, drawerAnimatedStyle, drawerStyle],
|
|
|
|
|
- children: renderDrawerContent()
|
|
|
|
|
- })]
|
|
|
|
|
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerGestureContext.DrawerGestureContext.Provider, {
|
|
|
|
|
+ value: pan,
|
|
|
|
|
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GestureHandler.GestureDetector, {
|
|
|
|
|
+ gesture: pan,
|
|
|
|
|
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
|
|
|
+ style: [styles.main, {
|
|
|
|
|
+ flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
|
|
|
|
|
+ }],
|
|
|
|
|
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
|
|
|
+ style: [styles.content, contentAnimatedStyle],
|
|
|
|
|
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
|
|
|
+ accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
|
|
|
|
|
+ importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
|
|
|
|
|
+ style: styles.content,
|
|
|
|
|
+ children: children
|
|
|
|
|
+ }), drawerType !== 'permanent' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
|
|
|
|
|
+ open: open,
|
|
|
|
|
+ progress: progress,
|
|
|
|
|
+ onPress: () => toggleDrawer(false),
|
|
|
|
|
+ style: overlayStyle,
|
|
|
|
|
+ accessibilityLabel: overlayAccessibilityLabel
|
|
|
|
|
+ }) : null]
|
|
|
|
|
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
|
|
|
+ removeClippedSubviews: _reactNative.Platform.OS !== 'ios',
|
|
|
|
|
+ style: [styles.drawer, {
|
|
|
|
|
+ width: drawerWidth,
|
|
|
|
|
+ position: drawerType === 'permanent' ? 'relative' : 'absolute',
|
|
|
|
|
+ zIndex: drawerType === 'back' ? -1 : 0
|
|
|
|
|
+ }, drawerAnimatedStyle, drawerStyle],
|
|
|
|
|
+ children: renderDrawerContent()
|
|
|
|
|
+ })]
|
|
|
|
|
+ })
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/module/index.js b/node_modules/react-native-drawer-layout/lib/module/index.js
|
|
|
|
|
index a600e51..f08275c 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/lib/module/index.js
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/module/index.js
|
|
|
|
|
@@ -1,5 +1,6 @@
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
+export { DrawerGestureContext } from "./utils/DrawerGestureContext.js";
|
|
|
|
|
export { DrawerProgressContext } from "./utils/DrawerProgressContext.js";
|
|
|
|
|
export { useDrawerProgress } from "./utils/useDrawerProgress.js";
|
|
|
|
|
export { Drawer } from './views/Drawer';
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/module/utils/DrawerGestureContext.js b/node_modules/react-native-drawer-layout/lib/module/utils/DrawerGestureContext.js
|
|
|
|
|
new file mode 100644
|
|
|
|
|
index 0000000..1adaa9c
|
|
|
|
|
--- /dev/null
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/module/utils/DrawerGestureContext.js
|
|
|
|
|
@@ -0,0 +1,5 @@
|
|
|
|
|
+"use strict";
|
|
|
|
|
+
|
|
|
|
|
+import * as React from 'react';
|
|
|
|
|
+export const DrawerGestureContext = /*#__PURE__*/React.createContext(undefined);
|
|
|
|
|
+//# sourceMappingURL=DrawerGestureContext.js.map
|
|
|
|
|
\ No newline at end of file
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js b/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js
|
|
|
|
|
index 6d07126..981d9f8 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js
|
|
|
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
|
|
import { I18nManager, InteractionManager, Keyboard, Platform, StatusBar, StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
|
|
|
import Animated, { interpolate, ReduceMotion, runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
|
|
|
|
|
import useLatestCallback from 'use-latest-callback';
|
|
|
|
|
+import { DrawerGestureContext } from "../utils/DrawerGestureContext.js";
|
|
|
|
|
import { DrawerProgressContext } from "../utils/DrawerProgressContext.js";
|
|
|
|
|
import { getDrawerWidth } from "../utils/getDrawerWidth.js";
|
|
|
|
|
import { Gesture, GestureDetector, GestureHandlerRootView, GestureState } from './GestureHandler';
|
|
|
|
|
@@ -72,38 +73,38 @@ export function Drawer({
|
|
|
|
|
return () => hideStatusBar(false);
|
|
|
|
|
}, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
|
|
|
|
|
const interactionHandleRef = React.useRef(null);
|
|
|
|
|
- const startInteraction = () => {
|
|
|
|
|
+ const startInteraction = React.useCallback(() => {
|
|
|
|
|
interactionHandleRef.current = InteractionManager.createInteractionHandle();
|
|
|
|
|
- };
|
|
|
|
|
- const endInteraction = () => {
|
|
|
|
|
+ }, []);
|
|
|
|
|
+ const endInteraction = React.useCallback(() => {
|
|
|
|
|
if (interactionHandleRef.current != null) {
|
|
|
|
|
InteractionManager.clearInteractionHandle(interactionHandleRef.current);
|
|
|
|
|
interactionHandleRef.current = null;
|
|
|
|
|
}
|
|
|
|
|
- };
|
|
|
|
|
- const hideKeyboard = () => {
|
|
|
|
|
+ }, []);
|
|
|
|
|
+ const hideKeyboard = React.useCallback(() => {
|
|
|
|
|
if (keyboardDismissMode === 'on-drag') {
|
|
|
|
|
Keyboard.dismiss();
|
|
|
|
|
}
|
|
|
|
|
- };
|
|
|
|
|
- const onGestureBegin = () => {
|
|
|
|
|
+ }, [keyboardDismissMode]);
|
|
|
|
|
+ const onGestureBegin = React.useCallback(() => {
|
|
|
|
|
onGestureStart?.();
|
|
|
|
|
startInteraction();
|
|
|
|
|
hideKeyboard();
|
|
|
|
|
hideStatusBar(true);
|
|
|
|
|
- };
|
|
|
|
|
- const onGestureFinish = () => {
|
|
|
|
|
+ }, [onGestureStart, startInteraction, hideKeyboard, hideStatusBar]);
|
|
|
|
|
+ const onGestureFinish = React.useCallback(() => {
|
|
|
|
|
onGestureEnd?.();
|
|
|
|
|
endInteraction();
|
|
|
|
|
- };
|
|
|
|
|
- const onGestureAbort = () => {
|
|
|
|
|
+ }, [onGestureEnd, endInteraction]);
|
|
|
|
|
+ const onGestureAbort = React.useCallback(() => {
|
|
|
|
|
onGestureCancel?.();
|
|
|
|
|
endInteraction();
|
|
|
|
|
- };
|
|
|
|
|
+ }, [onGestureCancel, endInteraction]);
|
|
|
|
|
|
|
|
|
|
// FIXME: Currently hitSlop is broken when on Android when drawer is on right
|
|
|
|
|
// https://github.com/software-mansion/react-native-gesture-handler/issues/569
|
|
|
|
|
- const hitSlop = isRight ?
|
|
|
|
|
+ const hitSlop = React.useMemo(() => isRight ?
|
|
|
|
|
// Extend hitSlop to the side of the screen when drawer is closed
|
|
|
|
|
// This lets the user drag the drawer from the side of the screen
|
|
|
|
|
{
|
|
|
|
|
@@ -112,7 +113,7 @@ export function Drawer({
|
|
|
|
|
} : {
|
|
|
|
|
left: 0,
|
|
|
|
|
width: isOpen ? undefined : swipeEdgeWidth
|
|
|
|
|
- };
|
|
|
|
|
+ }, [isRight, isOpen, swipeEdgeWidth]);
|
|
|
|
|
const touchStartX = useSharedValue(0);
|
|
|
|
|
const touchX = useSharedValue(0);
|
|
|
|
|
const translationX = useSharedValue(getDrawerTranslationX(open));
|
|
|
|
|
@@ -151,40 +152,43 @@ export function Drawer({
|
|
|
|
|
}, [getDrawerTranslationX, handleAnimationEnd, handleAnimationStart, onClose, onOpen, touchStartX, touchX, translationX]);
|
|
|
|
|
React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
|
|
|
|
|
const startX = useSharedValue(0);
|
|
|
|
|
- let pan = Gesture?.Pan().onBegin(event => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ const pan = React.useMemo(() => {
|
|
|
|
|
+ let panGesture = Gesture?.Pan().onBegin(event => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- startX.value = translationX.value;
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- touchStartX.value = event.x;
|
|
|
|
|
- }).onStart(() => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ startX.value = translationX.value;
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ touchStartX.value = event.x;
|
|
|
|
|
+ }).onStart(() => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- runOnJS(onGestureBegin)();
|
|
|
|
|
- }).onChange(event => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ runOnJS(onGestureBegin)();
|
|
|
|
|
+ }).onChange(event => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- touchX.value = event.x;
|
|
|
|
|
- translationX.value = startX.value + event.translationX;
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- }).onEnd((event, success) => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
+ touchX.value = event.x;
|
|
|
|
|
+ translationX.value = startX.value + event.translationX;
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ }).onEnd((event, success) => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- if (!success) {
|
|
|
|
|
- runOnJS(onGestureAbort)();
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ if (!success) {
|
|
|
|
|
+ runOnJS(onGestureAbort)();
|
|
|
|
|
+ }
|
|
|
|
|
+ const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
|
|
|
|
|
+ // If swiped to right, open the drawer, otherwise close it
|
|
|
|
|
+ (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
|
|
|
|
|
+ // If swiped to left, open the drawer, otherwise close it
|
|
|
|
|
+ (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
|
|
|
|
|
+ toggleDrawer(nextOpen, event.velocityX);
|
|
|
|
|
+ runOnJS(onGestureFinish)();
|
|
|
|
|
+ }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
|
|
|
|
|
+ if (panGesture && configureGestureHandler) {
|
|
|
|
|
+ panGesture = configureGestureHandler(panGesture);
|
|
|
|
|
}
|
|
|
|
|
- const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
|
|
|
|
|
- // If swiped to right, open the drawer, otherwise close it
|
|
|
|
|
- (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
|
|
|
|
|
- // If swiped to left, open the drawer, otherwise close it
|
|
|
|
|
- (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
|
|
|
|
|
- toggleDrawer(nextOpen, event.velocityX);
|
|
|
|
|
- runOnJS(onGestureFinish)();
|
|
|
|
|
- }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
|
|
|
|
|
- if (pan && configureGestureHandler) {
|
|
|
|
|
- pan = configureGestureHandler(pan);
|
|
|
|
|
- }
|
|
|
|
|
+ return panGesture;
|
|
|
|
|
+ }, [configureGestureHandler, drawerPosition, drawerType, gestureState, hitSlop, onGestureBegin, onGestureAbort, onGestureFinish, open, startX, swipeEnabled, swipeMinDistance, swipeMinVelocity, toggleDrawer, touchStartX, touchX, translationX]);
|
|
|
|
|
const translateX = useDerivedValue(() => {
|
|
|
|
|
// Comment stolen from react-native-gesture-handler/DrawerLayout
|
|
|
|
|
//
|
|
|
|
|
@@ -247,35 +251,38 @@ export function Drawer({
|
|
|
|
|
style: [styles.container, style],
|
|
|
|
|
children: /*#__PURE__*/_jsx(DrawerProgressContext.Provider, {
|
|
|
|
|
value: progress,
|
|
|
|
|
- children: /*#__PURE__*/_jsx(GestureDetector, {
|
|
|
|
|
- gesture: pan,
|
|
|
|
|
- children: /*#__PURE__*/_jsxs(Animated.View, {
|
|
|
|
|
- style: [styles.main, {
|
|
|
|
|
- flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
|
|
|
|
|
- }],
|
|
|
|
|
- children: [/*#__PURE__*/_jsxs(Animated.View, {
|
|
|
|
|
- style: [styles.content, contentAnimatedStyle],
|
|
|
|
|
- children: [/*#__PURE__*/_jsx(View, {
|
|
|
|
|
- accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
|
|
|
|
|
- importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
|
|
|
|
|
- style: styles.content,
|
|
|
|
|
- children: children
|
|
|
|
|
- }), drawerType !== 'permanent' ? /*#__PURE__*/_jsx(Overlay, {
|
|
|
|
|
- open: open,
|
|
|
|
|
- progress: progress,
|
|
|
|
|
- onPress: () => toggleDrawer(false),
|
|
|
|
|
- style: overlayStyle,
|
|
|
|
|
- accessibilityLabel: overlayAccessibilityLabel
|
|
|
|
|
- }) : null]
|
|
|
|
|
- }), /*#__PURE__*/_jsx(Animated.View, {
|
|
|
|
|
- removeClippedSubviews: Platform.OS !== 'ios',
|
|
|
|
|
- style: [styles.drawer, {
|
|
|
|
|
- width: drawerWidth,
|
|
|
|
|
- position: drawerType === 'permanent' ? 'relative' : 'absolute',
|
|
|
|
|
- zIndex: drawerType === 'back' ? -1 : 0
|
|
|
|
|
- }, drawerAnimatedStyle, drawerStyle],
|
|
|
|
|
- children: renderDrawerContent()
|
|
|
|
|
- })]
|
|
|
|
|
+ children: /*#__PURE__*/_jsx(DrawerGestureContext.Provider, {
|
|
|
|
|
+ value: pan,
|
|
|
|
|
+ children: /*#__PURE__*/_jsx(GestureDetector, {
|
|
|
|
|
+ gesture: pan,
|
|
|
|
|
+ children: /*#__PURE__*/_jsxs(Animated.View, {
|
|
|
|
|
+ style: [styles.main, {
|
|
|
|
|
+ flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
|
|
|
|
|
+ }],
|
|
|
|
|
+ children: [/*#__PURE__*/_jsxs(Animated.View, {
|
|
|
|
|
+ style: [styles.content, contentAnimatedStyle],
|
|
|
|
|
+ children: [/*#__PURE__*/_jsx(View, {
|
|
|
|
|
+ accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
|
|
|
|
|
+ importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
|
|
|
|
|
+ style: styles.content,
|
|
|
|
|
+ children: children
|
|
|
|
|
+ }), drawerType !== 'permanent' ? /*#__PURE__*/_jsx(Overlay, {
|
|
|
|
|
+ open: open,
|
|
|
|
|
+ progress: progress,
|
|
|
|
|
+ onPress: () => toggleDrawer(false),
|
|
|
|
|
+ style: overlayStyle,
|
|
|
|
|
+ accessibilityLabel: overlayAccessibilityLabel
|
|
|
|
|
+ }) : null]
|
|
|
|
|
+ }), /*#__PURE__*/_jsx(Animated.View, {
|
|
|
|
|
+ removeClippedSubviews: Platform.OS !== 'ios',
|
|
|
|
|
+ style: [styles.drawer, {
|
|
|
|
|
+ width: drawerWidth,
|
|
|
|
|
+ position: drawerType === 'permanent' ? 'relative' : 'absolute',
|
|
|
|
|
+ zIndex: drawerType === 'back' ? -1 : 0
|
|
|
|
|
+ }, drawerAnimatedStyle, drawerStyle],
|
|
|
|
|
+ children: renderDrawerContent()
|
|
|
|
|
+ })]
|
|
|
|
|
+ })
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts
|
|
|
|
|
index 7e978f0..a8bce18 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts
|
|
|
|
|
@@ -1,3 +1,4 @@
|
|
|
|
|
+export { DrawerGestureContext } from './utils/DrawerGestureContext';
|
|
|
|
|
export { DrawerProgressContext } from './utils/DrawerProgressContext';
|
|
|
|
|
export { useDrawerProgress } from './utils/useDrawerProgress';
|
|
|
|
|
export { Drawer } from './views/Drawer';
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/utils/DrawerGestureContext.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/utils/DrawerGestureContext.d.ts
|
|
|
|
|
new file mode 100644
|
|
|
|
|
index 0000000..33ffbeb
|
|
|
|
|
--- /dev/null
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/utils/DrawerGestureContext.d.ts
|
|
|
|
|
@@ -0,0 +1,3 @@
|
|
|
|
|
+import * as React from 'react';
|
|
|
|
|
+export declare const DrawerGestureContext: React.Context<import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture | undefined>;
|
|
|
|
|
+//# sourceMappingURL=DrawerGestureContext.d.ts.map
|
|
|
|
|
\ No newline at end of file
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts
|
|
|
|
|
index 7e978f0..a8bce18 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts
|
|
|
|
|
@@ -1,3 +1,4 @@
|
|
|
|
|
+export { DrawerGestureContext } from './utils/DrawerGestureContext';
|
|
|
|
|
export { DrawerProgressContext } from './utils/DrawerProgressContext';
|
|
|
|
|
export { useDrawerProgress } from './utils/useDrawerProgress';
|
|
|
|
|
export { Drawer } from './views/Drawer';
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/lib/typescript/module/src/utils/DrawerGestureContext.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/module/src/utils/DrawerGestureContext.d.ts
|
|
|
|
|
new file mode 100644
|
|
|
|
|
index 0000000..33ffbeb
|
|
|
|
|
--- /dev/null
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/lib/typescript/module/src/utils/DrawerGestureContext.d.ts
|
|
|
|
|
@@ -0,0 +1,3 @@
|
|
|
|
|
+import * as React from 'react';
|
|
|
|
|
+export declare const DrawerGestureContext: React.Context<import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture | undefined>;
|
|
|
|
|
+//# sourceMappingURL=DrawerGestureContext.d.ts.map
|
|
|
|
|
\ No newline at end of file
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/src/index.tsx b/node_modules/react-native-drawer-layout/src/index.tsx
|
|
|
|
|
index 0aa6f53..61a37cf 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/src/index.tsx
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/src/index.tsx
|
|
|
|
|
@@ -1,3 +1,4 @@
|
|
|
|
|
+export { DrawerGestureContext } from './utils/DrawerGestureContext';
|
|
|
|
|
export { DrawerProgressContext } from './utils/DrawerProgressContext';
|
|
|
|
|
export { useDrawerProgress } from './utils/useDrawerProgress';
|
|
|
|
|
export { Drawer } from './views/Drawer';
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/src/utils/DrawerGestureContext.tsx b/node_modules/react-native-drawer-layout/src/utils/DrawerGestureContext.tsx
|
|
|
|
|
new file mode 100644
|
|
|
|
|
index 0000000..3aac957
|
|
|
|
|
--- /dev/null
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/src/utils/DrawerGestureContext.tsx
|
|
|
|
|
@@ -0,0 +1,6 @@
|
|
|
|
|
+import * as React from 'react';
|
|
|
|
|
+import type { PanGesture } from 'react-native-gesture-handler';
|
|
|
|
|
+
|
|
|
|
|
+export const DrawerGestureContext = React.createContext<PanGesture | undefined>(
|
|
|
|
|
+ undefined
|
|
|
|
|
+);
|
|
|
|
|
diff --git a/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx b/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx
|
|
|
|
|
index 9c40f41..ee5d075 100644
|
|
|
|
|
--- a/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx
|
|
|
|
|
+++ b/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx
|
|
|
|
|
@@ -21,6 +21,7 @@ import Animated, {
|
|
|
|
|
import useLatestCallback from 'use-latest-callback';
|
|
|
|
|
|
|
|
|
|
import type { DrawerProps } from '../types';
|
|
|
|
|
+import { DrawerGestureContext } from '../utils/DrawerGestureContext';
|
|
|
|
|
import { DrawerProgressContext } from '../utils/DrawerProgressContext';
|
|
|
|
|
import { getDrawerWidth } from '../utils/getDrawerWidth';
|
|
|
|
|
import {
|
|
|
|
|
@@ -110,47 +111,51 @@ export function Drawer({
|
|
|
|
|
|
|
|
|
|
const interactionHandleRef = React.useRef<number | null>(null);
|
|
|
|
|
|
|
|
|
|
- const startInteraction = () => {
|
|
|
|
|
+ const startInteraction = React.useCallback(() => {
|
|
|
|
|
interactionHandleRef.current = InteractionManager.createInteractionHandle();
|
|
|
|
|
- };
|
|
|
|
|
+ }, []);
|
|
|
|
|
|
|
|
|
|
- const endInteraction = () => {
|
|
|
|
|
+ const endInteraction = React.useCallback(() => {
|
|
|
|
|
if (interactionHandleRef.current != null) {
|
|
|
|
|
InteractionManager.clearInteractionHandle(interactionHandleRef.current);
|
|
|
|
|
interactionHandleRef.current = null;
|
|
|
|
|
}
|
|
|
|
|
- };
|
|
|
|
|
+ }, []);
|
|
|
|
|
|
|
|
|
|
- const hideKeyboard = () => {
|
|
|
|
|
+ const hideKeyboard = React.useCallback(() => {
|
|
|
|
|
if (keyboardDismissMode === 'on-drag') {
|
|
|
|
|
Keyboard.dismiss();
|
|
|
|
|
}
|
|
|
|
|
- };
|
|
|
|
|
+ }, [keyboardDismissMode]);
|
|
|
|
|
|
|
|
|
|
- const onGestureBegin = () => {
|
|
|
|
|
+ const onGestureBegin = React.useCallback(() => {
|
|
|
|
|
onGestureStart?.();
|
|
|
|
|
startInteraction();
|
|
|
|
|
hideKeyboard();
|
|
|
|
|
hideStatusBar(true);
|
|
|
|
|
- };
|
|
|
|
|
+ }, [onGestureStart, startInteraction, hideKeyboard, hideStatusBar]);
|
|
|
|
|
|
|
|
|
|
- const onGestureFinish = () => {
|
|
|
|
|
+ const onGestureFinish = React.useCallback(() => {
|
|
|
|
|
onGestureEnd?.();
|
|
|
|
|
endInteraction();
|
|
|
|
|
- };
|
|
|
|
|
+ }, [onGestureEnd, endInteraction]);
|
|
|
|
|
|
|
|
|
|
- const onGestureAbort = () => {
|
|
|
|
|
+ const onGestureAbort = React.useCallback(() => {
|
|
|
|
|
onGestureCancel?.();
|
|
|
|
|
endInteraction();
|
|
|
|
|
- };
|
|
|
|
|
+ }, [onGestureCancel, endInteraction]);
|
|
|
|
|
|
|
|
|
|
// FIXME: Currently hitSlop is broken when on Android when drawer is on right
|
|
|
|
|
// https://github.com/software-mansion/react-native-gesture-handler/issues/569
|
|
|
|
|
- const hitSlop = isRight
|
|
|
|
|
- ? // Extend hitSlop to the side of the screen when drawer is closed
|
|
|
|
|
- // This lets the user drag the drawer from the side of the screen
|
|
|
|
|
- { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
|
|
|
|
|
- : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };
|
|
|
|
|
+ const hitSlop = React.useMemo(
|
|
|
|
|
+ () =>
|
|
|
|
|
+ isRight
|
|
|
|
|
+ ? // Extend hitSlop to the side of the screen when drawer is closed
|
|
|
|
|
+ // This lets the user drag the drawer from the side of the screen
|
|
|
|
|
+ { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
|
|
|
|
|
+ : { left: 0, width: isOpen ? undefined : swipeEdgeWidth },
|
|
|
|
|
+ [isRight, isOpen, swipeEdgeWidth]
|
|
|
|
|
+ );
|
|
|
|
|
|
|
|
|
|
const touchStartX = useSharedValue(0);
|
|
|
|
|
const touchX = useSharedValue(0);
|
|
|
|
|
@@ -217,53 +222,76 @@ export function Drawer({
|
|
|
|
|
|
|
|
|
|
const startX = useSharedValue(0);
|
|
|
|
|
|
|
|
|
|
- let pan = Gesture?.Pan()
|
|
|
|
|
- .onBegin((event) => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
- startX.value = translationX.value;
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- touchStartX.value = event.x;
|
|
|
|
|
- })
|
|
|
|
|
- .onStart(() => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
- runOnJS(onGestureBegin)();
|
|
|
|
|
- })
|
|
|
|
|
- .onChange((event) => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
- touchX.value = event.x;
|
|
|
|
|
- translationX.value = startX.value + event.translationX;
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
- })
|
|
|
|
|
- .onEnd((event, success) => {
|
|
|
|
|
- 'worklet';
|
|
|
|
|
- gestureState.value = event.state;
|
|
|
|
|
-
|
|
|
|
|
- if (!success) {
|
|
|
|
|
- runOnJS(onGestureAbort)();
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const nextOpen =
|
|
|
|
|
- (Math.abs(event.translationX) > SWIPE_MIN_OFFSET &&
|
|
|
|
|
- Math.abs(event.translationX) > swipeMinVelocity) ||
|
|
|
|
|
- Math.abs(event.translationX) > swipeMinDistance
|
|
|
|
|
- ? drawerPosition === 'left'
|
|
|
|
|
- ? // If swiped to right, open the drawer, otherwise close it
|
|
|
|
|
- (event.velocityX === 0 ? event.translationX : event.velocityX) > 0
|
|
|
|
|
- : // If swiped to left, open the drawer, otherwise close it
|
|
|
|
|
- (event.velocityX === 0 ? event.translationX : event.velocityX) < 0
|
|
|
|
|
- : open;
|
|
|
|
|
-
|
|
|
|
|
- toggleDrawer(nextOpen, event.velocityX);
|
|
|
|
|
- runOnJS(onGestureFinish)();
|
|
|
|
|
- })
|
|
|
|
|
- .activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
|
|
|
|
|
- .failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
|
|
|
|
|
- .hitSlop(hitSlop)
|
|
|
|
|
- .enabled(drawerType !== 'permanent' && swipeEnabled);
|
|
|
|
|
-
|
|
|
|
|
- if (pan && configureGestureHandler) {
|
|
|
|
|
- pan = configureGestureHandler(pan);
|
|
|
|
|
- }
|
|
|
|
|
+ const pan = React.useMemo(() => {
|
|
|
|
|
+ let panGesture = Gesture?.Pan()
|
|
|
|
|
+ .onBegin((event) => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
+ startX.value = translationX.value;
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ touchStartX.value = event.x;
|
|
|
|
|
+ })
|
|
|
|
|
+ .onStart(() => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
+ runOnJS(onGestureBegin)();
|
|
|
|
|
+ })
|
|
|
|
|
+ .onChange((event) => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
+ touchX.value = event.x;
|
|
|
|
|
+ translationX.value = startX.value + event.translationX;
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+ })
|
|
|
|
|
+ .onEnd((event, success) => {
|
|
|
|
|
+ 'worklet';
|
|
|
|
|
+ gestureState.value = event.state;
|
|
|
|
|
+
|
|
|
|
|
+ if (!success) {
|
|
|
|
|
+ runOnJS(onGestureAbort)();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const nextOpen =
|
|
|
|
|
+ (Math.abs(event.translationX) > SWIPE_MIN_OFFSET &&
|
|
|
|
|
+ Math.abs(event.translationX) > swipeMinVelocity) ||
|
|
|
|
|
+ Math.abs(event.translationX) > swipeMinDistance
|
|
|
|
|
+ ? drawerPosition === 'left'
|
|
|
|
|
+ ? // If swiped to right, open the drawer, otherwise close it
|
|
|
|
|
+ (event.velocityX === 0 ? event.translationX : event.velocityX) >
|
|
|
|
|
+ 0
|
|
|
|
|
+ : // If swiped to left, open the drawer, otherwise close it
|
|
|
|
|
+ (event.velocityX === 0 ? event.translationX : event.velocityX) <
|
|
|
|
|
+ 0
|
|
|
|
|
+ : open;
|
|
|
|
|
+
|
|
|
|
|
+ toggleDrawer(nextOpen, event.velocityX);
|
|
|
|
|
+ runOnJS(onGestureFinish)();
|
|
|
|
|
+ })
|
|
|
|
|
+ .activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
|
|
|
|
|
+ .failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
|
|
|
|
|
+ .hitSlop(hitSlop)
|
|
|
|
|
+ .enabled(drawerType !== 'permanent' && swipeEnabled);
|
|
|
|
|
+
|
|
|
|
|
+ if (panGesture && configureGestureHandler) {
|
|
|
|
|
+ panGesture = configureGestureHandler(panGesture);
|
|
|
|
|
+ }
|
|
|
|
|
+ return panGesture;
|
|
|
|
|
+ }, [
|
|
|
|
|
+ configureGestureHandler,
|
|
|
|
|
+ drawerPosition,
|
|
|
|
|
+ drawerType,
|
|
|
|
|
+ gestureState,
|
|
|
|
|
+ hitSlop,
|
|
|
|
|
+ onGestureBegin,
|
|
|
|
|
+ onGestureAbort,
|
|
|
|
|
+ onGestureFinish,
|
|
|
|
|
+ open,
|
|
|
|
|
+ startX,
|
|
|
|
|
+ swipeEnabled,
|
|
|
|
|
+ swipeMinDistance,
|
|
|
|
|
+ swipeMinVelocity,
|
|
|
|
|
+ toggleDrawer,
|
|
|
|
|
+ touchStartX,
|
|
|
|
|
+ touchX,
|
|
|
|
|
+ translationX,
|
|
|
|
|
+ ]);
|
|
|
|
|
|
|
|
|
|
const translateX = useDerivedValue(() => {
|
|
|
|
|
// Comment stolen from react-native-gesture-handler/DrawerLayout
|
|
|
|
|
@@ -376,64 +404,66 @@ export function Drawer({
|
|
|
|
|
return (
|
|
|
|
|
<GestureHandlerRootView style={[styles.container, style]}>
|
|
|
|
|
<DrawerProgressContext.Provider value={progress}>
|
|
|
|
|
- <GestureDetector gesture={pan}>
|
|
|
|
|
- {/* Immediate child of gesture handler needs to be an Animated.View */}
|
|
|
|
|
- <Animated.View
|
|
|
|
|
- style={[
|
|
|
|
|
- styles.main,
|
|
|
|
|
- {
|
|
|
|
|
- flexDirection:
|
|
|
|
|
- drawerType === 'permanent'
|
|
|
|
|
- ? (isRight && direction === 'ltr') ||
|
|
|
|
|
- (!isRight && direction === 'rtl')
|
|
|
|
|
- ? 'row'
|
|
|
|
|
- : 'row-reverse'
|
|
|
|
|
- : 'row',
|
|
|
|
|
- },
|
|
|
|
|
- ]}
|
|
|
|
|
- >
|
|
|
|
|
- <Animated.View style={[styles.content, contentAnimatedStyle]}>
|
|
|
|
|
- <View
|
|
|
|
|
- accessibilityElementsHidden={
|
|
|
|
|
- isOpen && drawerType !== 'permanent'
|
|
|
|
|
- }
|
|
|
|
|
- importantForAccessibility={
|
|
|
|
|
- isOpen && drawerType !== 'permanent'
|
|
|
|
|
- ? 'no-hide-descendants'
|
|
|
|
|
- : 'auto'
|
|
|
|
|
- }
|
|
|
|
|
- style={styles.content}
|
|
|
|
|
- >
|
|
|
|
|
- {children}
|
|
|
|
|
- </View>
|
|
|
|
|
- {drawerType !== 'permanent' ? (
|
|
|
|
|
- <Overlay
|
|
|
|
|
- open={open}
|
|
|
|
|
- progress={progress}
|
|
|
|
|
- onPress={() => toggleDrawer(false)}
|
|
|
|
|
- style={overlayStyle}
|
|
|
|
|
- accessibilityLabel={overlayAccessibilityLabel}
|
|
|
|
|
- />
|
|
|
|
|
- ) : null}
|
|
|
|
|
- </Animated.View>
|
|
|
|
|
+ <DrawerGestureContext.Provider value={pan}>
|
|
|
|
|
+ <GestureDetector gesture={pan}>
|
|
|
|
|
+ {/* Immediate child of gesture handler needs to be an Animated.View */}
|
|
|
|
|
<Animated.View
|
|
|
|
|
- removeClippedSubviews={Platform.OS !== 'ios'}
|
|
|
|
|
style={[
|
|
|
|
|
- styles.drawer,
|
|
|
|
|
+ styles.main,
|
|
|
|
|
{
|
|
|
|
|
- width: drawerWidth,
|
|
|
|
|
- position:
|
|
|
|
|
- drawerType === 'permanent' ? 'relative' : 'absolute',
|
|
|
|
|
- zIndex: drawerType === 'back' ? -1 : 0,
|
|
|
|
|
+ flexDirection:
|
|
|
|
|
+ drawerType === 'permanent'
|
|
|
|
|
+ ? (isRight && direction === 'ltr') ||
|
|
|
|
|
+ (!isRight && direction === 'rtl')
|
|
|
|
|
+ ? 'row'
|
|
|
|
|
+ : 'row-reverse'
|
|
|
|
|
+ : 'row',
|
|
|
|
|
},
|
|
|
|
|
- drawerAnimatedStyle,
|
|
|
|
|
- drawerStyle,
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
- {renderDrawerContent()}
|
|
|
|
|
+ <Animated.View style={[styles.content, contentAnimatedStyle]}>
|
|
|
|
|
+ <View
|
|
|
|
|
+ accessibilityElementsHidden={
|
|
|
|
|
+ isOpen && drawerType !== 'permanent'
|
|
|
|
|
+ }
|
|
|
|
|
+ importantForAccessibility={
|
|
|
|
|
+ isOpen && drawerType !== 'permanent'
|
|
|
|
|
+ ? 'no-hide-descendants'
|
|
|
|
|
+ : 'auto'
|
|
|
|
|
+ }
|
|
|
|
|
+ style={styles.content}
|
|
|
|
|
+ >
|
|
|
|
|
+ {children}
|
|
|
|
|
+ </View>
|
|
|
|
|
+ {drawerType !== 'permanent' ? (
|
|
|
|
|
+ <Overlay
|
|
|
|
|
+ open={open}
|
|
|
|
|
+ progress={progress}
|
|
|
|
|
+ onPress={() => toggleDrawer(false)}
|
|
|
|
|
+ style={overlayStyle}
|
|
|
|
|
+ accessibilityLabel={overlayAccessibilityLabel}
|
|
|
|
|
+ />
|
|
|
|
|
+ ) : null}
|
|
|
|
|
+ </Animated.View>
|
|
|
|
|
+ <Animated.View
|
|
|
|
|
+ removeClippedSubviews={Platform.OS !== 'ios'}
|
|
|
|
|
+ style={[
|
|
|
|
|
+ styles.drawer,
|
|
|
|
|
+ {
|
|
|
|
|
+ width: drawerWidth,
|
|
|
|
|
+ position:
|
|
|
|
|
+ drawerType === 'permanent' ? 'relative' : 'absolute',
|
|
|
|
|
+ zIndex: drawerType === 'back' ? -1 : 0,
|
|
|
|
|
+ },
|
|
|
|
|
+ drawerAnimatedStyle,
|
|
|
|
|
+ drawerStyle,
|
|
|
|
|
+ ]}
|
|
|
|
|
+ >
|
|
|
|
|
+ {renderDrawerContent()}
|
|
|
|
|
+ </Animated.View>
|
|
|
|
|
</Animated.View>
|
|
|
|
|
- </Animated.View>
|
|
|
|
|
- </GestureDetector>
|
|
|
|
|
+ </GestureDetector>
|
|
|
|
|
+ </DrawerGestureContext.Provider>
|
|
|
|
|
</DrawerProgressContext.Provider>
|
|
|
|
|
</GestureHandlerRootView>
|
|
|
|
|
);
|