feat(core): remove enclosing div from container if non interactive

plouc · Mar 27, 2019 · 149ed0f · 149ed0f
1 parent 8426ef5
commit 149ed0f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/packages/core/src/components/Container.js b/packages/core/src/components/Container.js
@@ -61,26 +61,38 @@ const Container = ({ children, theme, isInteractive = true }) => {
     })
     const { isTooltipVisible, tooltipContent, position } = state
 
+    let content
+    if (isInteractive) {
+        content = (
+            <div style={containerStyle} ref={containerEl}>
+                {children({
+                    showTooltip: isInteractive ? showTooltip : noop,
+                    hideTooltip: isInteractive ? hideTooltip : noop,
+                })}
+                {isTooltipVisible && (
+                    <div
+                        style={{
+                            ...tooltipStyle,
+                            ...position,
+                            ...theme.tooltip,
+                        }}
+                    >
+                        {tooltipContent}
+                    </div>
+                )}
+            </div>
+        )
+    } else {
+        content = children({
+            showTooltip: isInteractive ? showTooltip : noop,
+            hideTooltip: isInteractive ? hideTooltip : noop,
+        })
+    }
+
     return (
         <themeContext.Provider value={theme}>
             <tooltipContext.Provider value={[showTooltip, hideTooltip]}>
-                <div style={containerStyle} ref={containerEl}>
-                    {children({
-                        showTooltip: isInteractive ? showTooltip : noop,
-                        hideTooltip: isInteractive ? hideTooltip : noop,
-                    })}
-                    {isTooltipVisible && (
-                        <div
-                            style={{
-                                ...tooltipStyle,
-                                ...position,
-                                ...theme.tooltip,
-                            }}
-                        >
-                            {tooltipContent}
-                        </div>
-                    )}
-                </div>
+                {content}
             </tooltipContext.Provider>
         </themeContext.Provider>
     )

diff --git a/website/src/components/icons/ChoroplethIcon.js b/website/src/components/icons/ChoroplethIcon.js
@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { Fragment } from 'react'
+import React from 'react'
 import choroplethGreyImg from '../../assets/icons/choropleth-grey.png'
 import choroplethRedImg from '../../assets/icons/choropleth-red.png'
 import { Icon } from './styled'