Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Changed order of context props so that translations provided by IAs a…
Browse files Browse the repository at this point in the history 
…re not shadowed by defaultProps
  • Loading branch information
@gabe647
gabe647 committed Feb 1, 2022
1 parent 693bd5d commit bb421ed
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 32 deletions.
23 changes: 14 additions & 9 deletions app/demos/multi/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ import {
MultiMapManager,
BasemapContainer,
VectorLayer,
LayerPanel,
FullScreenFlex,
FlexMap,
SplitScreen,
SplitScreen
} from '@bayer/ol-kit'
import { fromLonLat } from 'ol/proj'
import olFeature from 'ol/Feature'
Expand Down Expand Up @@ -39,10 +38,11 @@ class App extends React.Component {
id: 'map3',
synced: false,
visible: false
},
}
]

onMapInit = async (map) => {
onMapsInit = async (maps) => {
const map = maps[0]
// create a vector layer and add to the map
const layer = new VectorLayer({
title: '1904Labs HQ',
Expand All @@ -61,21 +61,26 @@ class App extends React.Component {
const dataLayer = await loadDataLayer(map, 'https://data.nasa.gov/api/geospatial/7zbq-j77a?method=export&format=KML')

dataLayer.getSource().getFeatures().forEach(f => f.set('title', f.get('name')))

return {
contextProps: {}
}
}

render () {
return (
<MultiMapManager>
<div style={{position: 'absolute', top: 20, left: 20, zIndex: 1, }}>
<MultiMapManager mapsConfig={this.mapConfigs} onMapsInit={this.onMapsInit}>
<div style={{ position: 'absolute', top: 20, left: 20, zIndex: 1 }}>
<SplitScreen />
</div>
<FullScreenFlex>
<FullScreenFlex disableAsyncRender>
{this.mapConfigs.map(({ id, synced, visible }, i) => {
return (
<FlexMap
key={id}
index={i}>
<Map id={id} onMapInit={this.onMapInit} synced={synced} visible={visible} isMultiMap>
index={i}
disableAsyncRender>
<Map id={id} synced={synced} visible={visible} isMultiMap>
<Popup />
<ContextMenu />
<Controls />
Expand Down
3 changes: 2 additions & 1 deletion app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}
@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
</head>
Expand All @@ -26,5 +26,6 @@
</svg>
</a>
<div id="root"></div>
<div id="map"></div>
</body>
</html>
28 changes: 14 additions & 14 deletions docs/MultiMapManager_MultiMapManager.js.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,31 @@
<span aria-hidden="true"></span>
</a>
</div>

<div class="navbar-menu">
<div class="navbar-end">

<div class="navbar-item">
<a href="tutorial-Getting%20Started.html">
Get Started
</a>
</div>

<div class="navbar-item">
<a href="docs.html">
Docs
</a>
</div>

<div class="navbar-item">
<a href="https://github.com/Bayer-Group/ol-kit">
Github
</a>
</div>

</div>
</div>

</nav>
</div>
</div>
Expand All @@ -73,11 +73,11 @@
</div>
<div class="column is-9-desktop" id="main-content-wrapper">
<div class="content">







<section>
<article>
<pre class="prettyprint source linenums"><code>import React from 'react'
Expand All @@ -100,7 +100,7 @@

// state becomes an object of persistedStateKeys (or component names) with their persisted states'
this.state = {
intialized: false,
initialized: false,
maps: [],
syncedState: [],
visibleState: [],
Expand Down Expand Up @@ -184,20 +184,20 @@
})

// check for that last time this is called &amp; initialize
if (maps.length === this.props.mapsConfig.length) this.intialize()
if (maps.length === this.props.mapsConfig.length) this.initialize()

return promise
}

intialize = async () => {
initialize = async () => {
const { maps } = this.state

const { contextProps } = await this.props.onMapsInit(maps)
// resolve all onMapInit promises now

this.promisesResolvers.map(resolve => resolve())
this.refreshMaps()
this.setState({ intialized: true, ...contextProps })
this.setState({ initialized: true, ...contextProps })
}

getContextValue = () => {
Expand All @@ -219,11 +219,11 @@
}

childModifier = rawChildren => {
const { intialized } = this.state
const { initialized } = this.state
const children = !Array.isArray(rawChildren) ? [rawChildren] : rawChildren
const adoptedChildren = children.map((child, i) => {
// only render FlexMap &amp; FullScreenFlex until initialized
const allow = intialized || child.props.disableAsyncRender
const allow = initialized || child.props.disableAsyncRender

if (child.props.isMultiMap) {
// we caught a map
Expand Down
18 changes: 10 additions & 8 deletions src/MultiMapManager/MultiMapManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ class MultiMapManager extends React.Component {

// state becomes an object of persistedStateKeys (or component names) with their persisted states'
this.state = {
intialized: false,
initialized: false,
maps: [],
syncedState: [],
visibleState: [],
Expand Down Expand Up @@ -102,20 +102,20 @@ class MultiMapManager extends React.Component {
})

// check for that last time this is called & initialize
if (maps.length === this.props.mapsConfig.length) this.intialize()
if (maps.length === this.props.mapsConfig.length) this.initialize()

return promise
}

intialize = async () => {
initialize = async () => {
const { maps } = this.state

const { contextProps } = await this.props.onMapsInit(maps)
// resolve all onMapInit promises now

this.promisesResolvers.map(resolve => resolve())
this.refreshMaps()
this.setState({ intialized: true, ...contextProps })
this.setState({ initialized: true, ...contextProps })
}

getContextValue = () => {
Expand All @@ -124,24 +124,26 @@ class MultiMapManager extends React.Component {
const map = maps[0]

return {
...this.state,
map,
onMapAdded: this.onMapAdded,
onMapRemoved: this.onMapRemoved,
syncedState: maps.map(m => m.getSyncedState()),
translations,
visibleState: maps.map(m => m.getVisibleState()),
visibleMapCount: maps.map(m => m.getVisibleState()).filter(e => e).length,
...contextProps
...contextProps,
// We need to spread state last so that translations and other contextProps provided
// from onMapsInit are not shadowed by any defaultProps
...this.state
}
}

childModifier = rawChildren => {
const { intialized } = this.state
const { initialized } = this.state
const children = !Array.isArray(rawChildren) ? [rawChildren] : rawChildren
const adoptedChildren = children.map((child, i) => {
// only render FlexMap & FullScreenFlex until initialized
const allow = intialized || child.props.disableAsyncRender
const allow = initialized || child.props.disableAsyncRender

if (child?.props?.isMultiMap) {
// we caught a map
Expand Down

0 comments on commit bb421ed

Please sign in to comment.