From 7419c912da7b936b1cc8eeb4d8188f11e752125e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Sat, 25 Aug 2018 09:02:42 +0900 Subject: [PATCH] feat(legends): add support for custom symbol shape --- packages/legends/src/props.js | 2 +- packages/legends/src/svg/BoxLegendSvg.js | 4 +-- packages/legends/src/svg/LegendSvg.js | 4 +-- packages/legends/src/svg/LegendSvgItem.js | 31 +++++++++++++---------- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/legends/src/props.js b/packages/legends/src/props.js index c3806c48d..77dbffbf7 100644 --- 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 index 9328bf8ed..780b741b3 100644 --- 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 index 1b43572d1..297808af4 100644 --- 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 index 2b0f2fc4c..30fafcb08 100644 --- 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 ( - + : symbolBorderWidth, + borderColor: style.symbolBorderColor || symbolBorderColor, + })}