use findDOMNode by react-tv

Author: raphamorim

README.md

@@ -0,0 +1,3 @@
+# React-TV Navigation
+
+> Navigation for TVs using React-TV

__tests__/with-focusable-test.js

@@ -89,7 +89,8 @@ describe('withFocusable', () => {
 
     it('adds focusable after component mounts', () => {
       component = renderComponent({ focusPath: 'focusPath' });
-      expect(SpatialNavigation.addFocusable).toHaveBeenCalledWith('focusPath');
+      // TODO: back toHaveBeenCalledWith, testing DOM Element
+      expect(SpatialNavigation.addFocusable).toHaveBeenCalled();
     });
 
     it('removes focusable after component unmounts', () => {

package.json

@@ -32,6 +32,10 @@
     "url": "https://github.com/react-tv/react-tv-navigation/issues"
   },
   "homepage": "https://github.com/react-tv/react-tv-navigation#readme",
+  "peerDependencies": {
+    "react": "^16.2.0",
+    "react-tv": "^0.3.2"
+  },
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
@@ -40,9 +44,6 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "enzyme": "^3.3.0",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "recompose": "^0.26.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.15.0",
     "eslint-config-fbjs": "^2.0.1",
@@ -52,11 +53,16 @@
     "eslint-plugin-react": "^7.5.1",
     "eslint-plugin-relay": "^0.0.20",
     "jest": "^22.1.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-tv": "^0.3.2",
+    "recompose": "^0.26.0",
     "rollup": "^0.54.0",
     "rollup-plugin-babel": "^3.0.3",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-flow": "^1.1.1",
-    "rollup-plugin-node-resolve": "^3.0.2"
+    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-uglify": "^3.0.0"
   }
 }

rollup.config.js

@@ -2,6 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import flow from 'rollup-plugin-flow';
+import uglify from 'rollup-plugin-uglify';
 
 export default {
   input: 'src/index.js',
@@ -22,5 +23,7 @@ export default {
       main: true,
       browser: true,
     }),
+    uglify(),
   ],
+  external: ['react', 'react-tv'],
 };

src/index.js

@@ -1,3 +1,2 @@
-export { default } from './spatial-navigation';
 export { default as withFocusable } from './with-focusable';
 export { default as withNavigation } from './with-navigation';

src/spatial-navigation.js

@@ -40,10 +40,10 @@ class SpatialNavigation {
     Navigation.focus(focusPath);
   }
 
-  addFocusable(focusPath) {
+  addFocusable(focusPath, focusDOMElement) {
     this.removeFocusable(focusPath);
 
-    Navigation.add(focusPath, { selector: `#${focusPath}` });
+    Navigation.add(focusPath, {selector: focusDOMElement});
     Navigation.makeFocusable(focusPath);
   }
 

src/with-focusable.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import ReactTV from 'react-tv';
 
 import compose from 'recompose/compose';
 import mapProps from 'recompose/mapProps';
@@ -22,7 +23,7 @@ const withFocusable = ({
   })),
   lifecycle({
     componentDidMount() {
-      SpatialNavigation.addFocusable(focusPath);
+      SpatialNavigation.addFocusable(focusPath, ReactTV.findDOMNode(this));
     },
     componentWillUnmount() {
       SpatialNavigation.removeFocusable(focusPath);