Updates fri 5 june

Examples/UIExplorer/ProgressViewIOSExample.js

@@ -0,0 +1,83 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ProgressViewIOS,
+  StyleSheet,
+  View,
+} = React;
+var TimerMixin = require('react-timer-mixin');
+
+var ProgressViewExample = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      progress: 0,
+    };
+  },
+
+  componentDidMount() {
+    this.updateProgress();
+  },
+
+  updateProgress() {
+    var progress = this.state.progress + 0.01;
+    this.setState({ progress });
+    this.requestAnimationFrame(() => this.updateProgress());
+  },
+
+  getProgress(offset) {
+    var progress = this.state.progress + offset;
+    return Math.sin(progress % Math.PI) % 1;
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
+      </View>
+    );
+  },
+});
+
+exports.framework = 'React';
+exports.title = 'ProgressViewIOS';
+exports.description = 'ProgressViewIOS';
+exports.examples = [{
+  title: 'ProgressViewIOS',
+  render() {
+    return (
+      <ProgressViewExample/>
+    );
+  }
+}];
+
+var styles = StyleSheet.create({
+  container: {
+    marginTop: -20,
+    backgroundColor: 'transparent',
+  },
+  progressView: {
+    marginTop: 20,
+  }
+});

Examples/UIExplorer/TouchableExample.js

@@ -75,6 +75,14 @@ exports.examples = [
   render: function(): ReactElement {
     return <TouchableFeedbackEvents />;
   },
+}, {
+  title: 'Touchable delay for events',
+  description: '<Touchable*> components also accept delayPressIn, ' +
+    'delayPressOut, and delayLongPress as props. These props impact the ' +
+    'timing of feedback events.',
+  render: function(): ReactElement {
+    return <TouchableDelayEvents />;
+  },
 }];
 
 var TextOnPressBox = React.createClass({
@@ -148,6 +156,44 @@ var TouchableFeedbackEvents = React.createClass({
   },
 });
 
+var TouchableDelayEvents = React.createClass({
+  getInitialState: function() {
+    return {
+      eventLog: [],
+    };
+  },
+  render: function() {
+    return (
+      <View>
+        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <TouchableOpacity
+          style={styles.wrapper}
+          onPress={() => this._appendEvent('press')}
+          delayPressIn={400}
+          onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
+          delayPressOut={1000}
+          onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
+          delayLongPress={800}
+          onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
+          <Text style={styles.button}>
+            Press Me
+          </Text>
+        </TouchableOpacity>
+      </View>
+        <View style={styles.eventLogBox}>
+          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
+        </View>
+      </View>
+    );
+  },
+  _appendEvent: function(eventName) {
+    var limit = 6;
+    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    eventLog.unshift(eventName);
+    this.setState({eventLog});
+  },
+});
+
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 
 var styles = StyleSheet.create({

Examples/UIExplorer/UIExplorerList.js

@@ -45,6 +45,7 @@ var COMPONENTS = [
   require('./NavigatorIOSColorsExample'),
   require('./NavigatorIOSExample'),
   require('./PickerIOSExample'),
+  require('./ProgressViewIOSExample'),
   require('./ScrollViewExample'),
   require('./SegmentedControlIOSExample'),
   require('./SliderIOSExample'),

IntegrationTests/AsyncStorageTest.js

@@ -16,12 +16,19 @@ var {
   View,
 } = React;
 
+var deepDiffer = require('deepDiffer');
+
 var DEBUG = false;
 
 var KEY_1 = 'key_1';
 var VAL_1 = 'val_1';
 var KEY_2 = 'key_2';
 var VAL_2 = 'val_2';
+var KEY_MERGE = 'key_merge';
+var VAL_MERGE_1 = {'foo': 1, 'bar': {'hoo': 1, 'boo': 1}, 'moo': {'a': 3}};
+var VAL_MERGE_2 = {'bar': {'hoo': 2}, 'baz': 2, 'moo': {'a': 3}};
+var VAL_MERGE_EXPECT =
+  {'foo': 1, 'bar': {'hoo': 2, 'boo': 1}, 'baz': 2, 'moo': {'a': 3}};
 
 // setup in componentDidMount
 var done;
@@ -40,8 +47,9 @@ function expectTrue(condition, message) {
 
 function expectEqual(lhs, rhs, testname) {
   expectTrue(
-    lhs === rhs,
-    'Error in test ' + testname + ': expected ' + rhs + ', got ' + lhs
+    !deepDiffer(lhs, rhs),
+    'Error in test ' + testname + ': expected\n' + JSON.stringify(rhs) +
+      '\ngot\n' + JSON.stringify(lhs)
   );
 }
 
@@ -93,25 +101,25 @@ function testRemoveItem() {
           'Missing KEY_1 or KEY_2 in ' + '(' + result + ')'
         );
         updateMessage('testRemoveItem - add two items');
-        AsyncStorage.removeItem(KEY_1, (err) => {
-          expectAsyncNoError(err);
+        AsyncStorage.removeItem(KEY_1, (err2) => {
+          expectAsyncNoError(err2);
           updateMessage('delete successful ');
-          AsyncStorage.getItem(KEY_1, (err, result) => {
-            expectAsyncNoError(err);
+          AsyncStorage.getItem(KEY_1, (err3, result2) => {
+            expectAsyncNoError(err3);
             expectEqual(
-              result,
+              result2,
               null,
               'testRemoveItem: key_1 present after delete'
             );
             updateMessage('key properly removed ');
-            AsyncStorage.getAllKeys((err, result2) => {
-             expectAsyncNoError(err);
+            AsyncStorage.getAllKeys((err4, result3) => {
+             expectAsyncNoError(err4);
              expectTrue(
-               result2.indexOf(KEY_1) === -1,
-               'Unexpected: KEY_1 present in ' + result2
+               result3.indexOf(KEY_1) === -1,
+               'Unexpected: KEY_1 present in ' + result3
              );
-             updateMessage('proper length returned.\nDone!');
-             done();
+             updateMessage('proper length returned.');
+             runTestCase('should merge values', testMerge);
             });
           });
         });
@@ -120,6 +128,21 @@ function testRemoveItem() {
   });
 }
 
+function testMerge() {
+  AsyncStorage.setItem(KEY_MERGE, JSON.stringify(VAL_MERGE_1), (err1) => {
+    expectAsyncNoError(err1);
+    AsyncStorage.mergeItem(KEY_MERGE, JSON.stringify(VAL_MERGE_2), (err2) => {
+      expectAsyncNoError(err2);
+      AsyncStorage.getItem(KEY_MERGE, (err3, result) => {
+        expectAsyncNoError(err3);
+        expectEqual(JSON.parse(result), VAL_MERGE_EXPECT, 'testMerge');
+        updateMessage('objects deeply merged\nDone!');
+        done();
+      });
+    });
+  });
+}
+
 var AsyncStorageTest = React.createClass({
   getInitialState() {
     return {

Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js

@@ -0,0 +1,49 @@
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ProgressViewIOS
+ */
+
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+
+var DummyProgressViewIOS = React.createClass({
+  render: function() {
+    return (
+      <View style={[styles.dummy, this.props.style]}>
+        <Text style={styles.text}>
+          ProgressViewIOS is not supported on this platform!
+        </Text>
+      </View>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  dummy: {
+    width: 120,
+    height: 20,
+    backgroundColor: '#ffbcbc',
+    borderWidth: 1,
+    borderColor: 'red',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#333333',
+    margin: 5,
+    fontSize: 10,
+  }
+});
+
+module.exports = DummyProgressViewIOS;

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ProgressViewIOS
+ * @flow
+ */
+'use strict';
+
+var Image = require('Image');
+var NativeMethodsMixin = require('NativeMethodsMixin');
+var NativeModules = require('NativeModules');
+var PropTypes = require('ReactPropTypes');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+
+var requireNativeComponent = require('requireNativeComponent');
+var verifyPropTypes = require('verifyPropTypes');
+
+/**
+ * Use `ProgressViewIOS` to render a UIProgressView on iOS.
+ */
+var ProgressViewIOS = React.createClass({
+  mixins: [NativeMethodsMixin],
+
+  propTypes: {
+    /**
+     * The progress bar style.
+     */
+    progressViewStyle: PropTypes.oneOf(['default', 'bar']),
+
+    /**
+     * The progress value (between 0 and 1).
+     */
+    progress: PropTypes.number,
+
+    /**
+     * The tint color of the progress bar itself.
+     */
+    progressTintColor: PropTypes.string,
+
+    /**
+     * The tint color of the progress bar track.
+     */
+    trackTintColor: PropTypes.string,
+
+    /**
+     * A stretchable image to display as the progress bar.
+     */
+    progressImage: Image.propTypes.source,
+
+    /**
+     * A stretchable image to display behind the progress bar.
+     */
+    trackImage: Image.propTypes.source,
+  },
+
+  render: function() {
+    return (
+      <RCTProgressView
+        {...this.props}
+        style={[styles.progressView, this.props.style]}
+      />
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  progressView: {
+    height: NativeModules.ProgressViewManager.ComponentHeight
+  },
+});
+
+var RCTProgressView = requireNativeComponent(
+  'RCTProgressView',
+  null
+);
+if (__DEV__) {
+  verifyPropTypes(
+    RCTProgressView,
+    RCTProgressView.viewConfig
+  );
+}
+
+module.exports = ProgressViewIOS;

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js

@@ -17,7 +17,7 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var Dummy = React.createClass({
+var DummySegmentedControlIOS = React.createClass({
   render: function() {
     return (
       <View style={[styles.dummy, this.props.style]}>
@@ -46,4 +46,4 @@ var styles = StyleSheet.create({
   }
 });
 
-module.exports = Dummy;
+module.exports = DummySegmentedControlIOS;