Skip to content

Commit

Permalink
rewrite pager
Browse files Browse the repository at this point in the history
  • Loading branch information
andyboythekid committed Jul 5, 2019
1 parent 9793bf7 commit 9facef8
Show file tree
Hide file tree
Showing 12 changed files with 413 additions and 658 deletions.
73 changes: 43 additions & 30 deletions example/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// app entry
import React, { useState } from 'react';
import React, { useState, Children } from 'react';
import {
AppRegistry,
Platform,
Expand All @@ -8,86 +8,92 @@ import {
ViewStyle,
StyleProp,
Button,
SafeAreaView,
} from 'react-native';
import {
Link,
Navigator,
Tabs,
Pager,
Stack,
Tabbar,
Tab,
Tabs,
Stack,
} from 'react-navigation-library';

import { FlatList, BorderlessButton } from 'react-native-gesture-handler';

function PagerApp() {
const [activeIndex, setActiveIndex] = useState(0);
const [activeIndex, setActiveIndex] = useState(-1);

function handleChange(index: number) {
setActiveIndex(index);
}

return (
<AppContainer>
<Pager index={activeIndex} onChange={handleChange}>
<Screen style={{ backgroundColor: 'aquamarine' }}>
<Pager
type="stack"
index={activeIndex}
onChange={handleChange}
width={150}
max={5}
>
<ScreenA style={{ backgroundColor: 'aquamarine' }} unmountOnExit>
<Text>0</Text>
<BorderlessButton onPress={() => setActiveIndex(activeIndex + 1)}>
<Text>Next</Text>
</BorderlessButton>
</Screen>
<Screen style={{ backgroundColor: 'orange' }}>
</ScreenA>
<ScreenA style={{ backgroundColor: 'orange' }} unmountOnExit>
<Text>1</Text>
<BorderlessButton onPress={() => setActiveIndex(activeIndex + 1)}>
<Text>Next</Text>
</BorderlessButton>
</Screen>
<Screen style={{ backgroundColor: 'yellow' }}>
</ScreenA>
<ScreenA style={{ backgroundColor: 'yellow' }}>
<Text>2</Text>
<BorderlessButton onPress={() => setActiveIndex(activeIndex + 1)}>
<Text>Next</Text>
</BorderlessButton>
</Screen>
<Screen style={{ backgroundColor: 'green' }}>
</ScreenA>
<ScreenA style={{ backgroundColor: 'green' }}>
<Text>3</Text>
</Screen>
<Screen style={{ backgroundColor: 'purple' }}>
</ScreenA>
<ScreenA style={{ backgroundColor: 'purple' }}>
<Text>4</Text>
</Screen>
</ScreenA>
</Pager>

<View style={{ height: 50, width: '100%' }}>
<View style={{ height: 100, width: '100%' }}>
<Button title="Inc" onPress={() => setActiveIndex(activeIndex + 1)} />
<Button title="Dec" onPress={() => setActiveIndex(activeIndex - 1)} />
</View>
</AppContainer>
);
}

function Screen({ children, style }) {
function ScreenA({ children, style }) {
return <View style={[styles.container, style]}>{children}</View>;
}

function ProfileStack({}) {
return (
<Navigator>
<SafeAreaView />
<Stack>
<Screen style={{ backgroundColor: 'blue' }} path="/">
<Text>1</Text>
<ScreenA style={{ backgroundColor: 'blue' }} path="/">
<Link to="two">
<Text>Two</Text>
<Text>Next</Text>
</Link>
</Screen>
<Screen style={{ backgroundColor: 'red' }} path="two">
<Text>2</Text>
</ScreenA>
<ScreenA style={{ backgroundColor: 'red' }} path="two">
<Link to="../three">
<Text>Three</Text>
<Text>Next</Text>
</Link>
</Screen>
<Screen style={{ backgroundColor: 'green' }} path="three">
</ScreenA>
<ScreenA style={{ backgroundColor: 'green' }} path="three">
<Text>3</Text>
</Screen>
</ScreenA>
</Stack>
</Navigator>
);
Expand All @@ -97,6 +103,7 @@ function App() {
return (
<AppContainer>
<Navigator name="main-tabs" showLocationBar initialPath="/home">
<SafeAreaView />
<Tabs>
<Feed name="Home" path="home" />
<Feed name="News" path="news" />
Expand Down Expand Up @@ -133,7 +140,7 @@ function Feed({ name }: any) {
<Navigator name={name}>
<Stack>
<List items={items} />
<Profile path="/profile/:id" />
<Profile path="/profile/:id" unmountOnExit />
</Stack>
</Navigator>
);
Expand Down Expand Up @@ -161,7 +168,12 @@ function Card({ item }) {

function Profile({ item = {} }) {
return (
<View style={{ flex: 1, backgroundColor: 'white' }}>
<View
style={{
flex: 1,
backgroundColor: 'white',
}}
>
<Text>Item: {item.id}</Text>
<ProfileStack />
</View>
Expand All @@ -178,7 +190,7 @@ const containerStyle: StyleProp<ViewStyle> = Platform.select({
overflow: 'hidden',
},
default: {
// top: 100,
// top: 50,
// width: 150,
// height: 150,
// alignSelf: 'center',
Expand All @@ -195,6 +207,7 @@ const styles = {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
},

card: {
Expand Down
35 changes: 4 additions & 31 deletions src/create-screen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,10 @@ function createScreen(element: any, active: boolean, path: string) {

return (
<BasepathContext.Provider value={pathname}>
<CacheState
active={active}
state={navigation ? navigation.current.state : {}}
>
{state => cloneElement(element, { ...props, ...state })}
</CacheState>
{cloneElement(element, {
...props,
...(navigation ? navigation.current.state : {}),
})}
</BasepathContext.Provider>
);
}}
Expand All @@ -44,31 +42,6 @@ function createScreen(element: any, active: boolean, path: string) {

export { createScreen };

interface CacheStateProps {
children: any;
state: Object;
active: boolean;
}

class CacheState extends React.Component<CacheStateProps> {
state = this.props.state;

componentDidUpdate(prevProps: CacheStateProps) {
if (!prevProps.active && this.props.active) {
this.setState(this.props.state);
}
}

shouldComponentUpdate(nextProps: CacheStateProps) {
return nextProps.active || this.props.active;
}

render() {
const { children } = this.props;
return children(this.state);
}
}

let paramRe = /^:(.+)/;

function getParams(
Expand Down
4 changes: 2 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export * from './navigation-provider';
export * from './views';
export * from './pager';
export * from './navigator';
export * from './tabs';
export * from './stack';
export * from './stacker';
export * from './link';
export * from './pager';
export * from './screen';
5 changes: 4 additions & 1 deletion src/link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ function Link({ to, state, children, style, options }: LinkProps) {
}

return (
<BorderlessButton onPress={() => navigate()} style={style}>
<BorderlessButton
onPress={() => navigate()}
style={[{ flex: 1 }, style]}
>
<View style={{ flex: 1 }} accessible>
{children}
</View>
Expand Down
30 changes: 15 additions & 15 deletions src/navigator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ import { Navigation } from './navigation';
const NOOP = () => {};

export interface NavigatorState {
activeIndex: number;
index: number;
routes: string[];
handleChange: (nextIndex: number) => void;
onChange: (nextIndex: number) => void;
setRoutes: (routes: string[]) => void;
}

export const NavigatorContext = createContext<NavigatorState>({
activeIndex: 0,
index: 0,
routes: [],
handleChange: NOOP,
onChange: NOOP,
setRoutes: NOOP,
});

Expand All @@ -36,10 +36,10 @@ class NavigatorImpl extends Component<NavigatorProps> {
},
} = this.props;

const { activeIndex, routes } = this.state;
const { index, routes } = this.state;

// is not focused so we shouldnt push this view
if (activeIndex !== -1 && activeIndex !== nextIndex) {
if (index !== -1 && index !== nextIndex) {
const next = routes[nextIndex];

if (next) {
Expand Down Expand Up @@ -73,26 +73,26 @@ class NavigatorImpl extends Component<NavigatorProps> {
};

state = {
activeIndex: -1,
handleChange: this.handleChange,
index: -1,
onChange: this.handleChange,
routes: [],
setRoutes: this.setRoutes,
};

componentDidUpdate(prevProps: NavigatorProps, prevState: NavigatorState) {
if (prevProps.location !== this.props.location) {
const activeIndex = this.getActiveIndex(this.state.routes);
const index = this.getActiveIndex(this.state.routes);

if (activeIndex !== this.state.activeIndex) {
this.setState({ activeIndex });
if (index !== this.state.index) {
this.setState({ index });
}
}

if (prevState.routes.length !== this.state.routes.length) {
const activeIndex = this.getActiveIndex(this.state.routes);
const index = this.getActiveIndex(this.state.routes);

if (activeIndex !== this.state.activeIndex) {
this.setState({ activeIndex });
if (index !== this.state.index) {
this.setState({ index });
}
}
}
Expand All @@ -104,7 +104,7 @@ class NavigatorImpl extends Component<NavigatorProps> {
<NavigatorContext.Provider value={this.state}>
{typeof children === 'function'
? children({
activeIndex: this.state.activeIndex,
index: this.state.index,
state: navigation.current.state,
location,
})
Expand Down
Loading

0 comments on commit 9facef8

Please sign in to comment.