Skip to content

Commit b9e2db4

Browse files
sonayesonaye
committed
Clean up examples and remove createClass
1 parent 361c7ea commit b9e2db4

11 files changed

Lines changed: 387 additions & 503 deletions

File tree

‎examples/Container.js‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,83 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import ReactDOM from 'react-dom';
4-
import {Link} from 'react-router';
5-
import GitHubForkRibbon from 'react-github-fork-ribbon';
1+
import React, { Component } from 'react';
62

7-
let GoogleApiWrapper;
8-
if (__IS_DEV__) {
9-
GoogleApiWrapper = require('../src/index').GoogleApiWrapper;
10-
} else {
11-
GoogleApiWrapper = require('../dist').GoogleApiWrapper;
12-
}
3+
import GitHubForkRibbon from 'react-github-fork-ribbon';
4+
import PropTypes from 'prop-types';
5+
import { Link } from 'react-router';
136

147
import styles from './styles.module.css';
158

16-
export const Container = React.createClass({
17-
propTypes: {
9+
const GoogleApiWrapper = __IS_DEV__
10+
? require('../src/index').GoogleApiWrapper
11+
: require('../dist').GoogleApiWrapper;
12+
13+
class Container extends Component {
14+
static propTypes = {
1815
children: PropTypes.element.isRequired
19-
},
16+
};
2017

21-
contextTypes: {
18+
static contextTypes = {
2219
router: PropTypes.object
23-
},
20+
};
21+
22+
renderChildren = () => {
23+
const { children } = this.props;
2424

25-
renderChildren: function() {
26-
const {children} = this.props;
2725
if (!children) return;
2826

2927
const sharedProps = {
3028
google: this.props.google,
3129
loaded: this.props.loaded
3230
};
33-
return React.Children.map(children, c => {
34-
return React.cloneElement(c, sharedProps, {});
35-
});
36-
},
3731

38-
render: function() {
39-
const {routeMap, routeDef} = this.props;
40-
const {router} = this.context;
32+
return React.Children.map(children, child =>
33+
React.cloneElement(child, sharedProps, {})
34+
);
35+
};
36+
37+
render() {
38+
const { routeMap, routeDef } = this.props;
4139

42-
const c = this.renderChildren();
4340
return (
4441
<div className={styles.container}>
4542
<GitHubForkRibbon
4643
href="//github.com/fullstackreact/google-maps-react"
47-
target="_blank"
4844
position="right"
49-
>
45+
target="_blank">
5046
Fork me on GitHub
5147
</GitHubForkRibbon>
48+
5249
<div className={styles.wrapper}>
5350
<div className={styles.list}>
5451
<ul>
55-
{Object.keys(routeMap).map(key => {
56-
return (
57-
<Link to={key} activeClassName={styles.active} key={key}>
58-
<li>{routeMap[key].name}</li>
59-
</Link>
60-
);
61-
})}
52+
{Object.keys(routeMap).map(key => (
53+
<Link activeClassName={styles.active} key={key} to={key}>
54+
<li>{routeMap[key].name}</li>
55+
</Link>
56+
))}
6257
</ul>
6358
</div>
59+
6460
<div className={styles.content}>
6561
<div className={styles.header}>
6662
<h1>{routeDef && routeDef.name} Example</h1>
63+
6764
<h2>
6865
<a href="https://github.com/fullstackreact/google-maps-react/blob/master/README.md">
6966
Readme
7067
</a>
7168
</h2>
7269
</div>
73-
{c}
70+
71+
{this.renderChildren()}
7472
</div>
7573
</div>
7674
</div>
7775
);
7876
}
79-
});
77+
}
78+
79+
const Loading = () => <div>Fancy loading container</div>;
8080

81-
const Loading = props => <div>Fancy loading container</div>;
8281
export default GoogleApiWrapper({
8382
apiKey: __GAPI_KEY__,
8483
libraries: ['places', 'visualization'],

‎examples/components/autocomplete.js‎

Lines changed: 52 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,93 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
1+
import React, { Component } from 'react';
32

4-
import Map, {Marker, GoogleApiWrapper} from '../../src/index'
5-
import styles from './autocomplete.module.css'
3+
import Map, { Marker } from '../../src/index';
64

7-
const Contents = React.createClass({
8-
getInitialState() {
9-
return {
10-
place: null,
11-
position: null
12-
}
13-
},
5+
import styles from './autocomplete.module.css';
146

15-
onSubmit: function(e) {
16-
e.preventDefault();
17-
},
7+
class Contents extends Component {
8+
state = {
9+
position: null
10+
};
1811

19-
componentDidMount: function() {
12+
componentDidMount() {
2013
this.renderAutoComplete();
21-
},
14+
}
2215

2316
componentDidUpdate(prevProps) {
24-
const {google, map} = this.props;
25-
if (map !== prevProps.map) {
26-
this.renderAutoComplete();
27-
}
28-
},
17+
if (this.props !== prevProps.map) this.renderAutoComplete();
18+
}
2919

30-
renderAutoComplete: function() {
31-
const {google, map} = this.props;
20+
onSubmit(e) {
21+
e.preventDefault();
22+
}
23+
24+
renderAutoComplete() {
25+
const { google, map } = this.props;
3226

3327
if (!google || !map) return;
3428

35-
const aref = this.refs.autocomplete;
36-
const node = ReactDOM.findDOMNode(aref);
37-
var autocomplete = new google.maps.places.Autocomplete(node);
29+
const autocomplete = new google.maps.places.Autocomplete(this.autocomplete);
3830
autocomplete.bindTo('bounds', map);
3931

4032
autocomplete.addListener('place_changed', () => {
4133
const place = autocomplete.getPlace();
42-
if (!place.geometry) {
43-
return;
44-
}
4534

46-
if (place.geometry.viewport) {
47-
map.fitBounds(place.geometry.viewport);
48-
} else {
35+
if (!place.geometry) return;
36+
37+
if (place.geometry.viewport) map.fitBounds(place.geometry.viewport);
38+
else {
4939
map.setCenter(place.geometry.location);
5040
map.setZoom(17);
5141
}
5242

53-
this.setState({
54-
place: place,
55-
position: place.geometry.location
56-
})
57-
})
58-
},
43+
this.setState({ position: place.geometry.location });
44+
});
45+
}
5946

60-
render: function() {
61-
const props = this.props;
62-
const {position} = this.state;
47+
render() {
48+
const { position } = this.state;
6349

6450
return (
6551
<div className={styles.flexWrapper}>
6652
<div className={styles.left}>
6753
<form onSubmit={this.onSubmit}>
6854
<input
69-
ref='autocomplete'
55+
placeholder="Enter a location"
56+
ref={ref => (this.autocomplete = ref)}
7057
type="text"
71-
placeholder="Enter a location" />
72-
<input
73-
className={styles.button}
74-
type='submit'
75-
value='Go' />
58+
/>
59+
60+
<input className={styles.button} type="submit" value="Go" />
7661
</form>
62+
7763
<div>
7864
<div>Lat: {position && position.lat()}</div>
7965
<div>Lng: {position && position.lng()}</div>
8066
</div>
8167
</div>
68+
8269
<div className={styles.right}>
83-
<Map {...props}
84-
containerStyle={{
85-
position: 'relative',
86-
height: '100vh',
87-
width: '100%'
88-
}}
89-
center={this.state.position}
90-
centerAroundCurrentLocation={false}>
91-
<Marker position={this.state.position} />
70+
<Map
71+
{...this.props}
72+
center={position}
73+
centerAroundCurrentLocation={false}
74+
containerStyle={{
75+
height: '100vh',
76+
position: 'relative',
77+
width: '100%'
78+
}}>
79+
<Marker position={position} />
9280
</Map>
9381
</div>
9482
</div>
95-
)
96-
}
97-
})
98-
99-
const MapWrapper = React.createClass({
100-
render: function() {
101-
const props = this.props;
102-
const {google} = this.props;
103-
104-
return (
105-
<Map google={google}
106-
className={'map'}
107-
visible={false}>
108-
<Contents {...props} />
109-
</Map>
11083
);
11184
}
112-
})
85+
}
86+
87+
const MapWrapper = props => (
88+
<Map className="map" google={props.google} visible={false}>
89+
<Contents {...props} />
90+
</Map>
91+
);
11392

114-
export default MapWrapper
93+
export default MapWrapper;

‎examples/components/basic.js‎

Lines changed: 15 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,19 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
1+
import React from 'react';
32

4-
import Map, {GoogleApiWrapper} from '../../src/index'
3+
import Map from '../../src/index';
54

6-
const Container = React.createClass({
7-
getInitialState: function() {
8-
return {
9-
showingInfoWindow: false,
10-
activeMarker: {},
11-
selectedPlace: {},
12-
}
13-
},
5+
const Container = props => {
6+
if (!props.loaded) return <div>Loading...</div>;
147

15-
onMapMoved: function(props, map) {
16-
const center = map.center;
17-
},
8+
return (
9+
<Map
10+
centerAroundCurrentLocation
11+
className="map"
12+
google={props.google}
13+
style={{ height: '100%', position: 'relative', width: '100%' }}
14+
zoom={14}
15+
/>
16+
);
17+
};
1818

19-
onMarkerClick: function(props, marker, e) {
20-
this.setState({
21-
selectedPlace: props,
22-
activeMarker: marker,
23-
showingInfoWindow: true
24-
});
25-
},
26-
27-
onInfoWindowClose: function() {
28-
this.setState({
29-
showingInfoWindow: false,
30-
activeMarker: null
31-
})
32-
},
33-
34-
onMapClicked: function(props) {
35-
if (this.state.showingInfoWindow) {
36-
this.setState({
37-
showingInfoWindow: false,
38-
activeMarker: null
39-
})
40-
}
41-
},
42-
43-
render: function() {
44-
if (!this.props.loaded) {
45-
return <div>Loading...</div>
46-
}
47-
48-
return (
49-
<Map google={this.props.google}
50-
style={{width: '100%', height: '100%', position: 'relative'}}
51-
className={'map'}
52-
zoom={14}
53-
containerStyle={{}}
54-
centerAroundCurrentLocation={true}
55-
onClick={this.onMapClicked}
56-
onDragend={this.onMapMoved} />
57-
)
58-
}
59-
});
60-
61-
export default Container
19+
export default Container;

0 commit comments

Comments
 (0)