Added extra props to axis children

Following the example from the charts, this adds extra props fro use in laying out axes children to both the x and y axes.

Author: alburdette619

src/x-axis.js

@@ -26,7 +26,7 @@ class XAxis extends PureComponent {
             spacingInner,
             spacingOuter,
             contentInset: {
-                left  = 0,
+                left = 0,
                 right = 0,
             },
         } = this.props
@@ -68,18 +68,25 @@ class XAxis extends PureComponent {
         const { height, width } = this.state
 
         if (data.length === 0) {
-            return <View style={ style }/>
+            return <View style={ style } />
         }
 
         const values = data.map((item, index) => xAccessor({ item, index }))
-        const extent  = array.extent(values)
+        const extent = array.extent(values)
         const domain = scale === d3Scale.scaleBand ?
             values :
-            [ min || extent[ 0 ], max || extent[ 1 ] ]
+            [ min || extent[0], max || extent[1] ]
 
-        const x     = this._getX(domain)
+        const x = this._getX(domain)
         const ticks = numberOfTicks ? x.ticks(numberOfTicks) : values
 
+        const extraProps = {
+            x,
+            ticks,
+            height,
+            formatLabel,
+        }
+
         return (
             <View style={ style }>
                 <View
@@ -88,7 +95,7 @@ class XAxis extends PureComponent {
                 >
                     {/*invisible text to allow for parent resizing*/}
                     <Text style={{ opacity: 0, fontSize: svg.fontSize }}>
-                        { formatLabel(ticks[0], 0) }
+                        {formatLabel(ticks[0], 0)}
                     </Text>
                     {
                         height > 0 && width > 0 &&
@@ -100,13 +107,15 @@ class XAxis extends PureComponent {
                             width,
                         }}>
                             <G>
-                                {children}
+                                {React.Children.map(children, child => {
+                                    return React.cloneElement(child, extraProps)
+                                })}
                                 {
                                     // don't render labels if width isn't measured yet,
                                     // causes rendering issues
                                     width > 0 &&
                                     ticks.map((value, index) => {
-                                        const { svg: valueSvg = {} } = data[ index ] || {}
+                                        const { svg: valueSvg = {} } = data[index] || {}
 
                                         return (
                                             <SVGText

src/y-axis.js

@@ -67,16 +67,16 @@ class YAxis extends PureComponent {
         const { height, width } = this.state
 
         if (data.length === 0) {
-            return <View style={ style }/>
+            return <View style={ style } />
         }
 
         const values = data.map((item, index) => yAccessor({ item, index }))
 
         const extent = array.extent([ ...values, min, max ])
 
         const {
-            min = extent[ 0 ],
-            max = extent[ 1 ],
+            min = extent[0],
+            max = extent[1],
         } = this.props
 
         const domain = scale === d3Scale.scaleBand ? values : [ min, max ]
@@ -92,6 +92,13 @@ class YAxis extends PureComponent {
             .map((value, index) => formatLabel(value, index))
             .reduce((prev, curr) => prev.toString().length > curr.toString().length ? prev : curr, 0)
 
+        const extraProps = {
+            y,
+            ticks,
+            width,
+            formatLabel,
+        }
+
         return (
             <View style={ [ style ] }>
                 <View
@@ -114,7 +121,9 @@ class YAxis extends PureComponent {
                             width,
                         }}>
                             <G>
-                                {children}
+                                {React.Children.map(children, child => {
+                                    return React.cloneElement(child, extraProps)
+                                })}
                                 {
                                     // don't render labels if width isn't measured yet,
                                     // causes rendering issues