Skip to content

Cancel Fetch on Unmount (and Other Updates) #21

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

Closed
RobertFischer wants to merge 7 commits into from
Closed

Cancel Fetch on Unmount (and Other Updates) #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2dac115
Ignore yarn.lock and node_modules
Aug 17, 2018
96dfc09
Add in debug (and supports-color to make it more colorful)
Aug 17, 2018
472f50e
Add in cancellation; do a bit of code cleanup
Aug 17, 2018
e3912ca
Don't actually need the timeout, because we cancel on unmount
Aug 17, 2018
479020a
Improvement on the style type
Aug 17, 2018
f7b707c
Remove the StyleSheet check; just didn't work
Aug 17, 2018
c712a37
Don't require the style objects
Aug 17, 2018
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
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
yarn.lock
node_modules
84 changes: 54 additions & 30 deletions SvgImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,77 @@
// @flow

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, WebView } from 'react-native';
import Promise from 'bluebird';
Promise.config({ cancellation: true }); // Need to explicitly enable this feature

// TODO Make this something more precise oneOf(object,_?_), where _?_ is the type returned by `StyleSheet.create`.
const styleType = PropTypes.object;

const firstHtml =
'<html><head><style>html, body { margin:0; padding:0; overflow:hidden; background-color: transparent; } svg { position:fixed; top:0; left:0; height:100%; width:100% }</style></head><body>';
const lastHtml = '</body></html>';

class SvgImage extends Component {
state = { fetchingUrl: null, svgContent: null };

static propTypes = {
source: PropTypes.shape({
uri: PropTypes.string.isRequired
}).isRequired,
containerStyle: styleType,
style: styleType,
}

state = {
svgContent: null,
fetchingPromise: null,
};

componentDidMount() {
this.doFetch(this.props);
this.doFetch();
}

componentWillUnmount() {
const { fetchingPromise } = this.state || {};
if(fetchingPromise) fetchingPromise.cancel();
}
componentWillReceiveProps(nextProps) {
this.doFetch(nextProps);

componentDidUpdate(prevProps) {
const { source:oldSource } = prevProps || {};
const { uri:oldUri } = oldSource || {};
const { source:newSource } = this.props || {};
const { uri:newUri } = newSource || {};
if(oldUri !== newUri) this.doFetch();
}
doFetch = props => {
let uri = props.source && props.source.uri;

doFetch() {
const { source } = this.props || {};
const { uri } = source || {};
if (uri) {
if (uri.match(/^data:image\/svg/)) {
const index = uri.indexOf('<svg');
this.setState({ fetchingUrl: uri, svgContent: uri.slice(index) });
this.setState({ svgContent: uri.slice(index) });
} else {
console.log('fetching', uri);
fetch(uri)
.then(res => res.text())
.then(text => {
this.setState({ fetchingUrl: uri, svgContent: text });
})
.catch(err => {
console.error('got error', err);
});
this.setState(({fetchingPromise:previousFetch}) => ({ fetchingPromise:
Promise.resolve(fetch(uri))
.call("text")
.then(text => this.setState({ svgContent: text }))
.catch(e => console.error(`Error fetching SVG URI: ${e.message||e}`, {uri, e}))
.return((previousFetch && previousFetch.isPending()) ? previousFetch : null) // Ensure we resolve/cancel previous fetch
}))
}
}
};
}

render() {
const props = this.props;
const { svgContent } = this.state;
if (svgContent) {
const props = this.props || {};
const { svgContent } = this.state || {};
const hasSvgContent = Boolean(svgContent);
return (
<View pointerEvents="none" style={[props.style, props.containerStyle]}>
<WebView
<View pointerEvents="none" style={[props.containerStyle, hasSvgContent ? {} : props.style]}>
{ hasSvgContent && <WebView
originWhitelist={['*']}
scalesPageToFit={true}
style={[
Expand All @@ -53,17 +84,10 @@ class SvgImage extends Component {
]}
scrollEnabled={false}
source={{ html: `${firstHtml}${svgContent}${lastHtml}` }}
/>
/> }
</View>
);
} else {
return (
<View
pointerEvents="none"
style={[props.containerStyle, props.style]}
/>
);
}
}
}

export default SvgImage;
10 changes: 9 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,13 @@
"react-native",
"svg",
"image"
]
],
"dependencies": {
"bluebird": "^3.5.1",
"debug": "^3.1.0",
"prop-types": "^15.6.2"
},
"devDependencies": {
"supports-color": "^5.4.0"
}
}