Skip to content
This repository was archived by the owner on Nov 3, 2025. It is now read-only.

Commit 4f2fca6

Browse files
tpuccitpucci
authored
Merge pull request #111 from tpucci/back
Support Android back button
2 parents 244037c + e002810 commit 4f2fca6

31 files changed

Lines changed: 4226 additions & 173 deletions

‎example/jest.config.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
module.exports = {
2-
preset: 'react-native',
3-
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
42
moduleDirectories: ['node_modules', 'example/node_modules'],
3+
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
4+
modulePathIgnorePatterns: ['<rootDir>/example/node_modules/react-native/'],
5+
preset: 'react-native',
56
rootDir: '..',
67
testPathIgnorePatterns: ['/node_modules/', '<rootDir>/src/'],
8+
moduleNameMapper: {
9+
'^react-gondola$': '<rootDir>/src/',
10+
},
711
};

‎example/metro.config.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@
66
*/
77

88
const path = require('path');
9+
const blacklist = require('metro-config/src/defaults/blacklist');
10+
11+
const rootPath = path.resolve(__dirname, '..');
912

1013
module.exports = {
1114
projectRoot: path.resolve(__dirname),
1215
watchFolders: [path.resolve(__dirname, '../src'), path.resolve(__dirname, '../node_modules')],
1316
resolver: {
17+
blacklistRE: blacklist([new RegExp(`${rootPath}/node_modules/react-native/.*`)]),
1418
extraNodeModules: {
1519
'react-gondola': path.resolve(__dirname, '../src'),
1620
// Important, those are all the dependencies
@@ -21,8 +25,11 @@ module.exports = {
2125
'mobx-react': path.resolve(__dirname, '../node_modules/mobx-react'),
2226
'mobx-utils': path.resolve(__dirname, '../node_modules/mobx-utils'),
2327
react: path.resolve(__dirname, '../node_modules/react'),
24-
'react-native': path.resolve(__dirname, '../node_modules/react-native'),
25-
'@babel/plugin-proposal-decorators': path.resolve(__dirname, '../node_modules/@babel/plugin-proposal-decorators'),
28+
'react-native': path.resolve(__dirname, 'node_modules/react-native'),
29+
'@babel/plugin-proposal-decorators': path.resolve(
30+
__dirname,
31+
'../node_modules/@babel/plugin-proposal-decorators'
32+
),
2633
},
2734
},
2835
transformer: {

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@babel/runtime": "^7.4.5",
1919
"babel-plugin-module-resolver": "^3.2.0",
2020
"metro-react-native-babel-preset": "^0.54.0",
21+
"react-native": "0.59.5",
2122
"typescript": "^3.5.1"
2223
}
2324
}

‎example/src/canals/SignIn/Confirm.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,9 @@
11
import React, { Component } from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
2+
import { SignIn } from './SignIn';
33

44
interface IProps {}
55
export class Confirm extends Component<IProps> {
66
render() {
7-
return (
8-
<View style={styles.container}>
9-
<Text>Confim</Text>
10-
</View>
11-
);
7+
return <SignIn />;
128
}
139
}
14-
15-
const styles = StyleSheet.create({
16-
container: {
17-
alignItems: 'center',
18-
backgroundColor: '#FFFF99',
19-
flex: 1,
20-
justifyContent: 'center'
21-
}
22-
});

‎example/src/canals/SignIn/FirstName.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React, { Component } from 'react';
22
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
33

4-
interface IProps {}
4+
interface IProps {
5+
onNext: () => any;
6+
}
57
export class FirstName extends Component<IProps> {
68
render() {
79
return (
810
<View style={styles.container}>
911
<Text>Waht is your first name ?</Text>
1012
<TextInput placeholder="Type here" />
11-
<Button title="Next" onPress={() => true} />
13+
<Button title="Next" onPress={this.props.onNext} />
1214
</View>
1315
);
1416
}
@@ -19,6 +21,6 @@ const styles = StyleSheet.create({
1921
alignItems: 'center',
2022
backgroundColor: '#FFAAAA',
2123
flex: 1,
22-
justifyContent: 'space-around',
23-
},
24+
justifyContent: 'space-around'
25+
}
2426
});

‎example/src/canals/SignIn/LastName.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React, { Component } from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
2+
import { StyleSheet, Text, View, Button } from 'react-native';
33

4-
interface IProps {}
4+
interface IProps {
5+
onNext: () => any;
6+
}
57
export class LastName extends Component<IProps> {
68
render() {
79
return (
810
<View style={styles.container}>
911
<Text>LastName</Text>
12+
<Button title="Next" onPress={this.props.onNext} />
1013
</View>
1114
);
1215
}
@@ -17,6 +20,6 @@ const styles = StyleSheet.create({
1720
alignItems: 'center',
1821
backgroundColor: '#FF9999',
1922
flex: 1,
20-
justifyContent: 'center',
21-
},
23+
justifyContent: 'center'
24+
}
2225
});

‎example/src/canals/SignIn/SignIn.tsx‎

Lines changed: 47 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,53 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22
import { createCanal } from 'react-gondola';
33
import { FirstName } from './FirstName';
44
import { LastName } from './LastName';
55
import { Confirm } from './Confirm';
6-
import { Observer } from 'mobx-react/native';
7-
import { fromStream } from 'mobx-utils';
8-
import { interval } from 'rxjs';
9-
import { map } from 'rxjs/operators';
106

11-
// @ts-ignore
12-
const SignInCanal = createCanal([
13-
{ name: 'firstName', Component: FirstName },
14-
{ name: 'lastName', Component: LastName },
15-
{ name: 'confirm', Component: Confirm, isFullScreen: true }
16-
]);
7+
export class SignIn extends Component {
8+
state = {
9+
confirm: false,
10+
lastName: false
11+
};
1712

18-
export const SignIn = () => {
19-
const lastNameAuth = fromStream(
20-
interval(1000).pipe(map(tick => tick % 4 === 0 || (tick + 1) % 4 === 0))
21-
);
22-
const confirmAuth = fromStream(
23-
interval(1000).pipe(map(tick => tick % 2 === 0))
24-
);
25-
return (
26-
<Observer>
27-
{() => (
28-
<SignInCanal
29-
firstName
30-
lastName={lastNameAuth.current}
31-
confirm={confirmAuth.current}
32-
/>
33-
)}
34-
</Observer>
35-
);
36-
};
13+
goForward = () => {
14+
if (!this.state.lastName) {
15+
return this.setState({ lastName: true });
16+
}
17+
return this.setState({ confirm: true });
18+
};
19+
20+
goBackward = () => {
21+
if (this.state.confirm) {
22+
return this.setState({ confirm: false });
23+
}
24+
return this.setState({ lastName: false });
25+
};
26+
27+
SignInCanal = createCanal([
28+
{
29+
Component: FirstName,
30+
name: 'firstName',
31+
props: { onNext: this.goForward }
32+
},
33+
{
34+
Component: LastName,
35+
name: 'lastName',
36+
onBack: this.goBackward,
37+
props: { onNext: this.goForward }
38+
},
39+
{ name: 'confirm', Component: Confirm, onBack: this.goBackward }
40+
]);
41+
42+
render() {
43+
const { SignInCanal } = this;
44+
45+
return (
46+
<SignInCanal
47+
firstName
48+
lastName={this.state.lastName}
49+
confirm={this.state.confirm}
50+
/>
51+
);
52+
}
53+
}

‎example/src/canals/SignIn/__tests__/__snapshots__/Confirm.test.tsx.snap‎

Lines changed: 77 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,85 @@ exports[`Confirm renders correctly 1`] = `
44
<View
55
style={
66
Object {
7-
"alignItems": "center",
8-
"backgroundColor": "#FFFF99",
9-
"flex": 1,
10-
"justifyContent": "center",
7+
"bottom": 0,
8+
"left": 0,
9+
"position": "absolute",
10+
"right": 0,
11+
"top": 0,
1112
}
1213
}
1314
>
14-
<Text>
15-
Confim
16-
</Text>
15+
<View
16+
style={
17+
Object {
18+
"bottom": 0,
19+
"left": 0,
20+
"position": "absolute",
21+
"right": 0,
22+
"top": 0,
23+
}
24+
}
25+
>
26+
<View
27+
style={
28+
Object {
29+
"alignItems": "center",
30+
"backgroundColor": "#FFAAAA",
31+
"flex": 1,
32+
"justifyContent": "space-around",
33+
}
34+
}
35+
>
36+
<Text>
37+
Waht is your first name ?
38+
</Text>
39+
<TextInput
40+
allowFontScaling={true}
41+
placeholder="Type here"
42+
rejectResponderTermination={true}
43+
underlineColorAndroid="transparent"
44+
/>
45+
<View
46+
accessibilityRole="button"
47+
accessibilityStates={Array []}
48+
accessible={true}
49+
isTVSelectable={true}
50+
onResponderGrant={[Function]}
51+
onResponderMove={[Function]}
52+
onResponderRelease={[Function]}
53+
onResponderTerminate={[Function]}
54+
onResponderTerminationRequest={[Function]}
55+
onStartShouldSetResponder={[Function]}
56+
style={
57+
Object {
58+
"opacity": 1,
59+
}
60+
}
61+
>
62+
<View
63+
style={
64+
Array [
65+
Object {},
66+
]
67+
}
68+
>
69+
<Text
70+
style={
71+
Array [
72+
Object {
73+
"color": "#007AFF",
74+
"fontSize": 18,
75+
"padding": 8,
76+
"textAlign": "center",
77+
},
78+
]
79+
}
80+
>
81+
Next
82+
</Text>
83+
</View>
84+
</View>
85+
</View>
86+
</View>
1787
</View>
1888
`;

‎example/src/canals/SignIn/__tests__/__snapshots__/LastName.test.tsx.snap‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,45 @@ exports[`LastName renders correctly 1`] = `
1414
<Text>
1515
LastName
1616
</Text>
17+
<View
18+
accessibilityRole="button"
19+
accessibilityStates={Array []}
20+
accessible={true}
21+
isTVSelectable={true}
22+
onResponderGrant={[Function]}
23+
onResponderMove={[Function]}
24+
onResponderRelease={[Function]}
25+
onResponderTerminate={[Function]}
26+
onResponderTerminationRequest={[Function]}
27+
onStartShouldSetResponder={[Function]}
28+
style={
29+
Object {
30+
"opacity": 1,
31+
}
32+
}
33+
>
34+
<View
35+
style={
36+
Array [
37+
Object {},
38+
]
39+
}
40+
>
41+
<Text
42+
style={
43+
Array [
44+
Object {
45+
"color": "#007AFF",
46+
"fontSize": 18,
47+
"padding": 8,
48+
"textAlign": "center",
49+
},
50+
]
51+
}
52+
>
53+
Next
54+
</Text>
55+
</View>
56+
</View>
1757
</View>
1858
`;

0 commit comments

Comments
 (0)