Skip to content

Commit 41ae231

Browse files
vjeuxvjeux
committed
Updates from Sat 14 Mar
- Unforked RKWebView | Nick Lockwood - [ReactNative] Add integration test stuff | Spencer Ahrens - [ReactNative] AlertIOS.alert and examples | Eric Vicenti - [react-packager] Implement image loading i.e. ix('img') -> require('image!img'); | Amjad Masad - Fixed scrollOffset bug | Nick Lockwood - [React Native] Update 2048 | Alex Akers - deepDiffer should support explicitly undefined values | Thomas Aylott
1 parent 74899c8 commit 41ae231

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+2807
-74
lines changed

‎Examples/2048/Game2048.js‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,20 @@ var {
1515
View,
1616
} = React;
1717

18-
var GameBoard = require('./GameBoard');
18+
var GameBoard = require('GameBoard');
1919
var TouchableBounce = require('TouchableBounce');
2020

2121
var BOARD_PADDING = 3;
2222
var CELL_MARGIN = 4;
2323
var CELL_SIZE = 60;
2424

25-
var Cell = React.createClass({
26-
render: function() {
25+
class Cell extends React.Component {
26+
render() {
2727
return <View style={styles.cell} />;
2828
}
29-
});
29+
}
3030

31-
var Board = React.createClass({
31+
class Board extends React.Component {
3232
render() {
3333
return (
3434
<View style={styles.board}>
@@ -40,12 +40,10 @@ var Board = React.createClass({
4040
</View>
4141
);
4242
}
43-
});
43+
}
4444

45-
var Tile = React.createClass({
46-
mixins: [Animation.Mixin],
47-
48-
calculateOffset() {
45+
class Tile extends React.Component {
46+
calculateOffset(): {top: number; left: number; opacity: number} {
4947
var tile = this.props.tile;
5048

5149
var pos = (i) => {
@@ -59,6 +57,7 @@ var Tile = React.createClass({
5957
var offset = {
6058
top: pos(tile.toRow()),
6159
left: pos(tile.toColumn()),
60+
opacity: 1,
6261
};
6362

6463
if (tile.isNew()) {
@@ -68,18 +67,18 @@ var Tile = React.createClass({
6867
animationPosition(tile.toColumn()),
6968
animationPosition(tile.toRow()),
7069
];
71-
this.startAnimation('this', 100, 0, 'easeInOutQuad', {position: point});
70+
Animation.startAnimation(this.refs['this'], 100, 0, 'easeInOutQuad', {position: point});
7271
}
7372

7473
return offset;
75-
},
74+
}
7675

7776
componentDidMount() {
7877
setTimeout(() => {
79-
this.startAnimation('this', 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
80-
this.startAnimation('this', 100, 0, 'easeInOutQuad', {opacity: 1});
78+
Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
79+
Animation.startAnimation(this.refs['this'], 100, 0, 'easeInOutQuad', {opacity: 1});
8180
}, 0);
82-
},
81+
}
8382

8483
render() {
8584
var tile = this.props.tile;
@@ -103,9 +102,9 @@ var Tile = React.createClass({
103102
</View>
104103
);
105104
}
106-
});
105+
}
107106

108-
var GameEndOverlay = React.createClass({
107+
class GameEndOverlay extends React.Component {
109108
render() {
110109
var board = this.props.board;
111110

@@ -127,27 +126,30 @@ var GameEndOverlay = React.createClass({
127126
</View>
128127
);
129128
}
130-
});
129+
}
131130

132-
var Game2048 = React.createClass({
133-
getInitialState() {
134-
return { board: new GameBoard() };
135-
},
131+
class Game2048 extends React.Component {
132+
constructor(props) {
133+
super(props);
134+
this.state = {
135+
board: new GameBoard(),
136+
};
137+
}
136138

137139
restartGame() {
138-
this.setState(this.getInitialState());
139-
},
140+
this.setState({board: new GameBoard()});
141+
}
140142

141-
handleTouchStart(event) {
143+
handleTouchStart(event: Object) {
142144
if (this.state.board.hasWon()) {
143145
return;
144146
}
145147

146148
this.startX = event.nativeEvent.pageX;
147149
this.startY = event.nativeEvent.pageY;
148-
},
150+
}
149151

150-
handleTouchEnd(event) {
152+
handleTouchEnd(event: Object) {
151153
if (this.state.board.hasWon()) {
152154
return;
153155
}
@@ -165,7 +167,7 @@ var Game2048 = React.createClass({
165167
if (direction !== -1) {
166168
this.setState({board: this.state.board.move(direction)});
167169
}
168-
},
170+
}
169171

170172
render() {
171173
var tiles = this.state.board.tiles
@@ -175,16 +177,16 @@ var Game2048 = React.createClass({
175177
return (
176178
<View
177179
style={styles.container}
178-
onTouchStart={this.handleTouchStart}
179-
onTouchEnd={this.handleTouchEnd}>
180+
onTouchStart={(event) => this.handleTouchStart(event)}
181+
onTouchEnd={(event) => this.handleTouchEnd(event)}>
180182
<Board>
181183
{tiles}
182184
</Board>
183-
<GameEndOverlay board={this.state.board} onRestart={this.restartGame} />
185+
<GameEndOverlay board={this.state.board} onRestart={() => this.restartGame()} />
184186
</View>
185187
);
186188
}
187-
});
189+
}
188190

189191
var styles = StyleSheet.create({
190192
container: {

‎Examples/2048/main.m‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66

77
int main(int argc, char * argv[]) {
88
@autoreleasepool {
9-
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
9+
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
1010
}
1111
}

‎Examples/UIExplorer/AlertIOSExample.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* Copyright 2004-present Facebook. All Rights Reserved.
3+
*/
4+
'use strict';
5+
6+
var React = require('react-native');
7+
var {
8+
StyleSheet,
9+
View,
10+
Text,
11+
TouchableHighlight,
12+
AlertIOS,
13+
} = React;
14+
15+
exports.framework = 'React';
16+
exports.title = 'AlertIOS';
17+
exports.description = 'iOS alerts and action sheets';
18+
exports.examples = [{
19+
title: 'Alerts',
20+
render() {
21+
return (
22+
<View>
23+
<TouchableHighlight style={styles.wrapper}
24+
onPress={() => AlertIOS.alert(
25+
'Foo Title',
26+
'My Alert Msg'
27+
)}>
28+
<View style={styles.button}>
29+
<Text>Alert with message and default button</Text>
30+
</View>
31+
</TouchableHighlight>
32+
<TouchableHighlight style={styles.wrapper}
33+
onPress={() => AlertIOS.alert(
34+
null,
35+
null,
36+
[
37+
{text: 'Button', onPress: () => console.log('Button Pressed!')},
38+
]
39+
)}>
40+
<View style={styles.button}>
41+
<Text>Alert with only one button</Text>
42+
</View>
43+
</TouchableHighlight>
44+
<TouchableHighlight style={styles.wrapper}
45+
onPress={() => AlertIOS.alert(
46+
'Foo Title',
47+
'My Alert Msg',
48+
[
49+
{text: 'Foo', onPress: () => console.log('Foo Pressed!')},
50+
{text: 'Bar', onPress: () => console.log('Bar Pressed!')},
51+
]
52+
)}>
53+
<View style={styles.button}>
54+
<Text>Alert with two buttons</Text>
55+
</View>
56+
</TouchableHighlight>
57+
<TouchableHighlight style={styles.wrapper}
58+
onPress={() => AlertIOS.alert(
59+
'Foo Title',
60+
null,
61+
[
62+
{text: 'Foo', onPress: () => console.log('Foo Pressed!')},
63+
{text: 'Bar', onPress: () => console.log('Bar Pressed!')},
64+
{text: 'Baz', onPress: () => console.log('Baz Pressed!')},
65+
]
66+
)}>
67+
<View style={styles.button}>
68+
<Text>Alert with 3 buttons</Text>
69+
</View>
70+
</TouchableHighlight>
71+
<TouchableHighlight style={styles.wrapper}
72+
onPress={() => AlertIOS.alert(
73+
'Foo Title',
74+
'My Alert Msg',
75+
'..............'.split('').map((dot, index) => ({
76+
text: 'Button ' + index,
77+
onPress: () => console.log('Pressed ' + index)
78+
}))
79+
)}>
80+
<View style={styles.button}>
81+
<Text>Alert with too many buttons</Text>
82+
</View>
83+
</TouchableHighlight>
84+
</View>
85+
);
86+
},
87+
}];
88+
89+
var styles = StyleSheet.create({
90+
wrapper: {
91+
borderRadius: 5,
92+
marginBottom: 5,
93+
},
94+
button: {
95+
backgroundColor: '#eeeeee',
96+
padding: 10,
97+
},
98+
});

‎Examples/UIExplorer/UIExplorerList.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ var EXAMPLES = [
4040
require('./AsyncStorageExample'),
4141
require('./CameraRollExample.ios'),
4242
require('./MapViewExample'),
43+
require('./WebViewExample'),
4344
require('./AppStateIOSExample'),
45+
require('./AlertIOSExample'),
4446
require('./AdSupportIOSExample'),
4547
require('./AppStateExample'),
4648
require('./ActionSheetIOSExample'),

0 commit comments

Comments
 (0)