Merge pull request #1264 from vjeux/Update_Wed_13_May

Update wed 13 may

Author: vjeux

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) => {
   }
 });
 
+type Props = {
+  navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
+  onExternalExampleRequested: Function,
+};
+
+
+
 class UIExplorerList extends React.Component {
+  props: Props;
 
-  constructor(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;