react-ratings-declarative - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

build/widget-ratings.js

@@ -180,2 +180,13 @@ 'use strict';
       return _react2.default.Children.map(children, function (child, index) {
+        var _child$props = child.props,
+            svgIconPath = _child$props.svgIconPath,
+            svgIconViewBox = _child$props.svgIconViewBox,
+            widgetHoverColor = _child$props.widgetHoverColor,
+            widgetEmptyColor = _child$props.widgetEmptyColor,
+            widgetRatedColor = _child$props.widgetRatedColor,
+            widgetDimension = _child$props.widgetDimension,
+            widgetSpacing = _child$props.widgetSpacing,
+            svg = _child$props.svg;
+
+
         var widgetRating = index + 1;
@@ -213,10 +224,11 @@ var isSelected = widgetRating <= selectedRating;
           hoverMode: hoverMode,
-          inheritSvgIconPath: svgIconPaths,
-          inheritSvgIconViewBox: svgIconViewBoxes,
-          inheritWidgetHoverColor: widgetHoverColors,
-          inheritWidgetEmptyColor: widgetEmptyColors,
-          inheritWidgetRatedColor: widgetRatedColors,
-          inheritWidgetDimension: widgetDimensions,
-          inheritWidgetSpacing: widgetSpacings,
-          inheritSvg: svgs
+          hasCustomGradientColor: (widgetRatedColor || widgetEmptyColor) && isPartiallyFullWidget,
+          svgIconPath: svgIconPath || svgIconPaths,
+          svgIconViewBox: svgIconViewBox || svgIconViewBoxes,
+          widgetHoverColor: widgetHoverColor || widgetHoverColors,
+          widgetEmptyColor: widgetEmptyColor || widgetEmptyColors,
+          widgetRatedColor: widgetRatedColor || widgetRatedColors,
+          widgetDimension: widgetDimension || widgetDimensions,
+          widgetSpacing: widgetSpacing || widgetSpacings,
+          svg: svg || svgs
         });
@@ -223,0 +235,0 @@ });

build/widget.js

@@ -41,3 +41,3 @@ 'use strict';
 
-    if (props.isPartiallyFullWidget && props.widgetRatedColor) {
+    if (props.hasCustomGradientColor) {
       _this.fillId = 'widgetGrad' + (0, _utils.randomNumber)();
@@ -64,29 +64,11 @@ }
           unHoverOverWidget = _props.unHoverOverWidget,
-          isPartiallyFullWidget = _props.isPartiallyFullWidget,
+          inheritFillId = _props.inheritFillId,
+          svgIconViewBox = _props.svgIconViewBox,
           svgIconPath = _props.svgIconPath,
-          inheritSvgIconPath = _props.inheritSvgIconPath,
-          svgIconViewBox = _props.svgIconViewBox,
-          inheritSvgIconViewBox = _props.inheritSvgIconViewBox,
-          widgetRatedColor = _props.widgetRatedColor,
-          inheritWidgetRatedColor = _props.inheritWidgetRatedColor,
-          widgetEmptyColor = _props.widgetEmptyColor,
-          inheritWidgetEmptyColor = _props.inheritWidgetEmptyColor,
-          widgetHoverColor = _props.widgetHoverColor,
-          inheritWidgetHoverColor = _props.inheritWidgetHoverColor,
-          widgetDimension = _props.widgetDimension,
-          inheritWidgetDimension = _props.inheritWidgetDimension,
-          widgetSpacing = _props.widgetSpacing,
-          inheritWidgetSpacing = _props.inheritWidgetSpacing,
-          inheritFillId = _props.inheritFillId,
-          inheritSvg = _props.inheritSvg,
-          svg = _props.svg;
+          svg = _props.svg,
+          hasCustomGradientColor = _props.hasCustomGradientColor;
 
-      var customSvg = svg || inheritSvg;
+      var customSvg = svg;
       if (_react2.default.isValidElement(customSvg)) {
         customSvg = _react2.default.cloneElement(customSvg, _extends({}, this.props, {
-          widgetRatedColor: widgetRatedColor || inheritWidgetRatedColor,
-          widgetEmptyColor: widgetEmptyColor || inheritWidgetEmptyColor,
-          widgetHoverColor: widgetHoverColor || inheritWidgetHoverColor,
-          widgetDimension: widgetDimension || inheritWidgetDimension,
-          widgetSpacing: widgetSpacing || inheritWidgetSpacing,
           fillId: this.fillId || inheritFillId
@@ -107,11 +89,11 @@ }));
           {
-            viewBox: svgIconViewBox || inheritSvgIconViewBox,
+            viewBox: svgIconViewBox,
             className: this.widgetClasses,
             style: this.widgetSvgStyle
           },
-          isPartiallyFullWidget && widgetRatedColor ? this.renderIndividualGradient : null,
+          hasCustomGradientColor ? this.renderIndividualGradient : null,
           _react2.default.createElement('path', {
             className: 'widget',
             style: this.pathStyle,
-            d: svgIconPath || inheritSvgIconPath
+            d: svgIconPath
           })
@@ -127,3 +109,2 @@ )
           widgetSpacing = _props2.widgetSpacing,
-          inheritWidgetSpacing = _props2.inheritWidgetSpacing,
           isFirstWidget = _props2.isFirstWidget,
@@ -138,4 +119,4 @@ isLastWidget = _props2.isLastWidget,
         verticalAlign: 'middle',
-        paddingLeft: isFirstWidget ? undefined : widgetSpacing || inheritWidgetSpacing,
-        paddingRight: isLastWidget ? undefined : widgetSpacing || inheritWidgetSpacing,
+        paddingLeft: isFirstWidget ? undefined : widgetSpacing,
+        paddingRight: isLastWidget ? undefined : widgetSpacing,
         cursor: changeRating ? 'pointer' : undefined
@@ -151,8 +132,7 @@ };
           isCurrentHoveredWidget = _props3.isCurrentHoveredWidget,
-          widgetDimension = _props3.widgetDimension,
-          inheritWidgetDimension = _props3.inheritWidgetDimension;
+          widgetDimension = _props3.widgetDimension;
 
       var widgetSvgStyle = {
-        width: widgetDimension || inheritWidgetDimension,
-        height: widgetDimension || inheritWidgetDimension,
+        width: widgetDimension,
+        height: widgetDimension,
         transition: 'transform .2s ease-in-out',
@@ -175,5 +155,2 @@ transform: isCurrentHoveredWidget ? 'scale(1.1)' : undefined
           widgetHoverColor = _props4.widgetHoverColor,
-          inheritWidgetEmptyColor = _props4.inheritWidgetEmptyColor,
-          inheritWidgetRatedColor = _props4.inheritWidgetRatedColor,
-          inheritWidgetHoverColor = _props4.inheritWidgetHoverColor,
           gradientPathName = _props4.gradientPathName,
@@ -186,5 +163,5 @@ inheritFillId = _props4.inheritFillId,
       if (hoverMode) {
-        if (isHovered) fill = widgetHoverColor || inheritWidgetHoverColor;else fill = widgetEmptyColor || inheritWidgetEmptyColor;
+        if (isHovered) fill = widgetHoverColor;else fill = widgetEmptyColor;
       } else {
-        if (isPartiallyFullWidget) fill = 'url(\'' + gradientPathName + '#' + (this.fillId || inheritFillId) + '\')';else if (isSelected) fill = widgetRatedColor || inheritWidgetRatedColor;else fill = widgetEmptyColor || inheritWidgetEmptyColor;
+        if (isPartiallyFullWidget) fill = 'url(\'' + gradientPathName + '#' + (this.fillId || inheritFillId) + '\')';else if (isSelected) fill = widgetRatedColor;else fill = widgetEmptyColor;
       }
@@ -237,4 +214,3 @@
           widgetRatedColor = _props6.widgetRatedColor,
-          widgetEmptyColor = _props6.widgetEmptyColor,
-          inheritWidgetEmptyColor = _props6.inheritWidgetEmptyColor;
+          widgetEmptyColor = _props6.widgetEmptyColor;
 
@@ -249,4 +225,4 @@ return _react2.default.createElement(
           _react2.default.createElement('stop', { offset: this.offsetValue, className: 'stop-color-first', style: this.stopColorStyle(widgetRatedColor) }),
-          _react2.default.createElement('stop', { offset: this.offsetValue, className: 'stop-color-final', style: this.stopColorStyle(widgetEmptyColor || inheritWidgetEmptyColor) }),
-          _react2.default.createElement('stop', { offset: '100%', className: 'stop-color-final', style: this.stopColorStyle(widgetEmptyColor || inheritWidgetEmptyColor) })
+          _react2.default.createElement('stop', { offset: this.offsetValue, className: 'stop-color-final', style: this.stopColorStyle(widgetEmptyColor) }),
+          _react2.default.createElement('stop', { offset: '100%', className: 'stop-color-final', style: this.stopColorStyle(widgetEmptyColor) })
         )
@@ -273,9 +249,3 @@ );
   hoverMode: _propTypes2.default.bool,
-  inheritSvgIconPaths: _propTypes2.default.string,
-  inheritSvgIconViewBox: _propTypes2.default.string,
-  inheritWidgetRatedColor: _propTypes2.default.string,
-  inheritWidgetEmptyColor: _propTypes2.default.string,
-  inheritWidgetHoverColor: _propTypes2.default.string,
-  inheritWidgetDimension: _propTypes2.default.string,
-  inheritWidgetSpacing: _propTypes2.default.string,
+  hasCustomGradientColor: _propTypes2.default.bool,
 
@@ -285,2 +255,3 @@ // customizable
   svgIconViewBox: _propTypes2.default.string,
+  svg: _propTypes2.default.node,
   widgetRatedColor: _propTypes2.default.string,
@@ -290,6 +261,5 @@ widgetEmptyColor: _propTypes2.default.string,
   widgetDimension: _propTypes2.default.string,
-  widgetSpacing: _propTypes2.default.string,
-  svg: _propTypes2.default.node
+  widgetSpacing: _propTypes2.default.string
 };
 
 exports.default = Widget;

package.json

 {
   "name": "react-ratings-declarative",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A customizable rating component for selecting x widgets or visualizing x widgets",
@@ -5,0 +5,0 @@ "main": "build/index.js",

src/widget-ratings.js

@@ -111,2 +111,13 @@ import React, { Component } from 'react';
     return React.Children.map(children, (child, index) => {
+      const {
+        svgIconPath,
+        svgIconViewBox,
+        widgetHoverColor,
+        widgetEmptyColor,
+        widgetRatedColor,
+        widgetDimension,
+        widgetSpacing,
+        svg
+      } = child.props;
+
       const widgetRating = index + 1;
@@ -142,10 +153,11 @@ const isSelected = widgetRating <= selectedRating;
         hoverMode,
-        inheritSvgIconPath: svgIconPaths,
-        inheritSvgIconViewBox: svgIconViewBoxes,
-        inheritWidgetHoverColor: widgetHoverColors,
-        inheritWidgetEmptyColor: widgetEmptyColors,
-        inheritWidgetRatedColor: widgetRatedColors,
-        inheritWidgetDimension: widgetDimensions,
-        inheritWidgetSpacing: widgetSpacings,
-        inheritSvg: svgs
+        hasCustomGradientColor: (widgetRatedColor || widgetEmptyColor) && isPartiallyFullWidget,
+        svgIconPath: svgIconPath || svgIconPaths,
+        svgIconViewBox: svgIconViewBox || svgIconViewBoxes,
+        widgetHoverColor: widgetHoverColor || widgetHoverColors,
+        widgetEmptyColor: widgetEmptyColor || widgetEmptyColors,
+        widgetRatedColor: widgetRatedColor || widgetRatedColors,
+        widgetDimension: widgetDimension || widgetDimensions,
+        widgetSpacing: widgetSpacing || widgetSpacings,
+        svg: svg || svgs
       });
@@ -152,0 +164,0 @@ });

src/widget.js

@@ -9,3 +9,3 @@ import React, { Component } from 'react';
     super(props);
-    if (props.isPartiallyFullWidget && props.widgetRatedColor) {
+    if (props.hasCustomGradientColor) {
       this.fillId = `widgetGrad${randomNumber()}`;
@@ -20,3 +20,2 @@ }
       widgetSpacing,
-      inheritWidgetSpacing,
       isFirstWidget,
@@ -31,4 +30,4 @@ isLastWidget,
       verticalAlign: 'middle',
-      paddingLeft: isFirstWidget ? undefined : widgetSpacing || inheritWidgetSpacing,
-      paddingRight: isLastWidget ? undefined : widgetSpacing || inheritWidgetSpacing,
+      paddingLeft: isFirstWidget ? undefined : widgetSpacing,
+      paddingRight: isLastWidget ? undefined : widgetSpacing,
       cursor: changeRating ? 'pointer' : undefined
@@ -45,7 +44,6 @@ };
       widgetDimension,
-      inheritWidgetDimension
     } = this.props;
     const widgetSvgStyle = {
-      width: widgetDimension || inheritWidgetDimension,
-      height: widgetDimension || inheritWidgetDimension,
+      width: widgetDimension,
+      height: widgetDimension,
       transition: 'transform .2s ease-in-out',
@@ -68,5 +66,2 @@ transform: isCurrentHoveredWidget ? 'scale(1.1)' : undefined
       widgetHoverColor,
-      inheritWidgetEmptyColor,
-      inheritWidgetRatedColor,
-      inheritWidgetHoverColor,
       gradientPathName,
@@ -79,8 +74,8 @@ inheritFillId,
     if (hoverMode) {
-      if (isHovered) fill = widgetHoverColor || inheritWidgetHoverColor;
-      else fill = widgetEmptyColor || inheritWidgetEmptyColor;
+      if (isHovered) fill = widgetHoverColor;
+      else fill = widgetEmptyColor;
     } else {
       if (isPartiallyFullWidget) fill = `url('${gradientPathName}#${this.fillId || inheritFillId}')`;
-      else if (isSelected) fill = widgetRatedColor || inheritWidgetRatedColor;
-      else fill = widgetEmptyColor || inheritWidgetEmptyColor;
+      else if (isSelected) fill = widgetRatedColor;
+      else fill = widgetEmptyColor;
     }
@@ -142,3 +137,2 @@
       widgetEmptyColor,
-      inheritWidgetEmptyColor
     } = this.props;
@@ -150,4 +144,4 @@ return (
           <stop offset={this.offsetValue} className="stop-color-first" style={this.stopColorStyle(widgetRatedColor)} />
-          <stop offset={this.offsetValue} className="stop-color-final" style={this.stopColorStyle(widgetEmptyColor || inheritWidgetEmptyColor)} />
-          <stop offset="100%" className="stop-color-final" style={this.stopColorStyle(widgetEmptyColor || inheritWidgetEmptyColor)} />
+          <stop offset={this.offsetValue} className="stop-color-final" style={this.stopColorStyle(widgetEmptyColor)} />
+          <stop offset="100%" className="stop-color-final" style={this.stopColorStyle(widgetEmptyColor)} />
         </linearGradient>
@@ -163,30 +157,12 @@ </defs>
       unHoverOverWidget,
-      isPartiallyFullWidget,
+      inheritFillId,
+      svgIconViewBox,
       svgIconPath,
-      inheritSvgIconPath,
-      svgIconViewBox,
-      inheritSvgIconViewBox,
-      widgetRatedColor,
-      inheritWidgetRatedColor,
-      widgetEmptyColor,
-      inheritWidgetEmptyColor,
-      widgetHoverColor,
-      inheritWidgetHoverColor,
-      widgetDimension,
-      inheritWidgetDimension,
-      widgetSpacing,
-      inheritWidgetSpacing,
-      inheritFillId,
-      inheritSvg,
-      svg
+      svg,
+      hasCustomGradientColor
     } = this.props;
-    let customSvg = svg || inheritSvg;
+    let customSvg = svg;
     if (React.isValidElement(customSvg)) {
       customSvg = React.cloneElement(customSvg, {
         ...this.props,
-        widgetRatedColor: widgetRatedColor || inheritWidgetRatedColor,
-        widgetEmptyColor: widgetEmptyColor || inheritWidgetEmptyColor,
-        widgetHoverColor: widgetHoverColor || inheritWidgetHoverColor,
-        widgetDimension: widgetDimension || inheritWidgetDimension,
-        widgetSpacing: widgetSpacing || inheritWidgetSpacing,
         fillId: this.fillId || inheritFillId
@@ -205,11 +181,11 @@ });
           <svg
-            viewBox={svgIconViewBox || inheritSvgIconViewBox}
+            viewBox={svgIconViewBox}
             className={this.widgetClasses}
             style={this.widgetSvgStyle}
           >
-            {isPartiallyFullWidget && widgetRatedColor ? this.renderIndividualGradient : null}
+            {hasCustomGradientColor ? this.renderIndividualGradient : null}
             <path
               className="widget"
               style={this.pathStyle}
-              d={svgIconPath || inheritSvgIconPath}
+              d={svgIconPath}
             />
@@ -236,10 +212,3 @@ </svg>
   hoverMode: PropTypes.bool,
-  inheritSvgIconPaths: PropTypes.string,
-  inheritSvgIconViewBox: PropTypes.string,
-  inheritSvg: PropTypes.string,
-  inheritWidgetRatedColor: PropTypes.string,
-  inheritWidgetEmptyColor: PropTypes.string,
-  inheritWidgetHoverColor: PropTypes.string,
-  inheritWidgetDimension: PropTypes.string,
-  inheritWidgetSpacing: PropTypes.string,
+  hasCustomGradientColor: PropTypes.bool,
 
@@ -246,0 +215,0 @@ // customizable

No alert changes

Worsened metrics

Total package byte prevSize

43660

decreased by-5.75%

Lines of code

934

decreased by-4.11%

No dependency changes