schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 16:51:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #394 from orangemug/fix/request-abort-and-oerlapping-modals

Browse source 
Fix overlapping modals & request canceling
This commit is contained in:
Orange Mug 2018-09-23 22:28:39 +01:00 committed by GitHub
commit c908f7dcd0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
src/components/modals/OpenModal.jsx
View file

@ -76,6 +76,8 @@ class OpenModal extends React.Component {
onStyleSelect = (styleUrl) => { onStyleSelect = (styleUrl) => {
this.clearError(); this.clearError();
let canceled;
const activeRequest = fetch(styleUrl, { const activeRequest = fetch(styleUrl, {
mode: 'cors', mode: 'cors',
credentials: "same-origin" credentials: "same-origin"
@ -84,6 +86,10 @@ class OpenModal extends React.Component {
return response.json(); return response.json();
}) })
.then((body) => { .then((body) => {
if(canceled) {
return;
}
this.setState({ this.setState({
activeRequest: null, activeRequest: null,
activeRequestUrl: null activeRequestUrl: null
@ -104,7 +110,11 @@ class OpenModal extends React.Component {
}) })
this.setState({ this.setState({
activeRequest: activeRequest, activeRequest: {
abort: function() {
canceled = true;
}
},
activeRequestUrl: styleUrl activeRequestUrl: styleUrl
}) })
} }
@ -165,49 +175,53 @@ class OpenModal extends React.Component {
); );
} }
return <Modal return (
data-wd-key="open-modal" <div>
isOpen={this.props.isOpen} <Modal
onOpenToggle={() => this.onOpenToggle()} data-wd-key="open-modal"
title={'Open Style'} isOpen={this.props.isOpen}
> onOpenToggle={() => this.onOpenToggle()}
{errorElement} title={'Open Style'}
<section className="maputnik-modal-section"> >
<h2>Upload Style</h2> {errorElement}
<p>Upload a JSON style from your computer.</p> <section className="maputnik-modal-section">
<FileReaderInput onChange={this.onUpload} tabIndex="-1"> <h2>Upload Style</h2>
<Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button> <p>Upload a JSON style from your computer.</p>
</FileReaderInput> <FileReaderInput onChange={this.onUpload} tabIndex="-1">
</section> <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
</FileReaderInput>
</section>
<section className="maputnik-modal-section"> <section className="maputnik-modal-section">
<h2>Load from URL</h2> <h2>Load from URL</h2>
<p> <p>
Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>. Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
</p> </p>
<input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/> <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
<div> <div>
<Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button> <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
</div> </div>
</section> </section>
<section className="maputnik-modal-section maputnik-modal-section--shrink"> <section className="maputnik-modal-section maputnik-modal-section--shrink">
<h2>Gallery Styles</h2> <h2>Gallery Styles</h2>
<p> <p>
Open one of the publicly available styles to start from. Open one of the publicly available styles to start from.
</p> </p>
<div className="maputnik-style-gallery-container"> <div className="maputnik-style-gallery-container">
{styleOptions} {styleOptions}
</div> </div>
</section> </section>
</Modal>
<LoadingModal <LoadingModal
isOpen={!!this.state.activeRequest} isOpen={!!this.state.activeRequest}
title={'Loading style'} title={'Loading style'}
onCancel={(e) => this.onCancelActiveRequest(e)} onCancel={(e) => this.onCancelActiveRequest(e)}
message={"Loading: "+this.state.activeRequestUrl} message={"Loading: "+this.state.activeRequestUrl}
/> />
</Modal> </div>
)
} }
} }