Skip to content
This repository was archived by the owner on Apr 9, 2019. It is now read-only.

Commit 6ad887e

Browse files
aputinskiaputinski
committed
Example cleanup
1 parent 0c330c3 commit 6ad887e

File tree

11 files changed

+122
-52
lines changed

11 files changed

+122
-52
lines changed

examples/example.css renamed to examples/assets/example.css

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
body {
22
padding: 1rem;
33
margin: 0;
4+
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
45
}
56

67
main {
7-
display: -webkit-flex;
8-
display: -ms-flexbox;
9-
display: flex;
8+
padding: 1em;
9+
width: 320px;
10+
margin: 0 auto;
11+
}
12+
13+
@media (max-width: 520px) {
14+
.main {
15+
width: 100%
16+
}
17+
}
18+
19+
h2 {
20+
margin: 0 0 0.25em 0;
21+
}
22+
23+
p {
24+
margin: 0 0 0.2em 0;
1025
}
1126

1227
.ReactNavigationController {
1328
position: relative;
14-
width: 320px;
1529
height: 480px;
16-
margin: 0 1rem 1rem 0;
30+
margin: 1em auto 2em auto;
1731
background: #DDDDDD;
1832
overflow: hidden;
1933
}

‎examples/example.jsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎examples/index.dev.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Example</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link type="text/css" rel="stylesheet" href="assets/example.css" />
8+
</head>
9+
<body>
10+
<script src="//localhost:3000/webpack-dev-server.js"></script>
11+
<script src="assets/example.js"></script>
12+
</body>
13+
</html>

‎examples/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Example</title>
6-
<link type="text/css" rel="stylesheet" href="example.css" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link type="text/css" rel="stylesheet" href="assets/example.css" />
78
</head>
89
<body>
9-
<script src="//localhost:3000/webpack-dev-server.js"></script>
10-
<script src="example.js"></script>
10+
<script src="assets/example.js"></script>
1111
</body>
1212
</html>

‎examples/src/example.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const React = require('react');
2+
3+
const NavigationController = require('../../src/navigation-controller');
4+
const {
5+
ViewA,
6+
ViewB,
7+
ViewC
8+
} = require('./views');
9+
10+
const a = (
11+
<ViewA />
12+
);
13+
14+
const b = (
15+
<ViewB />
16+
);
17+
18+
const c = (
19+
<ViewC />
20+
);
21+
22+
class App extends React.Component {
23+
constructor(props) {
24+
super(props);
25+
}
26+
render() {
27+
return (
28+
<main>
29+
<h2>Single View</h2>
30+
<p>Start with a single view on the stack</p>
31+
<NavigationController
32+
views={[a]}
33+
preserveState={true}
34+
transitionTension={10}
35+
transitionFriction={5} />
36+
<h2>Multiple Views</h2>
37+
<p>Start with multiple views on the stack</p>
38+
<NavigationController
39+
views={[a,b,c]}
40+
preserveState={true}
41+
transitionTension={10}
42+
transitionFriction={5} />
43+
</main>
44+
);
45+
}
46+
}
47+
48+
React.render(<App />, document.body);

examples/view.jsx renamed to examples/src/view.jsx

File renamed without changes.

examples/views.jsx renamed to examples/src/views.jsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,29 @@ class ViewB extends View {
5252
}
5353
}
5454

55+
class ViewC extends View {
56+
constructor(props) {
57+
super(props);
58+
this.state = {
59+
color: '#F012BE'
60+
};
61+
}
62+
onBack() {
63+
this.props.navigationController.popView();
64+
}
65+
renderContent() {
66+
return (
67+
<div>
68+
<h1>View C</h1>
69+
<button onClick={this.onBack.bind(this)}>Back</button>
70+
</div>
71+
);
72+
}
73+
}
74+
5575

5676
module.exports = {
5777
ViewA,
58-
ViewB
78+
ViewB,
79+
ViewC
5980
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"scripts": {
77
"start": "webpack-dev-server --content-base examples/ --port 3000 --hot",
88
"test": "./node_modules/karma/bin/karma start",
9-
"dist": "babel src --out-dir dist"
9+
"example": "webpack"
1010
},
1111
"repository": {
1212
"type": "git",

‎spec/navigation-controller.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const transformPrefix = getVendorPrefix('transform');
1414
const {
1515
ViewA,
1616
ViewB
17-
} = require('../examples/views');
17+
} = require('../examples/src/views');
1818

1919
const rebound = require('rebound');
2020

@@ -490,7 +490,7 @@ describe('NavigationController', () => {
490490
});
491491
});
492492
});
493-
describe.only('#__setViews', () => {
493+
describe('#__setViews', () => {
494494
beforeEach(done => {
495495
requestAnimationFrame(() => {
496496
done();

‎src/navigation-controller.jsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,10 @@ class NavigationController extends React.Component {
8383
this.__viewStates = [];
8484
this.__viewIndexes = [0,1];
8585
this.__springSystem = new rebound.SpringSystem();
86-
this.__spring = this.__springSystem.createSpring(15, 5);
86+
this.__spring = this.__springSystem.createSpring(
87+
this.props.transitionTension,
88+
this.props.transitionFriction
89+
);
8790
this.__spring.addListener({
8891
onSpringUpdate: this.__onSpringUpdate.bind(this),
8992
onSpringAtRest: this.__onSpringAtRest.bind(this)
@@ -424,11 +427,15 @@ NavigationController.propTypes = {
424427
views: React.PropTypes.arrayOf(
425428
React.PropTypes.element
426429
).isRequired,
427-
preserveState: React.PropTypes.bool
430+
preserveState: React.PropTypes.bool,
431+
transitionTension: React.PropTypes.number,
432+
transitionFriction: React.PropTypes.number
428433
};
429434

430435
NavigationController.defaultProps = {
431-
preserveState: false
436+
preserveState: false,
437+
transitionTension: 10,
438+
transitionFriction: 6
432439
};
433440

434441
module.exports = NavigationController;

0 commit comments

Comments
 (0)