Skip to content
This repository has been archived by the owner on Feb 25, 2020. It is now read-only.

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Jun 4, 2019
1 parent 1e02578 commit 44a2442
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 93 deletions.
3 changes: 1 addition & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
18 changes: 4 additions & 14 deletions src/types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,6 @@ export type HeaderScene<T> = {
focused: boolean;
};

export type HeaderSceneProps<T extends 'float' | 'screen'> = T extends 'float'
? {
scenes: HeaderScene<Route>[];
}
: {
scene: HeaderScene<Route>;
previous?: HeaderScene<Route>;
next?: HeaderScene<Route>;
};

export type HeaderOptions = {
headerTitle?: string;
headerTitleStyle?: StyleProp<TextStyle>;
Expand All @@ -92,13 +82,13 @@ export type HeaderOptions = {
headerForceInset?: React.ComponentProps<typeof SafeAreaView>['forceInset'];
};

export type HeaderProps<
T extends 'float' | 'screen' = 'float' | 'screen'
> = HeaderSceneProps<T> & {
mode: T;
export type HeaderProps = {
mode: 'float' | 'screen';
layout: Layout;
scenes: HeaderScene<Route>[];
onGoBack?: (props: { route: Route }) => void;
getTitle: (props: { route: Route }) => string | undefined;
getBackTitle: (props: { route: Route }) => string | undefined;
styleInterpolator: HeaderStyleInterpolator;
style?: StyleProp<ViewStyle>;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
Expand All @@ -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}
Expand Down
45 changes: 0 additions & 45 deletions src/views/Header/HeaderScreen.tsx

This file was deleted.

9 changes: 3 additions & 6 deletions src/views/Header/HeaderSegment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<Route>;
previous?: HeaderScene<Route>;
next?: HeaderScene<Route>;
styleInterpolator: HeaderStyleInterpolator;
style?: StyleProp<ViewStyle>;
};
Expand Down Expand Up @@ -81,11 +81,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
render() {
const {
scene,
previous,
next,
layout,
onGoBack,
getTitle,
getBackTitle,
headerLeft: left = (props: HeaderBackButtonProps) => (
<HeaderBackButton {...props} />
),
Expand All @@ -107,9 +106,7 @@ export default class HeaderSegment extends React.Component<Props, State> {

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,
Expand Down
45 changes: 31 additions & 14 deletions src/views/Stack/Stack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,18 @@ export default class Stack extends React.Component<Props, State> {
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,
Expand Down Expand Up @@ -143,6 +155,7 @@ export default class Stack extends React.Component<Props, State> {
}),
onGoBack,
getTitle,
getBackTitle: this.getBackTitle,
styleInterpolator: headerStyleInterpolator,
})
: null}
Expand All @@ -152,14 +165,15 @@ export default class Stack extends React.Component<Props, State> {
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 (
<Card
Expand Down Expand Up @@ -199,18 +213,21 @@ export default class Stack extends React.Component<Props, State> {
? 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}
Expand Down
14 changes: 4 additions & 10 deletions src/views/Stack/StackView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -140,21 +139,16 @@ class StackView extends React.Component<Props, State> {
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;

if (header !== undefined) {
return header == null ? null : header(props);
}

switch (props.mode) {
case 'screen':
return <HeaderScreen {...props as HeaderProps<'screen'>} />;
case 'float':
return <HeaderFlotaing {...props as HeaderProps<'float'>} />;
}
return <Header {...props} />;
};

private handleGoBack = ({ route }: { route: Route }) =>
Expand Down

0 comments on commit 44a2442

Please sign in to comment.