Skip to content

add onError event and wire image load failure to it #1687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reseul merged 1 commit into from
Mar 5, 2018
Merged

add onError event and wire image load failure to it #1687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion ReactWindows/ReactNative.Shared/Views/Image/ReactImageLoadEvent.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,16 @@ public class ReactImageLoadEvent : Event
/// </summary>
public const int OnLoadEnd = 3;

/// <summary>
/// The event identifier for image load error.
/// </summary>
public const int OnError = 4;

private readonly int _eventType;
private readonly string _imageUri;
private readonly int _width;
private readonly int _height;
private readonly string _error;

/// <summary>
/// Instantiates a <see cref="ReactImageLoadEvent"/>.
Expand Down Expand Up @@ -57,6 +63,18 @@ public ReactImageLoadEvent(int viewId, int eventType, string imageUri, int width
_height = height;
}

/// <summary>
/// Instantiates a <see cref="ReactImageLoadEvent"/>.
/// </summary>
/// <param name="viewId">The view identifier.</param>
/// <param name="error">The error string.</param>
public ReactImageLoadEvent(int viewId, string error)
: base(viewId)
{
_eventType = OnError;
_error = error;
}

/// <summary>
/// The name of the event.
/// </summary>
Expand All @@ -72,6 +90,8 @@ public override string EventName
return "topLoad";
case OnLoadEnd:
Copy link
Contributor

@reseul reseul Mar 2, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do we do with this one, then? Doesn't seem to be used.
Semantically "onLoad" marks the end, anyway.

[edit]: Based on the comments of the JS counterpart, onLoadEnd should be called in both cases (error & success).
So order for success:

  • onLoadstart, onLoad, onLoadEnd
    for failure:
  • onLoadStart, onError, onLoadEnd

(not sure about the order of onLoadEnd vs onXXX, perhaps peeking into Android code would inspire somehow.) #Resolved

Copy link
Author

@mrousal mrousal Mar 5, 2018 •
edited by reseul
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated to fire both events as on android #Resolved

return "topLoadEnd";
case OnError:
return "topError";
default:
throw new InvalidOperationException(
Invariant($"Invalid image event '{_eventType}'."));
Expand Down Expand Up @@ -135,7 +155,15 @@ public override void Dispatch(RCTEventEmitter eventEmitter)
}
}

if (_eventType == OnError)
{
eventData = new JObject()
{
{ "error", _error }
};
}

eventEmitter.receiveEvent(ViewTag, EventName, eventData);
}
}
}
}
32 changes: 23 additions & 9 deletions ReactWindows/ReactNative/Views/Image/ReactImageManager.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,13 @@ public override IReadOnlyDictionary<string, object> ExportedCustomDirectEventTyp
{ "registrationName", "onLoadEnd" }
}
},
{
"topError",
new Dictionary<string, object>
{
{ "registrationName", "onError" }
}
},
};
}
}
Expand Down Expand Up @@ -234,21 +241,28 @@ public override void SetDimensions(Border view, Dimensions dimensions)
SetUriFromMultipleSources(view);
}

private void OnImageFailed(Border view)
private void OnImageFailed(Border view, Exception e)
{
if (!view.HasTag())
{
// View may have been unmounted, ignore.
return;
}

view.GetReactContext()
var eventDispatcher = view.GetReactContext()
.GetNativeModule<UIManagerModule>()
.EventDispatcher
.DispatchEvent(
new ReactImageLoadEvent(
view.GetTag(),
ReactImageLoadEvent.OnLoadEnd));
.EventDispatcher;

eventDispatcher.DispatchEvent(
new ReactImageLoadEvent(
view.GetTag(),
e.Message));

eventDispatcher.DispatchEvent(
new ReactImageLoadEvent(
view.GetTag(),
ReactImageLoadEvent.OnLoadEnd));

}

private void OnImageStatusUpdate(Border view, ImageLoadStatus status, ImageMetadata metadata)
Expand Down Expand Up @@ -290,9 +304,9 @@ private async void SetUriFromSingleSource(Border view, string source)
imageBrush.ImageSource = image;
OnImageStatusUpdate(view, ImageLoadStatus.OnLoadEnd, metadata);
}
catch
catch (Exception e)
{
OnImageFailed(view);
OnImageFailed(view, e);
}
}

Expand Down