Skip to content

Commit 5627518

Browse files
raphamorimraphamorim
committed
Merge branch 'navigation-api'
2 parents d26f362 + 9c7f1c0 commit 5627518

File tree

19 files changed

+299
-130
lines changed

19 files changed

+299
-130
lines changed

‎packages/app/index.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title><%= htmlWebpackPlugin.options.title %></title>
6-
<style>
5+
<meta name="viewport" content="width=1280, height=720, user-scalable=no" />
6+
<title>App</title>
7+
<style>
8+
body {
9+
width: 1280px;
10+
height: 720px;
11+
}
712
canvas {
8-
width: 100%;
9-
height: 100%;
13+
width: 1280px;
14+
height: 720px;
1015
position: absolute;
1116
top: 0;
1217
left: 0;
1318
}
1419
</style>
15-
</head>
1620
<body>
1721
<canvas id="root"></canvas>
1822
<script src="bundle.js"></script>

‎packages/app/src/App.js‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,27 @@ import {
66
Dimensions,
77
StyleSheet,
88
registerComponent,
9-
Navigation,
9+
withNavigation
1010
} from '../../react-ape/reactApeEntry';
1111

12-
import Spinner from './Spinner';
12+
// import Spinner from './Spinner';
1313
import Sidebar from './Sidebar';
1414
import Grid from './Grid';
1515
import Clock from './Clock';
1616
import Slideshow from './Slideshow';
1717

1818
const {width, height} = Dimensions.get('window');
1919

20-
const {withNavigation} = Navigation;
21-
2220
// Register Custom Components
23-
const custom = {
24-
/*
25-
<custom.Spinner
26-
degrees={degrees}
27-
style={{ top: height / 4 + 8, left: width / 2 - 60, color: 'white' }}
28-
/>
29-
*/
30-
Spinner: registerComponent('Spinner', Spinner),
31-
};
21+
/*
22+
<custom.Spinner
23+
degrees={degrees}
24+
style={{ top: height / 4 + 8, left: width / 2 - 60, color: 'white' }}
25+
/>
26+
*/
27+
// const custom = {
28+
// Spinner: registerComponent('Spinner', Spinner),
29+
// };
3230

3331
const styles = StyleSheet.create({
3432
surface: {
@@ -46,9 +44,10 @@ class App extends Component {
4644
hasError: false,
4745
};
4846

49-
Dimensions.addEventListener((dimensionsValue, target) => {
50-
console.log(dimensionsValue, target);
51-
});
47+
// In case you want to update the App with new dimensions value:
48+
// Dimensions.addEventListener((dimensionsValue, target) => {
49+
// console.log(dimensionsValue, target);
50+
// });
5251
}
5352

5453
static getDerivedStateFromError(error) {
@@ -63,9 +62,6 @@ class App extends Component {
6362

6463
render() {
6564
const {hasError} = this.state;
66-
const {currentFocusPath} = this.props;
67-
68-
console.log(currentFocusPath);
6965

7066
if (hasError) {
7167
return null;
@@ -82,6 +78,6 @@ class App extends Component {
8278
}
8379
}
8480

85-
const NavigableApp = withNavigation(App);
81+
const NavigationApp = withNavigation(App);
8682

87-
render(<NavigableApp />, document.getElementById('root'));
83+
render(<NavigationApp />, document.getElementById('root'));

‎packages/app/src/Clock.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ const styles = StyleSheet.create({
1515
container: {
1616
position: 'absolute',
1717
left: 70,
18-
top: height - 200,
19-
backgroundColor: 'orange',
20-
height: 80,
21-
width: 100,
18+
top: 20,
19+
backgroundColor: '#331A00',
20+
height: 70,
21+
borderRadius: 30,
22+
width: 110,
2223
},
2324
time: {
2425
color: 'white',
25-
fontSize: 30,
26+
fontSize: 28,
2627
},
2728
});
2829

@@ -50,6 +51,12 @@ class Clock extends React.Component {
5051
<Text style={styles.time}>
5152
{this.state.time}
5253
</Text>
54+
{/*<Text style={styles.time}>
55+
{this.state.time}
56+
</Text>
57+
<Text style={styles.time}>
58+
{this.state.time}
59+
</Text>*/}
5360
</View>
5461
);
5562
}

‎packages/app/src/Grid.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const styles = StyleSheet.create({
2727
top: 520,
2828
},
2929
image: {
30-
height: 328,
31-
width: 248,
30+
height: 228,
31+
width: 148,
3232
},
3333
});
3434

‎packages/app/src/Sidebar.js‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import {
55
Dimensions,
66
StyleSheet,
77
registerComponent,
8-
Navigation,
8+
withFocus,
99
} from '../../react-ape/reactApeEntry';
1010

11-
const {height} = Dimensions.get('screen');
11+
const {height} = Dimensions.get('window');
1212

1313
const styles = StyleSheet.create({
1414
sidebar: {
@@ -22,12 +22,32 @@ const styles = StyleSheet.create({
2222
container: {
2323
position: 'absolute',
2424
left: 40,
25-
top: 100,
25+
// top: 100,
2626
borderRadius: 10,
2727
lineHeight: 40,
28+
backgroundColor: 'orange'
2829
},
2930
});
3031

32+
class Item extends React.Component {
33+
render() {
34+
const { focused, idx, text, setFocus } = this.props;
35+
console.log('focusableitem', setFocus, focused);
36+
return (
37+
<View style={{...styles.container, top: idx}}>
38+
<Text style={{
39+
color: focused ? '#331A00' : 'white',
40+
fontSize: 24
41+
}}>
42+
{text}
43+
</Text>
44+
</View>
45+
);
46+
}
47+
}
48+
49+
const FocusableItem = withFocus(Item);
50+
3151
class Sidebar extends Component {
3252
constructor(props) {
3353
super(props);
@@ -36,11 +56,23 @@ class Sidebar extends Component {
3656
render() {
3757
return (
3858
<View style={styles.sidebar}>
39-
<View style={styles.container}>
40-
<Text>Rio de Janeiro</Text>
41-
<Text>Kyoto</Text>
42-
<Text>Stockholm</Text>
43-
</View>
59+
{/*<View style={styles.container}>*/}
60+
<FocusableItem
61+
focusKey="sidebar-item-1"
62+
text="Rio de Janeiro"
63+
idx={120}
64+
/>
65+
<FocusableItem
66+
focusKey="sidebar-item-2"
67+
text="Kyoto"
68+
idx={160}
69+
/>
70+
<FocusableItem
71+
focusKey="sidebar-item-3"
72+
text="Stockholm"
73+
idx={200}
74+
/>
75+
{/*</View>*/}
4476
</View>
4577
);
4678
}

‎packages/app/src/Slideshow.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import {
77
StyleSheet,
88
} from '../../react-ape/reactApeEntry';
99

10-
const {width} = Dimensions.get('screen');
10+
const {width} = Dimensions.get('window');
1111

1212
const styles = StyleSheet.create({
1313
slideshow: {
1414
position: 'absolute',
1515
left: 280,
1616
top: 0,
1717
backgroundColor: '#080808',
18-
width: width,
18+
width: 1000,
1919
height: 420,
2020
overflow: 'hidden',
2121
},

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from 'react';
2+
3+
export const FocusPathContext = React.createContext();

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// TODO: Work by root
2+
// const FocusSpatialMap = new Map();
3+
const FocusSpatialMap = [];
4+
5+
export default FocusSpatialMap

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {withFocusable} from '../index';
1+
// import {withFocusable} from '../index';
22

3-
describe.skip('withFocusable', () => {
4-
describe('Dimensions.get()', () => {
5-
test('empty arguments should return null', () => {
6-
expect(typeof Dimensions).toEqual('object');
7-
expect(typeof Dimensions.get).toEqual('function');
8-
expect(Dimensions.get()).toEqual(null);
9-
});
10-
});
11-
});
3+
// describe.skip('withFocusable', () => {
4+
// describe('Dimensions.get()', () => {
5+
// test('empty arguments should return null', () => {
6+
// expect(typeof Dimensions).toEqual('object');
7+
// expect(typeof Dimensions.get).toEqual('function');
8+
// expect(Dimensions.get()).toEqual(null);
9+
// });
10+
// });
11+
// });

‎packages/react-ape/modules/Navigation/index.js‎

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

0 commit comments

Comments
 (0)