From 44a2442a1d46db2eacb92038ce82069fb3e75b7f Mon Sep 17 00:00:00 2001 From: "satyajit.happy" Date: Tue, 4 Jun 2019 17:15:25 +0200 Subject: [PATCH] wip --- src/index.tsx | 3 +- src/types.tsx | 18 ++------ .../Header/{HeaderFloating.tsx => Header.tsx} | 8 +++- src/views/Header/HeaderScreen.tsx | 45 ------------------- src/views/Header/HeaderSegment.tsx | 9 ++-- src/views/Stack/Stack.tsx | 45 +++++++++++++------ src/views/Stack/StackView.tsx | 14 ++---- 7 files changed, 49 insertions(+), 93 deletions(-) rename src/views/Header/{HeaderFloating.tsx => Header.tsx} (90%) delete mode 100644 src/views/Header/HeaderScreen.tsx diff --git a/src/index.tsx b/src/index.tsx index 6232efab2..82f091bc5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,8 +21,7 @@ export const Assets = Platform.select({ /** * Views */ -export { default as HeaderFloating } from './views/Header/HeaderFloating'; -export { default as HeaderScreen } from './views/Header/HeaderScreen'; +export { default as Header } from './views/Header/Header'; export { default as HeaderTitle } from './views/Header/HeaderTitle'; export { default as HeaderBackButton } from './views/Header/HeaderBackButton'; diff --git a/src/types.tsx b/src/types.tsx index 0da21ce2b..681b6b54c 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -62,16 +62,6 @@ export type HeaderScene = { focused: boolean; }; -export type HeaderSceneProps = T extends 'float' - ? { - scenes: HeaderScene[]; - } - : { - scene: HeaderScene; - previous?: HeaderScene; - next?: HeaderScene; - }; - export type HeaderOptions = { headerTitle?: string; headerTitleStyle?: StyleProp; @@ -92,13 +82,13 @@ export type HeaderOptions = { headerForceInset?: React.ComponentProps['forceInset']; }; -export type HeaderProps< - T extends 'float' | 'screen' = 'float' | 'screen' -> = HeaderSceneProps & { - mode: T; +export type HeaderProps = { + mode: 'float' | 'screen'; layout: Layout; + scenes: HeaderScene[]; onGoBack?: (props: { route: Route }) => void; getTitle: (props: { route: Route }) => string | undefined; + getBackTitle: (props: { route: Route }) => string | undefined; styleInterpolator: HeaderStyleInterpolator; style?: StyleProp; }; diff --git a/src/views/Header/HeaderFloating.tsx b/src/views/Header/Header.tsx similarity index 90% rename from src/views/Header/HeaderFloating.tsx rename to src/views/Header/Header.tsx index b23acc97e..fcf4ab1dc 100644 --- a/src/views/Header/HeaderFloating.tsx +++ b/src/views/Header/Header.tsx @@ -4,13 +4,14 @@ import HeaderBar from './HeaderBar'; import HeaderSegment from './HeaderSegment'; import { HeaderProps } from '../../types'; -type Props = HeaderProps<'float'>; +type Props = HeaderProps; export default function HeaderFloating({ scenes, layout, onGoBack, getTitle, + getBackTitle, styleInterpolator, style, }: Props) { @@ -26,6 +27,8 @@ export default function HeaderFloating({ style={[style, headerStyle]} > {scenes.map((scene, i, self) => { + const previous = self[i - 1]; + const { // eslint-disable-next-line @typescript-eslint/no-unused-vars headerForceInset, @@ -40,11 +43,12 @@ export default function HeaderFloating({ layout={layout} scene={scene} onGoBack={ - self[i - 1] && onGoBack + previous && onGoBack ? () => onGoBack({ route: scene.route }) : undefined } getTitle={getTitle} + getBackTitle={getBackTitle} styleInterpolator={styleInterpolator} style={[StyleSheet.absoluteFill]} {...options} diff --git a/src/views/Header/HeaderScreen.tsx b/src/views/Header/HeaderScreen.tsx deleted file mode 100644 index 313e3a9cd..000000000 --- a/src/views/Header/HeaderScreen.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; -import HeaderBar from './HeaderBar'; -import { HeaderProps } from '../../types'; -import HeaderSegment from './HeaderSegment'; - -type Props = HeaderProps<'screen'>; - -export default function HeaderScreen({ - mode: _, - layout, - scene, - onGoBack, - style, - ...rest -}: Props) { - const { - headerForceInset, - headerStyle: customStyle, - ...options - } = scene.descriptor.options; - - return ( - - onGoBack({ route: scene.route }) : undefined} - style={styles.container} - /> - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, -}); diff --git a/src/views/Header/HeaderSegment.tsx b/src/views/Header/HeaderSegment.tsx index 06e466af2..8e7a2c5b0 100644 --- a/src/views/Header/HeaderSegment.tsx +++ b/src/views/Header/HeaderSegment.tsx @@ -29,9 +29,9 @@ type Props = HeaderOptions & { layout: Layout; onGoBack?: () => void; getTitle: (props: { route: Route }) => string | undefined; + getBackTitle: (props: { route: Route }) => string | undefined; scene: HeaderScene; previous?: HeaderScene; - next?: HeaderScene; styleInterpolator: HeaderStyleInterpolator; style?: StyleProp; }; @@ -81,11 +81,10 @@ export default class HeaderSegment extends React.Component { render() { const { scene, - previous, - next, layout, onGoBack, getTitle, + getBackTitle, headerLeft: left = (props: HeaderBackButtonProps) => ( ), @@ -107,9 +106,7 @@ export default class HeaderSegment extends React.Component { const { backTitleLayout, titleLayout } = this.state; const currentTitle = getTitle({ route: scene.route }); - const previousTitle = previous - ? getTitle({ route: previous.route }) - : undefined; + const previousTitle = getBackTitle({ route: scene.route }); const { titleStyle, diff --git a/src/views/Stack/Stack.tsx b/src/views/Stack/Stack.tsx index 1273d5174..2c5ecb5e9 100755 --- a/src/views/Stack/Stack.tsx +++ b/src/views/Stack/Stack.tsx @@ -86,6 +86,18 @@ export default class Stack extends React.Component { this.setState({ layout: { width, height } }); }; + private getBackTitle = ({ route }: { route: Route }) => { + const { routes, getTitle } = this.props; + + const i = routes.findIndex(r => r.key === route.key); + + if (routes[i - 1]) { + return getTitle({ route: routes[i - 1] }); + } + + return undefined; + }; + render() { const { routes, @@ -143,6 +155,7 @@ export default class Stack extends React.Component { }), onGoBack, getTitle, + getBackTitle: this.getBackTitle, styleInterpolator: headerStyleInterpolator, }) : null} @@ -152,14 +165,15 @@ export default class Stack extends React.Component { pointerEvents={layout.height && layout.width ? 'box-none' : 'none'} > {routes.map((route, index, self) => { + const previousRoute = self[index - 1]; + const nextRoute = self[index - 1]; + const focused = focusedRoute.key === route.key; const current = progress[route.key]; - const previous = self[index - 1] - ? progress[self[index - 1].key] - : undefined; - const next = self[index + 1] - ? progress[self[index + 1].key] + const previous = previousRoute + ? progress[previousRoute.key] : undefined; + const next = nextRoute ? progress[nextRoute.key] : undefined; return ( { ? renderHeader({ mode: 'screen', layout, - scene: { - route, - progress: { - current, - next, - previous, + scenes: [ + { + route, + progress: { + current, + next, + previous, + }, + focused, + descriptor: getDescriptor({ route }), }, - focused, - descriptor: getDescriptor({ route }), - }, + ], onGoBack, getTitle, + getBackTitle: this.getBackTitle, styleInterpolator: headerStyleInterpolator, }) : null} diff --git a/src/views/Stack/StackView.tsx b/src/views/Stack/StackView.tsx index f3552913c..6bc5774e2 100644 --- a/src/views/Stack/StackView.tsx +++ b/src/views/Stack/StackView.tsx @@ -13,8 +13,7 @@ import { HeaderProps, } from '../../types'; import { Platform } from 'react-native'; -import HeaderScreen from '../Header/HeaderScreen'; -import HeaderFlotaing from '../Header/HeaderFloating'; +import Header from '../Header/Header'; type Props = { navigation: NavigationProp; @@ -140,8 +139,8 @@ class StackView extends React.Component { private renderHeader = (props: HeaderProps) => { const scene = props.mode === 'screen' - ? (props as HeaderProps<'screen'>).scene - : (props as HeaderProps<'float'>).scenes.find(scene => scene.focused); + ? props.scenes[0] + : props.scenes.find(scene => scene.focused); const header = scene ? scene.descriptor.options.header : undefined; @@ -149,12 +148,7 @@ class StackView extends React.Component { return header == null ? null : header(props); } - switch (props.mode) { - case 'screen': - return } />; - case 'float': - return } />; - } + return
; }; private handleGoBack = ({ route }: { route: Route }) =>