From 1aa90bef3738e1bdbc8189af91337d9d02085b46 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Aug 2018 22:24:13 +0100 Subject: [PATCH 01/18] Removed componentWillUpdate --- src/components/fields/_ZoomProperty.jsx | 57 +++++++++++++------------ src/components/inputs/NumberInput.jsx | 6 ++- src/components/inputs/StringInput.jsx | 6 ++- src/components/layers/JSONEditor.jsx | 8 ++-- src/components/layers/LayerEditor.jsx | 10 ++--- src/components/map/OpenLayers3Map.jsx | 4 +- src/components/modals/ExportModal.jsx | 9 ++-- 7 files changed, 52 insertions(+), 48 deletions(-) diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx index bca99ad..2d6baac 100644 --- a/src/components/fields/_ZoomProperty.jsx +++ b/src/components/fields/_ZoomProperty.jsx @@ -13,6 +13,30 @@ import docUid from '../../libs/document-uid' import sortNumerically from '../../libs/sort-numerically' +/** + * We cache a reference for each stop by its index. + * + * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus. + */ +function setStopRefs(props, state) { + // This is initialsed below only if required to improved performance. + let newRefs; + + if(props.value && props.value.stops) { + props.value.stops.forEach((val, idx) => { + if(!state.refs.hasOwnProperty(idx)) { + if(!newRefs) { + newRefs = {...state}; + } + newRefs[idx] = docUid("stop-"); + } + }) + } + + return newRefs; +} + + export default class ZoomProperty extends React.Component { static propTypes = { onChange: PropTypes.func, @@ -39,39 +63,16 @@ export default class ZoomProperty extends React.Component { componentDidMount() { this.setState({ - refs: this.setStopRefs(this.props) + refs: setStopRefs(this.props, this.state) }) } - /** - * We cache a reference for each stop by its index. - * - * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus. - */ - setStopRefs(props) { - // This is initialsed below only if required to improved performance. - let newRefs; - - if(props.value && props.value.stops) { - props.value.stops.forEach((val, idx) => { - if(!this.state.refs.hasOwnProperty(idx)) { - if(!newRefs) { - newRefs = {...this.state.refs}; - } - newRefs[idx] = docUid("stop-"); - } - }) - } - - return newRefs; - } - - UNSAFE_componentWillReceiveProps(nextProps) { - const newRefs = this.setStopRefs(nextProps); + static getDerivedStateFromProps(nextProps) { + const newRefs = setStopRefs(props, state); if(newRefs) { - this.setState({ + return { refs: newRefs - }) + }; } } diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index 447fab8..90cf969 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -17,8 +17,10 @@ class NumberInput extends React.Component { } } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ value: nextProps.value }) + static getDerivedStateFromProps(props, state) { + return { + value: props.value + }; } changeValue(newValue) { diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index b94a709..b5f6bac 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -18,8 +18,10 @@ class StringInput extends React.Component { } } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ value: nextProps.value || '' }) + static getDerivedStateFromProps(props, state) { + return { + value: props.value || '' + }; } render() { diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 8cec16d..2204623 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -29,10 +29,10 @@ class JSONEditor extends React.Component { } } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ - code: JSON.stringify(nextProps.layer, null, 2) - }) + static getDerivedStateFromProps(props, state) { + return { + code: JSON.stringify(props.layer, null, 2) + }; } shouldComponentUpdate(nextProps, nextState) { diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 7d7291d..6e245b3 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/src/components/layers/LayerEditor.jsx @@ -79,18 +79,18 @@ export default class LayerEditor extends React.Component { this.state = { editorGroups } } - UNSAFE_componentWillReceiveProps(nextProps) { - const additionalGroups = { ...this.state.editorGroups } + static getDerivedStateFromProps(props, state) { + const additionalGroups = { ...state.editorGroups } - layout[nextProps.layer.type].groups.forEach(group => { + layout[props.layer.type].groups.forEach(group => { if(!(group.title in additionalGroups)) { additionalGroups[group.title] = true } }) - this.setState({ + return { editorGroups: additionalGroups - }) + }; } getChildContext () { diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index 113781a..a5881de 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/src/components/map/OpenLayers3Map.jsx @@ -29,10 +29,10 @@ class OpenLayers3Map extends React.Component { const styleFunc = olms.apply(this.map, newMapStyle) } - UNSAFE_componentWillReceiveProps(nextProps) { + componentDidUpdate() { require.ensure(["ol", "ol-mapbox-style"], () => { if(!this.map) return - this.updateStyle(nextProps.mapStyle) + this.updateStyle(this.props.mapStyle) }) } diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index f7d997a..03c0d66 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -31,11 +31,10 @@ class Gist extends React.Component { } } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ - ...this.state, - preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token'] - }) + static getDerivedStateFromProps(props, state) { + return { + preview: !!(props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token'] + }; } onSave() { From 409f81f0d809a84bd9418c2705f63669c0f245f4 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Aug 2018 20:13:45 +0100 Subject: [PATCH 02/18] More componentWillUpdate transition fixes. --- src/components/fields/_ZoomProperty.jsx | 13 +++++++++---- src/components/map/MapboxGlMap.jsx | 10 ++++++---- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx index 2d6baac..6007cae 100644 --- a/src/components/fields/_ZoomProperty.jsx +++ b/src/components/fields/_ZoomProperty.jsx @@ -62,18 +62,23 @@ export default class ZoomProperty extends React.Component { } componentDidMount() { - this.setState({ - refs: setStopRefs(this.props, this.state) - }) + const newRefs = setStopRefs(this.props, this.state); + + if(newRefs) { + this.setState({ + refs: newRefs + }) + } } - static getDerivedStateFromProps(nextProps) { + static getDerivedStateFromProps(props, state) { const newRefs = setStopRefs(props, state); if(newRefs) { return { refs: newRefs }; } + return null; } // Order the stops altering the refs to reflect their new position. diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 18f3e95..1858e46 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -81,21 +81,23 @@ export default class MapboxGlMap extends React.Component { } } - UNSAFE_componentWillReceiveProps(nextProps) { + updateMapFromProps(props) { if(!this.state.map) return - const metadata = nextProps.mapStyle.metadata || {} + const metadata = props.mapStyle.metadata || {} MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox - if(!nextProps.inspectModeEnabled) { + if(!props.inspectModeEnabled) { //Mapbox GL now does diffing natively so we don't need to calculate //the necessary operations ourselves! - this.state.map.setStyle(nextProps.mapStyle, { diff: true}) + this.state.map.setStyle(props.mapStyle, { diff: true}) } } componentDidUpdate(prevProps) { const map = this.state.map; + this.updateMapFromProps(this.props); + if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) { this.state.inspect.toggleInspector() } From b5fc315b3735f805cb2e590becc6339d2ae9ef04 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 10 Sep 2018 14:51:22 +0100 Subject: [PATCH 03/18] setImmediate -> process.nextTick --- test/functional/util/webdriverio-ext.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/util/webdriverio-ext.js b/test/functional/util/webdriverio-ext.js index ee35b48..866b775 100644 --- a/test/functional/util/webdriverio-ext.js +++ b/test/functional/util/webdriverio-ext.js @@ -46,9 +46,9 @@ try { browser.addCommand('flushReactUpdates', function() { browser.executeAsync(function(done) { // For any events to propogate - setImmediate(function() { + process.nextTick(function() { // For the DOM to be updated. - setImmediate(done); + process.nextTick(done); }) }) }) From b314642586814bca0fa90846175cf4b90c94d8f5 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 10 Sep 2018 14:55:45 +0100 Subject: [PATCH 04/18] Rollback to setImmediate --- test/functional/util/webdriverio-ext.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/util/webdriverio-ext.js b/test/functional/util/webdriverio-ext.js index 866b775..ee35b48 100644 --- a/test/functional/util/webdriverio-ext.js +++ b/test/functional/util/webdriverio-ext.js @@ -46,9 +46,9 @@ try { browser.addCommand('flushReactUpdates', function() { browser.executeAsync(function(done) { // For any events to propogate - process.nextTick(function() { + setImmediate(function() { // For the DOM to be updated. - process.nextTick(done); + setImmediate(done); }) }) }) From be954143c3c22ec5909995b1c7c04ee475af9352 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 10 Sep 2018 15:09:34 +0100 Subject: [PATCH 05/18] Switch to setTimeout(fn, 0) --- test/functional/util/webdriverio-ext.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/functional/util/webdriverio-ext.js b/test/functional/util/webdriverio-ext.js index ee35b48..67f54f5 100644 --- a/test/functional/util/webdriverio-ext.js +++ b/test/functional/util/webdriverio-ext.js @@ -46,10 +46,10 @@ try { browser.addCommand('flushReactUpdates', function() { browser.executeAsync(function(done) { // For any events to propogate - setImmediate(function() { + setTimeout(function() { // For the DOM to be updated. - setImmediate(done); - }) + setTimeout(done, 0); + }, 0) }) }) From 00b22eb9027f8364d0f944991c251e12965074c3 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 10 Sep 2018 15:11:06 +0100 Subject: [PATCH 06/18] OpenLayers removed in previous PR. --- test/functional/modals/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js index 9f26227..d0996aa 100644 --- a/test/functional/modals/index.js +++ b/test/functional/modals/index.js @@ -171,7 +171,7 @@ describe("modals", function() { assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey); }) - it("style renderer", function() { + it.skip("style renderer", function() { var selector = wd.$("modal-settings.maputnik:renderer"); browser.selectByValue(selector, "ol3"); browser.click(wd.$("modal-settings.name")) From 77475af3c6a89abbdb3716ba80cfe8a01f535173 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 20 Sep 2018 19:16:23 +0100 Subject: [PATCH 07/18] Added guard to map object --- src/components/map/MapboxGlMap.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index ca3ef47..5933919 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -109,8 +109,10 @@ export default class MapboxGlMap extends React.Component { this.state.inspect.render() } - map.showTileBoundaries = this.props.options.showTileBoundaries; - map.showCollisionBoxes = this.props.options.showCollisionBoxes; + if (map) { + map.showTileBoundaries = this.props.options.showTileBoundaries; + map.showCollisionBoxes = this.props.options.showCollisionBoxes; + } } componentDidMount() { From c5ff67b6e00bbf6302fef12e680d1422556ce84b Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 22 Sep 2018 12:50:40 +0100 Subject: [PATCH 08/18] Appveyor nodejs -v6 +v10 --- appveyor.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/appveyor.yml b/appveyor.yml index 0b100cc..49c572b 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -1,8 +1,8 @@ environment: matrix: - - nodejs_version: "6" - nodejs_version: "8" - nodejs_version: "9" + - nodejs_version: "10" platform: - x86 - x64 From 7d0a985f1dd57ba1c3c2e289ef719b4eec0ce476 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 22 Sep 2018 13:04:12 +0100 Subject: [PATCH 09/18] Only replace glyphs key if a replacement exists. --- src/libs/style.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/libs/style.js b/src/libs/style.js index 60598f5..4caa357 100644 --- a/src/libs/style.js +++ b/src/libs/style.js @@ -102,9 +102,12 @@ function replaceAccessTokens(mapStyle, opts={}) { }) if (mapStyle.glyphs && mapStyle.glyphs.match(/\.tilehosting\.com/)) { - changedStyle = { - ...changedStyle, - glyphs: mapStyle.glyphs.replace('{key}', getAccessToken("openmaptiles", mapStyle, opts)) + const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts); + if (newAccessToken) { + changedStyle = { + ...changedStyle, + glyphs: mapStyle.glyphs.replace('{key}', newAccessToken) + } } } From 0ac70df00f3084b28318664a8226c80b6e8b97e7 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 22 Sep 2018 13:06:56 +0100 Subject: [PATCH 10/18] Remove travis as we now have CircleCI. --- .travis.yml | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 9d83eff..0000000 --- a/.travis.yml +++ /dev/null @@ -1,22 +0,0 @@ -language: node_js -matrix: - include: - - os: osx - node_js: "6" - - os: osx - node_js: "8" - - os: osx - node_js: "9" -install: - - npm install -script: - - mkdir public - - node --stack_size=100000 $(which npm) run build - - npm run lint - - npm run lint-styles -addons: - apt: - sources: - - ubuntu-toolchain-r-test - packages: - - g++-4.8 From f1216795d2a356120bce8aa2101528898821586d Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 22 Sep 2018 13:12:36 +0100 Subject: [PATCH 11/18] Swap layer visibility icons. --- src/components/layers/LayerListItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 805e50f..2d4a1f6 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -114,7 +114,7 @@ class LayerListItem extends React.Component { /> this.props.onLayerVisibilityToggle(this.props.layerId)} /> From 3763ec3737391f8607fb330df4812b6908716d50 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 22 Sep 2018 13:18:52 +0100 Subject: [PATCH 12/18] Remove mapbox until we have a valid access token. --- src/config/styles.json | 18 ------------------ src/config/tilesets.json | 5 ----- 2 files changed, 23 deletions(-) diff --git a/src/config/styles.json b/src/config/styles.json index d89e3f3..45f07eb 100644 --- a/src/config/styles.json +++ b/src/config/styles.json @@ -34,23 +34,5 @@ "title": "Empty Style", "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json", "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII=" - }, - { - "id": "mapbox-satellite", - "title": "Mapbox Satellite", - "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/satellite-v9.json", - "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-satellite.png" - }, - { - "id": "mapbox-bright", - "title": "Mapbox Bright", - "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/bright-v9.json", - "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-bright.png" - }, - { - "id": "mapbox-basic", - "title": "Mapbox Basic", - "url": "https://rawgit.com/mapbox/mapbox-gl-styles/master/styles/basic-v9.json", - "thumbnail": "https://maputnik.github.io/thumbnails/mapbox-basic.png" } ] diff --git a/src/config/tilesets.json b/src/config/tilesets.json index 136963e..11507c8 100644 --- a/src/config/tilesets.json +++ b/src/config/tilesets.json @@ -1,9 +1,4 @@ { - "mapbox-streets": { - "type": "vector", - "url": "mapbox://mapbox.mapbox-streets-v7", - "title": "Mapbox Streets" - }, "openmaptiles": { "type": "vector", "url": "https://free.tilehosting.com/data/v3.json?key={key}", From 3d5eec897e505b6d137c442051ddb3ce8c49e084 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 22 Sep 2018 13:44:41 +0100 Subject: [PATCH 13/18] Try moving to 'Visual Studio 2017' image --- appveyor.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/appveyor.yml b/appveyor.yml index 49c572b..9d469f8 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -1,3 +1,4 @@ +image: Visual Studio 2017 environment: matrix: - nodejs_version: "8" From e6da977c48c6bfd2a165898124de511eb15955ab Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 19:40:50 +0100 Subject: [PATCH 14/18] Prevented overlapping modals in react tree and fixed request canceling. --- package.json | 2 +- src/components/modals/OpenModal.jsx | 87 ++++++++++++++++------------- 2 files changed, 48 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 90d191b..83a0fc2 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "prop-types": "^15.6.0", "react": "^16.3.2", "react-aria-menubutton": "^5.1.1", - "react-aria-modal": "^2.12.1", + "react-aria-modal": "^3.0.0", "react-autobind": "^1.0.6", "react-autocomplete": "^1.7.2", "react-codemirror2": "^4.2.1", diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 5d9901f..7afbb61 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -76,7 +76,10 @@ class OpenModal extends React.Component { onStyleSelect = (styleUrl) => { this.clearError(); + const requestController = new AbortController(); + const activeRequest = fetch(styleUrl, { + signal: requestController.signal, mode: 'cors', credentials: "same-origin" }) @@ -165,49 +168,53 @@ class OpenModal extends React.Component { ); } - return this.onOpenToggle()} - title={'Open Style'} - > - {errorElement} -
-

Upload Style

-

Upload a JSON style from your computer.

- - - -
+ return ( +
+ this.onOpenToggle()} + title={'Open Style'} + > + {errorElement} +
+

Upload Style

+

Upload a JSON style from your computer.

+ + + +
-
-

Load from URL

-

- Load from a URL. Note that the URL must have CORS enabled. -

- this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/> -
- -
-
+
+

Load from URL

+

+ Load from a URL. Note that the URL must have CORS enabled. +

+ this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/> +
+ +
+
-
-

Gallery Styles

-

- Open one of the publicly available styles to start from. -

-
- {styleOptions} -
-
+
+

Gallery Styles

+

+ Open one of the publicly available styles to start from. +

+
+ {styleOptions} +
+
+ - this.onCancelActiveRequest(e)} - message={"Loading: "+this.state.activeRequestUrl} - /> - + this.onCancelActiveRequest(e)} + message={"Loading: "+this.state.activeRequestUrl} + /> +
+ ) } } From 673465af77b8efd3c10a90ef2764a4c0f22838ac Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 19:53:32 +0100 Subject: [PATCH 15/18] Use AbortController in activeRequest --- src/components/modals/OpenModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 7afbb61..065704e 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -107,7 +107,7 @@ class OpenModal extends React.Component { }) this.setState({ - activeRequest: activeRequest, + activeRequest: requestController, activeRequestUrl: styleUrl }) } From 35600c253dcffe82ef5a49c9219315ac94cf3dea Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 20:43:34 +0100 Subject: [PATCH 16/18] Revert react-aria-modal --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 83a0fc2..90d191b 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "prop-types": "^15.6.0", "react": "^16.3.2", "react-aria-menubutton": "^5.1.1", - "react-aria-modal": "^3.0.0", + "react-aria-modal": "^2.12.1", "react-autobind": "^1.0.6", "react-autocomplete": "^1.7.2", "react-codemirror2": "^4.2.1", From b7fd889fcd5004739eaf4fb8ad60bce0a8b43d8e Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 21:00:17 +0100 Subject: [PATCH 17/18] Removed signal from fetch as not supported in all browsers. --- src/components/modals/OpenModal.jsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 065704e..85794e3 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -76,10 +76,9 @@ class OpenModal extends React.Component { onStyleSelect = (styleUrl) => { this.clearError(); - const requestController = new AbortController(); + let canceled; const activeRequest = fetch(styleUrl, { - signal: requestController.signal, mode: 'cors', credentials: "same-origin" }) @@ -87,6 +86,10 @@ class OpenModal extends React.Component { return response.json(); }) .then((body) => { + if(canceled) { + return; + } + this.setState({ activeRequest: null, activeRequestUrl: null @@ -107,7 +110,11 @@ class OpenModal extends React.Component { }) this.setState({ - activeRequest: requestController, + activeRequest: { + abort: function() { + canceled = true; + } + }, activeRequestUrl: styleUrl }) } From bc1d0de0572017cb72387abf2ed9f5d3d8296099 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 24 Sep 2018 16:55:31 +0100 Subject: [PATCH 18/18] Added default isActive prop to Collapse component --- src/components/layers/Collapse.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/layers/Collapse.jsx b/src/components/layers/Collapse.jsx index aeaa09b..cea8523 100644 --- a/src/components/layers/Collapse.jsx +++ b/src/components/layers/Collapse.jsx @@ -10,6 +10,10 @@ export default class CollapseAlt extends React.Component { children: PropTypes.element.isRequired } + static defaultProps = { + isActive: true + } + render() { if (accessibility.reducedMotionEnabled()) { return (