dwd-fe · future-challenger · Mar 20, 2017 · Mar 20, 2017 · Mar 20, 2017
diff --git a/__example/App.js b/__example/App.js
@@ -1,32 +1,26 @@
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+import React from 'react';
+import {
   View,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
   Text,
-} = ReactNative;
-var DisplayLatLng = require('./examples/DisplayLatLng');
-var ViewsAsMarkers = require('./examples/ViewsAsMarkers');
-var EventListener = require('./examples/EventListener');
-var MarkerTypes = require('./examples/MarkerTypes');
-var DraggableMarkers = require('./examples/DraggableMarkers');
-var PolygonCreator = require('./examples/PolygonCreator');
-var AnimatedViews = require('./examples/AnimatedViews');
-var AnimatedMarkers = require('./examples/AnimatedMarkers');
-var Callouts = require('./examples/Callouts');
-var Overlays = require('./examples/Overlays');
-var DefaultMarkers = require('./examples/DefaultMarkers');
+} from 'react-native';
+import DisplayLatLng from './examples/DisplayLatLng';
+import ViewsAsMarkers from './examples/ViewsAsMarkers';
+import EventListener from './examples/EventListener';
+import MarkerTypes from './examples/MarkerTypes';
+import DraggableMarkers from './examples/DraggableMarkers';
+import PolygonCreator from './examples/PolygonCreator';
+import AnimatedViews from './examples/AnimatedViews';
+import AnimatedMarkers from './examples/AnimatedMarkers';
+import Callouts from './examples/Callouts';
+import Overlays from './examples/Overlays';
+import DefaultMarkers from './examples/DefaultMarkers';
 
 
-var App = React.createClass({
-
-  getInitialState() {
-    return { Component: null };
-  },
-
-  renderExample([Component, title], i) {
+export default class App extends React.Compoennt{
+renderExample([Component, title], i) {
     return (
       <TouchableOpacity
         key={i}
@@ -36,7 +30,7 @@ var App = React.createClass({
         <Text>{title}</Text>
       </TouchableOpacity>
     );
-  },
+  }
 
   renderBackButton() {
     return (
@@ -47,7 +41,7 @@ var App = React.createClass({
         <Text style={{ fontWeight: 'bold', fontSize: 30 }}>&larr;</Text>
       </TouchableOpacity>
     );
-  },
+  }
 
   renderExamples(examples) {
     var { Component } = this.state;
@@ -64,7 +58,7 @@ var App = React.createClass({
         )}
       </View>
     );
-  },
+  }
 
   render() {
     return this.renderExamples([
@@ -80,8 +74,8 @@ var App = React.createClass({
       [Overlays, 'Circles, Polygons, and Polylines'],
       [DefaultMarkers, 'Default Markers'],
     ]);
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {
@@ -117,5 +111,3 @@ var styles = StyleSheet.create({
     justifyContent: 'center',
   },
 });
-
-module.exports = App;
diff --git a/__example/examples/AnimatedMarkers.js b/__example/examples/AnimatedMarkers.js
@@ -1,5 +1,5 @@
-var React = require('react-native');
-var {
+import React from 'react';
+import {
   StyleSheet,
   PropTypes,
   View,
@@ -8,7 +8,7 @@ var {
   TouchableOpacity,
   Animated,
   Platform,
-} = React;
+} from 'react-native';
 
 import MapView from 'react-native-amap-view'
 
@@ -20,23 +20,24 @@ const LONGITUDE = -122.4324;
 const LATITUDE_DELTA = 0.0922;
 const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
 
-var AnimatedMarkers = React.createClass({
-  getInitialState() {
-    return {
+export default class AnimatedMarkers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       coordinate: new Animated.Region({
         latitude: LATITUDE,
         longitude: LONGITUDE,
       }),
     };
-  },
+  }
 
   animate() {
     var { coordinate } = this.state;
     coordinate.timing({
       latitude: LATITUDE + (Math.random() - 0.5) * LATITUDE_DELTA / 2,
       longitude: LONGITUDE + (Math.random() - 0.5) * LONGITUDE_DELTA / 2,
     }).start();
-  },
+  }
 
   render() {
     return (
@@ -61,9 +62,8 @@ var AnimatedMarkers = React.createClass({
         </View>
       </View>
     );
-  },
-});
-
+  }
+};
 
 
 var styles = StyleSheet.create({
@@ -106,5 +106,3 @@ var styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
 });
-
-module.exports = AnimatedMarkers;
diff --git a/__example/examples/AnimatedPriceMarker.js b/__example/examples/AnimatedPriceMarker.js
@@ -1,4 +1,5 @@
-import React, {
+import React from 'react';
+import {
   StyleSheet,
   PropTypes,
   View,
@@ -7,7 +8,6 @@ import React, {
 } from 'react-native';
 
 const PriceMarker = ({ amount, selected, style }) => {
-
   var background = selected.interpolate({
     inputRange: [0, 1],
     outputRange: ['#FF5A5F', '#4da2ab'],
@@ -21,19 +21,19 @@ const PriceMarker = ({ amount, selected, style }) => {
   return (
     <Animated.View style={[styles.container, style]}>
       <Animated.View style={[styles.bubble, {
-          backgroundColor: background,
-          borderColor: border,
-        }]}
-        >
+        backgroundColor: background,
+        borderColor: border,
+      }]}
+      >
         <Text style={styles.dollar}>$</Text>
         <Text style={styles.amount}>{amount}</Text>
       </Animated.View>
       <Animated.View style={[styles.arrowBorder, {
-          borderTopColor: border,
-        }]} />
+        borderTopColor: border,
+      }]} />
       <Animated.View style={[styles.arrow, {
-          borderTopColor: background,
-        }]} />
+        borderTopColor: background,
+      }]} />
     </Animated.View>
   );
 };
@@ -96,4 +96,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = PriceMarker;
+export default PriceMarker;
diff --git a/__example/examples/AnimatedViews.js b/__example/examples/AnimatedViews.js
@@ -1,5 +1,5 @@
-var React = require('react-native');
-var {
+import React from 'react';
+import {
   StyleSheet,
   PropTypes,
   View,
@@ -8,7 +8,7 @@ var {
   TouchableOpacity,
   Animated,
   Platform,
-} = React;
+} from 'react-native';
 
 import MapView from 'react-native-amap-view'
 var PanController = require('./PanController');
@@ -33,8 +33,9 @@ var BREAKPOINT2 = 350;
 
 const ANDROID = Platform.OS === 'android';
 
-var AnimatedViews = React.createClass({
-  getInitialState() {
+export default class AnimatedViews extends React.Component {
+  constructor(props) {
+    super(props);
     const panX = new Animated.Value(0);
     const panY = new Animated.Value(0);
 
@@ -182,7 +183,7 @@ var AnimatedViews = React.createClass({
       };
     });
 
-    return {
+    this.state = {
       panX,
       panY,
       animations,
@@ -200,7 +201,7 @@ var AnimatedViews = React.createClass({
         longitudeDelta: LONGITUDE_DELTA,
       }),
     };
-  },
+  }
 
   componentDidMount() {
     var { region, panX, panY, scrollX, markers } = this.state;
@@ -220,7 +221,7 @@ var AnimatedViews = React.createClass({
       }),
       duration: 0,
     }).start();
-  },
+  }
 
   onStartShouldSetPanResponder(e) {
     // we only want to move the view if they are starting the gesture on top
@@ -232,7 +233,7 @@ var AnimatedViews = React.createClass({
     var topOfTap = screen.height - pageY;
 
     return topOfTap < topOfMainWindow;
-  },
+  }
 
   onMoveShouldSetPanResponder(e) {
     var { panY } = this.state;
@@ -241,15 +242,15 @@ var AnimatedViews = React.createClass({
     var topOfTap = screen.height - pageY;
 
     return topOfTap < topOfMainWindow;
-  },
+  }
 
   onPanXChange({ value }) {
     var { index, region, panX, markers } = this.state;
     var newIndex = Math.floor((-1 * value + SNAP_WIDTH / 2) / SNAP_WIDTH);
     if (index !== newIndex) {
       this.setState({ index: newIndex });
     }
-  },
+  }
 
   onPanYChange({ value }) {
     var { canMoveHorizontal, region, scrollY, scrollX, markers, index } = this.state;
@@ -292,11 +293,11 @@ var AnimatedViews = React.createClass({
         }).start();
       }
     }
-  },
+  }
 
   onRegionChange(region) {
     //this.state.region.setValue(region);
-  },
+  }
 
   render() {
     const {
@@ -382,10 +383,8 @@ var AnimatedViews = React.createClass({
         </PanController>
       </View>
     );
-  },
-});
-
-
+  }
+};
 
 var styles = StyleSheet.create({
   container: {
@@ -422,5 +421,3 @@ var styles = StyleSheet.create({
     borderColor: '#000',
   },
 });
-
-module.exports = AnimatedViews;
diff --git a/__example/examples/Callouts.js b/__example/examples/Callouts.js
@@ -1,13 +1,13 @@
-var React = require('react-native');
-var {
+import React from 'react';
+import {
   StyleSheet,
   PropTypes,
   View,
   Text,
   Dimensions,
   TouchableOpacity,
   Image,
-} = React;
+} from 'react-native';
 
 import MapView from 'react-native-amap-view'
 var PriceMarker = require('./PriceMarker');
@@ -22,7 +22,7 @@ const LATITUDE_DELTA = 0.0922;
 const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
 const SPACE = 0.01;
 
-var Callouts = React.createClass({
+export default class Callouts extends React.Component {
   getInitialState() {
     return {
       region: {
@@ -52,15 +52,15 @@ var Callouts = React.createClass({
         },
       ],
     };
-  },
+  }
 
   show() {
     this.refs.m1.showCallout();
-  },
+  }
 
   hide() {
     this.refs.m1.hideCallout();
-  },
+  }
 
   render() {
     const { region, markers } = this.state;
@@ -111,8 +111,8 @@ var Callouts = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+};
 
 var styles = StyleSheet.create({
   container: {
@@ -154,5 +154,3 @@ var styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
 });
-
-module.exports = Callouts;