From 2bca907b1e045744e42638dc838647a0aff6ce9c Mon Sep 17 00:00:00 2001
From: Dmitriy Loktev <unknownliveid@hotmail.com>
Date: Tue, 14 Jul 2015 19:14:38 +0600
Subject: [PATCH] [Image] Add examples to UIExplorer, fix some bugs: - do not
 resume task at DownloadTaskWrapper; - fire loadAbort event; - send more
 readable localizedDescription to onLoadError; - rename 'onLoaded' to
 'onLoadEnd'

---
 Examples/UIExplorer/ImageExample.js          | 51 ++++++++++++++++++++
 Libraries/Image/RCTDownloadTaskWrapper.m     |  1 -
 Libraries/Image/RCTImageDownloader.m         |  2 +-
 Libraries/Image/RCTNetworkImageView.m        | 10 ++--
 Libraries/Image/RCTNetworkImageViewManager.m |  2 +-
 5 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/Examples/UIExplorer/ImageExample.js b/Examples/UIExplorer/ImageExample.js
index faa3267a15b8f0..25886598024dd4 100644
--- a/Examples/UIExplorer/ImageExample.js
+++ b/Examples/UIExplorer/ImageExample.js
@@ -21,10 +21,41 @@ var {
   StyleSheet,
   Text,
   View,
+  ActivityIndicatorIOS
 } = React;
 
 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
 
+var NetworkImage = React.createClass({
+  watchID: (null: ?number),
+
+  getInitialState: function() {
+    return {
+      error: false,
+      loading: true,
+      progress: 0
+    };
+  },
+  render: function() {
+    var loader = this.state.loading ?
+      <View style={styles.progress}>
+        <Text>{this.state.progress}%</Text>
+        <ActivityIndicatorIOS style={{marginLeft:5}}/>
+      </View> : null;
+    return this.state.error ?
+      <Text>{this.state.error}</Text> :
+      <Image
+          source={this.props.source}
+          style={styles.base}
+          onLoadError={(e) => this.setState({error: e.nativeEvent.error})}
+          onLoadProgress={(e) => this.setState({progress: Math.max(0, Math.round(100 * e.nativeEvent.written / e.nativeEvent.total))}) }
+          onLoadEnd={() => this.setState({loading: false, error: false})}
+          onLoadAbort={() => this.setState({error: 'Loading has aborted'})} >
+      {loader}
+      </Image>
+  }
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -59,6 +90,20 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Error Handler',
+    render: function() {
+      return <NetworkImage source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
+    },
+  },
+  {
+    title: 'Image Download Progress',
+    render: function() {
+      return (
+        <NetworkImage source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+      );
+    },
+  },
   {
     title: 'Border Color',
     render: function() {
@@ -300,6 +345,12 @@ var styles = StyleSheet.create({
     width: 38,
     height: 38,
   },
+  progress: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: 100
+  },
   leftMargin: {
     marginLeft: 10,
   },
diff --git a/Libraries/Image/RCTDownloadTaskWrapper.m b/Libraries/Image/RCTDownloadTaskWrapper.m
index b910cb4766b4a3..e9a64369bed244 100644
--- a/Libraries/Image/RCTDownloadTaskWrapper.m
+++ b/Libraries/Image/RCTDownloadTaskWrapper.m
@@ -66,7 +66,6 @@ - (NSURLSessionDownloadTask *)downloadData:(NSURL *)url progressBlock:(RCTDataPr
   task.rct_completionBlock = completionBlock;
   task.rct_progressBlock = progressBlock;
 
-  [task resume];
   return task;
 }
 
diff --git a/Libraries/Image/RCTImageDownloader.m b/Libraries/Image/RCTImageDownloader.m
index 0f9cad198e1c2c..03de0f6133f810 100644
--- a/Libraries/Image/RCTImageDownloader.m
+++ b/Libraries/Image/RCTImageDownloader.m
@@ -96,7 +96,7 @@ - (RCTImageDownloadCancellationBlock)_downloadDataForURL:(NSURL *)url progressBl
           runBlocks(NO, data, error);
         }
 
-        if (response) {
+        if (response && !error) {
           RCTImageDownloader *strongSelf = weakSelf;
           NSCachedURLResponse *cachedResponse = [[NSCachedURLResponse alloc] initWithResponse:response data:data userInfo:nil storagePolicy:NSURLCacheStorageAllowed];
           [strongSelf->_cache storeCachedResponse:cachedResponse forRequest:request];
diff --git a/Libraries/Image/RCTNetworkImageView.m b/Libraries/Image/RCTNetworkImageView.m
index f8dc2815721344..2294e71f165e09 100644
--- a/Libraries/Image/RCTNetworkImageView.m
+++ b/Libraries/Image/RCTNetworkImageView.m
@@ -86,6 +86,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
 {
   if (![_imageURL isEqual:imageURL] && _downloadToken) {
     [_imageDownloader cancelDownload:_downloadToken];
+    NSDictionary *event = @{ @"target": self.reactTag };
+    [_eventDispatcher sendInputEventWithName:@"loadAbort" body:event];
     _downloadToken = nil;
   }
 
@@ -146,8 +148,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
             loadEndHandler();
           });
         } else if (error) {
-          errorHandler([error description]);
-        }
+          errorHandler([error localizedDescription]);
+        } 
       }];
     } else {
       _downloadToken = [_imageDownloader downloadImageForURL:imageURL
@@ -170,8 +172,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
             loadEndHandler();
           });
         } else if (error) {
-          errorHandler([error description]);
-        }
+          errorHandler([error localizedDescription]);
+        } 
       }];
     }
   }
diff --git a/Libraries/Image/RCTNetworkImageViewManager.m b/Libraries/Image/RCTNetworkImageViewManager.m
index 29d990b27f9238..f42ef48f1b275b 100644
--- a/Libraries/Image/RCTNetworkImageViewManager.m
+++ b/Libraries/Image/RCTNetworkImageViewManager.m
@@ -47,7 +47,7 @@ - (NSDictionary *)customDirectEventTypes
   return @{
     @"loadStart":    @{ @"registrationName": @"onLoadStart" },
     @"loadProgress": @{ @"registrationName": @"onLoadProgress" },
-    @"loaded":       @{ @"registrationName": @"onLoaded" },
+    @"loaded":       @{ @"registrationName": @"onLoadEnd" },
     @"loadError":    @{ @"registrationName": @"onLoadError" },
     @"loadAbort":    @{ @"registrationName": @"onLoadAbort" },
   };