Makes renderCluster required (according to ClusterMarker deprecation warn)

Author: leolusoli

ClusterMarker.js

@@ -3,8 +3,6 @@
 // base libs
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { Marker } from 'react-native-maps'
-import { Text, View, StyleSheet } from 'react-native'
 
 export default class ClusterMarker extends Component {
   constructor(props) {
@@ -18,7 +16,6 @@ export default class ClusterMarker extends Component {
   }
 
   render() {
-
     const pointCount = this.props.properties.point_count // eslint-disable-line camelcase
     const latitude = this.props.geometry.coordinates[1],
           longitude = this.props.geometry.coordinates[0]
@@ -32,79 +29,13 @@ export default class ClusterMarker extends Component {
       return this.props.renderCluster(cluster, this.onPress)
     }
 
-    // keep default marker for backward compatibility, but it'll soon be deprecated
-    console.warn('Deprecation notice: default markers will soon be deprecated. Please, start using "renderCluster" prop.') // eslint-disable-line
-
-    let scaleUpRatio = this.props.scaleUpRatio ? this.props.scaleUpRatio(pointCount) : (1 + (Math.min(pointCount, 999) / 100))
-    if (isNaN(scaleUpRatio)) {
-      console.warn('scaleUpRatio must return a Number, falling back to default') // eslint-disable-line
-      scaleUpRatio = 1 + (Math.min(pointCount, 999) / 100)
-    }
-
-    let textForCluster = '1'
-
-    let width = Math.floor(this.props.clusterInitialDimension * scaleUpRatio),
-        height = Math.floor(this.props.clusterInitialDimension * scaleUpRatio),
-        fontSize = Math.floor(this.props.clusterInitialFontSize * scaleUpRatio),
-        borderRadius = Math.floor(width / 2)
-
-    // cluster dimension upper limit
-    width = width <= (this.props.clusterInitialDimension * 2) ? width : this.props.clusterInitialDimension * 2
-    height = height <= (this.props.clusterInitialDimension * 2) ? height : this.props.clusterInitialDimension * 2
-    fontSize = fontSize <= 18 ? fontSize : 18
-
-    if (pointCount >= 2 && pointCount <= 10) {
-      textForCluster = pointCount.toString()
-    } else if (pointCount > 10 && pointCount <= 25) {
-      textForCluster = '10+'
-    } else if (pointCount > 25 && pointCount <= 50) {
-      textForCluster = '25+'
-    } else if (pointCount > 50 && pointCount <= 100) {
-      textForCluster = '50+'
-    } else if (pointCount > 100) {
-      textForCluster = '100+'
-    }
-
-    const { containerStyle, textStyle } = this.props
-
-    return (
-      <Marker coordinate={{ latitude, longitude }} onPress={this.onPress}>
-        <View style={[styles.container, containerStyle, { width, height, borderRadius }]}>
-          <Text style={[styles.counterText, textStyle, { fontSize }]}>{textForCluster}</Text>
-        </View>
-      </Marker>
-    )
+    throw "Implement renderCluster method prop to render correctly cluster marker!"
   }
 }
 
-ClusterMarker.defaultProps = {
-  textStyle: {},
-  containerStyle: {}
-}
-
 ClusterMarker.propTypes = {
-  scaleUpRatio: PropTypes.func,
   renderCluster: PropTypes.func,
   onPress: PropTypes.func.isRequired,
   geometry: PropTypes.object.isRequired,
-  textStyle: PropTypes.object.isRequired,
   properties: PropTypes.object.isRequired,
-  containerStyle: PropTypes.object.isRequired,
-  clusterInitialFontSize: PropTypes.number.isRequired,
-  clusterInitialDimension: PropTypes.number.isRequired,
 }
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-    alignItems: 'center',
-    borderColor: '#65bc46',
-    justifyContent: 'center',
-    backgroundColor: '#fff'
-  },
-  counterText: {
-    fontSize: 16,
-    color: '#65bc46',
-    fontWeight: '400'
-  }
-})

ClusteredMapView.js

@@ -87,7 +87,7 @@ export default class ClusteredMapView extends PureComponent {
   }
 
   onRegionChangeComplete(region) {
-    let data = this.getClusters(region);
+    let data = this.getClusters(region)
     this.setState({ region, data }, () => {
         this.props.onRegionChangeComplete && this.props.onRegionChangeComplete(region, data)
     })
@@ -139,13 +139,8 @@ export default class ClusteredMapView extends PureComponent {
               <ClusterMarker
                 {...d}
                 onPress={this.onClusterPress}
-                textStyle={this.props.textStyle}
-                scaleUpRatio={this.props.scaleUpRatio}
                 renderCluster={this.props.renderCluster}
-                key={`cluster-${d.properties.cluster_id}`}
-                containerStyle={this.props.containerStyle}
-                clusterInitialFontSize={this.props.clusterInitialFontSize}
-                clusterInitialDimension={this.props.clusterInitialDimension} />
+                key={`cluster-${d.properties.cluster_id}`} />
             )
           })
         }
@@ -162,12 +157,8 @@ ClusteredMapView.defaultProps = {
   minZoom: 1,
   maxZoom: 16,
   extent: 512,
-  textStyle: {},
-  containerStyle: {},
   animateClusters: true,
   clusteringEnabled: true,
-  clusterInitialFontSize: 12,
-  clusterInitialDimension: 30,
   clusterPressMaxChildren: 100,
   preserveClusterPressBehavior: true,
   width: Dimensions.get('window').width,
@@ -185,25 +176,20 @@ ClusteredMapView.propTypes = {
   extent: PropTypes.number.isRequired,
   minZoom: PropTypes.number.isRequired,
   maxZoom: PropTypes.number.isRequired,
-  clusterInitialFontSize: PropTypes.number.isRequired,
   clusterPressMaxChildren: PropTypes.number.isRequired,
-  clusterInitialDimension: PropTypes.number.isRequired,
   // array
   data: PropTypes.array.isRequired,
   // func
   onExplode: PropTypes.func,
   onImplode: PropTypes.func,
-  scaleUpRatio: PropTypes.func,
-  renderCluster: PropTypes.func,
   onClusterPress: PropTypes.func,
   renderMarker: PropTypes.func.isRequired,
+  renderCluster: PropTypes.func.isRequired,
   // bool
   animateClusters: PropTypes.bool.isRequired,
   clusteringEnabled: PropTypes.bool.isRequired,
   preserveClusterPressBehavior: PropTypes.bool.isRequired,
   // object
-  textStyle: PropTypes.object,
-  containerStyle: PropTypes.object,
   layoutAnimationConf: PropTypes.object,
   edgePadding: PropTypes.object.isRequired,
   // string