kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-05-19 19:49:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(drawer): expose draweropenprogress via react-contextapi (#125)

Browse Source
This commit is contained in:
Aravind Reddy
2019-10-21 06:29:22 +05:30
parent 395bb31a40
commit ffbc1f5115
3 changed files with 84 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/drawer/src/index.tsx
View File

@@ -22,6 +22,10 @@ export { default as DrawerView } from './views/DrawerView';
export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
export {
default as DrawerProgressContext,
} from './utils/DrawerProgressContext';
/**
* Types
*/

4
packages/drawer/src/utils/DrawerProgressContext.tsx Normal file
View File

@@ -0,0 +1,4 @@
import * as React from 'react';
import Animated from 'react-native-reanimated';
export default React.createContext<Animated.Node<number> | null>(null);

147
packages/drawer/src/views/Drawer.tsx
View File

@@ -14,6 +14,7 @@ import {
State,
} from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import DrawerProgressContext from '../utils/DrawerProgressContext';
const {
Clock,
@@ -513,82 +514,86 @@ export default class DrawerView extends React.PureComponent<Props> {
: { left: 0, width: open ? undefined : swipeEdgeWidth };
return (
<PanGestureHandler
ref={onGestureRef}
activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
onGestureEvent={this.handleGestureEvent}
onHandlerStateChange={this.handleGestureEvent}
hitSlop={hitSlop}
enabled={!locked}
{...gestureHandlerProps}
>
<Animated.View
onLayout={this.handleContainerLayout}
style={styles.main}
<DrawerProgressContext.Provider value={this.progress}>
<PanGestureHandler
ref={onGestureRef}
activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
onGestureEvent={this.handleGestureEvent}
onHandlerStateChange={this.handleGestureEvent}
hitSlop={hitSlop}
enabled={!locked}
{...gestureHandlerProps}
>
<Animated.View
style={[
styles.content,
{
transform: [{ translateX: contentTranslateX }],
},
sceneContainerStyle as any,
]}
onLayout={this.handleContainerLayout}
style={styles.main}
>
{renderSceneContent({ progress: this.progress })}
<TapGestureHandler onHandlerStateChange={this.handleTapStateChange}>
<Animated.View
style={[
styles.overlay,
{
opacity: interpolate(this.progress, {
inputRange: [PROGRESS_EPSILON, 1],
outputRange: [0, 1],
}),
// We don't want the user to be able to press through the overlay when drawer is open
// One approach is to adjust the pointerEvents based on the progress
// But we can also send the overlay behind the screen, which works, and is much less code
zIndex: cond(
greaterThan(this.progress, PROGRESS_EPSILON),
0,
-1
),
},
overlayStyle,
]}
/>
</TapGestureHandler>
</Animated.View>
<Animated.Code
exec={block([
onChange(this.manuallyTriggerSpring, [
cond(eq(this.manuallyTriggerSpring, TRUE), [
set(this.nextIsOpen, FALSE),
call([], () => (this.currentOpenValue = false)),
<Animated.View
style={[
styles.content,
{
transform: [{ translateX: contentTranslateX }],
},
sceneContainerStyle as any,
]}
>
{renderSceneContent({ progress: this.progress })}
<TapGestureHandler
onHandlerStateChange={this.handleTapStateChange}
>
<Animated.View
style={[
styles.overlay,
{
opacity: interpolate(this.progress, {
inputRange: [PROGRESS_EPSILON, 1],
outputRange: [0, 1],
}),
// We don't want the user to be able to press through the overlay when drawer is open
// One approach is to adjust the pointerEvents based on the progress
// But we can also send the overlay behind the screen, which works, and is much less code
zIndex: cond(
greaterThan(this.progress, PROGRESS_EPSILON),
0,
-1
),
},
overlayStyle,
]}
/>
</TapGestureHandler>
</Animated.View>
<Animated.Code
exec={block([
onChange(this.manuallyTriggerSpring, [
cond(eq(this.manuallyTriggerSpring, TRUE), [
set(this.nextIsOpen, FALSE),
call([], () => (this.currentOpenValue = false)),
]),
]),
]),
])}
/>
<Animated.View
accessibilityViewIsModal={open}
removeClippedSubviews={Platform.OS !== 'ios'}
onLayout={this.handleDrawerLayout}
style={[
styles.container,
right ? { right: offset } : { left: offset },
{
transform: [{ translateX: drawerTranslateX }],
opacity: this.drawerOpacity,
zIndex: drawerType === 'back' ? -1 : 0,
},
drawerStyle as any,
]}
>
{renderDrawerContent({ progress: this.progress })}
])}
/>
<Animated.View
accessibilityViewIsModal={open}
removeClippedSubviews={Platform.OS !== 'ios'}
onLayout={this.handleDrawerLayout}
style={[
styles.container,
right ? { right: offset } : { left: offset },
{
transform: [{ translateX: drawerTranslateX }],
opacity: this.drawerOpacity,
zIndex: drawerType === 'back' ? -1 : 0,
},
drawerStyle as any,
]}
>
{renderDrawerContent({ progress: this.progress })}
</Animated.View>
</Animated.View>
</Animated.View>
</PanGestureHandler>
</PanGestureHandler>
</DrawerProgressContext.Provider>
);
}
}