From 7d2bedcd8f4e10925301b2d88c70f09c59ba956b Mon Sep 17 00:00:00 2001 From: Marius Petcu Date: Mon, 20 Jun 2016 12:26:49 +0300 Subject: [PATCH] Replace mixin API with member methods --- index.ios.js | 138 +++++++++++++++++++++++++------------------------ ios/example.js | 48 ++++++++--------- 2 files changed, 94 insertions(+), 92 deletions(-) diff --git a/index.ios.js b/index.ios.js index 6a943c5..8e57568 100644 --- a/index.ios.js +++ b/index.ios.js @@ -8,76 +8,75 @@ var { NativeModules, requireNativeComponent, findNodeHandle } = ReactNative; var { MapboxGLManager } = NativeModules; -var MapMixins = { - addPackForRegion(mapRef, options) { - MapboxGLManager.addPackForRegion(findNodeHandle(this.refs[mapRef]), options); - }, - getPacks(mapRef, callback) { - MapboxGLManager.getPacks(findNodeHandle(this.refs[mapRef]), callback); - }, - removePack(mapRef, packName, callback) { - MapboxGLManager.removePack(findNodeHandle(this.refs[mapRef]), packName, callback); - }, - setDirectionAnimated(mapRef, heading) { - MapboxGLManager.setDirectionAnimated(findNodeHandle(this.refs[mapRef]), heading); - }, - setZoomLevelAnimated(mapRef, zoomLevel) { - MapboxGLManager.setZoomLevelAnimated(findNodeHandle(this.refs[mapRef]), zoomLevel); - }, - setCenterCoordinateAnimated(mapRef, latitude, longitude) { - return MapboxGLManager.setCenterCoordinateAnimated(findNodeHandle(this.refs[mapRef]), latitude, longitude); - }, - setCenterCoordinateZoomLevelAnimated(mapRef, latitude, longitude, zoomLevel) { - MapboxGLManager.setCenterCoordinateZoomLevelAnimated(findNodeHandle(this.refs[mapRef]), latitude, longitude, zoomLevel); - }, - setCameraAnimated(mapRef, latitude, longitude, fromDistance, pitch, heading, duration) { - MapboxGLManager.setCameraAnimated(findNodeHandle(this.refs[mapRef]), latitude, longitude, fromDistance, pitch, heading, duration); - }, - addAnnotations(mapRef, annotations) { - MapboxGLManager.addAnnotations(findNodeHandle(this.refs[mapRef]), annotations); - }, - updateAnnotation(mapRef, annotation) { - MapboxGLManager.updateAnnotation(findNodeHandle(this.refs[mapRef]), annotation); - }, - selectAnnotationAnimated(mapRef, selectedIdentifier) { - MapboxGLManager.selectAnnotationAnimated(findNodeHandle(this.refs[mapRef]), selectedIdentifier); - }, - removeAnnotation(mapRef, selectedIdentifier) { - MapboxGLManager.removeAnnotation(findNodeHandle(this.refs[mapRef]), selectedIdentifier); - }, - removeAllAnnotations(mapRef) { - MapboxGLManager.removeAllAnnotations(findNodeHandle(this.refs[mapRef])); - }, - setVisibleCoordinateBoundsAnimated(mapRef, latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft) { - MapboxGLManager.setVisibleCoordinateBoundsAnimated(findNodeHandle(this.refs[mapRef]), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft); - }, - setUserTrackingMode(mapRef, userTrackingMode) { - MapboxGLManager.setUserTrackingMode(findNodeHandle(this.refs[mapRef]), userTrackingMode); - }, - getCenterCoordinateZoomLevel(mapRef, callback) { - MapboxGLManager.getCenterCoordinateZoomLevel(findNodeHandle(this.refs[mapRef]), callback); - }, - getDirection(mapRef, callback) { - MapboxGLManager.getDirection(findNodeHandle(this.refs[mapRef]), callback); - }, - getBounds(mapRef, callback) { - MapboxGLManager.getBounds(findNodeHandle(this.refs[mapRef]), callback); - }, - mapStyles: MapboxGLManager.mapStyles, - userTrackingMode: MapboxGLManager.userTrackingMode, - userLocationVerticalAlignment: MapboxGLManager.userLocationVerticalAlignment, - unknownResourceCount: MapboxGLManager.unknownResourceCount -}; - -var MapView = React.createClass({ +var Mapbox = React.createClass({ statics: { - Mixin: MapMixins, metricsEnabled: MapboxGLManager.metricsEnabled, setMetricsEnabled(enabled: boolean) { - MapView.metricsEnabled = enabled; + Mapbox.metricsEnabled = enabled; MapboxGLManager.setMetricsEnabled(enabled); - } + }, + + mapStyles: MapboxGLManager.mapStyles, + userTrackingMode: MapboxGLManager.userTrackingMode, + userLocationVerticalAlignment: MapboxGLManager.userLocationVerticalAlignment, + unknownResourceCount: MapboxGLManager.unknownResourceCount }, + + addPackForRegion(options) { + MapboxGLManager.addPackForRegion(findNodeHandle(this), options); + }, + getPacks(callback) { + MapboxGLManager.getPacks(findNodeHandle(this), callback); + }, + removePack(packName, callback) { + MapboxGLManager.removePack(findNodeHandle(this), packName, callback); + }, + setDirectionAnimated(heading) { + MapboxGLManager.setDirectionAnimated(findNodeHandle(this), heading); + }, + setZoomLevelAnimated(zoomLevel) { + MapboxGLManager.setZoomLevelAnimated(findNodeHandle(this), zoomLevel); + }, + setCenterCoordinateAnimated(latitude, longitude) { + return MapboxGLManager.setCenterCoordinateAnimated(findNodeHandle(this), latitude, longitude); + }, + setCenterCoordinateZoomLevelAnimated(latitude, longitude, zoomLevel) { + MapboxGLManager.setCenterCoordinateZoomLevelAnimated(findNodeHandle(this), latitude, longitude, zoomLevel); + }, + setCameraAnimated(latitude, longitude, fromDistance, pitch, heading, duration) { + MapboxGLManager.setCameraAnimated(findNodeHandle(this), latitude, longitude, fromDistance, pitch, heading, duration); + }, + addAnnotations(annotations) { + MapboxGLManager.addAnnotations(findNodeHandle(this), annotations); + }, + updateAnnotation(annotation) { + MapboxGLManager.updateAnnotation(findNodeHandle(this), annotation); + }, + selectAnnotationAnimated(selectedIdentifier) { + MapboxGLManager.selectAnnotationAnimated(findNodeHandle(this), selectedIdentifier); + }, + removeAnnotation(selectedIdentifier) { + MapboxGLManager.removeAnnotation(findNodeHandle(this), selectedIdentifier); + }, + removeAllAnnotations(mapRef) { + MapboxGLManager.removeAllAnnotations(findNodeHandle(this)); + }, + setVisibleCoordinateBoundsAnimated(latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft) { + MapboxGLManager.setVisibleCoordinateBoundsAnimated(findNodeHandle(this), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft); + }, + setUserTrackingMode(userTrackingMode) { + MapboxGLManager.setUserTrackingMode(findNodeHandle(this), userTrackingMode); + }, + getCenterCoordinateZoomLevel(callback) { + MapboxGLManager.getCenterCoordinateZoomLevel(findNodeHandle(this), callback); + }, + getDirection(callback) { + MapboxGLManager.getDirection(findNodeHandle(this), callback); + }, + getBounds(callback) { + MapboxGLManager.getBounds(findNodeHandle(this), callback); + }, + _onRegionChange(event: Event) { if (this.props.onRegionChange) this.props.onRegionChange(event.nativeEvent.src); }, @@ -120,6 +119,7 @@ var MapView = React.createClass({ _onOfflineDidRecieveError(event: Event) { if (this.props.onOfflineDidRecieveError) this.props.onOfflineDidRecieveError(event.nativeEvent.src); }, + propTypes: { showsUserLocation: PropTypes.bool, rotateEnabled: PropTypes.bool, @@ -179,6 +179,7 @@ var MapView = React.createClass({ onOfflineDidRecieveError: PropTypes.func, onChangeUserTrackingMode: PropTypes.func }, + getDefaultProps() { return { centerCoordinate: { @@ -190,7 +191,7 @@ var MapView = React.createClass({ rotateEnabled: true, scrollEnabled: true, showsUserLocation: false, - styleURL: this.Mixin.mapStyles.streets, + styleURL: MapboxGLManager.mapStyles.streets, zoomEnabled: true, zoomLevel: 0, attributionButtonIsHidden: false, @@ -198,6 +199,7 @@ var MapView = React.createClass({ compassIsHidden: false }; }, + render() { return ( - this.setDirectionAnimated(mapRef, 0)}> + this._map && this._map.setDirectionAnimated(0)}> Set direction to 0 - this.setZoomLevelAnimated(mapRef, 6)}> + this._map && this._map.setZoomLevelAnimated(6)}> Zoom out to zoom level 6 - this.setCenterCoordinateAnimated(mapRef, 48.8589, 2.3447)}> + this._map && this._map.setCenterCoordinateAnimated(48.8589, 2.3447)}> Go to Paris at current zoom level {parseInt(this.state.currentZoom)} - this.setCenterCoordinateZoomLevelAnimated(mapRef, 35.68829, 139.77492, 14)}> + this._map && this._map.setCenterCoordinateZoomLevelAnimated(35.68829, 139.77492, 14)}> Go to Tokyo at fixed zoom level 14 - this.addAnnotations(mapRef, [{ + this._map && this._map.addAnnotations([{ coordinates: [40.73312,-73.989], type: 'point', title: 'This is a new marker', @@ -122,7 +122,7 @@ var MapExample = React.createClass({ }])}> Add new marker - this.updateAnnotation(mapRef, { + this._map && this._map.updateAnnotation({ coordinates: [40.714541341726175,-74.00579452514648], 'type': 'point', title: 'New Title!', @@ -136,54 +136,54 @@ var MapExample = React.createClass({ })}> Update marker2 - this.selectAnnotationAnimated(mapRef, 'marker1')}> + this._map && this._map.selectAnnotationAnimated('marker1')}> Open marker1 popup - this.removeAnnotation(mapRef, 'marker2')}> + this._map && this._map.removeAnnotation('marker2')}> Remove marker2 annotation this.removeAllAnnotations(mapRef)}> Remove all annotations - this.setVisibleCoordinateBoundsAnimated(mapRef, 40.712, -74.227, 40.774, -74.125, 100, 0, 0, 0)}> + this._map && this._map.setVisibleCoordinateBoundsAnimated(40.712, -74.227, 40.774, -74.125, 100, 0, 0, 0)}> Set visible bounds to 40.7, -74.2, 40.7, -74.1 - this.setUserTrackingMode(mapRef, this.userTrackingMode.follow)}> + this._map && this._map.setUserTrackingMode(Mapbox.userTrackingMode.follow)}> Set userTrackingMode to follow - this.getCenterCoordinateZoomLevel(mapRef, (location)=> { + this._map && this._map.getCenterCoordinateZoomLevel((location)=> { console.log(location); })}> Get location - this.getDirection(mapRef, (direction)=> { + this._map && this._map.getDirection((direction)=> { console.log(direction); })}> Get direction - this.getBounds(mapRef, (bounds)=> { + this._map && this._map.getBounds((bounds)=> { console.log(bounds); })}> Get bounds - this.addPackForRegion(mapRef, { + this._map && this._map.addPackForRegion({ name: 'test', type: 'bbox', bounds: [0, 0, 0, 0], minZoomLevel: 0, maxZoomLevel: 0, metadata: {}, - styleURL: this.mapStyles.emerald + styleURL: Mapbox.mapStyles.emerald })}> Create offline pack - this.getPacks(mapRef, (err, packs)=> { + this._map && this._map.getPacks((err, packs)=> { if (err) console.log(err); console.log(packs); })}> Get offline packs - this.removePack(mapRef, 'test', (err, info)=> { + this._map && this._map.removePack('test', (err, info)=> { if (err) console.log(err); if (info) { console.log('Deleted', info.deleted); @@ -194,16 +194,16 @@ var MapExample = React.createClass({ Remove pack with name 'test' { this._map = map; }} style={styles.container} direction={0} rotateEnabled={true} scrollEnabled={true} zoomEnabled={true} showsUserLocation={true} - ref={mapRef} - accessToken={'your-mapbox.com-access-token'} - styleURL={this.mapStyles.emerald} - userTrackingMode={this.userTrackingMode.none} + accessToken={accessToken} + styleURL={Mapbox.mapStyles.emerald} + userTrackingMode={Mapbox.userTrackingMode.none} centerCoordinate={this.state.center} zoomLevel={this.state.zoom} onRegionChange={this.onRegionChange} @@ -227,4 +227,4 @@ var styles = StyleSheet.create({ } }); -AppRegistry.registerComponent('your-app-name', () => MapExample); +AppRegistry.registerComponent('YourAppName', () => MapExample);