More componentWillUpdate transition fixes.

This commit is contained in:
orangemug 2018-08-07 20:13:45 +01:00
parent 1aa90bef37
commit 409f81f0d8
2 changed files with 15 additions and 8 deletions

View file

@ -62,18 +62,23 @@ export default class ZoomProperty extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.setState({ const newRefs = setStopRefs(this.props, this.state);
refs: setStopRefs(this.props, this.state)
}) if(newRefs) {
this.setState({
refs: newRefs
})
}
} }
static getDerivedStateFromProps(nextProps) { static getDerivedStateFromProps(props, state) {
const newRefs = setStopRefs(props, state); const newRefs = setStopRefs(props, state);
if(newRefs) { if(newRefs) {
return { return {
refs: newRefs refs: newRefs
}; };
} }
return null;
} }
// Order the stops altering the refs to reflect their new position. // Order the stops altering the refs to reflect their new position.

View file

@ -81,21 +81,23 @@ export default class MapboxGlMap extends React.Component {
} }
} }
UNSAFE_componentWillReceiveProps(nextProps) { updateMapFromProps(props) {
if(!this.state.map) return if(!this.state.map) return
const metadata = nextProps.mapStyle.metadata || {} const metadata = props.mapStyle.metadata || {}
MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox 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 //Mapbox GL now does diffing natively so we don't need to calculate
//the necessary operations ourselves! //the necessary operations ourselves!
this.state.map.setStyle(nextProps.mapStyle, { diff: true}) this.state.map.setStyle(props.mapStyle, { diff: true})
} }
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const map = this.state.map; const map = this.state.map;
this.updateMapFromProps(this.props);
if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) { if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
this.state.inspect.toggleInspector() this.state.inspect.toggleInspector()
} }