react-gear-chart - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/components/GearListChart.js

@@ -109,7 +109,10 @@ 'use strict';
     }, _this.motionWillEnter = function () {
-      if (_this.props.clockwiseAnimate) {
-        return { offsetAngle: -_this.totalAnagle() };
-      } else {
-        return { offsetAngle: _this.totalAnagle() };
-      }
+      var clockwiseAnimate = _this.props.clockwiseAnimate;
+
+      var totalAnagle = _this.totalAnagle();
+      var style = {
+        offsetAngle: clockwiseAnimate ? -totalAnagle : totalAnagle,
+        opacity: 0
+      };
+      return style;
     }, _this.motionWillLeave = function () {
@@ -120,7 +123,8 @@ var _this$props = _this.props,
 
-      if (clockwiseAnimate) {
-        return { offsetAngle: (0, _reactMotion.spring)(_this.totalAnagle(), motionConfig) };
-      } else {
-        return { offsetAngle: (0, _reactMotion.spring)(-_this.totalAnagle(), motionConfig) };
-      }
+      var totalAnagle = _this.totalAnagle();
+      var style = {
+        offsetAngle: (0, _reactMotion.spring)(clockwiseAnimate ? totalAnagle : -totalAnagle, motionConfig),
+        opacity: (0, _reactMotion.spring)(0, { stiffness: 80 })
+      };
+      return style;
     }, _this.clearFocus = function () {
@@ -168,2 +172,3 @@ var focused = _this.refs.chart.querySelector('.tooth.focused');
           style = _props2.style,
+          extra = _props2.extra,
           onMouseMove = _props2.onMouseMove,
@@ -174,3 +179,3 @@ onMouseEnter = _props2.onMouseEnter,
           onClick = _props2.onClick,
-          restProps = (0, _objectWithoutProperties3.default)(_props2, ['id', 'innerRadius', 'outerRadius', 'items', 'margin', 'limit', 'startAngle', 'endAngle', 'clockwise', 'clockwiseAnimate', 'motionConfig', 'className', 'style', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onClick']);
+          restProps = (0, _objectWithoutProperties3.default)(_props2, ['id', 'innerRadius', 'outerRadius', 'items', 'margin', 'limit', 'startAngle', 'endAngle', 'clockwise', 'clockwiseAnimate', 'motionConfig', 'className', 'style', 'extra', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onClick']);
 
@@ -220,3 +225,4 @@
                   style: {
-                    offsetAngle: _this2.totalAnagle() * (clockwiseAnimate ? -1 : 1)
+                    offsetAngle: _this2.totalAnagle() * (clockwiseAnimate ? -1 : 1),
+                    opacity: 0
                   }
@@ -230,3 +236,4 @@ };
                   style: {
-                    offsetAngle: (0, _reactMotion.spring)(0, motionConfig)
+                    offsetAngle: (0, _reactMotion.spring)(0, motionConfig),
+                    opacity: (0, _reactMotion.spring)(1)
                   }
@@ -253,3 +260,3 @@ };
                     _react2.default.createElement(_Tooth2.default, {
-                      style: onClick && { cursor: 'pointer' },
+                      style: { cursor: onClick ? 'pointer' : 'inherit', opacity: conf.style.opacity },
                       startAngle: start,
@@ -262,2 +269,4 @@ endAngle: end,
                       innerRadius: innerRadius,
+                      index: i,
+                      data: item,
                       mode: item.mode,
@@ -270,3 +279,4 @@ label: item.label,
                       onMouseOver: onMouseOver && _this2.mouseEventProxy,
-                      onClick: onClick && _this2.mouseEventProxy
+                      onClick: onClick && _this2.mouseEventProxy,
+                      extra: extra
                     })
@@ -273,0 +283,0 @@ );

dist/components/Tooth.js

@@ -113,3 +113,4 @@ 'use strict';
           offsetAngle = _props.offsetAngle,
-          labelMargin = _props.labelMargin;
+          labelMargin = _props.labelMargin,
+          style = _props.style;
 
@@ -127,2 +128,3 @@ var centerlineAngle = startAngle + offsetAngle + this.toothAngle() / 2;
         {
+          style: style,
           className: 'tooth-label',
@@ -273,4 +275,12 @@ ref: 'label',
           label = _props6.label,
-          mode = _props6.mode;
+          mode = _props6.mode,
+          style = _props6.style,
+          extra = _props6.extra,
+          offsetAngle = _props6.offsetAngle,
+          clockwiseAnimate = _props6.clockwiseAnimate;
 
+      var props = (0, _lodashEs.clone)(this.props);
+      var factor = clockwiseAnimate ? -1 : 1;
+      props.startAngle += offsetAngle * factor;
+      props.endAngle += offsetAngle * factor;
       var tooth = void 0;
@@ -290,5 +300,6 @@ switch (mode) {
         'g',
-        { className: 'tooth', ref: 'tooth' },
+        { className: 'tooth', ref: 'tooth', style: style },
         tooth,
-        label && this._renderLabel()
+        label && this._renderLabel(),
+        extra && extra(props)
       );
@@ -295,0 +306,0 @@ }

package.json

 {
   "name": "react-gear-chart",
   "description": "",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": "[e-mail]",
@@ -6,0 +6,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

2660480

increased by0.09%

Lines of code

2290

increased by0.88%

No dependency changes