feat(legends): add support for custom symbol shape

plouc · Aug 25, 2018 · 7419c91 · 7419c91
1 parent 953c572
commit 7419c91
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/packages/legends/src/props.js b/packages/legends/src/props.js
@@ -41,9 +41,9 @@ export const legendEffectPropType = PropTypes.shape({
 })
 
 export const symbolPropTypes = {
+    symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     symbolSize: PropTypes.number,
     symbolSpacing: PropTypes.number,
-    symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     symbolBorderWidth: PropTypes.number,
     symbolBorderColor: PropTypes.string,
 }

diff --git a/packages/legends/src/svg/BoxLegendSvg.js b/packages/legends/src/svg/BoxLegendSvg.js
@@ -50,9 +50,9 @@ const BoxLegendSvg = ({
     itemOpacity,
 
     // symbol
+    symbolShape,
     symbolSize,
     symbolSpacing,
-    symbolShape,
     symbolBorderWidth,
     symbolBorderColor,
 
@@ -100,9 +100,9 @@ const BoxLegendSvg = ({
             itemBackground={itemBackground}
             itemOpacity={itemOpacity}
             // symbol
+            symbolShape={symbolShape}
             symbolSize={symbolSize}
             symbolSpacing={symbolSpacing}
-            symbolShape={symbolShape}
             symbolBorderWidth={symbolBorderWidth}
             symbolBorderColor={symbolBorderColor}
             // interactivity

diff --git a/packages/legends/src/svg/LegendSvg.js b/packages/legends/src/svg/LegendSvg.js
@@ -39,9 +39,9 @@ const LegendSvg = ({
     itemBackground,
     itemOpacity,
     // symbol
+    symbolShape,
     symbolSize,
     symbolSpacing,
-    symbolShape,
     symbolBorderWidth,
     symbolBorderColor,
     // interactivity
@@ -85,9 +85,9 @@ const LegendSvg = ({
                     background={itemBackground}
                     opacity={itemOpacity}
                     // symbol
+                    symbolShape={symbolShape}
                     symbolSize={symbolSize}
                     symbolSpacing={symbolSpacing}
-                    symbolShape={symbolShape}
                     symbolBorderWidth={symbolBorderWidth}
                     symbolBorderColor={symbolBorderColor}
                     // interactivity

diff --git a/packages/legends/src/svg/LegendSvgItem.js b/packages/legends/src/svg/LegendSvgItem.js
@@ -8,6 +8,7 @@
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { isFunction } from 'lodash'
 import {
     DIRECTION_LEFT_TO_RIGHT,
     DIRECTION_RIGHT_TO_LEFT,
@@ -63,9 +64,9 @@ export default class LegendSvgItem extends Component {
         opacity: 1,
 
         // symbol
+        symbolShape: 'square',
         symbolSize: 16,
         symbolSpacing: 8,
-        symbolShape: 'square',
         symbolBorderWidth: 0,
         symbolBorderColor: 'transparent',
 
@@ -134,9 +135,9 @@ export default class LegendSvgItem extends Component {
             background,
             opacity,
             // symbol
+            symbolShape,
             symbolSize,
             symbolSpacing,
-            symbolShape,
             symbolBorderWidth,
             symbolBorderColor,
             // interactivity
@@ -161,7 +162,12 @@ export default class LegendSvgItem extends Component {
             handler => handler !== undefined
         )
 
-        const Symbol = symbolByShape[symbolShape]
+        let Symbol
+        if (isFunction(symbolShape)) {
+            Symbol = symbolShape
+        } else {
+            Symbol = symbolByShape[symbolShape]
+        }
 
         return (
             <g
@@ -181,18 +187,17 @@ export default class LegendSvgItem extends Component {
                     onMouseEnter={this.handleMouseEnter}
                     onMouseLeave={this.handleMouseLeave}
                 />
-                <Symbol
-                    x={symbolX}
-                    y={symbolY}
-                    size={style.symbolSize || symbolSize}
-                    fill={data.fill}
-                    borderWidth={
+                {React.createElement(Symbol, {
+                    x: symbolX,
+                    y: symbolY,
+                    size: style.symbolSize || symbolSize,
+                    fill: data.fill,
+                    borderWidth:
                         style.symbolBorderWidth !== undefined
                             ? style.symbolBorderWidth
-                            : symbolBorderWidth
-                    }
-                    borderColor={style.symbolBorderColor || symbolBorderColor}
-                />
+                            : symbolBorderWidth,
+                    borderColor: style.symbolBorderColor || symbolBorderColor,
+                })}
                 <text
                     textAnchor={labelAnchor}
                     style={{