diff --git a/__example/App.js b/__example/App.js index 20570c9..c7395c6 100644 --- 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 ( {title} ); - }, + } renderBackButton() { return ( @@ -47,7 +41,7 @@ var App = React.createClass({ ← ); - }, + } renderExamples(examples) { var { Component } = this.state; @@ -64,7 +58,7 @@ var App = React.createClass({ )} ); - }, + } 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 index bad067e..d9fdc48 100644 --- 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,15 +20,16 @@ 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; @@ -36,7 +37,7 @@ var AnimatedMarkers = React.createClass({ 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({ ); - }, -}); - + } +}; 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 index 315a60f..3525d9a 100644 --- 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 ( + backgroundColor: background, + borderColor: border, + }]} + > $ {amount} + borderTopColor: border, + }]} /> + borderTopColor: background, + }]} /> ); }; @@ -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 index a1f3d38..5f86878 100644 --- 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,7 +242,7 @@ var AnimatedViews = React.createClass({ var topOfTap = screen.height - pageY; return topOfTap < topOfMainWindow; - }, + } onPanXChange({ value }) { var { index, region, panX, markers } = this.state; @@ -249,7 +250,7 @@ var AnimatedViews = React.createClass({ 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({ ); - }, -}); - - + } +}; 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 index 21fba3e..01d1909 100644 --- a/__example/examples/Callouts.js +++ b/__example/examples/Callouts.js @@ -1,5 +1,5 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, @@ -7,7 +7,7 @@ var { 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({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -154,5 +154,3 @@ var styles = StyleSheet.create({ backgroundColor: 'transparent', }, }); - -module.exports = Callouts; diff --git a/__example/examples/CustomCallout.js b/__example/examples/CustomCallout.js index 6eb99a8..228a848 100644 --- a/__example/examples/CustomCallout.js +++ b/__example/examples/CustomCallout.js @@ -1,11 +1,11 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, View, Text, -} = React; +} from 'react-native'; -var CustomCallout = React.createClass({ +export default class CustomCallout extends React.Component { render() { return ( @@ -18,8 +18,8 @@ var CustomCallout = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -63,4 +63,3 @@ var styles = StyleSheet.create({ }, }); -module.exports = CustomCallout; diff --git a/__example/examples/DefaultMarkers.js b/__example/examples/DefaultMarkers.js index e0b907e..2f57e65 100644 --- a/__example/examples/DefaultMarkers.js +++ b/__example/examples/DefaultMarkers.js @@ -1,12 +1,12 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, Text, Dimensions, TouchableOpacity, -} = React; +} from 'react-native'; import MapView from 'react-native-amap-view' var { width, height } = Dimensions.get('window'); @@ -22,9 +22,10 @@ function randomColor() { return '#'+Math.floor(Math.random()*16777215).toString(16); } -var DefaultMarkers = React.createClass({ - getInitialState() { - return { +export default class DefaultMarkers extends React.Component { + constructor(props) { + super(props); + this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, @@ -33,7 +34,7 @@ var DefaultMarkers = React.createClass({ }, markers: [], }; - }, + } onMapPress(e) { this.setState({ @@ -46,7 +47,7 @@ var DefaultMarkers = React.createClass({ }, ], }); - }, + } render() { return ( @@ -71,8 +72,8 @@ var DefaultMarkers = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -113,5 +114,3 @@ var styles = StyleSheet.create({ backgroundColor: 'transparent', }, }); - -module.exports = DefaultMarkers; diff --git a/__example/examples/DisplayLatLng.js b/__example/examples/DisplayLatLng.js index 1a62fce..662f00f 100644 --- a/__example/examples/DisplayLatLng.js +++ b/__example/examples/DisplayLatLng.js @@ -1,12 +1,12 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, Text, Dimensions, TouchableOpacity, -} = React; +} from 'react-native'; import MapView from 'react-native-amap-view' @@ -18,9 +18,10 @@ const LONGITUDE = -122.4324; const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; -var DisplayLatLng = React.createClass({ - getInitialState() { - return { +export default class DisplayLatLng extends React.Component { + constructor(props) { + super(props); + this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, @@ -28,19 +29,11 @@ var DisplayLatLng = React.createClass({ longitudeDelta: LONGITUDE_DELTA, }, }; - }, - - onRegionChange(region) { - this.setState({ region }); - }, - - jumpRandom() { - this.setState({ region: this.randomRegion() }); - }, + } animateRandom() { this.refs.map.animateToRegion(this.randomRegion()); - }, + } randomRegion() { var { region } = this.state; @@ -49,7 +42,7 @@ var DisplayLatLng = React.createClass({ latitude: region.latitude + (Math.random() - 0.5) * region.latitudeDelta / 2, longitude: region.longitude + (Math.random() - 0.5) * region.longitudeDelta / 2, }; - }, + } render() { return ( @@ -63,7 +56,7 @@ var DisplayLatLng = React.createClass({ > - + {`${this.state.region.latitude.toPrecision(7)}, ${this.state.region.longitude.toPrecision(7)}`} @@ -77,8 +70,8 @@ var DisplayLatLng = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -119,5 +112,3 @@ var styles = StyleSheet.create({ backgroundColor: 'transparent', }, }); - -module.exports = DisplayLatLng; diff --git a/__example/examples/DraggableMarkers.js b/__example/examples/DraggableMarkers.js index fd66fb8..65145f9 100644 --- a/__example/examples/DraggableMarkers.js +++ b/__example/examples/DraggableMarkers.js @@ -1,5 +1,5 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, @@ -7,10 +7,10 @@ var { Dimensions, TouchableOpacity, Image, -} = React; +} from 'react-native'; -import MapView from 'react-native-amap-view' -var PriceMarker = require('./PriceMarker'); +import MapView from 'react-native-amap-view'; +import PriceMarker from './PriceMarker'; var { width, height } = Dimensions.get('window'); @@ -21,9 +21,10 @@ const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; const SPACE = 0.01; -var MarkerTypes = React.createClass({ - getInitialState() { - return { +export default class MarkerTypes extends React.Component { + constructor(props) { + super(props); + this.state = { a: { latitude: LATITUDE + SPACE, longitude: LONGITUDE + SPACE, @@ -32,8 +33,9 @@ var MarkerTypes = React.createClass({ latitude: LATITUDE - SPACE, longitude: LONGITUDE - SPACE, }, - } - }, + }; + } + render() { return ( @@ -70,8 +72,8 @@ var MarkerTypes = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -91,5 +93,3 @@ var styles = StyleSheet.create({ bottom: 0, }, }); - -module.exports = MarkerTypes; diff --git a/__example/examples/EventListener.js b/__example/examples/EventListener.js index 2638781..1b08f1b 100644 --- a/__example/examples/EventListener.js +++ b/__example/examples/EventListener.js @@ -1,5 +1,5 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, @@ -7,7 +7,7 @@ var { Dimensions, TouchableOpacity, ScrollView, -} = React; +} from 'react-native'; import MapView from 'react-native-amap-view' var PriceMarker = require('./PriceMarker'); @@ -21,10 +21,11 @@ const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; var id = 0; -var Event = React.createClass({ +class Event extends React.Component { shouldComponentUpdate(nextProps) { return this.props.event.id !== nextProps.event.id; - }, + } + render() { var { event } = this.props; return ( @@ -33,12 +34,13 @@ var Event = React.createClass({ {JSON.stringify(event.data, null, 2)} ); - }, -}); + } +}; -var DisplayLatLng = React.createClass({ - getInitialState() { - return { +export default class DisplayLatLng extends React.Component { + constructor(props) { + super(props); + this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, @@ -47,7 +49,7 @@ var DisplayLatLng = React.createClass({ }, events: [], }; - }, + } makeEvent(e, name) { return { @@ -55,7 +57,7 @@ var DisplayLatLng = React.createClass({ name: name, data: e.nativeEvent ? e.nativeEvent : e, }; - }, + } recordEvent(name) { return e => { @@ -67,7 +69,7 @@ var DisplayLatLng = React.createClass({ ], }); }; - }, + } render() { return ( @@ -110,8 +112,8 @@ var DisplayLatLng = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -174,5 +176,3 @@ var styles = StyleSheet.create({ backgroundColor: 'transparent', }, }); - -module.exports = DisplayLatLng; diff --git a/__example/examples/MarkerTypes.js b/__example/examples/MarkerTypes.js index a8e18fc..1c4ac31 100644 --- a/__example/examples/MarkerTypes.js +++ b/__example/examples/MarkerTypes.js @@ -1,5 +1,5 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, @@ -7,7 +7,7 @@ var { Dimensions, TouchableOpacity, Image, -} = React; +} from 'react-native'; import MapView from 'react-native-amap-view' var PriceMarker = require('./PriceMarker'); @@ -21,7 +21,7 @@ const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; const SPACE = 0.01; -var MarkerTypes = React.createClass({ +export default class MarkerTypes extends React.Component { render() { return ( @@ -34,7 +34,7 @@ var MarkerTypes = React.createClass({ latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA, }} - > + > + /> + /> ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -77,5 +77,3 @@ var styles = StyleSheet.create({ bottom: 0, }, }); - -module.exports = MarkerTypes; diff --git a/__example/examples/Overlays.js b/__example/examples/Overlays.js index 1f64206..7cd695e 100644 --- a/__example/examples/Overlays.js +++ b/__example/examples/Overlays.js @@ -1,5 +1,5 @@ -var React = require('react-native'); -var { +import React from 'react-native'; +import { StyleSheet, PropTypes, View, @@ -7,7 +7,7 @@ var { Dimensions, TouchableOpacity, Image, - } = React; +} from 'react-native'; import MapView from 'react-native-amap-view' @@ -20,9 +20,11 @@ const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; const SPACE = 0.01; -var Overlays = React.createClass({ - getInitialState() { - return { +export default class Overlays extends React.Component { + constructor(props) { + super(props); + + this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, @@ -69,7 +71,8 @@ var Overlays = React.createClass({ }, ], }; - }, + } + render() { const { region, circle, polygon, polyline } = this.state; @@ -105,8 +108,8 @@ var Overlays = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -148,5 +151,3 @@ var styles = StyleSheet.create({ backgroundColor: 'transparent', }, }); - -module.exports = Overlays; diff --git a/__example/examples/PanController.js b/__example/examples/PanController.js index 0cb5f42..11774e8 100644 --- a/__example/examples/PanController.js +++ b/__example/examples/PanController.js @@ -1,428 +1,416 @@ -var React = require('react-native'); -var { +import React from 'react-native'; +import { View, Animated, PropTypes, PanResponder, - } = React; +} from 'react-native'; var ModePropType = PropTypes.oneOf(["decay", "snap", "spring-origin"]); var OvershootPropType = PropTypes.oneOf(["spring", "clamp"]); var AnimatedPropType = PropTypes.any; -var PanController = React.createClass({ - - propTypes: { - // Component Config - lockDirection: PropTypes.bool, - horizontal: PropTypes.bool, - vertical: PropTypes.bool, - overshootX: OvershootPropType, - overshootY: OvershootPropType, - xBounds: PropTypes.arrayOf(PropTypes.number), - yBounds: PropTypes.arrayOf(PropTypes.number), - xMode: ModePropType, - yMode: ModePropType, - snapSpacingX: PropTypes.number, // TODO: also allow an array of values? - snapSpacingY: PropTypes.number, - - // Animated Values - panX: AnimatedPropType, - panY: AnimatedPropType, - - // Animation Config - overshootSpringConfig: PropTypes.any, - momentumDecayConfig: PropTypes.any, - springOriginConfig: PropTypes.any, - directionLockDistance: PropTypes.number, - overshootReductionFactor: PropTypes.number, - - // Events - onOvershoot: PropTypes.func, - onDirectionChange: PropTypes.func, - onReleaseX: PropTypes.func, - onReleaseY: PropTypes.func, - onRelease: PropTypes.func, - - //...PanResponderPropTypes, - }, - - getDefaultProps() { - return { - horizontal: false, - vertical: false, - lockDirection: true, - overshootX: "spring", - overshootY: "spring", - panX: new Animated.Value(0), - panY: new Animated.Value(0), - xBounds: [-Infinity, Infinity], - yBounds: [-Infinity, Infinity], - yMode: "decay", - xMode: "decay", - overshootSpringConfig: { friction: 7, tension: 40 }, - momentumDecayConfig: { deceleration: 0.993 }, - springOriginConfig: { friction: 7, tension: 40 }, - overshootReductionFactor: 3, - directionLockDistance: 10, - onStartShouldSetPanResponder: () => true, - onMoveShouldSetPanResponder: () => true, - }; - }, - - // getInitialState() { - // //TODO: - // // it's possible we want to move some props over to state. - // // For example, xBounds/yBounds might need to be - // // calculated/updated automatically - // // - // // This could also be done with a higher-order component - // // that just massages props passed in... - // return { - // - // }; - // }, - - _responder: null, - _listener: null, - _direction: null, - - componentWillMount() { - this._responder = PanResponder.create({ - onStartShouldSetPanResponder: this.props.onStartShouldSetPanResponder, - onMoveShouldSetPanResponder: this.props.onMoveShouldSetPanResponder, - onPanResponderGrant: (...args) => { - if (this.props.onPanResponderGrant) { - this.props.onPanResponderGrant(...args); - } - var { panX, panY, horizontal, vertical, xMode, yMode } = this.props; +export default class PanController extends React.Component { + constructor(props) { + super(props); + this._responder = null; + this._listener = null; + this._direction = null; + } + + static propTypes = { + // Component Config + lockDirection: PropTypes.bool, + horizontal: PropTypes.bool, + vertical: PropTypes.bool, + overshootX: OvershootPropType, + overshootY: OvershootPropType, + xBounds: PropTypes.arrayOf(PropTypes.number), + yBounds: PropTypes.arrayOf(PropTypes.number), + xMode: ModePropType, + yMode: ModePropType, + snapSpacingX: PropTypes.number, // TODO: also allow an array of values? + snapSpacingY: PropTypes.number, + + // Animated Values + panX: AnimatedPropType, + panY: AnimatedPropType, + + // Animation Config + overshootSpringConfig: PropTypes.any, + momentumDecayConfig: PropTypes.any, + springOriginConfig: PropTypes.any, + directionLockDistance: PropTypes.number, + overshootReductionFactor: PropTypes.number, + + // Events + onOvershoot: PropTypes.func, + onDirectionChange: PropTypes.func, + onReleaseX: PropTypes.func, + onReleaseY: PropTypes.func, + onRelease: PropTypes.func, + + //...PanResponderPropTypes, + } - this.handleResponderGrant(panX, xMode); - this.handleResponderGrant(panY, yMode); + static defaultProps = { + + horizontal: false, + vertical: false, + lockDirection: true, + overshootX: "spring", + overshootY: "spring", + panX: new Animated.Value(0), + panY: new Animated.Value(0), + xBounds: [-Infinity, Infinity], + yBounds: [-Infinity, Infinity], + yMode: "decay", + xMode: "decay", + overshootSpringConfig: { friction: 7, tension: 40 }, + momentumDecayConfig: { deceleration: 0.993 }, + springOriginConfig: { friction: 7, tension: 40 }, + overshootReductionFactor: 3, + directionLockDistance: 10, + onStartShouldSetPanResponder: () => true, + onMoveShouldSetPanResponder: () => true, + } + + componentWillMount() { + this._responder = PanResponder.create({ + onStartShouldSetPanResponder: this.props.onStartShouldSetPanResponder, + onMoveShouldSetPanResponder: this.props.onMoveShouldSetPanResponder, + onPanResponderGrant: (...args) => { + if (this.props.onPanResponderGrant) { + this.props.onPanResponderGrant(...args); + } + var { panX, panY, horizontal, vertical, xMode, yMode } = this.props; - this._direction = horizontal && !vertical ? 'x' : (vertical && !horizontal ? 'y' : null); - }, + this.handleResponderGrant(panX, xMode); + this.handleResponderGrant(panY, yMode); - onPanResponderMove: (_, { dx, dy, x0, y0 }) => { - var { + this._direction = horizontal && !vertical ? 'x' : (vertical && !horizontal ? 'y' : null); + }, + + onPanResponderMove: (_, { dx, dy, x0, y0 }) => { + var { panX, - panY, - xBounds, - yBounds, - overshootX, - overshootY, - horizontal, - vertical, - lockDirection, - directionLockDistance, + panY, + xBounds, + yBounds, + overshootX, + overshootY, + horizontal, + vertical, + lockDirection, + directionLockDistance, } = this.props; - if (!this._direction) { - var dx2 = dx * dx; - var dy2 = dy * dy; - if (dx2 + dy2 > directionLockDistance) { - this._direction = dx2 > dy2 ? 'x' : 'y'; - if (this.props.onDirectionChange) { - this.props.onDirectionChange(this._direction, { dx, dy, x0, y0 }); - } + if (!this._direction) { + var dx2 = dx * dx; + var dy2 = dy * dy; + if (dx2 + dy2 > directionLockDistance) { + this._direction = dx2 > dy2 ? 'x' : 'y'; + if (this.props.onDirectionChange) { + this.props.onDirectionChange(this._direction, { dx, dy, x0, y0 }); } } + } - var dir = this._direction; + var dir = this._direction; - if (this.props.onPanResponderMove) { - this.props.onPanResponderMove(_, { dx, dy, x0, y0 }); - } + if (this.props.onPanResponderMove) { + this.props.onPanResponderMove(_, { dx, dy, x0, y0 }); + } - if (horizontal && (!lockDirection || dir === 'x')) { - var [xMin, xMax] = xBounds; + if (horizontal && (!lockDirection || dir === 'x')) { + var [xMin, xMax] = xBounds; - this.handleResponderMove(panX, dx, xMin, xMax, overshootX); - } + this.handleResponderMove(panX, dx, xMin, xMax, overshootX); + } - if (vertical && (!lockDirection || dir === 'y')) { - var [yMin, yMax] = yBounds; + if (vertical && (!lockDirection || dir === 'y')) { + var [yMin, yMax] = yBounds; - this.handleResponderMove(panY, dy, yMin, yMax, overshootY); - } - }, + this.handleResponderMove(panY, dy, yMin, yMax, overshootY); + } + }, - onPanResponderRelease: (_, { vx, vy, dx, dy }) => { - var { + onPanResponderRelease: (_, { vx, vy, dx, dy }) => { + var { panX, - panY, - xBounds, - yBounds, - overshootX, - overshootY, - horizontal, - vertical, - lockDirection, - xMode, - yMode, - snapSpacingX, - snapSpacingY, + panY, + xBounds, + yBounds, + overshootX, + overshootY, + horizontal, + vertical, + lockDirection, + xMode, + yMode, + snapSpacingX, + snapSpacingY, } = this.props; - var cancel = false; + var cancel = false; - var dir = this._direction; + var dir = this._direction; - if (this.props.onRelease) { - cancel = false === this.props.onRelease({ vx, vy, dx, dy }); - } + if (this.props.onRelease) { + cancel = false === this.props.onRelease({ vx, vy, dx, dy }); + } - if (!cancel && horizontal && (!lockDirection || dir === 'x')) { - var [xMin, xMax] = xBounds; - if (this.props.onReleaseX) { - cancel = false === this.props.onReleaseX({ vx, vy, dx, dy }); - } - !cancel && this.handleResponderRelease(panX, xMin, xMax, vx, overshootX, xMode, snapSpacingX); + if (!cancel && horizontal && (!lockDirection || dir === 'x')) { + var [xMin, xMax] = xBounds; + if (this.props.onReleaseX) { + cancel = false === this.props.onReleaseX({ vx, vy, dx, dy }); } + !cancel && this.handleResponderRelease(panX, xMin, xMax, vx, overshootX, xMode, snapSpacingX); + } - if (!cancel && vertical && (!lockDirection || dir === 'y')) { - var [yMin, yMax] = yBounds; - if (this.props.onReleaseY) { - cancel = false === this.props.onReleaseY({ vx, vy, dx, dy }); - } - !cancel && this.handleResponderRelease(panY, yMin, yMax, vy, overshootY, yMode, snapSpacingY); + if (!cancel && vertical && (!lockDirection || dir === 'y')) { + var [yMin, yMax] = yBounds; + if (this.props.onReleaseY) { + cancel = false === this.props.onReleaseY({ vx, vy, dx, dy }); } - - this._direction = horizontal && !vertical ? 'x' : (vertical && !horizontal ? 'y' : null); + !cancel && this.handleResponderRelease(panY, yMin, yMax, vy, overshootY, yMode, snapSpacingY); } - }); - }, - handleResponderMove(anim, delta, min, max, overshoot) { - var val = anim._offset + delta; + this._direction = horizontal && !vertical ? 'x' : (vertical && !horizontal ? 'y' : null); + } + }); + } + + handleResponderMove(anim, delta, min, max, overshoot) { + var val = anim._offset + delta; + + if (val > max) { + switch (overshoot) { + case "spring": + val = max + (val - max) / this.props.overshootReductionFactor; + break; + case "clamp": + val = max; + break; + } + } + if (val < min) { + switch (overshoot) { + case "spring": + val = min - (min - val) / this.props.overshootReductionFactor; + break; + case "clamp": + val = min; + break; + } + } + val = val - anim._offset; + anim.setValue(val); + } + + handleResponderRelease(anim, min, max, velocity, overshoot, mode, snapSpacing) { + anim.flattenOffset(); + + + if (anim._value < min) { + if (this.props.onOvershoot) { + this.props.onOvershoot(); //TODO: what args should we pass to this + } + switch (overshoot) { + case "spring": + Animated.spring(anim, { + ...this.props.overshootSpringConfig, + toValue: min, + velocity, + }).start(); + break; + case "clamp": + anim.setValue(min); + break; + } + } else if (anim._value > max) { + if (this.props.onOvershoot) { + this.props.onOvershoot(); //TODO: what args should we pass to this + } + switch (overshoot) { + case "spring": + Animated.spring(anim, { + ...this.props.overshootSpringConfig, + toValue: max, + velocity, + }).start(); + break; + case "clamp": + anim.setValue(min); + break; + } + } else { + + switch (mode) { + case "snap": + this.handleSnappedScroll(anim, min, max, velocity, snapSpacing, overshoot); + break; + + case "decay": + this.handleMomentumScroll(anim, min, max, velocity, overshoot); + break; - if (val > max) { + case "spring-origin": + Animated.spring(anim, { + ...this.props.springOriginConfig, + toValue: 0, + velocity, + }).start(); + break; + } + } + } + + handleResponderGrant(anim, mode) { + switch (mode) { + case "spring-origin": + anim.setValue(0); + break; + case "snap": + case "decay": + anim.setOffset(anim._value + anim._offset); + anim.setValue(0); + break; + } + } + + handleMomentumScroll(anim, min, max, velocity, overshoot) { + Animated.decay(anim, { + ...this.props.momentumDecayConfig, + velocity, + }).start(() => { + anim.removeListener(this._listener); + }); + + this._listener = anim.addListener(({ value }) => { + if (value < min) { + anim.removeListener(this._listener); + if (this.props.onOvershoot) { + this.props.onOvershoot(); //TODO: what args should we pass to this + } switch (overshoot) { case "spring": - val = max + (val - max) / this.props.overshootReductionFactor; + Animated.spring(anim, { + ...this.props.overshootSpringConfig, + toValue: min, + velocity, + }).start(); break; case "clamp": - val = max; + anim.setValue(min); break; } - } - if (val < min) { + } else if (value > max) { + anim.removeListener(this._listener); + if (this.props.onOvershoot) { + this.props.onOvershoot(); //TODO: what args should we pass to this + } switch (overshoot) { case "spring": - val = min - (min - val) / this.props.overshootReductionFactor; + Animated.spring(anim, { + ...this.props.overshootSpringConfig, + toValue: max, + velocity, + }).start(); break; case "clamp": - val = min; + anim.setValue(min); break; } } - val = val - anim._offset; - anim.setValue(val); - }, - - handleResponderRelease(anim, min, max, velocity, overshoot, mode, snapSpacing) { - anim.flattenOffset(); + }); + } + handleSnappedScroll(anim, min, max, velocity, spacing) { + var endX = this.momentumCenter(anim._value, velocity, spacing); + endX = Math.max(endX, min); + endX = Math.min(endX, max); + var bounds = [endX - spacing / 2, endX + spacing / 2]; + var endV = this.velocityAtBounds(anim._value, velocity, bounds); - if (anim._value < min) { - if (this.props.onOvershoot) { - this.props.onOvershoot(); //TODO: what args should we pass to this - } - switch (overshoot) { - case "spring": - Animated.spring(anim, { - ...this.props.overshootSpringConfig, - toValue: min, - velocity, + this._listener = anim.addListener(({ value }) => { + if (value > bounds[0] && value < bounds[1]) { + Animated.spring(anim, { + toValue: endX, + velocity: endV, }).start(); - break; - case "clamp": - anim.setValue(min); - break; } - } else if (anim._value > max) { - if (this.props.onOvershoot) { - this.props.onOvershoot(); //TODO: what args should we pass to this - } - switch (overshoot) { - case "spring": - Animated.spring(anim, { - ...this.props.overshootSpringConfig, - toValue: max, - velocity, - }).start(); - break; -case "clamp": - anim.setValue(min); - break; -} -} else { - - switch (mode) { - case "snap": - this.handleSnappedScroll(anim, min, max, velocity, snapSpacing, overshoot); - break; - - case "decay": - this.handleMomentumScroll(anim, min, max, velocity, overshoot); - break; - - case "spring-origin": - Animated.spring(anim, { - ...this.props.springOriginConfig, - toValue: 0, - velocity, - }).start(); - break; -} -} -}, - -handleResponderGrant(anim, mode) { - switch (mode) { - case "spring-origin": - anim.setValue(0); - break; - case "snap": - case "decay": - anim.setOffset(anim._value + anim._offset); - anim.setValue(0); - break; - } -}, + }); -handleMomentumScroll(anim, min, max, velocity, overshoot) { - Animated.decay(anim, { + Animated.decay(anim, { ...this.props.momentumDecayConfig, - velocity, -}).start(() => { - anim.removeListener(this._listener); -}); - -this._listener = anim.addListener(({ value }) => { - if (value < min) { - anim.removeListener(this._listener); - if (this.props.onOvershoot) { - this.props.onOvershoot(); //TODO: what args should we pass to this - } - switch (overshoot) { - case "spring": - Animated.spring(anim, { - ...this.props.overshootSpringConfig, - toValue: min, - velocity, - }).start(); - break; - case "clamp": - anim.setValue(min); - break; + velocity, + }).start(() => { + anim.removeListener(this._listener); + }); } -} else if (value > max) { - anim.removeListener(this._listener); - if (this.props.onOvershoot) { - this.props.onOvershoot(); //TODO: what args should we pass to this + + closestCenter(x, spacing) { + var plus = (x % spacing) < spacing / 2 ? 0 : spacing; + return Math.round(x / spacing) * spacing + plus; } - switch (overshoot) { - case "spring": - Animated.spring(anim, { - ...this.props.overshootSpringConfig, - toValue: max, - velocity, - }).start(); - break; -case "clamp": - anim.setValue(min); - break; -} -} -}); -}, - -handleSnappedScroll(anim, min, max, velocity, spacing) { - var endX = this.momentumCenter(anim._value, velocity, spacing); - endX = Math.max(endX, min); - endX = Math.min(endX, max); - var bounds = [endX-spacing/2, endX+spacing/2]; - var endV = this.velocityAtBounds(anim._value, velocity, bounds); - - this._listener = anim.addListener(( { value } ) => { - if (value > bounds[0] && value < bounds[1]) { - Animated.spring(anim, { - toValue: endX, - velocity: endV, - }).start(); - } - }); - Animated.decay(anim, { - ...this.props.momentumDecayConfig, - velocity, -}).start(()=> { - anim.removeListener(this._listener); -}); -}, - -closestCenter(x, spacing) { - var plus = (x % spacing) < spacing / 2 ? 0 : spacing; - return Math.round(x / spacing) * spacing + plus; -}, - -momentumCenter(x0, vx, spacing) { - var t = 0; - var deceleration = this.props.momentumDecayConfig.deceleration || 0.997; - var x1 = x0; - var x = x1; - - while (true) { - t += 16; - x = x0 + (vx / (1 - deceleration)) * - (1 - Math.exp(-(1 - deceleration) * t)); - if (Math.abs(x-x1) < 0.1) { + momentumCenter(x0, vx, spacing) { + var t = 0; + var deceleration = this.props.momentumDecayConfig.deceleration || 0.997; + var x1 = x0; + var x = x1; + + while (true) { + t += 16; + x = x0 + (vx / (1 - deceleration)) * + (1 - Math.exp(-(1 - deceleration) * t)); + if (Math.abs(x - x1) < 0.1) { + x1 = x; + break; + } x1 = x; - break; } - x1 = x; + return this.closestCenter(x1, spacing); } - return this.closestCenter(x1, spacing); -}, - -velocityAtBounds(x0, vx, bounds) { - var t = 0; - var deceleration = this.props.momentumDecayConfig.deceleration || 0.997; - var x1 = x0; - var x = x1; - var vf; - while (true) { - t += 16; - x = x0 + (vx / (1 - deceleration)) * - (1 - Math.exp(-(1 - deceleration) * t)); - vf = (x-x1) / 16; - if (x > bounds[0] && x < bounds[1]) { - break; - } - if (Math.abs(vf) < 0.1) { - break; + + velocityAtBounds(x0, vx, bounds) { + var t = 0; + var deceleration = this.props.momentumDecayConfig.deceleration || 0.997; + var x1 = x0; + var x = x1; + var vf; + while (true) { + t += 16; + x = x0 + (vx / (1 - deceleration)) * + (1 - Math.exp(-(1 - deceleration) * t)); + vf = (x - x1) / 16; + if (x > bounds[0] && x < bounds[1]) { + break; + } + if (Math.abs(vf) < 0.1) { + break; + } + x1 = x; } - x1 = x; + return vf; + } + + //componentDidMount() { + // //TODO: we may need to measure the children width/height here? + //}, + // + //componentWillUnmount() { + // + //}, + // + //componentDidUnmount() { + // + //}, + + render() { + return } - return vf; -}, - -//componentDidMount() { -// //TODO: we may need to measure the children width/height here? -//}, -// -//componentWillUnmount() { -// -//}, -// -//componentDidUnmount() { -// -//}, - -render: function () { - return -}, -}); +}; module.exports = PanController; diff --git a/__example/examples/PolygonCreator.js b/__example/examples/PolygonCreator.js index 6f91ab2..87959ef 100644 --- a/__example/examples/PolygonCreator.js +++ b/__example/examples/PolygonCreator.js @@ -1,15 +1,15 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, Text, Dimensions, TouchableOpacity, -} = React; +} from 'react-native'; import MapView from 'react-native-amap-view' -var PriceMarker = require('./PriceMarker'); +import PriceMarker from './PriceMarker'; var { width, height } = Dimensions.get('window'); @@ -20,9 +20,10 @@ const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; var id = 0; -var DisplayLatLng = React.createClass({ - getInitialState() { - return { +export default class DisplayLatLng extends React.Component { + constructor(props) { + super(props); + this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, @@ -32,7 +33,7 @@ var DisplayLatLng = React.createClass({ polygons: [], editing: null, }; - }, + } finish() { var { polygons, editing } = this.state; @@ -40,7 +41,7 @@ var DisplayLatLng = React.createClass({ polygons: [...polygons, editing], editing: null, }); - }, + } onPress(e) { var { editing } = this.state; @@ -62,7 +63,7 @@ var DisplayLatLng = React.createClass({ }, }); } - }, + } render() { return ( @@ -99,8 +100,8 @@ var DisplayLatLng = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -141,5 +142,3 @@ var styles = StyleSheet.create({ backgroundColor: 'transparent', }, }); - -module.exports = DisplayLatLng; diff --git a/__example/examples/PriceMarker.js b/__example/examples/PriceMarker.js index 552b0e2..39e2112 100644 --- a/__example/examples/PriceMarker.js +++ b/__example/examples/PriceMarker.js @@ -1,16 +1,16 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, View, Text, -} = React; +} from 'react-native'; + +export default class PriceMarker extends React.Component { + + static defaultProps = { + fontSize: 13, + }; -var PriceMarker = React.createClass({ - getDefaultProps() { - return { - fontSize: 13, - }; - }, render() { return ( @@ -22,8 +22,8 @@ var PriceMarker = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ container: { @@ -65,5 +65,3 @@ var styles = StyleSheet.create({ marginTop: -0.5, }, }); - -module.exports = PriceMarker; diff --git a/__example/examples/ViewsAsMarkers.js b/__example/examples/ViewsAsMarkers.js index 4b0455a..6b54fd8 100644 --- a/__example/examples/ViewsAsMarkers.js +++ b/__example/examples/ViewsAsMarkers.js @@ -1,15 +1,15 @@ -var React = require('react-native'); -var { +import React from 'react'; +import { StyleSheet, PropTypes, View, Text, Dimensions, TouchableOpacity, -} = React; +} from 'react-native'; -import MapView from 'react-native-amap-view' -var PriceMarker = require('./PriceMarker'); +import MapView from 'react-native-amap-view'; +import PriceMarker from './PriceMarker'; var { width, height } = Dimensions.get('window'); @@ -19,9 +19,10 @@ const LONGITUDE = -122.4324; const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; -var DisplayLatLng = React.createClass({ - getInitialState() { - return { +export default class DisplayLatLng extends React.Component { + constructor(props) { + super(props); + this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, @@ -34,15 +35,15 @@ var DisplayLatLng = React.createClass({ }, amount: 99, }; - }, + } increment() { this.setState({ amount: this.state.amount + 1 }); - }, + } decrement() { this.setState({ amount: this.state.amount - 1 }); - }, + } render() { return ( @@ -65,10 +66,10 @@ var DisplayLatLng = React.createClass({ ); - }, -}); + } +}; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { position: 'absolute', top: 0, @@ -108,4 +109,3 @@ var styles = StyleSheet.create({ }, }); -module.exports = DisplayLatLng; diff --git a/__example/examples/finalindexfile.js b/__example/examples/finalindexfile.js index 11c8e19..3db7935 100644 --- a/__example/examples/finalindexfile.js +++ b/__example/examples/finalindexfile.js @@ -4,8 +4,8 @@ */ 'use strict'; -var React = require('react-native'); -var { +import React from 'react'; +import { AppRegistry, StyleSheet, Text, @@ -13,7 +13,7 @@ var { Dimensions, Animated, TouchableOpacity, - } = React; +} from 'react-native'; import MapView from 'react-native-amap-view' var PriceMarker = require('./components/PriceMarker'); @@ -28,8 +28,10 @@ const LNGD = LONGITUDE + 77.03659; const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = 0.1218; -var MapViewTest = React.createClass({ - getInitialState() { +export default class MapViewTest extends React.Component { + constructort(props) { + super(props); + const scale = new Animated.Value(1); const latitudeDelta = scale.interpolate({ inputRange: [1, 2], @@ -39,7 +41,8 @@ var MapViewTest = React.createClass({ inputRange: [1, 2], outputRange: [LONGITUDE_DELTA, LONGITUDE_DELTA * 0.6], }); - return { + + this.state = { val: new Animated.Value(1), scale, region: new Animated.Region({ @@ -54,13 +57,13 @@ var MapViewTest = React.createClass({ longitude: LONGITUDE, }, }; - }, + } onRegionChange(region) { //console.log("onRegionChange", region); this.state.region.setValue(region); //this.setState({ region }); - }, + } onAnimate() { var { val } = this.state; @@ -68,7 +71,7 @@ var MapViewTest = React.createClass({ Animated.timing(val, { toValue: 0, duration: 500 }), Animated.timing(val, { toValue: 1, duration: 500 }), ]).start(); - }, + } onAddMarker() { var coordinate = { @@ -80,7 +83,7 @@ var MapViewTest = React.createClass({ markers = markers.slice(1); } this.setState({ markers }); - }, + } onAnimateZoom() { var { scale, region } = this.state; @@ -96,7 +99,7 @@ var MapViewTest = React.createClass({ toValue, }), ]).start(); - }, + } onMarkerMove() { this.setState({ @@ -105,7 +108,7 @@ var MapViewTest = React.createClass({ longitude: LONGITUDE + LONGITUDE_DELTA * (Math.random() - 0.5), }, }) - }, + } onAnimateMapRegion() { this.refs.map.refs.node.animateToRegion({ @@ -114,11 +117,11 @@ var MapViewTest = React.createClass({ latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA, }, 100); - }, + } onZoomToFit() { this.refs.map.refs.node.fitToElements(true); - }, + } render() { @@ -137,13 +140,13 @@ var MapViewTest = React.createClass({ onMarkerDeselect={(e) => console.log("Map::onMarkerDeselect", e.nativeEvent)} onCalloutPress={(e) => console.log("Map::onCalloutPress", e.nativeEvent)} onMapPress={(e) => console.log("Map::onMapPress", e.nativeEvent)} - > + > + /> + /> + /> console.log("Marker::onPress", e.nativeEvent)} onCalloutPress={(e) => console.log("Marker::onCalloutPress", e.nativeEvent)} - > + > console.log("Callout::onPress", e.nativeEvent)} - > + > Well hello there... @@ -192,12 +195,12 @@ var MapViewTest = React.createClass({ coordinate={coord} onPress={(e) => console.log("Marker::onPress", e.nativeEvent)} onCalloutPress={(e) => console.log("Marker::onCalloutPress", e.nativeEvent)} - > + > console.log("Callout::onPress", e.nativeEvent)} - > + > Well hello there... @@ -237,8 +240,8 @@ var MapViewTest = React.createClass({ ); - }, -}); + } +}; var styles = StyleSheet.create({ map: { @@ -287,5 +290,4 @@ var styles = StyleSheet.create({ }, }); -module.exports = MapViewTest; AppRegistry.registerComponent('rn_mapview', () => MapViewTest); diff --git a/__example/index.android.js b/__example/index.android.js index 7a347e3..06433c0 100644 --- a/__example/index.android.js +++ b/__example/index.android.js @@ -1,15 +1,12 @@ -var React = require('react'); -var ReactNative = require('react-native'); -var { - AppRegistry, -} = ReactNative; +import React from 'react'; +import { AppRegistry } from 'react-native'; var App = require('./App'); -var AirMapsExplorer = React.createClass({ +class AirMapsExplorer extends React.Component { render() { return - }, -}); + } +}; AppRegistry.registerComponent('AirMapsExplorer', () => AirMapsExplorer); diff --git a/__example/index.ios.js b/__example/index.ios.js index 7a347e3..06433c0 100644 --- a/__example/index.ios.js +++ b/__example/index.ios.js @@ -1,15 +1,12 @@ -var React = require('react'); -var ReactNative = require('react-native'); -var { - AppRegistry, -} = ReactNative; +import React from 'react'; +import { AppRegistry } from 'react-native'; var App = require('./App'); -var AirMapsExplorer = React.createClass({ +class AirMapsExplorer extends React.Component { render() { return - }, -}); + } +}; AppRegistry.registerComponent('AirMapsExplorer', () => AirMapsExplorer); diff --git a/__example/package.json b/__example/package.json index 16dcf01..44bd4af 100644 --- a/__example/package.json +++ b/__example/package.json @@ -6,8 +6,8 @@ "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { - "react": "^0.14.8", - "react-native": "^0.24.1", + "react": "~15.4.1", + "react-native": "0.42.2", "react-native-amap-view": "file:../" } } diff --git a/android/build.gradle b/android/build.gradle index d851d29..28355ea 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -1,12 +1,12 @@ apply plugin: 'com.android.library' android { - compileSdkVersion 23 - buildToolsVersion "23.0.2" + compileSdkVersion 25 + buildToolsVersion "25.0.2" defaultConfig { - minSdkVersion 16 - targetSdkVersion 23 + minSdkVersion 20 + targetSdkVersion 25 versionCode 1 versionName "1.0" } @@ -22,7 +22,7 @@ buildscript { jcenter() } dependencies { - classpath 'com.android.tools.build:gradle:2.1.0' + classpath 'com.android.tools.build:gradle:2.3.0' } } @@ -36,7 +36,7 @@ allprojects { dependencies { - compile 'com.android.support:appcompat-v7:23.1.0' +// compile 'com.android.support:appcompat-v7:23.1.0' compile files('libs/AMap_2DMap_V2.8.1_20160202.jar') compile files('libs/AMap_Search_V3.2.1_20160308.jar') compile 'com.facebook.react:react-native:+' diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties index 122a0dc..9a778d6 100644 --- a/android/gradle/wrapper/gradle-wrapper.properties +++ b/android/gradle/wrapper/gradle-wrapper.properties @@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-2.10-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip diff --git a/android/src/main/java/com/dianwoba/rctamap/AMapCalloutManager.java b/android/src/main/java/com/dianwoba/rctamap/AMapCalloutManager.java index 19c9780..5d40454 100644 --- a/android/src/main/java/com/dianwoba/rctamap/AMapCalloutManager.java +++ b/android/src/main/java/com/dianwoba/rctamap/AMapCalloutManager.java @@ -1,12 +1,10 @@ package com.dianwoba.rctamap; -import com.dianwoba.rctamap.AMapCallout; import com.facebook.react.common.MapBuilder; import com.facebook.react.uimanager.LayoutShadowNode; -import com.facebook.react.uimanager.annotations.ReactProp; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.ViewGroupManager; - +import com.facebook.react.uimanager.annotations.ReactProp; import java.util.Map; @@ -14,48 +12,48 @@ public class AMapCalloutManager extends ViewGroupManager { - @Override - public String getName() { - return "AMapCallout"; - } - - @Override - public AMapCallout createViewInstance(ThemedReactContext context) { - return new AMapCallout(context); - } - - @ReactProp(name = "tooltip", defaultBoolean = false) - public void setTooltip(AMapCallout view, boolean tooltip) { - view.setTooltip(tooltip); - } - - @Override - public - @Nullable - Map getExportedCustomDirectEventTypeConstants() { - return MapBuilder.of( - "onPress", MapBuilder.of("registrationName", "onPress") - ); - } - - @Override - public LayoutShadowNode createShadowNodeInstance() { - // we use a custom shadow node that emits the width/height of the view - // after layout with the updateExtraData method. Without this, we can't generate - // a bitmap of the appropriate width/height of the rendered view. - return new SizeReportingShadowNode(); - } - - @Override - public void updateExtraData(AMapCallout view, Object extraData) { - // This method is called from the shadow node with the width/height of the rendered - // marker view. - //noinspection unchecked - Map data = (Map) extraData; - float width = data.get("width"); - float height = data.get("height"); - view.width = (int) width; - view.height = (int) height; - } + @Override + public String getName() { + return "AMapCallout"; + } + + @Override + public AMapCallout createViewInstance(ThemedReactContext context) { + return new AMapCallout(context); + } + + @ReactProp(name = "tooltip", defaultBoolean = false) + public void setTooltip(AMapCallout view, boolean tooltip) { + view.setTooltip(tooltip); + } + + @Override + public + @Nullable + Map getExportedCustomDirectEventTypeConstants() { + return MapBuilder.of( + "onPress", MapBuilder.of("registrationName", "onPress") + ); + } + + @Override + public LayoutShadowNode createShadowNodeInstance() { + // we use a custom shadow node that emits the width/height of the view + // after layout with the updateExtraData method. Without this, we can't generate + // a bitmap of the appropriate width/height of the rendered view. + return new SizeReportingShadowNode(); + } + + @Override + public void updateExtraData(AMapCallout view, Object extraData) { + // This method is called from the shadow node with the width/height of the rendered + // marker view. + //noinspection unchecked + Map data = (Map) extraData; + float width = data.get("width"); + float height = data.get("height"); + view.width = (int) width; + view.height = (int) height; + } } diff --git a/components/MapCallout.js b/components/MapCallout.js index 773aa4d..3d6d9a6 100644 --- a/components/MapCallout.js +++ b/components/MapCallout.js @@ -1,36 +1,29 @@ -var React = require('react'); -var { - PropTypes, -} = React; - -var ReactNative = require('react-native'); -var { +import React, {PropTypes} from 'react'; +import { View, NativeMethodsMixin, requireNativeComponent, StyleSheet, -} = ReactNative; +} from 'react-native'; -var MapCallout = React.createClass({ - mixins: [NativeMethodsMixin], +class MapCallout extends React.Component { + // mixins: [NativeMethodsMixin], - propTypes: { + static propTypes= { ...View.propTypes, tooltip: PropTypes.bool, onPress: PropTypes.func, - }, + } - getDefaultProps: function() { - return { + static defaultProps= { tooltip: false, - }; - }, + } - render: function() { + render() { return ; - }, -}); + } +}; var styles = StyleSheet.create({ callout: { @@ -40,6 +33,4 @@ var styles = StyleSheet.create({ }, }); -var AMapCallout = requireNativeComponent('AMapCallout', MapCallout); - -module.exports = MapCallout; +export default requireNativeComponent('AMapCallout', MapCallout); diff --git a/components/MapCircle.js b/components/MapCircle.js index 1cfb18d..f32a0c9 100644 --- a/components/MapCircle.js +++ b/components/MapCircle.js @@ -1,21 +1,16 @@ -var React = require('react'); -var { - PropTypes, -} = React; - -var ReactNative = require('react-native'); -var { +import React, { PropTypes } from 'react'; +import { View, NativeMethodsMixin, requireNativeComponent, StyleSheet, -} = ReactNative; +} from 'react-native'; -var MapCircle = React.createClass({ - mixins: [NativeMethodsMixin], +class MapCircle extends React.Component { + // mixins: [NativeMethodsMixin], - propTypes: { + static propTypes = { ...View.propTypes, /** @@ -125,29 +120,26 @@ var MapCircle = React.createClass({ * @platform ios */ lineDashPattern: PropTypes.arrayOf(PropTypes.number), - }, + } - getDefaultProps: function() { - return { - strokeColor: '#000', - strokeWidth: 1, - }; - }, + static defaultProps = { + strokeColor: '#000', + strokeWidth: 1, + } - _onPress: function(e) { + _onPress(e) { this.props.onPress && this.props.onPress(e); - }, + } - render: function() { + render() { return ( ); - }, -}); + } +}; -var AMapCircle = requireNativeComponent('AMapCircle', MapCircle); +export default requireNativeComponent('AMapCircle', MapCircle); -module.exports = MapCircle; diff --git a/components/MapMarker.js b/components/MapMarker.js index 47a1f0f..dd3d4e7 100644 --- a/components/MapMarker.js +++ b/components/MapMarker.js @@ -1,12 +1,7 @@ -"use strict" -var React = require("react") -var { - PropTypes, -} = React -var ReactNative = require("react-native") -var { +import React, { PropTypes } from 'react'; +import { View, NativeMethodsMixin, requireNativeComponent, @@ -14,22 +9,22 @@ var { Platform, NativeModules, Animated, -} = ReactNative +} from 'react-native'; -var resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource") -var AMapMarker = requireNativeComponent("AMapMarker", MapMarker) +import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource"; +let AMapMarker = requireNativeComponent("AMapMarker", MapMarker); -var MapMarker = React.createClass({ - mixins: [NativeMethodsMixin], +class MapMarker extends React.Component { + // mixins: [NativeMethodsMixin], - viewConfig: { + static viewConfig= { uiViewClassName: "AMapMarker", validAttributes: { coordinate: true, }, - }, + } - propTypes: { + static propTypes= { ...View.propTypes, // TODO(lmr): get rid of these? @@ -209,59 +204,59 @@ var MapMarker = React.createClass({ */ onDragEnd: PropTypes.func, - }, + } - showCallout: function() { + showCallout () { this._runCommand("showCallout", []) - }, + } - hideCallout: function() { + hideCallout () { this._runCommand("hideCallout", []) - }, + } - _getHandle: function() { + _getHandle () { return ReactNative.findNodeHandle(this.refs.marker) - }, + } - _runCommand: function(name, args) { + _runCommand (name, args) { switch (Platform.OS) { - case "android": - NativeModules.UIManager.dispatchViewManagerCommand( - this._getHandle(), - NativeModules.UIManager.AMapMarker.Commands[name], - args - ) - break - - case "ios": - NativeModules.AMapMarkerManager[name].apply( - NativeModules.AMapMarkerManager[name], [this._getHandle(), ...args] - ) - break + case "android": + NativeModules.UIManager.dispatchViewManagerCommand( + this._getHandle(), + NativeModules.UIManager.AMapMarker.Commands[name], + args + ) + break + + case "ios": + NativeModules.AMapMarkerManager[name].apply( + NativeModules.AMapMarkerManager[name], [this._getHandle(), ...args] + ) + break } - }, + } - _onPress: function(e) { + _onPress (e) { this.props.onPress && this.props.onPress(e) - }, + } - render: function() { + render () { var image = undefined if (this.props.image) { image = resolveAssetSource(this.props.image) || {} image = image.uri } - return ( + return ( ) - }, -}) + } +}; var styles = StyleSheet.create({ marker: { @@ -272,4 +267,4 @@ var styles = StyleSheet.create({ MapMarker.Animated = Animated.createAnimatedComponent(MapMarker) -module.exports = MapMarker +export default MapMarker; diff --git a/components/MapPolygon.js b/components/MapPolygon.js index dea1fc9..36cfb07 100644 --- a/components/MapPolygon.js +++ b/components/MapPolygon.js @@ -11,10 +11,10 @@ var { StyleSheet, } = ReactNative; -var MapPolygon = React.createClass({ - mixins: [NativeMethodsMixin], +class MapPolygon extends React.Component { + // mixins: [NativeMethodsMixin], - propTypes: { + static propTypes = { ...View.propTypes, /** @@ -129,28 +129,28 @@ var MapPolygon = React.createClass({ * @platform ios */ lineDashPattern: PropTypes.arrayOf(PropTypes.number), - }, + } - getDefaultProps: function() { + static defaultProps: function() { return { strokeColor: '#000', strokeWidth: 1, }; - }, + } - _onPress: function(e) { + _onPress(e) { this.props.onPress && this.props.onPress(e); - }, + } - render: function() { + render() { return ( ); - }, -}); + } +}; var styles = StyleSheet.create({ polyline: { @@ -162,4 +162,4 @@ var styles = StyleSheet.create({ var AMapPolygon = requireNativeComponent('AMapPolygon', MapPolygon); -module.exports = MapPolygon; +export default MapPolygon; diff --git a/components/MapPolyline.js b/components/MapPolyline.js index beb2a05..27d5047 100644 --- a/components/MapPolyline.js +++ b/components/MapPolyline.js @@ -1,20 +1,15 @@ -var React = require('react'); -var { - PropTypes, -} = React; - -var ReactNative = require('react-native'); -var { +import React, { PropTypes } from 'react'; +import { View, NativeMethodsMixin, requireNativeComponent, StyleSheet, -} = ReactNative; +} from 'react-native'; -var MapPolyline = React.createClass({ - mixins: [NativeMethodsMixin], +class MapPolyline extends React.Component { + // mixins: [NativeMethodsMixin], - propTypes: { + static propTypes = { ...View.propTypes, /** @@ -124,21 +119,19 @@ var MapPolyline = React.createClass({ * @platform ios */ lineDashPattern: PropTypes.arrayOf(PropTypes.number), - }, + } - getDefaultProps: function() { - return { - strokeColor: '#000', - strokeWidth: 1, - }; - }, + static defaultProps = { + strokeColor: '#000', + strokeWidth: 1, + } - render: function() { + render() { return ( ); - }, -}); + } +}; // var styles = StyleSheet.create({ // polyline: { @@ -150,4 +143,4 @@ var MapPolyline = React.createClass({ var AMapPolyline = requireNativeComponent('AMapPolyline', MapPolyline); -module.exports = MapPolyline; +export default MapPolyline; diff --git a/components/MapView.js b/components/MapView.js index 6e165de..7086eb4 100644 --- a/components/MapView.js +++ b/components/MapView.js @@ -1,11 +1,5 @@ -'use strict'; - -var React = require('react'); -var { - PropTypes, -} = React; -var ReactNative = require('react-native'); -var { +import React, { PropTypes } from 'react'; +import { EdgeInsetsPropType, NativeMethodsMixin, Platform, @@ -14,420 +8,415 @@ var { Animated, requireNativeComponent, NativeModules, -} = ReactNative; - -var MapMarker = require('./MapMarker'); -var MapPolyline = require('./MapPolyline'); -var MapPolygon = require('./MapPolygon'); -var MapCircle = require('./MapCircle'); -var MapCallout = require('./MapCallout'); - -var MapView = React.createClass({ - mixins: [NativeMethodsMixin], +} from 'react-native'; + +import MapMarker from './MapMarker'; +import MapPolyline from './MapPolyline'; +import MapPolygon from './MapPolygon'; +import MapCircle from './MapCircle'; +import MapCallout from './MapCallout'; + +class MapView extends React.Component { + // mixins: [NativeMethodsMixin], + constructor(props) { + super(props); + this.state = { isReady: false }; + } - viewConfig: { + static viewConfig = { uiViewClassName: 'AMap', validAttributes: { region: true, }, - }, - - propTypes: { - ...View.propTypes, - - style: View.propTypes.style, - - /** - * [apiKey amap's apiKey] - * @type {[type]} - */ - apiKey: PropTypes.string, - /** - * If `true` the app will ask for the user's location and focus on it. - * Default value is `false`. - * - * **NOTE**: You need to add NSLocationWhenInUseUsageDescription key in - * Info.plist to enable geolocation, otherwise it is going - * to *fail silently*! - */ - showsUserLocation: PropTypes.bool, - - /** - * If `false` points of interest won't be displayed on the map. - * Default value is `true`. - * - */ - showsPointsOfInterest: PropTypes.bool, - - /** - * If `false` compass won't be displayed on the map. - * Default value is `true`. - * - * @platform ios - */ - showsCompass: PropTypes.bool, - - /** - * If `false` the user won't be able to pinch/zoom the map. - * Default value is `true`. - * - */ - zoomEnabled: PropTypes.bool, - - zoomLevel: PropTypes.number, - /** - * If `false` the user won't be able to pinch/rotate the map. - * Default value is `true`. - * - */ - rotateEnabled: PropTypes.bool, - - /** - * If `false` the user won't be able to change the map region being displayed. - * Default value is `true`. - * - */ - scrollEnabled: PropTypes.bool, - - /** - * If `false` the user won't be able to adjust the camera’s pitch angle. - * Default value is `true`. - * - */ - pitchEnabled: PropTypes.bool, - - /** - * A Boolean indicating whether the map shows scale information. - * Default value is `false` - * - */ - showsScale: PropTypes.bool, - - /** - * A Boolean indicating whether the map displays extruded building information. - * Default value is `true`. - */ - showsBuildings: PropTypes.bool, - - /** - * A Boolean value indicating whether the map displays traffic information. - * Default value is `false`. - */ - showsTraffic: PropTypes.bool, - - /** - * A Boolean indicating whether indoor maps should be enabled. - * Default value is `false` - * - * @platform android - */ - showsIndoors: PropTypes.bool, - - /** - * The map type to be displayed. - * - * - standard: standard road map (default) - * - satellite: satellite view - */ - mapType: PropTypes.oneOf([ - 'standard', - 'satellite', - ]), - - userTrackingMode: PropTypes.oneOf([ - 'none', - 'follow', - 'followWithHeading', - ]), - - /** - * The region to be displayed by the map. - * - * The region is defined by the center coordinates and the span of - * coordinates to display. - */ - region: PropTypes.shape({ - /** - * Coordinates for the center of the map. - */ - latitude: PropTypes.number.isRequired, - longitude: PropTypes.number.isRequired, - - /** - * Difference between the minimun and the maximum latitude/longitude - * to be displayed. - */ - latitudeDelta: PropTypes.number, - longitudeDelta: PropTypes.number, - }), - - /** - * The initial region to be displayed by the map. Use this prop instead of `region` - * only if you don't want to control the viewport of the map besides the initial region. - * - * Changing this prop after the component has mounted will not result in a region change. - * - * This is similar to the `initialValue` prop of a text input. - */ - initialRegion: PropTypes.shape({ - /** - * Coordinates for the center of the map. - */ - latitude: PropTypes.number.isRequired, - longitude: PropTypes.number.isRequired, - - /** - * Difference between the minimun and the maximum latitude/longitude - * to be displayed. - */ - latitudeDelta: PropTypes.number, - longitudeDelta: PropTypes.number, - }), - - /** - * Maximum size of area that can be displayed. - * - * @platform ios - */ - maxDelta: PropTypes.number, - - /** - * Minimum size of area that can be displayed. - * - * @platform ios - */ - minDelta: PropTypes.number, - - /** - * Insets for the map's legal label, originally at bottom left of the map. - * See `EdgeInsetsPropType.js` for more information. - */ - legalLabelInsets: EdgeInsetsPropType, - - /** - * Callback that is called continuously when the user is dragging the map. - */ - onRegionChange: PropTypes.func, - - /** - * Callback that is called once, when the user is done moving the map. - */ - onRegionChangeComplete: PropTypes.func, - - /** - * Callback that is called when user taps on the map. - */ - onPress: PropTypes.func, - - /** - * Callback that is called when user makes a "long press" somewhere on the map. - */ - onLongPress: PropTypes.func, - - /** - * Callback that is called when a marker on the map is tapped by the user. - */ - onMarkerPress: PropTypes.func, - - /** - * Callback that is called when a marker on the map becomes selected. This will be called when - * the callout for that marker is about to be shown. - * - * @platform ios - */ - onMarkerSelect: PropTypes.func, + } + static propTypes = { + ...View.propTypes, + + style: View.propTypes.style, + + /** + * [apiKey amap's apiKey] + * @type {[type]} + */ + apiKey: PropTypes.string, + /** + * If `true` the app will ask for the user's location and focus on it. + * Default value is `false`. + * + * **NOTE**: You need to add NSLocationWhenInUseUsageDescription key in + * Info.plist to enable geolocation, otherwise it is going + * to *fail silently*! + */ + showsUserLocation: PropTypes.bool, + + /** + * If `false` points of interest won't be displayed on the map. + * Default value is `true`. + * + */ + showsPointsOfInterest: PropTypes.bool, + + /** + * If `false` compass won't be displayed on the map. + * Default value is `true`. + * + * @platform ios + */ + showsCompass: PropTypes.bool, + + /** + * If `false` the user won't be able to pinch/zoom the map. + * Default value is `true`. + * + */ + zoomEnabled: PropTypes.bool, + + zoomLevel: PropTypes.number, + /** + * If `false` the user won't be able to pinch/rotate the map. + * Default value is `true`. + * + */ + rotateEnabled: PropTypes.bool, + + /** + * If `false` the user won't be able to change the map region being displayed. + * Default value is `true`. + * + */ + scrollEnabled: PropTypes.bool, + + /** + * If `false` the user won't be able to adjust the camera’s pitch angle. + * Default value is `true`. + * + */ + pitchEnabled: PropTypes.bool, + + /** + * A Boolean indicating whether the map shows scale information. + * Default value is `false` + * + */ + showsScale: PropTypes.bool, + + /** + * A Boolean indicating whether the map displays extruded building information. + * Default value is `true`. + */ + showsBuildings: PropTypes.bool, + + /** + * A Boolean value indicating whether the map displays traffic information. + * Default value is `false`. + */ + showsTraffic: PropTypes.bool, + + /** + * A Boolean indicating whether indoor maps should be enabled. + * Default value is `false` + * + * @platform android + */ + showsIndoors: PropTypes.bool, + + /** + * The map type to be displayed. + * + * - standard: standard road map (default) + * - satellite: satellite view + */ + mapType: PropTypes.oneOf([ + 'standard', + 'satellite', + ]), + + userTrackingMode: PropTypes.oneOf([ + 'none', + 'follow', + 'followWithHeading', + ]), + + /** + * The region to be displayed by the map. + * + * The region is defined by the center coordinates and the span of + * coordinates to display. + */ + region: PropTypes.shape({ /** - * Callback that is called when a marker on the map becomes deselected. This will be called when - * the callout for that marker is about to be hidden. - * - * @platform ios + * Coordinates for the center of the map. */ - onMarkerDeselect: PropTypes.func, + latitude: PropTypes.number.isRequired, + longitude: PropTypes.number.isRequired, /** - * Callback that is called when a callout is tapped by the user. + * Difference between the minimun and the maximum latitude/longitude + * to be displayed. */ - onCalloutPress: PropTypes.func, - + latitudeDelta: PropTypes.number, + longitudeDelta: PropTypes.number, + }), + + /** + * The initial region to be displayed by the map. Use this prop instead of `region` + * only if you don't want to control the viewport of the map besides the initial region. + * + * Changing this prop after the component has mounted will not result in a region change. + * + * This is similar to the `initialValue` prop of a text input. + */ + initialRegion: PropTypes.shape({ /** - * Callback that is called when the user initiates a drag on a marker (if it is draggable) + * Coordinates for the center of the map. */ - onMarkerDragStart: PropTypes.func, + latitude: PropTypes.number.isRequired, + longitude: PropTypes.number.isRequired, /** - * Callback called continuously as a marker is dragged + * Difference between the minimun and the maximum latitude/longitude + * to be displayed. */ - onMarkerDrag: PropTypes.func, - - /** - * Callback that is called when a drag on a marker finishes. This is usually the point you - * will want to setState on the marker's coordinate again - */ - onMarkerDragEnd: PropTypes.func, - }, - - getInitialState() { - return { - isReady: false - } - }, + latitudeDelta: PropTypes.number, + longitudeDelta: PropTypes.number, + }), + + /** + * Maximum size of area that can be displayed. + * + * @platform ios + */ + maxDelta: PropTypes.number, + + /** + * Minimum size of area that can be displayed. + * + * @platform ios + */ + minDelta: PropTypes.number, + + /** + * Insets for the map's legal label, originally at bottom left of the map. + * See `EdgeInsetsPropType.js` for more information. + */ + legalLabelInsets: EdgeInsetsPropType, + + /** + * Callback that is called continuously when the user is dragging the map. + */ + onRegionChange: PropTypes.func, + + /** + * Callback that is called once, when the user is done moving the map. + */ + onRegionChangeComplete: PropTypes.func, + + /** + * Callback that is called when user taps on the map. + */ + onPress: PropTypes.func, + + /** + * Callback that is called when user makes a "long press" somewhere on the map. + */ + onLongPress: PropTypes.func, + + /** + * Callback that is called when a marker on the map is tapped by the user. + */ + onMarkerPress: PropTypes.func, + + /** + * Callback that is called when a marker on the map becomes selected. This will be called when + * the callout for that marker is about to be shown. + * + * @platform ios + */ + onMarkerSelect: PropTypes.func, + + /** + * Callback that is called when a marker on the map becomes deselected. This will be called when + * the callout for that marker is about to be hidden. + * + * @platform ios + */ + onMarkerDeselect: PropTypes.func, + + /** + * Callback that is called when a callout is tapped by the user. + */ + onCalloutPress: PropTypes.func, + + /** + * Callback that is called when the user initiates a drag on a marker (if it is draggable) + */ + onMarkerDragStart: PropTypes.func, + + /** + * Callback called continuously as a marker is dragged + */ + onMarkerDrag: PropTypes.func, + + /** + * Callback that is called when a drag on a marker finishes. This is usually the point you + * will want to setState on the marker's coordinate again + */ + onMarkerDragEnd: PropTypes.func, + } - getDefaultProps: function() { - return { - zoomLevel: 13 - }; - }, + static defaultProps = { + zoomLevel: 13 + } componentDidMount() { - const { + const { region, - initialRegion, - showsScale + initialRegion, + showsScale } = this.props; - if (region && this.state.isReady) { - this.refs.map.setNativeProps({ - region - }); - } else if (initialRegion && this.state.isReady) { - this.refs.map.setNativeProps({ - region: initialRegion - }); - } - }, + if (region && this.state.isReady) { + this.refs.map.setNativeProps({ + region + }); + } else if (initialRegion && this.state.isReady) { + this.refs.map.setNativeProps({ + region: initialRegion + }); + } + } componentWillUpdate(nextProps) { - var a = this.__lastRegion; - var b = nextProps.region; - if (!a || !b) return; - if ( - a.latitude !== b.latitude || - a.longitude !== b.longitude || - a.latitudeDelta !== b.latitudeDelta || - a.longitudeDelta !== b.longitudeDelta - ) { - this.refs.map.setNativeProps({ - region: b - }); - } - }, + var a = this.__lastRegion; + var b = nextProps.region; + if (!a || !b) return; + if ( + a.latitude !== b.latitude || + a.longitude !== b.longitude || + a.latitudeDelta !== b.latitudeDelta || + a.longitudeDelta !== b.longitudeDelta + ) { + this.refs.map.setNativeProps({ + region: b + }); + } + } _onMapReady() { - const { + const { region, - initialRegion + initialRegion } = this.props; - if (typeof this.props.onMapReady == 'function') { - this.props.onMapReady() - } - if (region) { - this.refs.map.setNativeProps({ - region - }); - } else if (initialRegion) { - this.refs.map.setNativeProps({ - region: initialRegion - }); - } - this.setState({ - isReady: true + if (typeof this.props.onMapReady == 'function') { + this.props.onMapReady() + } + if (region) { + this.refs.map.setNativeProps({ + region }); - }, + } else if (initialRegion) { + this.refs.map.setNativeProps({ + region: initialRegion + }); + } + this.setState({ + isReady: true + }); + } _onLayout(e) { - const { + const { region, - initialRegion, - onLayout + initialRegion, + onLayout } = this.props; - const { + const { isReady } = this.state; - if (region && isReady && !this.__layoutCalled) { - this.__layoutCalled = true; - this.refs.map.setNativeProps({ - region - }); - } else if (initialRegion && isReady && !this.__layoutCalled) { - this.__layoutCalled = true; - this.refs.map.setNativeProps({ - region: initialRegion - }); - } - onLayout && onLayout(e); - }, + if (region && isReady && !this.__layoutCalled) { + this.__layoutCalled = true; + this.refs.map.setNativeProps({ + region + }); + } else if (initialRegion && isReady && !this.__layoutCalled) { + this.__layoutCalled = true; + this.refs.map.setNativeProps({ + region: initialRegion + }); + } + onLayout && onLayout(e); + } _onChange(event: Event) { - this.__lastRegion = event.nativeEvent.region; - if (event.nativeEvent.continuous) { - this.props.onRegionChange && - this.props.onRegionChange(event.nativeEvent.region); - } else { - this.props.onRegionChangeComplete && - this.props.onRegionChangeComplete(event.nativeEvent.region); - } - }, + this.__lastRegion = event.nativeEvent.region; + if (event.nativeEvent.continuous) { + this.props.onRegionChange && + this.props.onRegionChange(event.nativeEvent.region); + } else { + this.props.onRegionChangeComplete && + this.props.onRegionChangeComplete(event.nativeEvent.region); + } + } animateToRegion(region, duration) { - this._runCommand('animateToRegion', [region, duration || 500]); - }, + this._runCommand('animateToRegion', [region, duration || 500]); + } animateToCoordinate(latLng, duration) { - this._runCommand('animateToCoordinate', [latLng, duration || 500]); - }, + this._runCommand('animateToCoordinate', [latLng, duration || 500]); + } fitToElements(animated) { - this._runCommand('fitToElements', [animated]); - }, + this._runCommand('fitToElements', [animated]); + } animateToZoomLevel(zoomLevel) { - this._runCommand('animateToZoomLevel', [zoomLevel]) - }, + this._runCommand('animateToZoomLevel', [zoomLevel]) + } _getHandle() { - return ReactNative.findNodeHandle(this.refs.map); - }, + return ReactNative.findNodeHandle(this.refs.map); + } _runCommand(name, args) { - switch (Platform.OS) { - case 'android': - NativeModules.UIManager.dispatchViewManagerCommand( - this._getHandle(), - NativeModules.UIManager.AMap.Commands[name], - args - ); - break; - - case 'ios': - NativeModules.AMapManager[name].apply( - NativeModules.AMapManager[name], [this._getHandle(), ...args] - ); - break; - } - }, - + switch (Platform.OS) { + case 'android': + NativeModules.UIManager.dispatchViewManagerCommand( + this._getHandle(), + NativeModules.UIManager.AMap.Commands[name], + args + ); + break; + + case 'ios': + NativeModules.AMapManager[name].apply( + NativeModules.AMapManager[name], [this._getHandle(), ...args] + ); + break; + } + } render() { - let props = { - ...this.props, - region: null, - initialRegion: null, - onChange: this._onChange, - onMapReady: this._onMapReady, - onLayout: this._onLayout, - }; - if (Platform.OS === 'ios' && props.mapType === 'terrain') { - props.mapType = 'standard'; - } - if (!props.style || !props.style.flex) { - props.style = props.style || {} - props.style.flex = 1 - } - - return ( < AMap ref = "map" {...props}/>); + let props = { + ...this.props, + region: null, + initialRegion: null, + onChange: this._onChange, + onMapReady: this._onMapReady, + onLayout: this._onLayout, + }; + if (Platform.OS === 'ios' && props.mapType === 'terrain') { + props.mapType = 'standard'; + } + if (!props.style || !props.style.flex) { + props.style = props.style || {} + props.style.flex = 1 + } + + return (< AMap ref="map" {...props} />); } -}) +}; var AMap = requireNativeComponent('AMap', MapView, { nativeOnly: { @@ -444,4 +433,4 @@ MapView.Callout = MapCallout; MapView.Animated = Animated.createAnimatedComponent(MapView); -module.exports = MapView; +export default MapView; diff --git a/package.json b/package.json index 0525b58..7a4ff62 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "eslint": "^3.0.1", "eslint-plugin-flowtype": "^2.3.0", "eslint-plugin-react": "^5.2.2", - "react": "^0.14.8", - "react-native": "^0.24.1" + "react": "~15.4.1", + "react-native": "0.42.2" } }