Skip to content

Commit bf742c8

Browse files
hayanisaidhayanisaid
authored
Merge branch 'main' into button-component
2 parents 763f8d0 + 93635a2 commit bf742c8

28 files changed

+322
-169
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: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,16 @@ import {
66
Dimensions,
77
StyleSheet,
88
registerComponent,
9-
Navigation,
9+
withNavigation,
1010
} from '../../react-ape/reactApeEntry';
1111

12-
import Spinner from './Spinner';
1312
import Sidebar from './Sidebar';
1413
import Grid from './Grid';
1514
import Clock from './Clock';
1615
import Slideshow from './Slideshow';
1716

1817
const {width, height} = Dimensions.get('window');
1918

20-
const {withNavigation} = Navigation;
21-
22-
// 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-
};
32-
3319
const styles = StyleSheet.create({
3420
surface: {
3521
backgroundColor: '#202020',
@@ -46,9 +32,10 @@ class App extends Component {
4632
hasError: false,
4733
};
4834

49-
Dimensions.addEventListener((dimensionsValue, target) => {
50-
console.log(dimensionsValue, target);
51-
});
35+
// In case you want to update the App with new dimensions value:
36+
// Dimensions.addEventListener((dimensionsValue, target) => {
37+
// console.log(dimensionsValue, target);
38+
// });
5239
}
5340

5441
static getDerivedStateFromError(error) {
@@ -63,9 +50,6 @@ class App extends Component {
6350

6451
render() {
6552
const {hasError} = this.state;
66-
const {currentFocusPath} = this.props;
67-
68-
console.log(currentFocusPath);
6953

7054
if (hasError) {
7155
return null;
@@ -82,6 +66,6 @@ class App extends Component {
8266
}
8367
}
8468

85-
const NavigableApp = withNavigation(App);
69+
const NavigationApp = withNavigation(App);
8670

87-
render(<NavigableApp />, document.getElementById('root'));
71+
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: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
StyleSheet,
88
} from '../../react-ape/reactApeEntry';
99

10+
import Loader from './Loader';
11+
1012
const {height} = Dimensions.get('screen');
1113

1214
const styles = StyleSheet.create({
@@ -27,8 +29,8 @@ const styles = StyleSheet.create({
2729
top: 520,
2830
},
2931
image: {
30-
height: 328,
31-
width: 248,
32+
height: 228,
33+
width: 148,
3234
},
3335
});
3436

@@ -42,9 +44,17 @@ const list = [
4244
class Grid extends Component {
4345
constructor(props) {
4446
super(props);
47+
this.state = {
48+
loading: true,
49+
};
4550
}
4651

4752
render() {
53+
const {loading} = this.state;
54+
if (loading) {
55+
return <Loader />;
56+
}
57+
4858
return (
4959
<View style={styles.grid}>
5060
<Text style={styles.title}>Rio de Janeiro</Text>

‎packages/app/src/Loader.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
2121
position: 'absolute',
2222
left: width / 2 - 40,
2323
top: height / 4,
24-
backgroundColor: 'blue',
24+
backgroundColor: '#202020',
2525
},
2626
});
2727

@@ -52,9 +52,8 @@ class Loader extends Component {
5252
<View style={styles.container}>
5353
<custom.Spinner
5454
degrees={degrees}
55-
style={{top: height / 4 + 8, left: width / 2 - 60, color: 'white'}}
55+
style={{top: 550, left: 740, color: 'orange'}}
5656
/>
57-
<Text style={{color: 'white'}}>Loading...</Text>
5857
</View>
5958
);
6059
}

‎packages/app/src/Sidebar.js‎

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

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

1413
const styles = StyleSheet.create({
1514
sidebar: {
@@ -23,12 +22,33 @@ const styles = StyleSheet.create({
2322
container: {
2423
position: 'absolute',
2524
left: 40,
26-
top: 100,
25+
// top: 100,
2726
borderRadius: 10,
2827
lineHeight: 40,
28+
backgroundColor: 'orange',
2929
},
3030
});
3131

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
39+
style={{
40+
color: focused ? '#331A00' : 'white',
41+
fontSize: 24,
42+
}}>
43+
{text}
44+
</Text>
45+
</View>
46+
);
47+
}
48+
}
49+
50+
const FocusableItem = withFocus(Item);
51+
3252
class Sidebar extends Component {
3353
constructor(props) {
3454
super(props);
@@ -37,12 +57,15 @@ class Sidebar extends Component {
3757
render() {
3858
return (
3959
<View style={styles.sidebar}>
40-
<View style={styles.container}>
41-
<Text>Rio de Janeiro</Text>
42-
<Text>Kyoto</Text>
43-
<Text>Stockholm</Text>
44-
<Button onClick={() => alert('hi')} title="PRESS ME" />
45-
</View>
60+
{/*<View style={styles.container}>*/}
61+
<FocusableItem
62+
focusKey="sidebar-item-1"
63+
text="Rio de Janeiro"
64+
idx={120}
65+
/>
66+
<FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
67+
<FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
68+
{/*</View>*/}
4669
</View>
4770
);
4871
}

‎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/app/src/Spinner.js‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ class Spinner {
33
console.log(error, errorInfo);
44
}
55

6-
reset(prevProps, parentStyle, ape) {
7-
const {ctx} = ape;
8-
// parentStyle.backgroundColor // white
9-
if (ctx) {
10-
ctx.clearRect(0, 0, 18, 18);
11-
}
12-
}
6+
// You can also use your own clear function although isn't recommended
7+
// unsafeClear(prevProps, parentStyle, ape) {
8+
// const {ctx} = ape;
9+
// const parentBackgroundColor = parentStyle.style.backgroundColor;
10+
// const newProps = {...prevProps, style: { color: parentBackgroundColor } };
11+
// this.render(newProps, ape);
12+
// }
1313

1414
render(props, ape) {
1515
const {ctx} = ape;
@@ -18,24 +18,13 @@ class Spinner {
1818

1919
const offset = 8;
2020
ctx.save();
21-
// ctx.translate(offset, offset);
2221
ctx.translate(style.left, style.top);
2322
ctx.rotate(degrees);
24-
25-
// Draw half open circle
2623
ctx.beginPath();
27-
ctx.lineWidth = 3;
24+
ctx.lineWidth = 50;
2825
ctx.arc(8 - offset, 8 - offset, 6, 0, 1.75 * Math.PI);
2926
ctx.strokeStyle = color;
3027
ctx.stroke();
31-
32-
// Draw arrowhead
33-
ctx.lineWidth = 3;
34-
ctx.moveTo(13 - offset, 1 - offset);
35-
ctx.lineTo(9 - offset, 5 - offset);
36-
ctx.lineTo(13 - offset, 5 - offset);
37-
ctx.lineTo(13 - offset, 1 - offset);
38-
ctx.stroke();
3928
ctx.restore();
4029
}
4130
}

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

Lines changed: 4 additions & 4 deletions
Large diffs are not rendered by default.

‎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();

0 commit comments

Comments
 (0)