feat: updated the patch

This commit is contained in:
Mo Gorhom
2021-09-14 20:17:35 +01:00
parent fc80fa2707
commit b1f54f48cb

View File

@@ -1,152 +1,249 @@
diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
index 35a863b..66239cd 100644 index 35a863b..d8dbca3 100644
--- a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts --- a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts +++ b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
@@ -22,6 +22,8 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext'; @@ -22,6 +22,8 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext'; export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
export { default as useCardAnimation } from './utils/useCardAnimation'; export { default as useCardAnimation } from './utils/useCardAnimation';
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef'; export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
+export { CardModalGestureContext } from './utils/CardModalGestureContext'; +export { ModalGestureContext, ModalGestureContextType } from './utils/ModalGestureContext';
+ +
/** /**
* Types * Types
*/ */
diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts b/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts b/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts
new file mode 100644 new file mode 100644
index 0000000..590bf05 index 0000000..9cd9184
--- /dev/null --- /dev/null
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts +++ b/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts
@@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
+import * as React from 'react'; +import * as React from 'react';
+import type { Animated } from 'react-native'; +import type { Animated } from 'react-native';
+ +
+export interface CardModalGestureContextType { +export interface ModalGestureContextType {
+ scrollableGestureRef: React.RefObject<any>; + scrollableGestureRef: React.RefObject<any>;
+ cardModalTranslateY: Animated.Value; + modalTranslateY: Animated.Value;
+} +}
+ +
+export declare const CardModalGestureContext: React.Context<CardModalGestureContextType>; +export declare const ModalGestureContext: React.Context<ModalGestureContextType>;
diff --git a/node_modules/@react-navigation/stack/src/index.tsx b/node_modules/@react-navigation/stack/src/index.tsx diff --git a/node_modules/@react-navigation/stack/src/index.tsx b/node_modules/@react-navigation/stack/src/index.tsx
index f20d3fb..d914384 100644 index f20d3fb..a8475dd 100644
--- a/node_modules/@react-navigation/stack/src/index.tsx --- a/node_modules/@react-navigation/stack/src/index.tsx
+++ b/node_modules/@react-navigation/stack/src/index.tsx +++ b/node_modules/@react-navigation/stack/src/index.tsx
@@ -31,6 +31,7 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext'; @@ -31,6 +31,7 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext'; export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
export { default as useCardAnimation } from './utils/useCardAnimation'; export { default as useCardAnimation } from './utils/useCardAnimation';
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef'; export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
+export { CardModalGestureContext } from './utils/CardModalGestureContext'; +export { ModalGestureContext } from './utils/ModalGestureContext';
/** /**
* Types * Types
diff --git a/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.tsx b/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.tsx diff --git a/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts b/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts
new file mode 100644 new file mode 100644
index 0000000..4b041b8 index 0000000..8b35adf
--- /dev/null --- /dev/null
+++ b/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.tsx +++ b/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts
@@ -0,0 +1,25 @@ @@ -0,0 +1,10 @@
+import React from 'react'; +import React from 'react';
+import { Animated } from 'react-native'; +import { Animated } from 'react-native';
+ +
+interface CardModalGestureContextType { +export interface ModalGestureContextType {
+ scrollableGestureRef: React.RefObject<any>; + scrollableGestureRef: React.RefObject<any>;
+ cardModalTranslateY: Animated.Value; + modalTranslateY: Animated.Value;
+} +}
+ +
+export const CardModalGestureContext = +export const ModalGestureContext =
+ React.createContext<CardModalGestureContextType | null>(null); + React.createContext<ModalGestureContextType | null>(null);
diff --git a/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx b/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx
new file mode 100644
index 0000000..cda7e29
--- /dev/null
+++ b/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { ModalGestureContext, ModalGestureContextType } from "../utils/ModalGestureContext"
+ +
+export const CardModalGestureContextProvider = (props: { +interface ModalGestureProviderProps {
+ value: CardModalGestureContextType; + /**
+ enable?: boolean; + * Context value.
+ *
+ * @type ModalGestureContextType
+ */
+ value: ModalGestureContextType;
+
+ /**
+ * Defines if current card is a iOS modal.
+ *
+ * @type boolean
+ * @default false
+ */
+ enabled?: boolean;
+
+ /**
+ * Child component
+ *
+ * @type React.ReactNode
+ */
+ children: React.ReactNode; + children: React.ReactNode;
+}) => { +}
+ if (props.enable) { +
+ return ( +const ModalGestureProvider = ({
+ <CardModalGestureContext.Provider value={props.value}> + value,
+ {props.children} + children,
+ </CardModalGestureContext.Provider> + enabled = false
+ ); +}: ModalGestureProviderProps) => enabled ? (
+ } + <ModalGestureContext.Provider value={value}>
+ return <>{props.children}</>; + {children}
+}; + </ModalGestureContext.Provider>
+) : children;
+
+export default ModalGestureProvider;
\ No newline at end of file
diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
index a013ff9..5542ab4 100755 index a013ff9..fa5db2d 100755
--- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx --- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
+++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx +++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
@@ -21,6 +21,10 @@ import type { @@ -21,6 +21,7 @@ import type {
TransitionSpec, TransitionSpec,
} from '../../types'; } from '../../types';
import CardAnimationContext from '../../utils/CardAnimationContext'; import CardAnimationContext from '../../utils/CardAnimationContext';
+import { +import ModalGestureProvider from '../ModalGestureProvider'
+ CardModalGestureContext,
+ CardModalGestureContextProvider,
+} from '@react-navigation/stack/src/utils/CardModalGestureContext';
import getDistanceForDirection from '../../utils/getDistanceForDirection'; import getDistanceForDirection from '../../utils/getDistanceForDirection';
import getInvertedMultiplier from '../../utils/getInvertedMultiplier'; import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
import memoize from '../../utils/memoize'; import memoize from '../../utils/memoize';
@@ -294,6 +298,8 @@ export default class Card extends React.Component<Props> { @@ -104,6 +105,8 @@ export default class Card extends React.Component<Props> {
) : null,
};
+ private scrollableGestureRef = React.createRef<any>();
+
componentDidMount() {
this.animate({ closing: this.props.closing });
this.isCurrentlyMounted = true;
@@ -294,6 +297,21 @@ export default class Card extends React.Component<Props> {
case GestureState.END: { case GestureState.END: {
this.isSwiping.setValue(FALSE); this.isSwiping.setValue(FALSE);
+ this.isSwiping.removeListener + this.isSwiping.removeListener
+
+ /**
+ * if scrollable modal is enabled, and the gesture value is small than the scrollable offset,
+ * then we exit the method and reset gesture value.
+ */
+ if(this.scrollableGestureRef.current &&
+ // @ts-ignore
+ this.props.gesture._value < Math.abs(this.props.gesture._offset)
+ ) {
+ this.props.gesture.setValue(0);
+ this.props.gesture.setOffset(0);
+ return;
+ }
+ +
let distance; let distance;
let translation; let translation;
let velocity; let velocity;
@@ -303,8 +309,16 @@ export default class Card extends React.Component<Props> { @@ -392,7 +410,7 @@ export default class Card extends React.Component<Props> {
gestureDirection === 'vertical-inverted'
) {
distance = layout.height;
- translation = nativeEvent.translationY;
- velocity = nativeEvent.velocityY;
+ // @ts-ignore
+ if(this.props.gesture._offset < 0) {
+ // @ts-ignore
+ translation = this.props.gesture._offset - this.props.gesture._value;
+ velocity = nativeEvent.velocityY / 2;
+ }else{
+ // @ts-ignore
+ translation = this.props.gesture._value;
+ velocity = nativeEvent.velocityY;
+ }
} else {
distance = layout.width;
translation = nativeEvent.translationX;
@@ -392,7 +406,7 @@ export default class Card extends React.Component<Props> {
return { return {
maxDeltaX: 15, maxDeltaX: 15,
minOffsetY: 5, minOffsetY: 5,
- hitSlop: { bottom: -layout.height + distance }, - hitSlop: { bottom: -layout.height + distance },
+ // hitSlop: { bottom: -layout.height + distance }, + hitSlop: this.scrollableGestureRef.current ? {} : { bottom: -layout.height + distance },
enableTrackpadTwoFingerGesture, enableTrackpadTwoFingerGesture,
}; };
} else if (gestureDirection === 'vertical-inverted') { } else if (gestureDirection === 'vertical-inverted') {
@@ -425,6 +439,7 @@ export default class Card extends React.Component<Props> { @@ -448,6 +466,11 @@ export default class Card extends React.Component<Props> {
} ...rest
} = this.props;
private contentRef = React.createRef<View>(); + const modalGestureValue = {
+ private scrollableGestureRef = React.createRef<any>(); + scrollableGestureRef: this.scrollableGestureRef,
+ modalTranslateY: gesture
render() { + }
const { +
@@ -526,10 +541,12 @@ export default class Card extends React.Component<Props> { const interpolationProps = this.getCardAnimation(
interpolationIndex,
current,
@@ -526,43 +549,49 @@ export default class Card extends React.Component<Props> {
style={[styles.container, containerStyle, customContainerStyle]} style={[styles.container, containerStyle, customContainerStyle]}
pointerEvents="box-none" pointerEvents="box-none"
> >
+ <CardModalGestureContextProvider enable={!next && getIsModalPresentation(styleInterpolator)} value={{ scrollableGestureRef: this.scrollableGestureRef, cardModalTranslateY: gesture }}> - <PanGestureHandler
<PanGestureHandler - enabled={layout.width !== 0 && gestureEnabled}
enabled={layout.width !== 0 && gestureEnabled} - onGestureEvent={handleGestureEvent}
onGestureEvent={handleGestureEvent} - onHandlerStateChange={this.handleGestureStateChange}
onHandlerStateChange={this.handleGestureStateChange} - {...this.gestureActivationCriteria()}
+ simultaneousHandlers={this.scrollableGestureRef} + <ModalGestureProvider
{...this.gestureActivationCriteria()} + enabled={!next && getIsModalPresentation(styleInterpolator)}
+ value={modalGestureValue}
> >
<Animated.View - <Animated.View
@@ -563,6 +580,7 @@ export default class Card extends React.Component<Props> { - needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
</CardSheet> - style={[styles.container, cardStyle]}
</Animated.View> + <PanGestureHandler
</PanGestureHandler> + enabled={layout.width !== 0 && gestureEnabled}
+ </CardModalGestureContextProvider> + onGestureEvent={handleGestureEvent}
+ onHandlerStateChange={this.handleGestureStateChange}
+ simultaneousHandlers={this.scrollableGestureRef}
+ {...this.gestureActivationCriteria()}
>
- {shadowEnabled && shadowStyle && !isTransparent ? (
- <Animated.View
- style={[
- styles.shadow,
- gestureDirection === 'horizontal'
- ? [styles.shadowHorizontal, styles.shadowLeft]
- : gestureDirection === 'horizontal-inverted'
- ? [styles.shadowHorizontal, styles.shadowRight]
- : gestureDirection === 'vertical'
- ? [styles.shadowVertical, styles.shadowTop]
- : [styles.shadowVertical, styles.shadowBottom],
- { backgroundColor },
- shadowStyle,
- ]}
- pointerEvents="none"
- />
- ) : null}
- <CardSheet
- ref={this.contentRef}
- enabled={pageOverflowEnabled}
- layout={layout}
- style={contentStyle}
+ <Animated.View
+ needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
+ style={[styles.container, cardStyle]}
>
- {children}
- </CardSheet>
- </Animated.View>
- </PanGestureHandler>
+ {shadowEnabled && shadowStyle && !isTransparent ? (
+ <Animated.View
+ style={[
+ styles.shadow,
+ gestureDirection === 'horizontal'
+ ? [styles.shadowHorizontal, styles.shadowLeft]
+ : gestureDirection === 'horizontal-inverted'
+ ? [styles.shadowHorizontal, styles.shadowRight]
+ : gestureDirection === 'vertical'
+ ? [styles.shadowVertical, styles.shadowTop]
+ : [styles.shadowVertical, styles.shadowBottom],
+ { backgroundColor },
+ shadowStyle,
+ ]}
+ pointerEvents="none"
+ />
+ ) : null}
+ <CardSheet
+ ref={this.contentRef}
+ enabled={pageOverflowEnabled}
+ layout={layout}
+ style={contentStyle}
+ >
+ {children}
+ </CardSheet>
+ </Animated.View>
+ </PanGestureHandler>
+ </ModalGestureProvider>
</Animated.View> </Animated.View>
</View> </View>
</CardAnimationContext.Provider> </CardAnimationContext.Provider>