├── .babelrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── src
├── util
│ ├── string.js
│ ├── object.js
│ ├── transition.js
│ └── array.js
└── navigation-controller.jsx
├── examples
├── index.html
├── index.dev.html
├── src
│ ├── example.jsx
│ └── view.jsx
└── assets
│ └── example.css
├── spec
├── util
│ ├── string.spec.js
│ ├── object.spec.js
│ └── array.spec.js
└── navigation-controller.spec.jsx
├── webpack.config.js
├── LICENSE
├── package.json
├── karma.conf.js
└── README.md
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist
3 | npm-debug.log
4 | /.idea
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /examples
2 | /node_modules
3 | /spec
4 | /src
5 | karma.conf.js
6 | webpack.config.js
7 | npm-debug.log
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - '6'
4 | before_install:
5 | - export CHROME_BIN=chromium-browser
6 | - export DISPLAY=:99.0
7 | - sh -e /etc/init.d/xvfb start
8 | install:
9 | - npm install
10 | script:
11 | - npm run lint
12 | - npm test
13 |
--------------------------------------------------------------------------------
/src/util/string.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Capitalizes the first character of `string`.
3 | *
4 | * @param {string} [string=''] The string to capitalize.
5 | * @returns {string} Returns the capitalized string.
6 | */
7 | export function capitalize (string) {
8 | return string && (string.charAt(0).toUpperCase() + string.slice(1))
9 | }
10 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Example
6 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/index.dev.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Example
6 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/spec/util/string.spec.js:
--------------------------------------------------------------------------------
1 | /* global describe, it, expect */
2 |
3 | import {
4 | capitalize
5 | } from '../../src/util/string'
6 |
7 | describe('Util', () => {
8 | describe('String', () => {
9 | describe('#capitalize', () => {
10 | it('capitalizes the first character of a word', () => {
11 | expect(capitalize('hello')).to.equal('Hello')
12 | expect(capitalize('Hello')).to.equal('Hello')
13 | expect(capitalize('hello world')).to.equal('Hello world')
14 | })
15 | })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/spec/util/object.spec.js:
--------------------------------------------------------------------------------
1 | /* global describe, it, expect */
2 |
3 | import {
4 | assign
5 | } from '../../src/util/object'
6 |
7 | describe('Util', () => {
8 | describe('Object', () => {
9 | describe('#assign', () => {
10 | it('merges the sources into the target', () => {
11 | expect(assign({ foo: 'bar' }, { foo: 'baz' })).to.have.property('foo', 'baz')
12 | const a = assign({ foo: 'bar' }, { foo: 'baz', hello: 'world' })
13 | expect(a).to.have.property('foo', 'baz')
14 | expect(a).to.have.property('hello', 'world')
15 | })
16 | })
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const argv = require('minimist')(process.argv.slice(2))
2 |
3 | const entry = {
4 | example: [
5 | './examples/src/example.jsx'
6 | ]
7 | }
8 |
9 | if (argv.dist !== true) {
10 | entry.example.push('webpack/hot/dev-server')
11 | }
12 |
13 | module.exports = {
14 | entry,
15 | output: {
16 | path: './examples/assets',
17 | filename: '[name].js',
18 | publicPath: '/assets/'
19 | },
20 | module: {
21 | loaders: [{
22 | test: /\.js(x)?/,
23 | loaders: ['babel-loader']
24 | }]
25 | },
26 | resolve: {
27 | extensions: ['', '.js', '.jsx']
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/util/object.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Merge sources into target
3 | *
4 | * @param {object} target
5 | * @param {arguments} soutces
6 | * @return {object}
7 | */
8 | export function assign (target, sources) {
9 | if (target == null) {
10 | throw new TypeError('Object.assign target cannot be null or undefined')
11 | }
12 | const to = Object(target)
13 | const hasOwnProperty = Object.prototype.hasOwnProperty
14 | for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
15 | var nextSource = arguments[nextIndex]
16 | if (nextSource == null) {
17 | continue
18 | }
19 | var from = Object(nextSource)
20 | for (var key in from) {
21 | if (hasOwnProperty.call(from, key)) {
22 | to[key] = from[key]
23 | }
24 | }
25 | }
26 | return to
27 | }
28 |
--------------------------------------------------------------------------------
/src/util/transition.js:
--------------------------------------------------------------------------------
1 | export const type = {
2 | NONE: 0,
3 | PUSH_LEFT: 1,
4 | PUSH_RIGHT: 2,
5 | PUSH_UP: 3,
6 | PUSH_DOWN: 4,
7 | COVER_LEFT: 5,
8 | COVER_RIGHT: 6,
9 | COVER_UP: 7,
10 | COVER_DOWN: 8,
11 | REVEAL_LEFT: 9,
12 | REVEAL_RIGHT: 10,
13 | REVEAL_UP: 11,
14 | REVEAL_DOWN: 12
15 | }
16 |
17 | export function isPush (t) {
18 | return t === type.PUSH_LEFT ||
19 | t === type.PUSH_RIGHT ||
20 | t === type.PUSH_UP ||
21 | t === type.PUSH_DOWN
22 | }
23 |
24 | export function isCover (t) {
25 | return t === type.COVER_LEFT ||
26 | t === type.COVER_RIGHT ||
27 | t === type.COVER_UP ||
28 | t === type.COVER_DOWN
29 | }
30 |
31 | export function isReveal (t) {
32 | return t === type.REVEAL_LEFT ||
33 | t === type.REVEAL_RIGHT ||
34 | t === type.REVEAL_UP ||
35 | t === type.REVEAL_DOWN
36 | }
37 |
--------------------------------------------------------------------------------
/examples/src/example.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | import NavigationController from '../../src/navigation-controller'
5 | import View from './view'
6 |
7 | class App extends React.Component {
8 | render () {
9 | return (
10 |
11 | Single View
12 | Start with a single view on the stack
13 | Multiple Views
19 | Start with multiple views on the stack
20 |
26 | )
27 | }
28 | }
29 |
30 | ReactDOM.render(
59 |
60 | {this.renderBackButton()}
61 | {this.renderNextButton()}
62 |
63 |
64 | View {this.props.index}
65 |
66 | Increment Counter ({this.state.counter})
67 |
68 |
69 | Show Modal
70 |
71 | {this.renderPopToRootButton()}
72 |
73 |
74 | )
75 | }
76 | renderBackButton () {
77 | const text = this.props.modal ? 'Close' : 'Back'
78 | return this.props.index === 1
79 | ?
80 | : {text}
81 | }
82 | renderNextButton () {
83 | return this.props.modal === true
84 | ?
85 | : Next
86 | }
87 | renderPopToRootButton () {
88 | return this.props.index === 1
89 | ?
90 | : Pop To Root
91 | }
92 | }
93 |
94 | View.defaultProps = {
95 | index: 1
96 | }
97 |
98 | export default View
99 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React NavigationController
2 |
3 | [![Build Status][travis-image]][travis-url]
4 | [![NPM version][npm-image]][npm-url]
5 |
6 | React view manager similar to [UINavigationController][ios-controller]
7 |
8 | ## Installation
9 |
10 | ```bash
11 | npm install react-navigation-controller
12 | ```
13 |
14 | ## Demo
15 |
16 | Welcome to the app!
28 | );
29 | }
30 | render() {
31 | return (
32 |
33 |
34 | Login
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | class App extends React.Component {
42 | render() {
43 | const props = {
44 | // The views to place in the stack. The front-to-back order
45 | // of the views in this array represents the new bottom-to-top
46 | // order of the navigation stack. Thus, the last item added to
47 | // the array becomes the top item of the navigation stack.
48 | // NOTE: This can only be updated via `setViews()`
49 | views: [
50 | Hello, {this.props.name}!
;
217 | }
218 | }
219 | ```
220 |
221 | ### `view.navigationControllerWillHideView()`
222 |
223 | Invoked immediately before the previous view will be hidden.
224 |
225 | ### `view.navigationControllerWillShowView()`
226 |
227 | Invoked immediately before the next view will be shown.
228 |
229 | ### `view.navigationControllerDidHideView()`
230 |
231 | Invoked immediately after the previous view has been hidden.
232 |
233 | ### `view.navigationControllerDidShowView()`
234 |
235 | Invoked immediately after the next view has been shown.
236 |
237 | ## Styling
238 |
239 | No default styles are provided, but classes are added for custom styling:
240 |
241 | ```html
242 |
243 |
244 |
245 |
246 |
247 |
541 |
544 | {this.__renderPrevView()}
545 |
546 |
549 | {this.__renderNextView()}
550 |
551 |
42 | const b =
43 | controller = new NavigationController({ views: [a, b] })
44 | expect(controller.state).not.to.be.undefined
45 | expect(controller.state.views).to.have.length(1)
46 | controller = new NavigationController({ views: [a] })
47 | expect(controller.state).not.to.be.undefined
48 | expect(controller.state.views).to.have.length(0)
49 | })
50 | })
51 | describe('#componentWillMount', () => {
52 | beforeEach(() => {
53 | controller = new NavigationController({ views: views })
54 | controller.componentWillMount()
55 | })
56 | it('defaults to __isTransitioning=false ', () => {
57 | expect(controller.__isTransitioning).to.be.false
58 | })
59 | it('sets up an array for the view states', () => {
60 | expect(controller.__viewStates).not.to.be.undefined
61 | expect(Array.isArray(controller.__viewStates)).to.be.true
62 | expect(controller.__viewStates).to.have.length(0)
63 | })
64 | it('sets up an array for the view indexes', () => {
65 | expect(controller.__viewIndexes).not.to.be.undefined
66 | expect(Array.isArray(controller.__viewIndexes)).to.be.true
67 | expect(controller.__viewIndexes).to.have.length(2)
68 | expect(controller.__viewIndexes[0]).to.be.equal(0)
69 | expect(controller.__viewIndexes[1]).to.be.equal(1)
70 | })
71 | it('creates a new spring system', () => {
72 | expect(controller.__springSystem).to.be.an.instanceof(rebound.SpringSystem)
73 | })
74 | })
75 | describe('#componentWillUnmount', () => {
76 | let spring
77 | beforeEach(() => {
78 | controller = new NavigationController({ views: views })
79 | controller.componentWillMount()
80 | spring = controller.__spring
81 | controller.componentWillUnmount()
82 | })
83 | it('cleans up spring system', () => {
84 | expect(controller.__springSystem).to.be.undefined
85 | })
86 | it('cleans up spring', () => {
87 | expect(controller.__spring).to.be.undefined
88 | })
89 | it('removes spring event listeners', () => {
90 | expect(spring.listeners).to.deep.equal([])
91 | })
92 | })
93 | describe('#componentDidMount', () => {
94 | it('transforms the view wrappers', () => {
95 | expect(viewWrapper0).to.have.deep.property(`style.transform`)
96 | expect(viewWrapper1).to.have.deep.property(`style.transform`)
97 | })
98 | })
99 | describe('#__transformViews', () => {
100 | beforeEach(done => {
101 | requestAnimationFrame(() => {
102 | done()
103 | })
104 | })
105 | it('translates the views', (done) => {
106 | controller.__transformViews(10, 20, 30, 40)
107 | requestAnimationFrame(() => {
108 | expect(viewWrapper1.style.transform).to.equal(`translate(10%, 20%)`)
109 | expect(viewWrapper0.style.transform).to.equal(`translate(30%, 40%)`)
110 | done()
111 | })
112 | })
113 | it('sets the correct zIndex for Reveal transitions', (done) => {
114 | controller.setState({
115 | transition: Transition.type.REVEAL_DOWN
116 | }, () => {
117 | controller.__transformViews(10, 20, 30, 40)
118 | requestAnimationFrame(() => {
119 | expect(viewWrapper0.style.zIndex).to.equal('0')
120 | expect(viewWrapper1.style.zIndex).to.equal('1')
121 | done()
122 | })
123 | })
124 | })
125 | it('sets the correct zIndex for Push/Cover transitions', (done) => {
126 | controller.setState({
127 | transition: Transition.type.COVER_DOWN
128 | }, () => {
129 | controller.__transformViews(10, 20, 30, 40)
130 | requestAnimationFrame(() => {
131 | expect(viewWrapper0.style.zIndex).to.equal('1')
132 | expect(viewWrapper1.style.zIndex).to.equal('0')
133 | done()
134 | })
135 | })
136 | })
137 | })
138 | describe('#__animateViews', () => {
139 | let prevX
140 | let prevY
141 | let nextX
142 | let nextY
143 | let set = (p) => {
144 | [prevX, prevY, nextX, nextY] = p
145 | }
146 | it('PUSH_LEFT', () => {
147 | set(controller.__animateViews(0, Transition.type.PUSH_LEFT))
148 | expect(prevX).to.equal(0)
149 | expect(nextX).to.equal(100)
150 | set(controller.__animateViews(1, Transition.type.PUSH_LEFT))
151 | expect(prevX).to.equal(-100)
152 | expect(nextX).to.equal(0)
153 | })
154 | it('PUSH_RIGHT', () => {
155 | set(controller.__animateViews(0, Transition.type.PUSH_RIGHT))
156 | expect(prevX).to.equal(0)
157 | expect(nextX).to.equal(-100)
158 | set(controller.__animateViews(1, Transition.type.PUSH_RIGHT))
159 | expect(prevX).to.equal(100)
160 | expect(nextX).to.equal(0)
161 | })
162 | it('PUSH_UP', () => {
163 | set(controller.__animateViews(0, Transition.type.PUSH_UP))
164 | expect(prevY).to.equal(0)
165 | expect(nextY).to.equal(100)
166 | set(controller.__animateViews(1, Transition.type.PUSH_UP))
167 | expect(prevY).to.equal(-100)
168 | expect(nextY).to.equal(0)
169 | })
170 | it('PUSH_DOWN', () => {
171 | set(controller.__animateViews(0, Transition.type.PUSH_DOWN))
172 | expect(prevY).to.equal(0)
173 | expect(nextY).to.equal(-100)
174 | set(controller.__animateViews(1, Transition.type.PUSH_DOWN))
175 | expect(prevY).to.equal(100)
176 | expect(nextY).to.equal(0)
177 | })
178 | it('COVER_LEFT', () => {
179 | set(controller.__animateViews(0, Transition.type.COVER_LEFT))
180 | expect(prevX).to.equal(0)
181 | expect(nextX).to.equal(100)
182 | set(controller.__animateViews(1, Transition.type.COVER_LEFT))
183 | expect(prevX).to.equal(0)
184 | expect(nextX).to.equal(0)
185 | })
186 | it('COVER_RIGHT', () => {
187 | set(controller.__animateViews(0, Transition.type.COVER_RIGHT))
188 | expect(prevX).to.equal(0)
189 | expect(nextX).to.equal(-100)
190 | set(controller.__animateViews(1, Transition.type.COVER_RIGHT))
191 | expect(prevX).to.equal(0)
192 | expect(nextX).to.equal(0)
193 | })
194 | it('COVER_UP', () => {
195 | set(controller.__animateViews(0, Transition.type.COVER_UP))
196 | expect(prevY).to.equal(0)
197 | expect(nextY).to.equal(100)
198 | set(controller.__animateViews(1, Transition.type.COVER_UP))
199 | expect(prevY).to.equal(0)
200 | expect(nextY).to.equal(0)
201 | })
202 | it('COVER_DOWN', () => {
203 | set(controller.__animateViews(0, Transition.type.COVER_DOWN))
204 | expect(prevY).to.equal(0)
205 | expect(nextY).to.equal(-100)
206 | set(controller.__animateViews(1, Transition.type.COVER_DOWN))
207 | expect(prevY).to.equal(0)
208 | expect(nextY).to.equal(0)
209 | })
210 | it('REVEAL_LEFT', () => {
211 | set(controller.__animateViews(0, Transition.type.REVEAL_LEFT))
212 | expect(prevX).to.equal(0)
213 | expect(nextX).to.equal(0)
214 | set(controller.__animateViews(1, Transition.type.REVEAL_LEFT))
215 | expect(prevX).to.equal(-100)
216 | expect(nextX).to.equal(0)
217 | })
218 | it('REVEAL_RIGHT', () => {
219 | set(controller.__animateViews(0, Transition.type.REVEAL_RIGHT))
220 | expect(prevX).to.equal(0)
221 | expect(nextX).to.equal(0)
222 | set(controller.__animateViews(1, Transition.type.REVEAL_RIGHT))
223 | expect(prevX).to.equal(100)
224 | expect(nextX).to.equal(0)
225 | })
226 | it('REVEAL_UP', () => {
227 | set(controller.__animateViews(0, Transition.type.REVEAL_UP))
228 | expect(prevY).to.equal(0)
229 | expect(nextY).to.equal(0)
230 | set(controller.__animateViews(1, Transition.type.REVEAL_UP))
231 | expect(prevY).to.equal(-100)
232 | expect(nextY).to.equal(0)
233 | })
234 | it('REVEAL_DOWN', () => {
235 | set(controller.__animateViews(0, Transition.type.REVEAL_DOWN))
236 | expect(prevY).to.equal(0)
237 | expect(nextY).to.equal(0)
238 | set(controller.__animateViews(1, Transition.type.REVEAL_DOWN))
239 | expect(prevY).to.equal(100)
240 | expect(nextY).to.equal(0)
241 | })
242 | })
243 | describe('#__animateViewsComplete', () => {
244 | it('sets to __isTransitioning=false ', () => {
245 | controller.__animateViewsComplete()
246 | expect(controller.__isTransitioning).to.be.false
247 | })
248 | it('hides the previous view wrapper ', (done) => {
249 | controller.__animateViewsComplete()
250 | const [prev] = controller.__viewIndexes
251 | requestAnimationFrame(() => {
252 | expect(controller.refs[`view-wrapper-${prev}`].style.display).to.equal('none')
253 | done()
254 | })
255 | })
256 | it('unmounts the previous view', (done) => {
257 | let prev
258 | let next
259 | requestAnimationFrame(() => {
260 | [prev, next] = controller.__viewIndexes.slice()
261 | controller.__animateViewsComplete()
262 | })
263 | requestAnimationFrame(() => {
264 | expect(controller.state.mountedViews[prev]).to.be.null
265 | expect(controller.state.mountedViews[next].type).to.equal(ViewA)
266 | done()
267 | })
268 | })
269 | it('alternates the view indexes', (done) => {
270 | let a
271 | let b
272 | requestAnimationFrame(() => {
273 | a = controller.__viewIndexes.slice()
274 | controller.__animateViewsComplete()
275 | })
276 | requestAnimationFrame(() => {
277 | b = controller.__viewIndexes.slice()
278 | expect(a[0]).to.equal(b[1])
279 | expect(a[1]).to.equal(b[0])
280 | done()
281 | })
282 | })
283 | })
284 | describe('#__displayViews', () => {
285 | beforeEach(done => {
286 | requestAnimationFrame(() => {
287 | done()
288 | })
289 | })
290 | it('hides the views', (done) => {
291 | controller.__displayViews('none')
292 | requestAnimationFrame(() => {
293 | expect(controller.refs[`view-wrapper-0`].style.display).to.equal('none')
294 | expect(controller.refs[`view-wrapper-1`].style.display).to.equal('none')
295 | done()
296 | })
297 | })
298 | it('shows the views', (done) => {
299 | controller.__displayViews('block')
300 | requestAnimationFrame(() => {
301 | expect(controller.refs[`view-wrapper-0`].style.display).to.equal('block')
302 | expect(controller.refs[`view-wrapper-1`].style.display).to.equal('block')
303 | done()
304 | })
305 | })
306 | })
307 | describe('#__transitionViews', () => {
308 | beforeEach(done => {
309 | requestAnimationFrame(() => {
310 | done()
311 | })
312 | })
313 | it('sets the completion callback', () => {
314 | controller.__transitionViews({})
315 | expect(controller.__transitionViewsComplete).to.be.a('function')
316 | })
317 | it('sets and calls the completion callback', (done) => {
318 | const transitionCallbackSpy = sinon.spy()
319 | controller.__transitionViews({
320 | transition: Transition.type.NONE,
321 | onComplete: transitionCallbackSpy
322 | })
323 | const transitionCompleteSpy = sinon.spy(controller, '__transitionViewsComplete')
324 | requestAnimationFrame(() => {
325 | expect(transitionCompleteSpy.calledOnce).to.be.true
326 | expect(transitionCallbackSpy.calledOnce).to.be.true
327 | done()
328 | })
329 | })
330 | it('manually runs a "none" transition', (done) => {
331 | const transformSpy = sinon.spy(controller, '__transformViews')
332 | const animateCompleteSpy = sinon.spy(controller, '__animateViewsComplete')
333 | controller.__transitionViews({
334 | transition: Transition.type.NONE
335 | })
336 | const transitionCompleteSpy = sinon.spy(controller, '__transitionViewsComplete')
337 | requestAnimationFrame(() => {
338 | expect(transformSpy.calledOnce).to.be.true
339 | expect(animateCompleteSpy.calledOnce).to.be.true
340 | expect(transitionCompleteSpy.calledOnce).to.be.true
341 | done()
342 | })
343 | })
344 | it('runs a built-in spring transition', (done) => {
345 | const animateSpy = sinon.spy(controller, '__animateViews')
346 | const transformSpy = sinon.spy(controller, '__transformViews')
347 | const animateCompleteSpy = sinon.spy(controller, '__animateViewsComplete')
348 | controller.__transitionViews({
349 | transition: Transition.type.PUSH_LEFT,
350 | onComplete () {
351 | expect(animateSpy.callCount).to.be.above(1)
352 | expect(transformSpy.callCount).to.be.above(1)
353 | expect(animateCompleteSpy.calledOnce).to.be.true
354 | done()
355 | }
356 | })
357 | controller.__isTransitioning = true
358 | })
359 | it('runs a custom transtion', (done) => {
360 | let _prevElement
361 | let _nextElement
362 | controller.__transitionViews({
363 | transition (prevElement, nextElement, done) {
364 | _prevElement = prevElement
365 | _nextElement = nextElement
366 | prevElement.style.transform = 'translate(10px, 20px)'
367 | nextElement.style.transform = 'translate(30px, 40px)'
368 | setTimeout(done, 500)
369 | },
370 | onComplete () {
371 | expect(_prevElement.style.transform).to.equal(`translate(10px, 20px)`)
372 | expect(_nextElement.style.transform).to.equal(`translate(30px, 40px)`)
373 | done()
374 | }
375 | })
376 | })
377 | })
378 | describe('#__pushView', () => {
379 | beforeEach(done => {
380 | requestAnimationFrame(() => {
381 | done()
382 | })
383 | })
384 | it('throws an error if a non-react view is passed', () => {
385 | expect(() => {
386 | controller.__pushView({})
387 | }).to.throw(/view/)
388 | })
389 | it('throws an error if an invalid callback is passed', () => {
390 | expect(() => {
391 | controller.__pushView(