From cb49d431f4bb24245cc376f92b2a2bac486f2bed Mon Sep 17 00:00:00 2001 From: "satyajit.happy" Date: Sat, 15 Jun 2019 00:06:24 +0200 Subject: [PATCH] feat: add cardX options in navigationOptions --- .../stack/example/src/TransparentStack.js | 4 ++-- .../NestedNavigator.test.tsx.snap | 2 ++ .../StackNavigator.test.tsx.snap | 2 ++ packages/stack/src/types.tsx | 7 +++--- packages/stack/src/views/Stack/Card.tsx | 3 +++ packages/stack/src/views/Stack/Stack.tsx | 24 ++++++++++--------- packages/stack/src/views/Stack/StackItem.tsx | 11 +++++---- 7 files changed, 33 insertions(+), 20 deletions(-) diff --git a/packages/stack/example/src/TransparentStack.js b/packages/stack/example/src/TransparentStack.js index 83a92701..bda5ad70 100644 --- a/packages/stack/example/src/TransparentStack.js +++ b/packages/stack/example/src/TransparentStack.js @@ -73,11 +73,11 @@ export default createStackNavigator( }, { initialRouteName: 'List', - transparentCard: true, mode: 'modal', headerMode: 'none', - navigationOptions: { + defaultNavigationOptions: { gesturesEnabled: false, + cardTransparent: true, }, cardStyleInterpolator: ({ progress: { current } }) => { const opacity = Animated.interpolate(current, { diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap index 6139c435..3ad1df36 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap @@ -172,6 +172,7 @@ Array [ Object { "backgroundColor": "#eee", }, + undefined, ] } > @@ -345,6 +346,7 @@ Array [ Object { "backgroundColor": "#eee", }, + undefined, ] } /> diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap index bde01829..58a4ce8d 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap @@ -172,6 +172,7 @@ Array [ Object { "backgroundColor": "#eee", }, + undefined, ] } /> @@ -507,6 +508,7 @@ Array [ Object { "backgroundColor": "#eee", }, + undefined, ] } /> diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index fdfcde5a..710e6a77 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -96,6 +96,10 @@ export type HeaderProps = { export type NavigationStackOptions = HeaderOptions & { title?: string; header?: null | ((props: HeaderProps) => React.ReactNode); + cardShadowEnabled?: boolean; + cardOverlayEnabled?: boolean; + cardTransparent?: boolean; + cardStyle?: StyleProp; animationEnabled?: boolean; gesturesEnabled?: boolean; gestureResponseDistance?: { @@ -108,9 +112,6 @@ export type NavigationStackOptions = HeaderOptions & { export type NavigationConfig = TransitionPreset & { mode: 'card' | 'modal'; headerMode: HeaderMode; - cardShadowEnabled?: boolean; - cardOverlayEnabled?: boolean; - transparentCard?: boolean; }; export type SceneDescriptor = { diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx index 49480b45..456cf693 100755 --- a/packages/stack/src/views/Stack/Card.tsx +++ b/packages/stack/src/views/Stack/Card.tsx @@ -45,6 +45,7 @@ type Props = ViewProps & { }; styleInterpolator: CardStyleInterpolator; containerStyle?: StyleProp; + contentStyle?: StyleProp; }; type Binary = 0 | 1; @@ -470,6 +471,7 @@ export default class Card extends React.Component { children, styleInterpolator, containerStyle: customContainerStyle, + contentStyle, ...rest } = this.props; @@ -519,6 +521,7 @@ export default class Card extends React.Component { style={[ styles.container, transparent ? styles.transparent : styles.opaque, + contentStyle, ]} > {children} diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx index fd3c765c..2e0cd799 100755 --- a/packages/stack/src/views/Stack/Stack.tsx +++ b/packages/stack/src/views/Stack/Stack.tsx @@ -41,11 +41,8 @@ type Props = { getGesturesEnabled: (props: { route: Route }) => boolean; renderHeader: (props: HeaderContainerProps) => React.ReactNode; renderScene: (props: { route: Route }) => React.ReactNode; - transparentCard?: boolean; headerMode: HeaderMode; direction: GestureDirection; - cardOverlayEnabled?: boolean; - cardShadowEnabled?: boolean; onTransitionStart?: ( curr: { index: number }, prev: { index: number } @@ -185,8 +182,6 @@ export default class Stack extends React.Component { const { descriptors, navigation, - cardOverlayEnabled, - cardShadowEnabled, routes, closingRoutes, onOpenRoute, @@ -196,7 +191,6 @@ export default class Stack extends React.Component { getGesturesEnabled, renderHeader, renderScene, - transparentCard, headerMode, direction, onTransitionStart, @@ -233,6 +227,15 @@ export default class Stack extends React.Component { ? 1 : 0; + const { + header, + cardTransparent, + cardShadowEnabled, + cardOverlayEnabled, + cardStyle, + gestureResponseDistance, + } = descriptor.options; + return ( { previousScene={scenes[index - 1]} navigation={navigation} direction={direction} - transparentCard={transparentCard} + cardTransparent={cardTransparent} cardOverlayEnabled={cardOverlayEnabled} cardShadowEnabled={cardShadowEnabled} + cardStyle={cardStyle} gesturesEnabled={index !== 0 && getGesturesEnabled({ route })} onGestureBegin={onGestureBegin} onGestureCanceled={onGestureCanceled} onGestureEnd={onGestureEnd} - gestureResponseDistance={ - descriptor.options.gestureResponseDistance - } + gestureResponseDistance={gestureResponseDistance} transitionSpec={transitionSpec} headerStyleInterpolator={headerStyleInterpolator} cardStyleInterpolator={cardStyleInterpolator} floaingHeaderHeight={floaingHeaderHeight} - hasCustomHeader={descriptor.options.header === null} + hasCustomHeader={header === null} getPreviousRoute={getPreviousRoute} headerMode={headerMode} renderHeader={renderHeader} diff --git a/packages/stack/src/views/Stack/StackItem.tsx b/packages/stack/src/views/Stack/StackItem.tsx index 8f385e0b..4e167007 100644 --- a/packages/stack/src/views/Stack/StackItem.tsx +++ b/packages/stack/src/views/Stack/StackItem.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StyleSheet, Platform } from 'react-native'; +import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native'; import Animated from 'react-native-reanimated'; import { Props as HeaderContainerProps } from '../Header/HeaderContainer'; import Card from './Card'; @@ -25,9 +25,10 @@ type Props = { previousScene?: HeaderScene; scene: HeaderScene; navigation: NavigationProp; - transparentCard?: boolean; + cardTransparent?: boolean; cardOverlayEnabled?: boolean; cardShadowEnabled?: boolean; + cardStyle?: StyleProp; gesturesEnabled?: boolean; direction: GestureDirection; getPreviousRoute: (props: { route: Route }) => Route | undefined; @@ -85,9 +86,10 @@ export default class StackItem extends React.PureComponent { scene, previousScene, direction, - transparentCard, + cardTransparent, cardOverlayEnabled, cardShadowEnabled, + cardStyle, gesturesEnabled, onGestureBegin, onGestureCanceled, @@ -107,7 +109,7 @@ export default class StackItem extends React.PureComponent { return ( { ? { marginTop: floaingHeaderHeight } : null } + contentStyle={cardStyle} style={StyleSheet.absoluteFill} > {headerMode === 'screen'