Refactor/rewrite from scratch #344
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…tance
* `withGoogleMap` requires a prop: `containerElement`
* `withGoogleMap` requires a prop: `mapElement`
BREAKING CHANGE: Wrap all `react-google-maps` components inside `withGoogleMap` HOC.
Before:
```js
// v5.0.0
<GoogleMapLoader
containerElement={
<div
{...this.props}
style={{
height: "100%",
}}
/>
}
googleMapElement={
<GoogleMap
ref={(map) => console.log(map)}
defaultZoom={3}
defaultCenter={{lat: -25.363882, lng: 131.044922}}
onClick={::this.handleMapClick}>
{this.state.markers.map((marker, index) => {
return (
<Marker
{...marker}
onRightclick={this.handleMarkerRightclick.bind(this, index)} />
);
})}
</GoogleMap>
}
/>
// or v4.0.0
<GoogleMap containerProps={{
...this.props,
style: {
height: "100%",
},
}}
ref="map"
defaultZoom={3}
defaultCenter={{lat: -25.363882, lng: 131.044922}}
onClick={::this.handleMapClick}>
{this.state.markers.map((marker, index) => {
return (
<Marker
{...marker}
onRightclick={this.handleMarkerRightclick.bind(this, index)} />
);
})}
</GoogleMap>
```
After:
```js
// Wrap all `react-google-maps` components with `withGoogleMap` HOC
// and name it GettingStartedGoogleMap
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
onClick={props.onMapClick}
>
{props.markers.map((marker, index) => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(index)}
/>
))}
</GoogleMap>
));
// Then, render it:
render(
<GettingStartedGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
onMapLoad={_.noop}
onMapClick={_.noop}
markers={markers}
onMarkerRightClick={_.noop}
/>,
document.getElementById('root')
);
```
… `scriptjs`
* `withScriptjs` requires a prop: `googleMapURL`
* `withScriptjs` requires a prop: `loadingElement`
BREAKING CHANGE: Apply `withScriptjs` HOC before `withGoogleMaps` HOC.
Before:
```js
<ScriptjsLoader
hostname={"maps.googleapis.com"}
pathname={"/maps/api/js"}
query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
loadingElement={
<div {...this.props} style={{ height: "100%" }}>
<FaSpinner />
</div>
}
containerElement={
<div {...this.props} style={{ height: "100%" }} />
}
googleMapElement={
<GoogleMap
ref={googleMap => {
googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
}}
defaultZoom={3}
defaultCenter={{lat: -25.363882, lng: 131.044922}}
onClick={::this.handleMapClick}
>
<Marker
{...this.state.marker}
onRightclick={this.handleMarkerRightclick}
/>
</GoogleMap>
}
/>
```
After:
```js
// Wrap all `react-google-maps` components with `withGoogleMap` HOC
// then wraps it into `withScriptjs` HOC
// It loads Google Maps JavaScript API v3 for you asynchronously.
// Name the component AsyncGettingStartedExampleGoogleMap
const AsyncGettingStartedExampleGoogleMap = withScriptjs(
withGoogleMap(
props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
onClick={props.onMapClick}
>
{props.markers.map(marker => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(marker)}
/>
))}
</GoogleMap>
)
);
// Then, render it:
render(
<GettingStartedGoogleMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp"
loadingElement={
<div style={{ height: `100%` }}>
<FaSpinner
style={{
display: `block`,
width: `80px`,
height: `80px`,
margin: `150px auto`,
animation: `fa-spin 2s infinite linear`,
}}
/>
</div>
}
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
onMapLoad={_.noop}
onMapClick={_.noop}
markers={markers}
onMarkerRightClick={_.noop}
/>,
document.getElementById('root')
);
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<GoogleMap
onClick={_.noop}
onRightclick={_.noop}
onDragstart={_.noop}
/>
```
After:
```js
<GoogleMap
onClick={_.noop}
onRightClick={_.noop}
onDragStart={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<Marker
onClick={_.noop}
onRightclick={_.noop}
onDragstart={_.noop}
/>
```
After:
```js
<Marker
onClick={_.noop}
onRightClick={_.noop}
onDragStart={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<Rectangle
onClick={_.noop}
onRightclick={_.noop}
onDragstart={_.noop}
/>
```
After:
```js
<Rectangle
onClick={_.noop}
onRightClick={_.noop}
onDragStart={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<Polyline
onClick={_.noop}
onRightclick={_.noop}
onDragstart={_.noop}
/>
```
After:
```js
<Polyline
onClick={_.noop}
onRightClick={_.noop}
onDragStart={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<Polygon
onClick={_.noop}
onRightclick={_.noop}
onDragstart={_.noop}
/>
```
After:
```js
<Polygon
onClick={_.noop}
onRightClick={_.noop}
onDragStart={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<Circle
onClick={_.noop}
onRightclick={_.noop}
onDragstart={_.noop}
/>
```
After:
```js
<Circle
onClick={_.noop}
onRightClick={_.noop}
onDragStart={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<KmlLayer
onClick={_.noop}
onDefaultviewportChanged={_.noop}
onStatusChanged={_.noop}
/>
```
After:
```js
<KmlLayer
onClick={_.noop}
onDefaultViewportChanged={_.noop}
onStatusChanged={_.noop}
/>
```
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<InfoWindow
onCloseclick={_.noop}
onDomready={_.noop}
onZindexChanged={_.noop}
/>
```
After:
```js
<InfoWindow
onCloseClick={_.noop}
onDomReady={_.noop}
onZIndexChanged={_.noop}
/>
```
…aces BREAKING CHANGE: `OverlayView` can no longer be rendered under `MarkerClusterer`
BREAKING CHANGE: move DrawingManager to drawing/DrawingManager
…aner interfaces
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<DrawingManager
onCirclecomplete={_.noop}
onOverlaycomplete={_.noop}
/>
```
After:
```js
<DrawingManager
onCircleComplete={_.noop}
onOverlayComplete={_.noop}
/>
```
BREAKING CHANGE: move SearchBox to places/SearchBox
…nterfaces
BREAKING CHANGE: Input props are now under `inputProps`.
This will get passed in directly into the underlying `<input>` component. You can also override it with `inputStyle`, `inputClassName` and `inputPlaceholder`.
Before:
```js
<SearchBox
placeholder="Customized your placeholder"
style={INPUT_STYLE}
/>
```
After:
```js
<SearchBox
inputPlaceholder="Customized your placeholder"
inputStyle={INPUT_STYLE}
/>
```
…aner interfaces
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<MarkerClusterer
onClusteringbegin={_.noop}
onMouseout={_.noop}
/>
```
After:
```js
<MarkerClusterer
onClusteringBegin={_.noop}
onMouseOut={_.noop}
/>
```
…erfaces
BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.
Before:
```js
<InfoBox
onCloseclick={_.noop}
onDomready={_.noop}
onZindexChanged={_.noop}
/>
```
After:
```js
<InfoBox
onCloseClick={_.noop}
onDomReady={_.noop}
onZIndexChanged={_.noop}
/>
```
Owner
Author
|
Released v6.0.0 under |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description