Exclude strings representing falsy values in generated classnames (#1242

) * Use classcat to return correct classname (excluding strings representing falsy values) * Replace classcat dependency with custom helper implementation * Bring back accidentally removed pre-push script * Fix styling in previous tests; add component-specific test * Add new line at the end of new file * Align to linter rules
uber · Sep 5, 2019 · 500971f · 500971f
1 parent d698ca8
commit 500971f
Show file tree

Hide file tree

Showing 39 changed files with 192 additions and 66 deletions.
diff --git a/src/legends/continuous-color-legend.js b/src/legends/continuous-color-legend.js
@@ -23,6 +23,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {CONTINUOUS_COLOR_RANGE} from 'theme';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 const propTypes = {
   className: PropTypes.string,
@@ -62,7 +63,7 @@ function ContinuousColorLegend({
   colors.push(endColor);
   return (
     <div
-      className={`rv-continuous-color-legend ${className}`}
+      className={getCombinedClassName("rv-continuous-color-legend", className)}
       style={{width, height}}
     >
       <div

diff --git a/src/legends/continuous-size-legend.js b/src/legends/continuous-size-legend.js
@@ -21,6 +21,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 const propTypes = {
   className: PropTypes.string,
@@ -74,7 +75,7 @@ function ContinuousSizeLegend({
   }
   return (
     <div
-      className={`rv-continuous-size-legend ${className}`}
+      className={getCombinedClassName("rv-continuous-size-legend", className)}
       style={{width, height}}
     >
       <div className="rv-bubbles" style={{height: endSize}}>

diff --git a/src/legends/discrete-color-legend.js b/src/legends/discrete-color-legend.js
@@ -19,11 +19,11 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
 import PropTypes from 'prop-types';
 
 import DiscreteColorLegendItem from 'legends/discrete-color-legend-item';
 import {DISCRETE_COLOR_RANGE} from 'theme';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 function DiscreteColorLegend({
   className,
@@ -39,7 +39,7 @@ function DiscreteColorLegend({
 }) {
   return (
     <div
-      className={`rv-discrete-color-legend ${orientation} ${className}`}
+      className={getCombinedClassName("rv-discrete-color-legend", orientation, className)}
       style={{width, height, ...style}}
     >
       {items.map((item, i) => (

diff --git a/src/legends/searchable-discrete-color-legend.js b/src/legends/searchable-discrete-color-legend.js
@@ -19,10 +19,10 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
 import PropTypes from 'prop-types';
 
 import DiscreteColorLegend from 'legends/discrete-color-legend';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 const propTypes = {
   ...DiscreteColorLegend.propTypes,
@@ -63,7 +63,7 @@ function SearchableDiscreteColorLegend(props) {
     : null;
   const filteredItems = searchFn(items, searchText);
   return (
-    <div className={`rv-search-wrapper ${className}`} style={{width, height}}>
+    <div className={getCombinedClassName("rv-search-wrapper", className)} style={{width, height}}>
       <form className="rv-search-wrapper__form">
         <input
           type="search"

diff --git a/src/parallel-coordinates/index.js b/src/parallel-coordinates/index.js
@@ -31,6 +31,7 @@ import {
   getInnerDimensions,
   DEFAULT_MARGINS
 } from 'utils/chart-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 import LineSeries from 'plot/series/line-series';
 import LineMarkSeries from 'plot/series/line-mark-series';
 import LabelSeries from 'plot/series/label-series';
@@ -221,7 +222,7 @@ class ParallelCoordinates extends Component {
         width={width}
         margin={margin}
         dontCheckIfEmpty
-        className={`${className} ${predefinedClassName}`}
+        className={getCombinedClassName(className, predefinedClassName)}
         onMouseLeave={onMouseLeave}
         onMouseEnter={onMouseEnter}
         xType="ordinal"

diff --git a/src/plot/axis/axis.js b/src/plot/axis/axis.js
@@ -19,12 +19,12 @@
 // THE SOFTWARE.
 
 import React, {PureComponent} from 'react';
-
 import PropTypes from 'prop-types';
 
 import Animation from 'animation';
 import {ORIENTATION, getTicksTotalFromSize} from 'utils/axis-utils';
 import {getAttributeScale} from 'utils/scales-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 import AxisLine from './axis-line';
 import AxisTicks from './axis-ticks';
@@ -209,7 +209,7 @@ class Axis extends PureComponent {
     return (
       <g
         transform={`translate(${leftPos},${topPos})`}
-        className={`${predefinedClassName} ${axisClassName} ${className}`}
+        className={getCombinedClassName(predefinedClassName, axisClassName, className)}
         style={style}
       >
         {!hideLine && (

diff --git a/src/plot/axis/decorative-axis.js b/src/plot/axis/decorative-axis.js
@@ -25,6 +25,7 @@ import PropTypes from 'prop-types';
 import AbstractSeries from 'plot/series/abstract-series';
 import DecorativeAxisTicks from './decorative-axis-ticks';
 import Animation from 'animation';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 const predefinedClassName = 'rv-xy-manipulable-axis rv-xy-plot__axis';
 
@@ -74,7 +75,7 @@ class DecorativeAxis extends AbstractSeries {
 
     return (
       <g
-        className={`${predefinedClassName} ${className}`}
+        className={getCombinedClassName(predefinedClassName, className)}
         transform={`translate(${marginLeft},${marginTop})`}
       >
         <line

diff --git a/src/plot/borders.js b/src/plot/borders.js
@@ -19,8 +19,8 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 const propTypes = {
   style: PropTypes.shape({
@@ -60,33 +60,33 @@ function Borders(props) {
   const height = innerHeight + marginTop + marginBottom;
   const width = innerWidth + marginLeft + marginRight;
   return (
-    <g className={`${CLASSES.container} ${className}`}>
+    <g className={getCombinedClassName(CLASSES.container, className)}>
       <rect
-        className={`${CLASSES.bottom} ${className}-bottom`}
+        className={getCombinedClassName(CLASSES.bottom, `${className}-bottom`)}
         style={{...style.all, ...style.bottom}}
         x={0}
         y={height - marginBottom}
         width={width}
         height={marginBottom}
       />
       <rect
-        className={`${CLASSES.left} ${className}-left`}
+        className={getCombinedClassName(CLASSES.left, `${className}-left`)}
         style={{...style.all, ...style.left}}
         x={0}
         y={0}
         width={marginLeft}
         height={height}
       />
       <rect
-        className={`${CLASSES.right} ${className}-right`}
+        className={getCombinedClassName(CLASSES.right, `${className}-right`)}
         style={{...style.all, ...style.right}}
         x={width - marginRight}
         y={0}
         width={marginRight}
         height={height}
       />
       <rect
-        className={`${CLASSES.top} ${className}-top`}
+        className={getCombinedClassName(CLASSES.top, `${className}-top`)}
         style={{...style.all, ...style.top}}
         x={0}
         y={0}

diff --git a/src/plot/chart-label.js b/src/plot/chart-label.js
@@ -19,9 +19,10 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
 import PropTypes from 'prop-types';
 
+import {getCombinedClassName} from 'utils/styling-utils';
+
 class ChartLabel extends React.PureComponent {
   static get requiresSVG() {
     return true;
@@ -51,7 +52,7 @@ class ChartLabel extends React.PureComponent {
     return (
       <g
         transform={`translate(${xPos}, ${yPos})`}
-        className={`rv-xy-plot__axis__title ${className}`}>
+        className={getCombinedClassName("rv-xy-plot__axis__title", className)}>
         <text {...style}>{text}</text>
       </g>
     );

diff --git a/src/plot/crosshair.js b/src/plot/crosshair.js
@@ -19,12 +19,11 @@
 // THE SOFTWARE.
 
 import React, {PureComponent} from 'react';
-
 import PropTypes from 'prop-types';
 
 import {transformValueToString} from 'utils/data-utils';
-
 import {getAttributeFunctor} from 'utils/scales-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 /**
  * Format title by detault.
@@ -171,7 +170,7 @@ class Crosshair extends PureComponent {
 
     return (
       <div
-        className={`rv-crosshair ${className}`}
+        className={getCombinedClassName("rv-crosshair", className)}
         style={{left: `${left}px`, top: `${top}px`}}
       >
         <div

diff --git a/src/plot/gradient-defs.js b/src/plot/gradient-defs.js
@@ -21,12 +21,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {getCombinedClassName} from 'utils/styling-utils';
+
 const predefinedClassName = 'rv-gradient-defs';
 
 function GradientDefs(props) {
   const {className} = props;
   return (
-    <defs className={`${predefinedClassName} ${className}`}>
+    <defs className={getCombinedClassName(predefinedClassName, className)}>
       {props.children}
     </defs>
   );

diff --git a/src/plot/grid-lines.js b/src/plot/grid-lines.js
@@ -19,10 +19,10 @@
 // THE SOFTWARE.
 
 import React, {PureComponent} from 'react';
-
 import PropTypes from 'prop-types';
 
 import {getAttributeScale} from 'utils/scales-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 import Animation, {AnimationPropType} from 'animation';
 
 import {
@@ -137,7 +137,7 @@ class GridLines extends PureComponent {
     return (
       <g
         transform={`translate(${left},${top})`}
-        className={`rv-xy-plot__grid-lines ${className}`}
+        className={getCombinedClassName("rv-xy-plot__grid-lines", className)}
       >
         {values.map((v, i) => {
           const pos = scale(v);

diff --git a/src/plot/highlight.js b/src/plot/highlight.js
@@ -1,7 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import AbstractSeries from './series/abstract-series';
 import {getAttributeScale} from 'utils/scales-utils';
-import PropTypes from 'prop-types';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 function getLocs(evt) {
   const xLoc = evt.type === 'touchstart' ? evt.pageX : evt.offsetX;
@@ -245,7 +247,7 @@ class Highlight extends AbstractSeries {
     return (
       <g
         transform={`translate(${leftPos}, ${topPos})`}
-        className={`${className} rv-highlight-container`}
+        className={getCombinedClassName(className, "rv-highlight-container")}
       >
         <rect
           className="rv-mouse-target"

diff --git a/src/plot/hint.js b/src/plot/hint.js
@@ -19,12 +19,11 @@
 // THE SOFTWARE.
 
 import React, {PureComponent} from 'react';
-
 import PropTypes from 'prop-types';
 
 import {transformValueToString} from 'utils/data-utils';
-
 import {getAttributeFunctor} from 'utils/scales-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 /*
  * Hint provides two options for placement of hint:
@@ -363,7 +362,7 @@ class Hint extends PureComponent {
     const {position, positionClassName} = this._getPositionInfo();
     return (
       <div
-        className={`rv-hint ${positionClassName} ${className}`}
+        className={getCombinedClassName("rv-hint", positionClassName, className)}
         style={{
           ...style,
           ...position,

diff --git a/src/plot/series/arc-series.js b/src/plot/series/arc-series.js
@@ -19,13 +19,11 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
 import PropTypes from 'prop-types';
-
 import Animation from 'animation';
-import {ANIMATED_SERIES_PROPS} from 'utils/series-utils';
 import {arc as arcBuilder} from 'd3-shape';
 
+import {ANIMATED_SERIES_PROPS} from 'utils/series-utils';
 import AbstractSeries from './abstract-series';
 import {
   getAttributeFunctor,
@@ -34,6 +32,7 @@ import {
   getMissingScaleProps,
   getScalePropTypesByAttribute
 } from 'utils/scales-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 const predefinedClassName = 'rv-xy-plot__series rv-xy-plot__series--arc';
 const ATTRIBUTES = ['radius', 'angle'];
@@ -184,7 +183,7 @@ class ArcSeries extends AbstractSeries {
 
     return (
       <g
-        className={`${predefinedClassName} ${className}`}
+        className={getCombinedClassName(predefinedClassName, className)}
         onMouseOver={this._seriesMouseOverHandler}
         onMouseOut={this._seriesMouseOutHandler}
         onClick={this._seriesClickHandler}

diff --git a/src/plot/series/area-series.js b/src/plot/series/area-series.js
@@ -26,6 +26,7 @@ import Animation from 'animation';
 import {DEFAULT_OPACITY} from 'theme';
 import {ANIMATED_SERIES_PROPS} from 'utils/series-utils';
 import {warning} from 'utils/react-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 import AbstractSeries from './abstract-series';
 
@@ -91,7 +92,7 @@ class AreaSeries extends AbstractSeries {
     return (
       <path
         d={d}
-        className={`${predefinedClassName} ${className}`}
+        className={getCombinedClassName(predefinedClassName, className)}
         transform={`translate(${marginLeft},${marginTop})`}
         onMouseOver={this._seriesMouseOverHandler}
         onMouseOut={this._seriesMouseOutHandler}

diff --git a/src/plot/series/bar-series.js b/src/plot/series/bar-series.js
@@ -19,11 +19,11 @@
 // THE SOFTWARE.
 
 import React from 'react';
-
 import PropTypes from 'prop-types';
 
 import Animation from 'animation';
 import {ANIMATED_SERIES_PROPS, getStackParams} from 'utils/series-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 
 import AbstractSeries from './abstract-series';
 
@@ -91,7 +91,7 @@ class BarSeries extends AbstractSeries {
 
     return (
       <g
-        className={`${predefinedClassName} ${className}`}
+        className={getCombinedClassName(predefinedClassName, className)}
         transform={`translate(${marginLeft},${marginTop})`}
       >
         {data.map((d, i) => {

diff --git a/src/plot/series/contour-series.js b/src/plot/series/contour-series.js
@@ -27,6 +27,7 @@ import {scaleLinear} from 'd3-scale';
 import AbstractSeries from './abstract-series';
 import Animation from 'animation';
 import {ANIMATED_SERIES_PROPS} from 'utils/series-utils';
+import {getCombinedClassName} from 'utils/styling-utils';
 import {CONTINUOUS_COLOR_RANGE} from 'theme';
 
 const predefinedClassName = 'rv-xy-plot__series rv-xy-plot__series--contour';
@@ -86,7 +87,7 @@ class ContourSeries extends AbstractSeries {
       .range(colorRange || CONTINUOUS_COLOR_RANGE);
     return (
       <g
-        className={`${predefinedClassName} ${className}`}
+        className={getCombinedClassName(predefinedClassName, className)}
         transform={`translate(${marginLeft},${marginTop})`}
       >
         {contouredData.map((polygon, index) => {