0.0.9-alpha.3 (fix ci)

Author: raphamorim

packages/app/src/App.js

@@ -6,7 +6,7 @@ import {
   Dimensions,
   StyleSheet,
   registerComponent,
-  withNavigation
+  withNavigation,
 } from '../../react-ape/reactApeEntry';
 
 // import Spinner from './Spinner';

packages/app/src/Sidebar.js

@@ -25,20 +25,21 @@ const styles = StyleSheet.create({
     // top: 100,
     borderRadius: 10,
     lineHeight: 40,
-    backgroundColor: 'orange'
+    backgroundColor: 'orange',
   },
 });
 
 class Item extends React.Component {
   render() {
-    const { focused, idx, text, setFocus } = this.props;
+    const {focused, idx, text, setFocus} = this.props;
     console.log('focusableitem', setFocus, focused);
     return (
       <View style={{...styles.container, top: idx}}>
-        <Text style={{
-          color: focused ? '#331A00' : 'white',
-          fontSize: 24
-        }}>
+        <Text
+          style={{
+            color: focused ? '#331A00' : 'white',
+            fontSize: 24,
+          }}>
           {text}
         </Text>
       </View>
@@ -57,21 +58,13 @@ class Sidebar extends Component {
     return (
       <View style={styles.sidebar}>
         {/*<View style={styles.container}>*/}
-          <FocusableItem
-            focusKey="sidebar-item-1"
-            text="Rio de Janeiro"
-            idx={120}
-          />
-          <FocusableItem
-            focusKey="sidebar-item-2"
-            text="Kyoto"
-            idx={160}
-          />
-          <FocusableItem
-            focusKey="sidebar-item-3"
-            text="Stockholm"
-            idx={200}
-          />
+        <FocusableItem
+          focusKey="sidebar-item-1"
+          text="Rio de Janeiro"
+          idx={120}
+        />
+        <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
+        <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
         {/*</View>*/}
       </View>
     );

packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap

@@ -1,3 +1,3 @@
 import React from 'react';
 
-export const FocusPathContext = React.createContext();
+export const FocusPathContext = React.createContext();

packages/react-ape/modules/Navigation/FocusPathContext.js

@@ -2,4 +2,4 @@
 // const FocusSpatialMap = new Map();
 const FocusSpatialMap = [];
 
-export default FocusSpatialMap
+export default FocusSpatialMap;

packages/react-ape/modules/Navigation/FocusSpatialMap.js

@@ -0,0 +1,7 @@
+import withNavigation from '../withNavigation';
+
+describe('withNavigation', () => {
+  test('should not return null', () => {
+    expect(typeof withNavigation).toEqual('function');
+  });
+});

packages/react-ape/modules/Navigation/__tests__/withFocusable-test.js

@@ -3,17 +3,17 @@
  */
 
 import * as React from 'react';
-import { getComponentDisplayName } from '../utils';
-import { FocusPathContext } from './FocusPathContext';
+import {getComponentDisplayName} from '../utils';
+import {FocusPathContext} from './FocusPathContext';
 
 type RequiredProps = {
-  focusKey: string
+  focusKey: string,
 };
 
 // See why we do `| void`
 // https://flow.org/en/docs/react/hoc/#toc-injecting-props-with-a-higher-order-component
 type InjectedProps = {
-  focused: boolean | void
+  focused: boolean | void,
 };
 
 /**
@@ -39,8 +39,8 @@ function withFocus<Props: RequiredProps>(
     renderWithFocusPath = focusContext => {
       // TODO: I need to listen to a global and observable focusPath that will
       // define if this component should be focused or not (the value of focused)
-      const { setFocus, currentFocusPath } = focusContext;
-      const { focusKey } = this.props;
+      const {setFocus, currentFocusPath} = focusContext;
+      const {focusKey} = this.props;
       // const focusPath = `${rootFocusPath}/${focusKey}`;
 
       FocusSpatialMap.push(focusKey);
@@ -67,4 +67,4 @@ function withFocus<Props: RequiredProps>(
   };
 }
 
-export default withFocus;
+export default withFocus;

packages/react-ape/modules/Navigation/__tests__/withNavigation-test.js

@@ -3,17 +3,21 @@
  */
 
 import * as React from 'react';
-import { getComponentDisplayName } from '../utils';
-import { unsafeCreateUniqueId } from '../../renderer/utils';
-import { FocusPathContext } from './FocusPathContext';
+import {getComponentDisplayName} from '../utils';
+import {unsafeCreateUniqueId} from '../../renderer/utils';
+import {FocusPathContext} from './FocusPathContext';
 import FocusSpatialMap from './FocusSpatialMap';
 
 type RequiredProps = {};
 
 // See why we do `| void`
 // https://flow.org/en/docs/react/hoc/#toc-injecting-props-with-a-higher-order-component
 type InjectedProps = {
-  focusPath: string | void
+  focusPath: string | void,
+};
+
+type State = {
+  currentFocusPath: ?string,
 };
 
 /**
@@ -24,13 +28,14 @@ type InjectedProps = {
 function withNavigation<Props: RequiredProps>(
   WrappedComponent: React.ComponentType<Props>
 ): React.ComponentType<$Diff<Props, InjectedProps>> {
-  return class extends React.Component<Props> {
+  return class extends React.Component<Props, State> {
     static WrappedComponent = WrappedComponent;
     static displayName = `withNavigation(${getComponentDisplayName(
       WrappedComponent
     )})`;
 
     rootFocusPath: string;
+    focusPathList: mixed;
 
     constructor() {
       super(...arguments);
@@ -39,56 +44,52 @@ function withNavigation<Props: RequiredProps>(
 
       this.focusPathList = [];
       this.state = {
-        currentFocusPath: false
+        currentFocusPath: null,
       };
-      window.addEventListener('keydown', (e) => this.handleKeyDown(e));
-    }
-
-    setFocus = (currentFocusPath) => {
-      this.setState({ currentFocusPath });
+      window.addEventListener('keydown', e => this.handleKeyDown(e));
     }
 
-    setFocusNext() {
+    setFocus = currentFocusPath => {
+      this.setState({currentFocusPath});
+    };
 
-    }
+    setFocusNext() {}
 
-    handleKeyDown = (e) => {
-      const { currentFocusPath } = this.state;
+    handleKeyDown = e => {
+      const {currentFocusPath} = this.state;
       // arrow up/down button should select next/previous list element
       if (e.keyCode === 38) {
         // console.log(FocusSpatialMap.indexOf(currentFocusPath))
         // this.setState( prevState => ({
-          
         // }))
       } else if (e.keyCode === 40) {
         // console.log(FocusSpatialMap.indexOf(currentFocusPath))
         const idx = FocusSpatialMap.indexOf(currentFocusPath) + 1;
         const next = idx + 1;
         const nextFocusPath = FocusSpatialMap[next];
         this.setState({
-          currentFocusPath: nextFocusPath
+          currentFocusPath: nextFocusPath,
         });
         // this.setState( prevState => ({
         //   cursor: prevState.cursor + 1
         // }))
       }
-    }
+    };
 
     render() {
-      const { currentFocusPath } = this.state;
+      const {currentFocusPath} = this.state;
       return (
-        <FocusPathContext.Provider 
+        <FocusPathContext.Provider
           value={{
             // rootFocusPath: this.rootFocusPath,
             currentFocusPath: currentFocusPath,
-            setFocus: this.setFocus
-          }}
-        >
+            setFocus: this.setFocus,
+          }}>
           <WrappedComponent {...this.props} />
         </FocusPathContext.Provider>
       );
     }
   };
 }
 
-export default withNavigation;
+export default withNavigation;

packages/react-ape/modules/Navigation/withFocus.js

@@ -1,9 +1,8 @@
-
 /**
  * @flow
  */
 
-import type { ComponentType } from 'react';
+import type {ComponentType} from 'react';
 
 export function getComponentDisplayName<T: {}>(Comp: ComponentType<T>): string {
   return Comp.displayName || Comp.name || 'Component';