feat(heatmap): use hooks instead of recompose for HeatMapCanvas

plouc · Jun 20, 2020 · f823ea6 · f823ea6
1 parent 6d6528a
commit f823ea6
Show file tree

Hide file tree

Showing 14 changed files with 280 additions and 369 deletions.
diff --git a/packages/core/src/motion/context.js b/packages/core/src/motion/context.js
@@ -50,9 +50,12 @@ MotionConfigProvider.propTypes = {
         }),
     ]),
 }
-MotionConfigProvider.defaultProps = {
+
+export const MotionDefaultProps = {
     animate: true,
     stiffness: 90,
     damping: 15,
     config: 'default',
 }
+
+MotionConfigProvider.defaultProps = MotionDefaultProps
diff --git a/packages/core/src/props/index.js b/packages/core/src/props/index.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import { MotionConfigProvider } from '../motion'
+import { MotionDefaultProps } from '../motion'
 
 export const marginPropType = PropTypes.shape({
     top: PropTypes.number,
@@ -17,10 +17,10 @@ export const marginPropType = PropTypes.shape({
 }).isRequired
 
 export const motionPropTypes = {
-    animate: MotionConfigProvider.propTypes.animate,
-    motionStiffness: MotionConfigProvider.propTypes.stiffness,
-    motionDamping: MotionConfigProvider.propTypes.damping,
-    motionConfig: MotionConfigProvider.propTypes.config,
+    animate: MotionDefaultProps.animate,
+    motionStiffness: MotionDefaultProps.stiffness,
+    motionDamping: MotionDefaultProps.damping,
+    motionConfig: MotionDefaultProps.config,
 }
 
 export const blendModes = [

diff --git a/packages/heatmap/package.json b/packages/heatmap/package.json
@@ -25,14 +25,12 @@
   "dependencies": {
     "@nivo/axes": "0.62.0",
     "@nivo/colors": "0.62.0",
-    "@nivo/core": "0.62.0",
     "@nivo/tooltip": "0.62.0",
     "d3-scale": "^3.0.0",
-    "lodash": "^4.17.11",
-    "react-spring": "^8.0.27",
-    "recompose": "^0.30.0"
+    "react-spring": "^8.0.27"
   },
   "peerDependencies": {
+    "@nivo/core": "0.62.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.8.4 < 17.0.0"
   },

diff --git a/packages/heatmap/src/HeatMap.js b/packages/heatmap/src/HeatMap.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
-import { SvgWrapper, withContainer, useTheme, useDimensions } from '@nivo/core'
+import { SvgWrapper, withContainer, useDimensions } from '@nivo/core'
 import { Axes, Grid } from '@nivo/axes'
 import { useTooltip } from '@nivo/tooltip'
 import { HeatMapPropTypes, HeatMapDefaultProps } from './props'
@@ -52,19 +52,12 @@ const HeatMap = ({
     tooltipFormat,
     tooltip,
 }) => {
-    const theme = useTheme()
-
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const handleNodeHover = (node, event) => {
         setCurrentNode(node)
         showTooltipFromEvent(
-            <HeatMapCellTooltip
-                node={node}
-                theme={theme}
-                format={tooltipFormat}
-                tooltip={tooltip}
-            />,
+            <HeatMapCellTooltip node={node} format={tooltipFormat} tooltip={tooltip} />,
             event
         )
     }
@@ -156,8 +149,8 @@ const HeatMap = ({
             <Axes
                 xScale={xScale}
                 yScale={yScale}
-                width={innerWidth}
-                height={innerHeight}
+                width={innerWidth - offsetX * 2}
+                height={innerHeight - offsetY * 2}
                 top={axisTop}
                 right={axisRight}
                 bottom={axisBottom}
@@ -170,9 +163,9 @@ const HeatMap = ({
                 getCellBorderColor={getCellBorderColor}
                 enableLabels={enableLabels}
                 getLabelTextColor={getLabelTextColor}
-                handleNodeHover={handleNodeHover}
-                handleNodeLeave={handleNodeLeave}
-                onClick={onClick}
+                handleNodeHover={isInteractive ? handleNodeHover : undefined}
+                handleNodeLeave={isInteractive ? handleNodeLeave : undefined}
+                onClick={isInteractive ? onClick : undefined}
             />
         </SvgWrapper>
     )