Merge pull request #1264 from vjeux/Update_Wed_13_May

Update wed 13 may

Examples/2048/Game2048.js

@@ -150,7 +150,7 @@ class Game2048 extends React.Component {
   startX: number;
   startY: number;
 
-  constructor(props) {
+  constructor(props: {}) {
     super(props);
     this.state = {
       board: new GameBoard(),

Examples/UIExplorer/AlertIOSExample.js

@@ -95,9 +95,98 @@ exports.examples = [{
         </TouchableHighlight>
       </View>
     );
-  },
+  }
+},
+{
+  title: 'Prompt',
+  render(): React.Component {
+    return <PromptExample />
+  }
 }];
 
+class PromptExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.promptResponse = this.promptResponse.bind(this);
+    this.state = {
+      promptValue: undefined,
+    };
+
+    this.title = 'Type a value';
+    this.defaultValue = 'Default value';
+    this.buttons = [{
+      text: 'Custom cancel',
+    }, {
+      text: 'Custom OK',
+      onPress: this.promptResponse
+    }];
+  }
+
+  render() {
+    return (
+      <View>
+        <Text style={{marginBottom: 10}}>
+          <Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue}
+        </Text>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.promptResponse)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title & callback
+            </Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.buttons)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title & custom buttons
+            </Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.promptResponse)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title, default value & callback
+            </Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title, default value & custom buttons
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+
+  prompt() {
+    // Flow's apply support is broken: #7035621
+    ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
+  }
+
+  promptResponse(promptValue) {
+    this.setState({ promptValue });
+  }
+}
+
 var styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,

Examples/UIExplorer/BorderExample.js

@@ -68,6 +68,18 @@ var styles = StyleSheet.create({
     borderLeftWidth: 40,
     borderLeftColor: 'blue',
   },
+  border6: {
+    borderTopWidth: 10,
+    borderTopColor: 'red',
+    borderRightWidth: 20,
+    borderRightColor: 'yellow',
+    borderBottomWidth: 30,
+    borderBottomColor: 'green',
+    borderLeftWidth: 40,
+    borderLeftColor: 'blue',
+
+    borderTopLeftRadius: 100,
+  },
 });
 
 exports.title = 'Border';
@@ -115,4 +127,11 @@ exports.examples = [
       return <View style={[styles.box, styles.border5]} />;
     }
   },
+  {
+    title: 'Custom Borders',
+    description: 'border*Width & border*Color',
+    render() {
+      return <View style={[styles.box, styles.border6]} />;
+    }
+  },
 ];

Examples/UIExplorer/ExampleTypes.js

@@ -0,0 +1,30 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule ExampleTypes
+ * @flow
+ */
+
+export type Example = {
+  title: string,
+  render: () => ?ReactElement<any, any, any>,
+  description?: string,
+};
+
+export type ExampleModule = {
+  title: string;
+  description: string;
+  examples: Array<Example>;
+  external?: bool;
+};
+

Examples/UIExplorer/MapViewExample.js

@@ -168,7 +168,7 @@ var MapViewExample = React.createClass({
         />
         <MapRegionInput
           onChange={this._onRegionInputChanged}
-          region={this.state.mapRegionInput}
+          region={this.state.mapRegionInput || undefined}
         />
       </View>
     );

Examples/UIExplorer/PointerEventsExample.js

@@ -181,7 +181,13 @@ var BoxOnlyExample = React.createClass({
   }
 });
 
-var exampleClasses = [
+type ExampleClass = {
+  Component: ReactClass<any, any, any>,
+  title: string,
+  description: string,
+};
+
+var exampleClasses: Array<ExampleClass> = [
   {
     Component: NoneExample,
     title: '`none`',

Examples/UIExplorer/TextExample.ios.js

@@ -218,6 +218,26 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Letter Spacing',
+  render: function() {
+    return (
+      <View>
+        <Text style={{letterSpacing: 0}}>
+          letterSpacing = 0
+        </Text>
+        <Text style={{letterSpacing: 2, marginTop: 5}}>
+          letterSpacing = 2
+        </Text>
+        <Text style={{letterSpacing: 9, marginTop: 5}}>
+          letterSpacing = 9
+        </Text>
+        <Text style={{letterSpacing: -1, marginTop: 5}}>
+          letterSpacing = -1
+        </Text>
+      </View>
+    );
+  },
 }, {
   title: 'Spaces',
   render: function() {

Examples/UIExplorer/UIExplorerBlock.js

@@ -69,9 +69,10 @@ var styles = StyleSheet.create({
     overflow: 'hidden',
   },
   titleContainer: {
-    borderWidth: 0.5,
-    borderRadius: 2.5,
-    borderColor: '#d6d7da',
+    borderBottomWidth: 0.5,
+    borderTopLeftRadius: 3,
+    borderTopRightRadius: 2.5,
+    borderBottomColor: '#d6d7da',
     backgroundColor: '#f6f7f8',
     paddingHorizontal: 10,
     paddingVertical: 5,

Examples/UIExplorer/UIExplorerList.js

@@ -30,6 +30,8 @@ var {
 var { TestModule } = React.addons;
 var Settings = require('Settings');
 
+import type { Example, ExampleModule } from 'ExampleTypes';
+
 var createExamplePage = require('./createExamplePage');
 
 var COMPONENTS = [
@@ -107,9 +109,17 @@ COMPONENTS.concat(APIS).forEach((Example) => {
   }
 });
 
-class UIExplorerList extends React.Component {
+type Props = {
+  navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
+  onExternalExampleRequested: Function,
+};
 
-  constructor(props) {
+
+
+class UIExplorerList extends React.Component {
+  props: Props;
+
+  constructor(props: Props) {
     super(props);
     this.state = {
       dataSource: ds.cloneWithRowsAndSections({
@@ -149,7 +159,7 @@ class UIExplorerList extends React.Component {
     );
   }
 
-  _renderSectionHeader(data, section) {
+  _renderSectionHeader(data: any, section: string) {
     return (
       <View style={styles.sectionHeader}>
         <Text style={styles.sectionHeaderTitle}>
@@ -159,7 +169,7 @@ class UIExplorerList extends React.Component {
     );
   }
 
-  _renderRow(example, i) {
+  _renderRow(example: ExampleModule, i: number) {
     return (
       <View key={i}>
         <TouchableHighlight onPress={() => this._onPressRow(example)}>
@@ -177,7 +187,7 @@ class UIExplorerList extends React.Component {
     );
   }
 
-  _search(text) {
+  _search(text: mixed) {
     var regex = new RegExp(text, 'i');
     var filter = (component) => regex.test(component.title);
 
@@ -191,7 +201,7 @@ class UIExplorerList extends React.Component {
     Settings.set({searchText: text});
   }
 
-  _onPressRow(example) {
+  _onPressRow(example: ExampleModule) {
     if (example.external) {
       this.props.onExternalExampleRequested(example);
       return;

Examples/UIExplorer/UIExplorerTests/UIExplorerTests.m

@@ -88,35 +88,19 @@
   XCTAssertTrue(foundElement, @"Cound't find element with '<View>' text in %d seconds", TIMEOUT_SECONDS);
 }
 
-- (void)testViewExampleSnapshot
-{
-  [_runner runTest:_cmd module:@"ViewExample"];
+#define RCT_SNAPSHOT_TEST(name, reRecord) \
+- (void)test##name##Snapshot              \
+{                                         \
+  _runner.recordMode |= reRecord;         \
+  [_runner runTest:_cmd module:@#name];   \
 }
 
-- (void)testLayoutExampleSnapshot
-{
-  [_runner runTest:_cmd module:@"LayoutExample"];
-}
-
-- (void)testTextExampleSnapshot
-{
-  [_runner runTest:_cmd module:@"TextExample"];
-}
-
-- (void)testSwitchExampleSnapshot
-{
-  [_runner runTest:_cmd module:@"SwitchExample"];
-}
-
-- (void)testSliderExampleSnapshot
-{
-  [_runner runTest:_cmd module:@"SliderExample"];
-}
-
-- (void)testTabBarExampleSnapshot
-{
-  [_runner runTest:_cmd module:@"TabBarExample"];
-}
+RCT_SNAPSHOT_TEST(ViewExample, NO)
+RCT_SNAPSHOT_TEST(LayoutExample, NO)
+RCT_SNAPSHOT_TEST(TextExample, NO)
+RCT_SNAPSHOT_TEST(SwitchExample, NO)
+RCT_SNAPSHOT_TEST(SliderExample, NO)
+RCT_SNAPSHOT_TEST(TabBarExample, NO)
 
 // Make sure this test runs last
 - (void)testZZZ_NotInRecordMode

Examples/UIExplorer/createExamplePage.js

@@ -17,22 +17,13 @@
 'use strict';
 
 var React = require('react-native');
-var ReactIOS = require('ReactIOS');
+var ReactNative = require('ReactNative');
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
 var invariant = require('invariant');
 
-class Example extends React.Component {
-  title: string;
-  description: string;
-}
-
-type ExampleModule = {
-  title: string;
-  description: string;
-  examples: Array<Example>;
-};
+import type { Example, ExampleModule } from 'ExampleTypes';
 
 var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
   : ReactClass<any, any, any> {
@@ -44,20 +35,20 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
       description: exampleModule.description,
     },
 
-    getBlock: function(example, i) {
+    getBlock: function(example: Example, i) {
       // Hack warning: This is a hack because the www UI explorer requires
       // renderComponent to be called.
       var originalRender = React.render;
       var originalRenderComponent = React.renderComponent;
-      var originalIOSRender = ReactIOS.render;
-      var originalIOSRenderComponent = ReactIOS.renderComponent;
+      var originalIOSRender = ReactNative.render;
+      var originalIOSRenderComponent = ReactNative.renderComponent;
       var renderedComponent;
       // TODO remove typecasts when Flow bug #6560135 is fixed
       // and workaround is removed from react-native.js
       (React: Object).render =
       (React: Object).renderComponent =
-      (ReactIOS: Object).render =
-      (ReactIOS: Object).renderComponent =
+      (ReactNative: Object).render =
+      (ReactNative: Object).renderComponent =
         function(element, container) {
           renderedComponent = element;
         };
@@ -67,8 +58,8 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
       }
       (React: Object).render = originalRender;
       (React: Object).renderComponent = originalRenderComponent;
-      (ReactIOS: Object).render = originalIOSRender;
-      (ReactIOS: Object).renderComponent = originalIOSRenderComponent;
+      (ReactNative: Object).render = originalIOSRender;
+      (ReactNative: Object).renderComponent = originalIOSRenderComponent;
       return (
         <UIExplorerBlock
           key={i}