feat(line): avoid re-rendering tooltip on mouse move for line chart

src/components/charts/line/LineSlicesItem.js

@@ -6,61 +6,68 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { PureComponent } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+import compose from 'recompose/compose'
+import pure from 'recompose/pure'
+import withState from 'recompose/withState'
+import withHandlers from 'recompose/withHandlers'
+import withPropsOnChange from 'recompose/withPropsOnChange'
 import TableTooltip from '../../tooltip/TableTooltip'
 
 const Chip = ({ color }) =>
     <span style={{ display: 'block', width: '12px', height: '12px', background: color }} />
 
-export default class LineSlicesItem extends PureComponent {
-    state = {
-        isHover: false,
-    }
+const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover }) =>
+    <g transform={`translate(${slice.x}, 0)`}>
+        {isHover &&
+            <line
+                x1={0}
+                x2={0}
+                y1={0}
+                y2={height}
+                stroke="#000"
+                strokeOpacity={0.35}
+                strokeWidth={1}
+            />}
+        <rect
+            x={-20}
+            width={40}
+            height={height}
+            fill="#000"
+            fillOpacity={0}
+            onMouseEnter={showTooltip}
+            onMouseMove={showTooltip}
+            onMouseLeave={hideTooltip}
+        />
+    </g>
 
-    handleMouseEnter = e => {
-        this.setState({ isHover: true })
-
-        const { slice, showTooltip } = this.props
-        showTooltip(
-            <TableTooltip
-                rows={slice.points.map(p => [<Chip color={p.color} />, p.id, p.value])}
-            />,
-            e
-        )
-    }
-
-    handleMouseLeave = () => {
-        this.setState({ isHover: false })
-        this.props.hideTooltip()
-    }
+LineSlicesItem.propTypes = {
+    slice: PropTypes.object.isRequired,
+    height: PropTypes.number.isRequired,
+    showTooltip: PropTypes.func.isRequired,
+    hideTooltip: PropTypes.func.isRequired,
+    isHover: PropTypes.bool.isRequired,
+}
 
-    render() {
-        const { slice, height } = this.props
-        const { isHover } = this.state
+const enhance = compose(
+    withState('isHover', 'setIsHover', false),
+    withPropsOnChange(['slice'], ({ slice }) => ({
+        tooltip: (
+            <TableTooltip rows={slice.points.map(p => [<Chip color={p.color} />, p.id, p.value])} />
+        ),
+    })),
+    withHandlers({
+        showTooltip: ({ showTooltip, setIsHover, tooltip }) => e => {
+            setIsHover(true)
+            showTooltip(tooltip, e)
+        },
+        hideTooltip: ({ hideTooltip, setIsHover }) => () => {
+            setIsHover(false)
+            hideTooltip()
+        },
+    }),
+    pure
+)
 
-        return (
-            <g transform={`translate(${slice.x}, 0)`}>
-                {isHover &&
-                    <line
-                        x1={0}
-                        x2={0}
-                        y1={0}
-                        y2={height}
-                        stroke="#000"
-                        strokeOpacity={0.35}
-                        strokeWidth={1}
-                    />}
-                <rect
-                    x={-20}
-                    width={40}
-                    height={height}
-                    fill="#000"
-                    fillOpacity={0}
-                    onMouseEnter={this.handleMouseEnter}
-                    onMouseMove={this.handleMouseEnter}
-                    onMouseLeave={this.handleMouseLeave}
-                />
-            </g>
-        )
-    }
-}
+export default enhance(LineSlicesItem)