From 4bd566c8485725260f39b1e06f3424a7416f20ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <benitteraphael@gmail.com>
Date: Fri, 12 Jul 2019 08:50:26 +0900
Subject: [PATCH] fix(axes): treat renderTick as a React component

---
 packages/axes/src/components/Axis.js |  4 +-
 packages/bar/stories/bar.stories.js  | 60 ++++++++++++----------------
 2 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/packages/axes/src/components/Axis.js b/packages/axes/src/components/Axis.js
index 7a986060f..6cb01b0a5 100644
--- a/packages/axes/src/components/Axis.js
+++ b/packages/axes/src/components/Axis.js
@@ -113,7 +113,7 @@ const Axis = ({
         return (
             <g transform={`translate(${x},${y})`}>
                 {ticks.map((tick, tickIndex) =>
-                    renderTick({
+                    React.createElement(renderTick, {
                         tickIndex,
                         format: formatValue,
                         rotate: tickRotation,
@@ -156,7 +156,7 @@ const Axis = ({
                         {interpolatedStyles => (
                             <Fragment>
                                 {interpolatedStyles.map(({ style, data: tick }, tickIndex) =>
-                                    renderTick({
+                                    React.createElement(renderTick, {
                                         tickIndex,
                                         format: formatValue,
                                         textBaseline,
diff --git a/packages/bar/stories/bar.stories.js b/packages/bar/stories/bar.stories.js
index 8d3525fff..3c1ecabbe 100644
--- a/packages/bar/stories/bar.stories.js
+++ b/packages/bar/stories/bar.stories.js
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions'
 import { generateCountriesData, sets } from '@nivo/generators'
 import range from 'lodash/range'
 import random from 'lodash/random'
+import { useTheme } from '@nivo/core'
 import { Bar } from '../src'
 
 const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
@@ -201,47 +202,38 @@ stories.add('custom tooltip', () => (
     />
 ))
 
+const CustomTick = tick => {
+    const theme = useTheme()
+
+    return (
+        <g transform={`translate(${tick.x},${tick.y + 22})`}>
+            <rect x={-14} y={-6} rx={3} ry={3} width={28} height={24} fill="rgba(0, 0, 0, .05)" />
+            <rect x={-12} y={-12} rx={2} ry={2} width={24} height={24} fill="rgb(232, 193, 160)" />
+            <line stroke="rgb(232, 193, 160)" strokeWidth={1.5} y1={-22} y2={-12} />
+            <text
+                textAnchor="middle"
+                dominantBaseline="middle"
+                style={{
+                    ...theme.axis.ticks.text,
+                    fill: '#333',
+                    fontSize: 10,
+                }}
+            >
+                {tick.value}
+            </text>
+        </g>
+    )
+}
+
 stories.add(
     'custom axis ticks',
     () => (
         <Bar
             {...commonProps}
+            animate={false}
             axisLeft={null}
             axisBottom={{
-                renderTick: tick => (
-                    <g key={tick.key} transform={`translate(${tick.x},${tick.y + 22})`}>
-                        <rect
-                            x={-14}
-                            y={-6}
-                            rx={3}
-                            ry={3}
-                            width={28}
-                            height={24}
-                            fill="rgba(0, 0, 0, .05)"
-                        />
-                        <rect
-                            x={-12}
-                            y={-12}
-                            rx={2}
-                            ry={2}
-                            width={24}
-                            height={24}
-                            fill="rgb(232, 193, 160)"
-                        />
-                        <line stroke="rgb(232, 193, 160)" strokeWidth={1.5} y1={-22} y2={-12} />
-                        <text
-                            textAnchor="middle"
-                            dominantBaseline="middle"
-                            style={{
-                                ...tick.theme.axis.ticks.text,
-                                fill: '#333',
-                                fontSize: 10,
-                            }}
-                        >
-                            {tick.value}
-                        </text>
-                    </g>
-                ),
+                renderTick: CustomTick,
             }}
         />
     ),