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
esp0 · Mar 14, 2015 · 41ae231 · 41ae231
1 parent 74899c8
commit 41ae231
Show file tree

Hide file tree

Showing 52 changed files with 2,807 additions and 74 deletions.
diff --git a/Examples/2048/Game2048.js b/Examples/2048/Game2048.js
@@ -15,20 +15,20 @@ var {
   View,
 } = React;
 
-var GameBoard = require('./GameBoard');
+var GameBoard = require('GameBoard');
 var TouchableBounce = require('TouchableBounce');
 
 var BOARD_PADDING = 3;
 var CELL_MARGIN = 4;
 var CELL_SIZE = 60;
 
-var Cell = React.createClass({
-  render: function() {
+class Cell extends React.Component {
+  render() {
     return <View style={styles.cell} />;
   }
-});
+}
 
-var Board = React.createClass({
+class Board extends React.Component {
   render() {
     return (
       <View style={styles.board}>
@@ -40,12 +40,10 @@ var Board = React.createClass({
       </View>
     );
   }
-});
+}
 
-var Tile = React.createClass({
-  mixins: [Animation.Mixin],
-
-  calculateOffset() {
+class Tile extends React.Component {
+  calculateOffset(): {top: number; left: number; opacity: number} {
     var tile = this.props.tile;
 
     var pos = (i) => {
@@ -59,6 +57,7 @@ var Tile = React.createClass({
     var offset = {
       top: pos(tile.toRow()),
       left: pos(tile.toColumn()),
+      opacity: 1,
     };
 
     if (tile.isNew()) {
@@ -68,18 +67,18 @@ var Tile = React.createClass({
         animationPosition(tile.toColumn()),
         animationPosition(tile.toRow()),
       ];
-      this.startAnimation('this', 100, 0, 'easeInOutQuad', {position: point});
+      Animation.startAnimation(this.refs['this'], 100, 0, 'easeInOutQuad', {position: point});
     }
 
     return offset;
-  },
+  }
 
   componentDidMount() {
     setTimeout(() => {
-      this.startAnimation('this', 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
-      this.startAnimation('this', 100, 0, 'easeInOutQuad', {opacity: 1});
+      Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
+      Animation.startAnimation(this.refs['this'], 100, 0, 'easeInOutQuad', {opacity: 1});
     }, 0);
-  },
+  }
 
   render() {
     var tile = this.props.tile;
@@ -103,9 +102,9 @@ var Tile = React.createClass({
       </View>
     );
   }
-});
+}
 
-var GameEndOverlay = React.createClass({
+class GameEndOverlay extends React.Component {
   render() {
     var board = this.props.board;
 
@@ -127,27 +126,30 @@ var GameEndOverlay = React.createClass({
       </View>
     );
   }
-});
+}
 
-var Game2048 = React.createClass({
-  getInitialState() {
-    return { board: new GameBoard() };
-  },
+class Game2048 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      board: new GameBoard(),
+    };
+  }
 
   restartGame() {
-    this.setState(this.getInitialState());
-  },
+    this.setState({board: new GameBoard()});
+  }
 
-  handleTouchStart(event) {
+  handleTouchStart(event: Object) {
     if (this.state.board.hasWon()) {
       return;
     }
 
     this.startX = event.nativeEvent.pageX;
     this.startY = event.nativeEvent.pageY;
-  },
+  }
 
-  handleTouchEnd(event) {
+  handleTouchEnd(event: Object) {
     if (this.state.board.hasWon()) {
       return;
     }
@@ -165,7 +167,7 @@ var Game2048 = React.createClass({
     if (direction !== -1) {
       this.setState({board: this.state.board.move(direction)});
     }
-  },
+  }
 
   render() {
     var tiles = this.state.board.tiles
@@ -175,16 +177,16 @@ var Game2048 = React.createClass({
     return (
       <View
         style={styles.container}
-        onTouchStart={this.handleTouchStart}
-        onTouchEnd={this.handleTouchEnd}>
+        onTouchStart={(event) => this.handleTouchStart(event)}
+        onTouchEnd={(event) => this.handleTouchEnd(event)}>
         <Board>
           {tiles}
         </Board>
-        <GameEndOverlay board={this.state.board} onRestart={this.restartGame} />
+        <GameEndOverlay board={this.state.board} onRestart={() => this.restartGame()} />
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

diff --git a/Examples/2048/main.m b/Examples/2048/main.m
@@ -6,6 +6,6 @@
 
 int main(int argc, char * argv[]) {
   @autoreleasepool {
-      return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
   }
 }
diff --git a/Examples/UIExplorer/AlertIOSExample.js b/Examples/UIExplorer/AlertIOSExample.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  AlertIOS,
+} = React;
+
+exports.framework = 'React';
+exports.title = 'AlertIOS';
+exports.description = 'iOS alerts and action sheets';
+exports.examples = [{
+  title: 'Alerts',
+  render() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg'
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with message and default button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            null,
+            null,
+            [
+              {text: 'Button', onPress: () => console.log('Button Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with only one button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with two buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            null,
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with 3 buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            '..............'.split('').map((dot, index) => ({
+              text: 'Button ' + index,
+              onPress: () => console.log('Pressed ' + index)
+            }))
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with too many buttons</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});
diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js
@@ -40,7 +40,9 @@ var EXAMPLES = [
   require('./AsyncStorageExample'),
   require('./CameraRollExample.ios'),
   require('./MapViewExample'),
+  require('./WebViewExample'),
   require('./AppStateIOSExample'),
+  require('./AlertIOSExample'),
   require('./AdSupportIOSExample'),
   require('./AppStateExample'),
   require('./ActionSheetIOSExample'),