Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b1f54f4

Browse files
committed
feat: updated the patch
1 parent fc80fa2 commit b1f54f4

File tree

1 file changed

+177
-80
lines changed

1 file changed

+177
-80
lines changed
Lines changed: 177 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,249 @@
11
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
2-
index 35a863b..66239cd 100644
2+
index 35a863b..d8dbca3 100644
33
--- a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
44
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
55
@@ -22,6 +22,8 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
66
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
77
export { default as useCardAnimation } from './utils/useCardAnimation';
88
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
9-
+export { CardModalGestureContext } from './utils/CardModalGestureContext';
9+
+export { ModalGestureContext, ModalGestureContextType } from './utils/ModalGestureContext';
1010
+
1111
/**
1212
* Types
1313
*/
14-
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
14+
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
1515
new file mode 100644
16-
index 0000000..590bf05
16+
index 0000000..9cd9184
1717
--- /dev/null
18-
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts
18+
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts
1919
@@ -0,0 +1,9 @@
2020
+import * as React from 'react';
2121
+import type { Animated } from 'react-native';
2222
+
23-
+export interface CardModalGestureContextType {
23+
+export interface ModalGestureContextType {
2424
+ scrollableGestureRef: React.RefObject<any>;
25-
+ cardModalTranslateY: Animated.Value;
25+
+ modalTranslateY: Animated.Value;
2626
+}
2727
+
28-
+export declare const CardModalGestureContext: React.Context<CardModalGestureContextType>;
28+
+export declare const ModalGestureContext: React.Context<ModalGestureContextType>;
2929
diff --git a/node_modules/@react-navigation/stack/src/index.tsx b/node_modules/@react-navigation/stack/src/index.tsx
30-
index f20d3fb..d914384 100644
30+
index f20d3fb..a8475dd 100644
3131
--- a/node_modules/@react-navigation/stack/src/index.tsx
3232
+++ b/node_modules/@react-navigation/stack/src/index.tsx
3333
@@ -31,6 +31,7 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
3434
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
3535
export { default as useCardAnimation } from './utils/useCardAnimation';
3636
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
37-
+export { CardModalGestureContext } from './utils/CardModalGestureContext';
37+
+export { ModalGestureContext } from './utils/ModalGestureContext';
3838

3939
/**
4040
* Types
41-
diff --git a/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.tsx b/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.tsx
41+
diff --git a/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts b/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts
4242
new file mode 100644
43-
index 0000000..4b041b8
43+
index 0000000..8b35adf
4444
--- /dev/null
45-
+++ b/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.tsx
46-
@@ -0,0 +1,25 @@
45+
+++ b/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts
46+
@@ -0,0 +1,10 @@
4747
+import React from 'react';
4848
+import { Animated } from 'react-native';
4949
+
50-
+interface CardModalGestureContextType {
50+
+export interface ModalGestureContextType {
5151
+ scrollableGestureRef: React.RefObject<any>;
52-
+ cardModalTranslateY: Animated.Value;
52+
+ modalTranslateY: Animated.Value;
5353
+}
5454
+
55-
+export const CardModalGestureContext =
56-
+ React.createContext<CardModalGestureContextType | null>(null);
55+
+export const ModalGestureContext =
56+
+ React.createContext<ModalGestureContextType | null>(null);
57+
diff --git a/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx b/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx
58+
new file mode 100644
59+
index 0000000..cda7e29
60+
--- /dev/null
61+
+++ b/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx
62+
@@ -0,0 +1,38 @@
63+
+import React from 'react';
64+
+import { ModalGestureContext, ModalGestureContextType } from "../utils/ModalGestureContext"
65+
+
66+
+interface ModalGestureProviderProps {
67+
+ /**
68+
+ * Context value.
69+
+ *
70+
+ * @type ModalGestureContextType
71+
+ */
72+
+ value: ModalGestureContextType;
73+
+
74+
+ /**
75+
+ * Defines if current card is a iOS modal.
76+
+ *
77+
+ * @type boolean
78+
+ * @default false
79+
+ */
80+
+ enabled?: boolean;
5781
+
58-
+export const CardModalGestureContextProvider = (props: {
59-
+ value: CardModalGestureContextType;
60-
+ enable?: boolean;
82+
+ /**
83+
+ * Child component
84+
+ *
85+
+ * @type React.ReactNode
86+
+ */
6187
+ children: React.ReactNode;
62-
+}) => {
63-
+ if (props.enable) {
64-
+ return (
65-
+ <CardModalGestureContext.Provider value={props.value}>
66-
+ {props.children}
67-
+ </CardModalGestureContext.Provider>
68-
+ );
69-
+ }
70-
+ return <>{props.children}</>;
71-
+};
88+
+}
89+
+
90+
+const ModalGestureProvider = ({
91+
+ value,
92+
+ children,
93+
+ enabled = false
94+
+}: ModalGestureProviderProps) => enabled ? (
95+
+ <ModalGestureContext.Provider value={value}>
96+
+ {children}
97+
+ </ModalGestureContext.Provider>
98+
+) : children;
99+
+
100+
+export default ModalGestureProvider;
101+
\ No newline at end of file
72102
diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
73-
index a013ff9..5542ab4 100755
103+
index a013ff9..fa5db2d 100755
74104
--- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
75105
+++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
76-
@@ -21,6 +21,10 @@ import type {
106+
@@ -21,6 +21,7 @@ import type {
77107
TransitionSpec,
78108
} from '../../types';
79109
import CardAnimationContext from '../../utils/CardAnimationContext';
80-
+import {
81-
+ CardModalGestureContext,
82-
+ CardModalGestureContextProvider,
83-
+} from '@react-navigation/stack/src/utils/CardModalGestureContext';
110+
+import ModalGestureProvider from '../ModalGestureProvider'
84111
import getDistanceForDirection from '../../utils/getDistanceForDirection';
85112
import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
86113
import memoize from '../../utils/memoize';
87-
@@ -294,6 +298,8 @@ export default class Card extends React.Component<Props> {
114+
@@ -104,6 +105,8 @@ export default class Card extends React.Component<Props> {
115+
) : null,
116+
};
117+
118+
+ private scrollableGestureRef = React.createRef<any>();
119+
+
120+
componentDidMount() {
121+
this.animate({ closing: this.props.closing });
122+
this.isCurrentlyMounted = true;
123+
@@ -294,6 +297,21 @@ export default class Card extends React.Component<Props> {
88124
case GestureState.END: {
89125
this.isSwiping.setValue(FALSE);
90126

91127
+ this.isSwiping.removeListener
128+
+
129+
+ /**
130+
+ * if scrollable modal is enabled, and the gesture value is small than the scrollable offset,
131+
+ * then we exit the method and reset gesture value.
132+
+ */
133+
+ if(this.scrollableGestureRef.current &&
134+
+ // @ts-ignore
135+
+ this.props.gesture._value < Math.abs(this.props.gesture._offset)
136+
+ ) {
137+
+ this.props.gesture.setValue(0);
138+
+ this.props.gesture.setOffset(0);
139+
+ return;
140+
+ }
92141
+
93142
let distance;
94143
let translation;
95144
let velocity;
96-
@@ -303,8 +309,16 @@ export default class Card extends React.Component<Props> {
97-
gestureDirection === 'vertical-inverted'
98-
) {
99-
distance = layout.height;
100-
- translation = nativeEvent.translationY;
101-
- velocity = nativeEvent.velocityY;
102-
+ // @ts-ignore
103-
+ if(this.props.gesture._offset < 0) {
104-
+ // @ts-ignore
105-
+ translation = this.props.gesture._offset - this.props.gesture._value;
106-
+ velocity = nativeEvent.velocityY / 2;
107-
+ }else{
108-
+ // @ts-ignore
109-
+ translation = this.props.gesture._value;
110-
+ velocity = nativeEvent.velocityY;
111-
+ }
112-
} else {
113-
distance = layout.width;
114-
translation = nativeEvent.translationX;
115-
@@ -392,7 +406,7 @@ export default class Card extends React.Component<Props> {
145+
@@ -392,7 +410,7 @@ export default class Card extends React.Component<Props> {
116146
return {
117147
maxDeltaX: 15,
118148
minOffsetY: 5,
119149
- hitSlop: { bottom: -layout.height + distance },
120-
+ // hitSlop: { bottom: -layout.height + distance },
150+
+ hitSlop: this.scrollableGestureRef.current ? {} : { bottom: -layout.height + distance },
121151
enableTrackpadTwoFingerGesture,
122152
};
123153
} else if (gestureDirection === 'vertical-inverted') {
124-
@@ -425,6 +439,7 @@ export default class Card extends React.Component<Props> {
125-
}
126-
127-
private contentRef = React.createRef<View>();
128-
+ private scrollableGestureRef = React.createRef<any>();
154+
@@ -448,6 +466,11 @@ export default class Card extends React.Component<Props> {
155+
...rest
156+
} = this.props;
129157

130-
render() {
131-
const {
132-
@@ -526,10 +541,12 @@ export default class Card extends React.Component<Props> {
158+
+ const modalGestureValue = {
159+
+ scrollableGestureRef: this.scrollableGestureRef,
160+
+ modalTranslateY: gesture
161+
+ }
162+
+
163+
const interpolationProps = this.getCardAnimation(
164+
interpolationIndex,
165+
current,
166+
@@ -526,43 +549,49 @@ export default class Card extends React.Component<Props> {
133167
style={[styles.container, containerStyle, customContainerStyle]}
134168
pointerEvents="box-none"
135169
>
136-
+ <CardModalGestureContextProvider enable={!next && getIsModalPresentation(styleInterpolator)} value={{ scrollableGestureRef: this.scrollableGestureRef, cardModalTranslateY: gesture }}>
137-
<PanGestureHandler
138-
enabled={layout.width !== 0 && gestureEnabled}
139-
onGestureEvent={handleGestureEvent}
140-
onHandlerStateChange={this.handleGestureStateChange}
141-
+ simultaneousHandlers={this.scrollableGestureRef}
142-
{...this.gestureActivationCriteria()}
170+
- <PanGestureHandler
171+
- enabled={layout.width !== 0 && gestureEnabled}
172+
- onGestureEvent={handleGestureEvent}
173+
- onHandlerStateChange={this.handleGestureStateChange}
174+
- {...this.gestureActivationCriteria()}
175+
+ <ModalGestureProvider
176+
+ enabled={!next && getIsModalPresentation(styleInterpolator)}
177+
+ value={modalGestureValue}
143178
>
144-
<Animated.View
145-
@@ -563,6 +580,7 @@ export default class Card extends React.Component<Props> {
146-
</CardSheet>
147-
</Animated.View>
148-
</PanGestureHandler>
149-
+ </CardModalGestureContextProvider>
179+
- <Animated.View
180+
- needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
181+
- style={[styles.container, cardStyle]}
182+
+ <PanGestureHandler
183+
+ enabled={layout.width !== 0 && gestureEnabled}
184+
+ onGestureEvent={handleGestureEvent}
185+
+ onHandlerStateChange={this.handleGestureStateChange}
186+
+ simultaneousHandlers={this.scrollableGestureRef}
187+
+ {...this.gestureActivationCriteria()}
188+
>
189+
- {shadowEnabled && shadowStyle && !isTransparent ? (
190+
- <Animated.View
191+
- style={[
192+
- styles.shadow,
193+
- gestureDirection === 'horizontal'
194+
- ? [styles.shadowHorizontal, styles.shadowLeft]
195+
- : gestureDirection === 'horizontal-inverted'
196+
- ? [styles.shadowHorizontal, styles.shadowRight]
197+
- : gestureDirection === 'vertical'
198+
- ? [styles.shadowVertical, styles.shadowTop]
199+
- : [styles.shadowVertical, styles.shadowBottom],
200+
- { backgroundColor },
201+
- shadowStyle,
202+
- ]}
203+
- pointerEvents="none"
204+
- />
205+
- ) : null}
206+
- <CardSheet
207+
- ref={this.contentRef}
208+
- enabled={pageOverflowEnabled}
209+
- layout={layout}
210+
- style={contentStyle}
211+
+ <Animated.View
212+
+ needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
213+
+ style={[styles.container, cardStyle]}
214+
>
215+
- {children}
216+
- </CardSheet>
217+
- </Animated.View>
218+
- </PanGestureHandler>
219+
+ {shadowEnabled && shadowStyle && !isTransparent ? (
220+
+ <Animated.View
221+
+ style={[
222+
+ styles.shadow,
223+
+ gestureDirection === 'horizontal'
224+
+ ? [styles.shadowHorizontal, styles.shadowLeft]
225+
+ : gestureDirection === 'horizontal-inverted'
226+
+ ? [styles.shadowHorizontal, styles.shadowRight]
227+
+ : gestureDirection === 'vertical'
228+
+ ? [styles.shadowVertical, styles.shadowTop]
229+
+ : [styles.shadowVertical, styles.shadowBottom],
230+
+ { backgroundColor },
231+
+ shadowStyle,
232+
+ ]}
233+
+ pointerEvents="none"
234+
+ />
235+
+ ) : null}
236+
+ <CardSheet
237+
+ ref={this.contentRef}
238+
+ enabled={pageOverflowEnabled}
239+
+ layout={layout}
240+
+ style={contentStyle}
241+
+ >
242+
+ {children}
243+
+ </CardSheet>
244+
+ </Animated.View>
245+
+ </PanGestureHandler>
246+
+ </ModalGestureProvider>
150247
</Animated.View>
151248
</View>
152249
</CardAnimationContext.Provider>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /