added dynamic resolve function, updated examples and readme

Author: alexmnv

.gitignore

@@ -1,3 +1,4 @@
 /dist
 node_modules
 /.idea
+npm-debug.log

README.md

@@ -1,11 +1,14 @@
 # react-navtree
 
-Utility for making page navigation (using keyboard or TV Remote Control on STB/ Smart TV apps) React way
+Library for making page navigation (using keyboard or TV Remote Control in STB/ Smart TV apps) React way
+
+- Lightweight ( 7kb minified, 3 kb gzipped)
+- No dependencies (except for React itself)
 
 _This project is under development and is still experimental_
 
 > In STB/ Smart TV apps navigation is performed using TV remote control. 
-> With traditional approach the navigation logic is implemented globally at the app level and is tightly coupled with UI layout, which doesn't fit with React principles of reusable and independent components.
+> In traditional approach, navigation logic is implemented outside 'View' layer and is tightly coupled with UI layout, which doesn't fit with React principles of reusable and independent components.
 > 
 > The idea is to make components' navigation logic encapsulated within themselves and independent of the layout the component is placed into.
 > `react-navtree` was designed to help make navigaton React way - declarative and reusable.
@@ -18,7 +21,7 @@ _This project is under development and is still experimental_
 ### Installation
 
 ```
-npm install react-navtree
+npm install --save react-navtree
 ```
 
 ### Usage example
@@ -64,23 +67,23 @@ class Header extends React.PureComponent {
   }
 
   render () {
-    return <Nav func={navVertical} className='header'>
+    return <Nav className='header'>
       <Nav
         onNav={path => { if (path) this.setState({ tab: path[0] }) }}
-        func={(key, navTree) => (!navTree.focusedNode && this.state.tab) ? this.state.tab : navHorizontal(key, navTree)}
+        func={/* focus open tab first */ (key, navTree, focusedNode) => !navTree.focusedNode ? this.state.tab : navDynamic(key, navTree, focusedNode)}
         className='tabs'
       >
         <Nav navId='tab-foo' className={this.state.tab === 'tab-foo' ? 'selected' : ''}>Foo</Nav>
         <Nav navId='tab-qux' className={this.state.tab === 'tab-qux' ? 'selected' : ''}>Qux</Nav>
       </Nav>
 
-      { this.state.tab === 'tab-foo' && <Nav func={navHorizontal} className='tab-content' >
+      { this.state.tab === 'tab-foo' && <Nav className='tab-content' >
         <Nav className='nav-block inline'>Foo</Nav>
         <Nav className='nav-block inline'>Bar</Nav>
         <Nav className='nav-block inline'>Baz</Nav>
       </Nav> }
 
-      { this.state.tab === 'tab-qux' && <Nav func={navVertical} className='tab-content' >
+      { this.state.tab === 'tab-qux' && <Nav className='tab-content' >
         <Nav className='nav-block'>Qux</Nav>
         <Nav className='nav-block'>Quux</Nav>
       </Nav> }
@@ -91,42 +94,25 @@ class Header extends React.PureComponent {
 class Table extends React.PureComponent {
   constructor (props) {
     super(props)
-    this.state = { navPath: false }
+    this.state = { focusedPath: false }
   }
 
   render () {
     let {children, navId, cols} = this.props
 
-    // convert flat array to multidimensional (table-like format): [1, 2, 3, 4, 5, 6] => [[1, 2, 3], [4, 5, 6]]
-    let rows = children.reduce((rows, cell) => {
-      let row = rows.length > 0 && rows[ rows.length - 1 ]
-      if (row.length >= cols) row = false
-      if (!row) {
-        row = []
-        rows.push(row)
-      }
-      row.push(cell)
-      return rows
-    }, [])
-
-    return <Nav onNav={path => { this.setState({ navPath: path }) }} navId={navId} func={navTable({cols})} className='nav-block table'>
-      <div>{ this.state.navPath && 'Focused: ' + this.state.navPath.join(' -> ') }</div>
-      <table>
-        <tbody>
-          {
-            rows.map((row, i) => <tr key={i}>
-              {row.map((cell, j) => <td key={j}><Nav navId={`row ${i + 1} cell ${j + 1}`} className='nav-block'>{cell}</Nav></td>)}
-            </tr>)
-          }
-        </tbody>
-      </table>
+    return <Nav onNav={path => { this.setState({ focusedPath: path }) }} navId={navId} className='nav-block'>
+      <div className='caption'>{ this.state.focusedPath && 'Focused: ' + this.state.focusedPath.join(' -> ') }</div>
+      <div className={'tbl col' + cols}>
+        { children.map((child, i) => <div key={i}><Nav navId={`row ${Math.ceil((i + 1) / cols)} cell ${(i % cols) + 1}`} className='nav-block'>{child}</Nav></div>) }
+      </div>
     </Nav>
   }
 }
 
 class Body extends React.PureComponent {
   render () {
     return (<div>
+
       <Table cols={3}>
         <div>A</div>
         <div>B</div>
@@ -153,20 +139,18 @@ class Body extends React.PureComponent {
           <div>8</div>
         </Table>
       </Table>
+
     </div>)
   }
 }
 
 class Footer extends React.PureComponent {
   render () {
     return (
-      <Nav
-        className='footer'
-        func={(key, navTree) => (!navTree.focusedNode) ? 'bar' : navHorizontal(key, navTree)}
-      >
-        <Nav navId='foo' className='nav-block inline'>Foo</Nav>
-        <Nav navId='bar' className='nav-block inline'>Bar</Nav>
-        <Nav navId='baz' className='nav-block inline'>Baz</Nav>
+      <Nav className='footer'>
+        <Nav className='nav-block inline'>Foo</Nav>
+        <Nav className='nav-block inline'>Bar</Nav>
+        <Nav className='nav-block inline'>Baz</Nav>
       </Nav>
     )
   }

examples/basic/example.css

@@ -14,9 +14,11 @@ body {width: 600px;}
 .tab-content { border-top: 1px solid #999; padding: 10px 5px 5px 5px; min-height: 100px; }
 
 /* Body */
-.nav-block.table { text-align: center }
-.nav-block.table > div { font-size: 0.9em; height: 20px; }
-.nav-block.table table { width: 100%; table-layout: fixed }
+.caption { font-size: 0.9em; height: 20px; text-align: center }
+.tbl { text-align: center }
+.tbl > * { display: inline-block; }
+.tbl.col3 > * { width: 33% }
+.tbl.col2 > * { width: 50% }
 
 /* Footer */
 .footer { background-color: #EEEEEE; padding: 10px; text-align: center }

examples/basic/example.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Nav, {navTable, navHorizontal, navVertical} from 'react-navtree'
+import Nav, {navDynamic} from 'react-navtree'
 import './example.css'
 
 class Header extends React.PureComponent {
@@ -10,23 +10,23 @@ class Header extends React.PureComponent {
   }
 
   render () {
-    return <Nav func={navVertical} className='header'>
+    return <Nav className='header'>
       <Nav
         onNav={path => { if (path) this.setState({ tab: path[0] }) }}
-        func={(key, navTree) => (!navTree.focusedNode && this.state.tab) ? this.state.tab : navHorizontal(key, navTree)}
+        func={/* focus open tab first */ (key, navTree, focusedNode) => !navTree.focusedNode ? this.state.tab : navDynamic(key, navTree, focusedNode)}
         className='tabs'
       >
         <Nav navId='tab-foo' className={this.state.tab === 'tab-foo' ? 'selected' : ''}>Foo</Nav>
         <Nav navId='tab-qux' className={this.state.tab === 'tab-qux' ? 'selected' : ''}>Qux</Nav>
       </Nav>
 
-      { this.state.tab === 'tab-foo' && <Nav func={navHorizontal} className='tab-content' >
+      { this.state.tab === 'tab-foo' && <Nav className='tab-content' >
         <Nav className='nav-block inline'>Foo</Nav>
         <Nav className='nav-block inline'>Bar</Nav>
         <Nav className='nav-block inline'>Baz</Nav>
       </Nav> }
 
-      { this.state.tab === 'tab-qux' && <Nav func={navVertical} className='tab-content' >
+      { this.state.tab === 'tab-qux' && <Nav className='tab-content' >
         <Nav className='nav-block'>Qux</Nav>
         <Nav className='nav-block'>Quux</Nav>
       </Nav> }
@@ -37,35 +37,17 @@ class Header extends React.PureComponent {
 class Table extends React.PureComponent {
   constructor (props) {
     super(props)
-    this.state = { navPath: false }
+    this.state = { focusedPath: false }
   }
 
   render () {
     let {children, navId, cols} = this.props
 
-    // convert flat array to multidimensional (table-like format): [1, 2, 3, 4, 5, 6] => [[1, 2, 3], [4, 5, 6]]
-    let rows = children.reduce((rows, cell) => {
-      let row = rows.length > 0 && rows[ rows.length - 1 ]
-      if (row.length >= cols) row = false
-      if (!row) {
-        row = []
-        rows.push(row)
-      }
-      row.push(cell)
-      return rows
-    }, [])
-
-    return <Nav onNav={path => { this.setState({ navPath: path }) }} navId={navId} func={navTable({cols})} className='nav-block table'>
-      <div>{ this.state.navPath && 'Focused: ' + this.state.navPath.join(' -> ') }</div>
-      <table>
-        <tbody>
-          {
-            rows.map((row, i) => <tr key={i}>
-              {row.map((cell, j) => <td key={j}><Nav navId={`row ${i + 1} cell ${j + 1}`} className='nav-block'>{cell}</Nav></td>)}
-            </tr>)
-          }
-        </tbody>
-      </table>
+    return <Nav onNav={path => { this.setState({ focusedPath: path }) }} navId={navId} className='nav-block'>
+      <div className='caption'>{ this.state.focusedPath && 'Focused: ' + this.state.focusedPath.join(' -> ') }</div>
+      <div className={'tbl col' + cols}>
+        { children.map((child, i) => <div key={i}><Nav navId={`row ${Math.ceil((i + 1) / cols)} cell ${(i % cols) + 1}`} className='nav-block'>{child}</Nav></div>) }
+      </div>
     </Nav>
   }
 }
@@ -79,6 +61,7 @@ Table.propTypes = {
 class Body extends React.PureComponent {
   render () {
     return (<div>
+
       <Table cols={3}>
         <div>A</div>
         <div>B</div>
@@ -105,27 +88,25 @@ class Body extends React.PureComponent {
           <div>8</div>
         </Table>
       </Table>
+
     </div>)
   }
 }
 
 class Footer extends React.PureComponent {
   render () {
     return (
-      <Nav
-        className='footer'
-        func={(key, navTree) => (!navTree.focusedNode) ? 'bar' : navHorizontal(key, navTree)}
-      >
-        <Nav navId='foo' className='nav-block inline'>Foo</Nav>
-        <Nav navId='bar' className='nav-block inline'>Bar</Nav>
-        <Nav navId='baz' className='nav-block inline'>Baz</Nav>
+      <Nav className='footer'>
+        <Nav className='nav-block inline'>Foo</Nav>
+        <Nav className='nav-block inline'>Bar</Nav>
+        <Nav className='nav-block inline'>Baz</Nav>
       </Nav>
     )
   }
 }
 
 export default function Example () {
-  return <Nav func={navVertical}>
+  return <Nav>
 
     <Header />
     <Body />

examples/modal/index.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react'
-import Nav, {navHorizontal} from 'react-navtree'
+import Nav from 'react-navtree'
 import Modal from './modal'
 import renderExample from '../utils/renderExample'
 
@@ -17,7 +17,7 @@ class Example extends Component {
   render () {
     return (
       <div>
-        <Nav func={navHorizontal} navId='body'>
+        <Nav>
           <Nav func={this._navFuncToggleModal} className='button'>Press to show modal window #1</Nav>
           <Nav func={this._navFuncToggleModal} className='button'>Press to show modal window #2</Nav>
         </Nav>
@@ -30,7 +30,7 @@ class Example extends Component {
             <li>when the modal is closed, the previously focused component gets focused back</li>
           </ul>
 
-          <Nav func={navHorizontal}>
+          <Nav>
             <Nav func={this._navFuncToggleModal} defaultFocused className='button'>Agree</Nav>
             <Nav func={this._navFuncToggleModal} className='button'>OK</Nav>
             <Nav func={this._navFuncToggleModal} className='button'>Confirm</Nav>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-navtree",
-  "version": "0.0.1",
-  "description": "Utility for making page navigation (using keyboard or TV Remote Control on STB/ Smart TV apps) React way",
+  "version": "0.0.2",
+  "description": "Library for making page navigation (using keyboard or TV Remote Control in STB/ Smart TV apps) React way",
   "main": "dist/index.js",
   "dependencies": {
     "prop-types": "^15.5.7"

src/Nav.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import NavTree from './NavTree'
+import { navDynamic } from './NavFunctions'
 
 export default class Nav extends React.PureComponent {
   constructor (props) {
@@ -44,11 +45,12 @@ export default class Nav extends React.PureComponent {
     }
   }
 
-  resolveFunc (event, navTree) {
+  resolveFunc (event, navTree, focusedNode) {
     if (!this.props.func) {
-      return this.state.focused ? false : (navTree.nodesId.length > 0 ? navTree.nodesId[0] : null)
+      if (navTree.nodesId.length > 1) return navDynamic(event, navTree, focusedNode)
+      else return this.state.focused ? false : (navTree.nodesId.length > 0 ? navTree.nodesId[0] : null)
     } else {
-      return this.props.func(event, navTree)
+      return this.props.func(event, navTree, focusedNode)
     }
   }
 
@@ -72,7 +74,7 @@ export default class Nav extends React.PureComponent {
     }
 
     return (
-      <Component className={className} {...restProps}>{children}</Component>
+      <Component ref={ref => { if (this.tree) this.tree.el = ref }} className={className} {...restProps}>{children}</Component>
     )
   }
 }