Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/standalone search box example #619

Closed
wants to merge 7 commits into from
Closed

Feat/standalone search box example #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4f9811c
chore(styleguide.config.js): add `showUsage: true`
tomchentw Sep 16, 2017
16032fd
fix(addons/InfoBox): use setState in lifecycle
tomchentw Sep 16, 2017
99d84d6
fix(places/SearchBox): use setState in lifecycle
tomchentw Sep 16, 2017
618976c
chore(places/SearchBox): add controlPosition docs
tomchentw Sep 16, 2017
6e84344
feat(places/StandaloneSearchBox): add component
tomchentw Sep 16, 2017
98d9dbd
docs(places/StandaloneSearchBox): add component
tomchentw Sep 16, 2017
2fa697e
docs: change height to 400px
tomchentw Sep 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/DirectionsRenderer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down Expand Up @@ -64,7 +64,7 @@ const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down
4 changes: 2 additions & 2 deletions src/components/FusionTablesLayer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const MapWithAFusionTablesLayer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down Expand Up @@ -53,7 +53,7 @@ const MapWithAFusionTablesLayer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down
4 changes: 2 additions & 2 deletions src/components/GoogleMap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const MapWithControlledZoom = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withState('zoom', 'onZoomChange', 8),
Expand Down Expand Up @@ -77,7 +77,7 @@ const MapWithControlledZoom = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withState('zoom', 'onZoomChange', 8),
Expand Down
4 changes: 2 additions & 2 deletions src/components/InfoWindow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const MapWithAMakredInfoWindow = compose(
<MapWithAMakredInfoWindow
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `200px` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
```
Expand Down Expand Up @@ -87,7 +87,7 @@ const MapWithAMakredInfoWindow = compose(
<MapWithAMakredInfoWindow
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `200px` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
```
4 changes: 2 additions & 2 deletions src/components/KmlLayer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const MapWithAKmlLayer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down Expand Up @@ -48,7 +48,7 @@ const MapWithAKmlLayer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Marker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const MapWithAMarker = compose(
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `200px` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
```
Expand Down Expand Up @@ -59,7 +59,7 @@ const MapWithAMarker = compose(
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `200px` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
```
4 changes: 2 additions & 2 deletions src/components/OverlayView.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const MapWithAnOverlayView = compose(
<MapWithAnOverlayView
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `200px` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
```
Expand Down Expand Up @@ -144,7 +144,7 @@ const MapWithAnOverlayView = compose(
<MapWithAnOverlayView
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `200px` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
```
4 changes: 2 additions & 2 deletions src/components/StreetViewPanorama.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const StreetViewPanormaWithAnOverlayView = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
center: { lat: 49.2853171, lng: -123.1119202 },
}),
Expand Down Expand Up @@ -67,7 +67,7 @@ const StreetViewPanormaWithAnOverlayView = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
center: { lat: 49.2853171, lng: -123.1119202 },
}),
Expand Down
4 changes: 2 additions & 2 deletions src/components/addons/InfoBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,9 @@ export class InfoBox extends React.PureComponent {
const infoBox = new GoogleMapsInfobox()
construct(InfoBox.propTypes, updaterMap, this.props, infoBox)
infoBox.setMap(this.context[MAP])
this.state = {
this.setState({
[INFO_BOX]: infoBox,
}
})
}

componentDidMount() {
Expand Down
4 changes: 2 additions & 2 deletions src/components/drawing/DrawingManager.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const MapWithADrawingManager = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down Expand Up @@ -67,7 +67,7 @@ const MapWithADrawingManager = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
Expand Down
24 changes: 11 additions & 13 deletions src/components/places/SearchBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* global google */
import _ from "lodash"
import canUseDOM from "can-use-dom"
import invariant from "invariant"
import React from "react"
import ReactDOM from "react-dom"
import PropTypes from "prop-types"
Expand All @@ -20,6 +19,12 @@ import { MAP, SEARCH_BOX } from "../../constants"
*/
export class SearchBox extends React.PureComponent {
static propTypes = {
/**
* Where to put `<SearchBox>` inside a `<GoogleMap>`
*
* @example google.maps.ControlPosition.TOP_LEFT
* @type number
*/
controlPosition: PropTypes.number,

/**
Expand Down Expand Up @@ -47,7 +52,7 @@ export class SearchBox extends React.PureComponent {
}

componentWillMount() {
if (!canUseDOM || this.state[SEARCH_BOX]) {
if (!canUseDOM || this.containerElement) {
return
}
this.containerElement = document.createElement(`div`)
Expand All @@ -59,9 +64,9 @@ export class SearchBox extends React.PureComponent {
this.containerElement.firstChild
)
construct(SearchBox.propTypes, updaterMap, this.props, searchBox)
this.state = {
this.setState({
[SEARCH_BOX]: searchBox,
}
})
}

componentDidMount() {
Expand Down Expand Up @@ -110,23 +115,16 @@ export class SearchBox extends React.PureComponent {

handleMountAtControlPosition() {
if (isValidControlPosition(this.props.controlPosition)) {
invariant(
this.context[MAP],
`If you're using <SearchBox> with controlPosition, please put it as a child of a <GoogleMap> component.`
)
this.mountControlIndex =
-1 +
this.context[MAP].controls[this.props.controlPosition].push(
this.containerElement.firstChild
) - 1
)
}
}

handleUnmountAtControlPosition() {
if (isValidControlPosition(this.props.controlPosition)) {
invariant(
this.context[MAP],
`If you're using <SearchBox> with controlPosition, please put it as a child of a <GoogleMap> component.`
)
const child = this.context[MAP].controls[
this.props.controlPosition
].removeAt(this.mountControlIndex)
Expand Down
4 changes: 2 additions & 2 deletions src/components/places/SearchBox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const MapWithASearchBox = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
Expand Down Expand Up @@ -122,7 +122,7 @@ const MapWithASearchBox = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `200px` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
Expand Down
Loading