react-slider - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [1.0.11](https://github.com/zillow/react-slider/compare/v1.0.10...v1.0.11) (2020-09-22)
+
+
+### Bug Fixes
+
+* Revert "refactor: UNSAFE_componentWillReceiveProps replaced in favor of getDerivedStateFromProps" to fix controlled components ([d068026](https://github.com/zillow/react-slider/commit/d068026ad1e0b723a5c76a819f927cdf20107f55)), closes [#197](https://github.com/zillow/react-slider/issues/197)
+
 ### [1.0.10](https://github.com/zillow/react-slider/compare/v1.0.9...v1.0.10) (2020-09-21)
@@ -7,0 +14,0 @@

es/components/ReactSlider/__tests__/ReactSlider.test.js

@@ -238,39 +238,2 @@ var _this = this,
   });
-  it('should replace state value when props value changes', function () {
-    var mockRenderThumb = jest.fn();
-    var mockFirstValue = 40;
-    var mockSecondValue = 80;
-    var testRenderer = renderer.create( /*#__PURE__*/React.createElement(ReactSlider, {
-      thumbClassName: "test-thumb",
-      renderThumb: mockRenderThumb,
-      value: mockFirstValue,
-      min: 0,
-      step: 1,
-      __self: _this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 233,
-        columnNumber: 13
-      }
-    }));
-    expect(mockRenderThumb).toHaveBeenCalledTimes(1);
-    expect(mockRenderThumb.mock.calls[0][1].value).toBe(mockFirstValue);
-    renderer.act(function () {
-      testRenderer.update( /*#__PURE__*/React.createElement(ReactSlider, {
-        thumbClassName: "test-thumb",
-        renderThumb: mockRenderThumb,
-        value: mockSecondValue,
-        min: 0,
-        step: 1,
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 246,
-          columnNumber: 17
-        }
-      }));
-    });
-    expect(mockRenderThumb).toHaveBeenCalledTimes(2);
-    expect(mockRenderThumb.mock.calls[1][1].value).toBe(mockSecondValue);
-  });
 });

es/components/ReactSlider/ReactSlider.js

@@ -82,31 +82,2 @@ var _jsxFileName = "/Users/brians/git/react-slider/src/components/ReactSlider/ReactSlider.jsx";
 
-function trimAlignValue(val, props) {
-  return alignValue(trimValue(val, props), props);
-}
-
-function alignValue(val, props) {
-  var valModStep = (val - props.min) % props.step;
-  var alignedValue = val - valModStep;
-
-  if (Math.abs(valModStep) * 2 >= props.step) {
-    alignedValue += valModStep > 0 ? props.step : -props.step;
-  }
-
-  return parseFloat(alignedValue.toFixed(5));
-}
-
-function trimValue(val, props) {
-  var trimmed = val;
-
-  if (trimmed <= props.min) {
-    trimmed = props.min;
-  }
-
-  if (trimmed >= props.max) {
-    trimmed = props.max;
-  }
-
-  return trimmed;
-}
-
 var ReactSlider = /*#__PURE__*/function (_React$Component) {
@@ -261,3 +232,3 @@ _inheritsLoose(ReactSlider, _React$Component);
 
-        var valueAtPos = trimAlignValue(_this.calcValue(_this.calcOffsetFromPosition(position[0])), _this.props);
+        var valueAtPos = _this.trimAlignValue(_this.calcValue(_this.calcOffsetFromPosition(position[0])));
 
@@ -379,5 +350,7 @@ _this.props.onSliderClick(valueAtPos);
       value = sanitizeInValue(_props.defaultValue);
-    } // array for storing resize timeouts ids
+    } // reused throughout the component to store results of iterations over `value`
 
 
+    _this.tempArray = value.slice(); // array for storing resize timeouts ids
+
     _this.pendingResizeTimeouts = [];
@@ -387,3 +360,3 @@ var zIndices = [];
     for (var i = 0; i < value.length; i += 1) {
-      value[i] = trimAlignValue(value[i], _props);
+      value[i] = _this.trimAlignValue(value[i], _props);
       zIndices.push(i);
@@ -397,4 +370,3 @@ }
       value: value,
-      zIndices: zIndices,
-      tempArray: value.slice()
+      zIndices: zIndices
     };
@@ -415,15 +387,20 @@ return _this;
 
-  ReactSlider.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    var value = sanitizeInValue(props.value);
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(newProps) {
+    var value = sanitizeInValue(newProps.value);
 
     if (!value.length) {
-      return null;
+      // eslint-disable-next-line prefer-destructuring
+      value = this.state.value;
+    } // ensure the array keeps the same size as `value`
+
+
+    this.tempArray = value.slice();
+
+    for (var i = 0; i < value.length; i += 1) {
+      this.state.value[i] = this.trimAlignValue(value[i], newProps);
     }
 
-    return Object.assign({}, state, {
-      value: value.map(function (item) {
-        return trimAlignValue(item, props);
-      }),
-      tempArray: value.slice()
-    });
+    if (this.state.value.length > value.length) {
+      this.state.value.length = value.length;
+    }
   };
@@ -515,3 +492,3 @@
     var diffValue = position / (this.state.sliderLength - this.state.thumbSize) * (this.props.max - this.props.min);
-    return trimAlignValue(this.state.startValue + diffValue, this.props);
+    return this.trimAlignValue(this.state.startValue + diffValue);
   };
@@ -604,3 +581,3 @@
     var closestIndex = this.getClosestIndex(pixelOffset);
-    var nextValue = trimAlignValue(this.calcValue(pixelOffset), this.props); // Clone this.state.value since we'll modify it temporarily
+    var nextValue = this.trimAlignValue(this.calcValue(pixelOffset)); // Clone this.state.value since we'll modify it temporarily
     // eslint-disable-next-line zillow/react/no-access-state-in-setstate
@@ -664,3 +641,3 @@
     var oldValue = this.state.value[this.state.index];
-    var newValue = trimAlignValue(oldValue + step, this.props);
+    var newValue = this.trimAlignValue(oldValue + step);
     this.move(Math.min(newValue, this.props.max));
@@ -675,3 +652,3 @@ };
     var oldValue = this.state.value[this.state.index];
-    var newValue = trimAlignValue(oldValue - step, this.props);
+    var newValue = this.trimAlignValue(oldValue - step);
     this.move(Math.max(newValue, this.props.min));
@@ -752,3 +729,3 @@ };
       // eslint-disable-next-line no-param-reassign
-      value[i + 1] = alignValue(padding, this.props);
+      value[i + 1] = this.alignValue(padding);
     }
@@ -760,3 +737,3 @@ };
       // eslint-disable-next-line no-param-reassign
-      value[i - 1] = alignValue(padding, this.props);
+      value[i - 1] = this.alignValue(padding);
     }
@@ -810,2 +787,39 @@ };
 
+  _proto.trimAlignValue = function trimAlignValue(val, props) {
+    return this.alignValue(this.trimValue(val, props), props);
+  };
+
+  _proto.trimValue = function trimValue(val, props) {
+    if (props === void 0) {
+      props = this.props;
+    }
+
+    var trimmed = val;
+
+    if (trimmed <= props.min) {
+      trimmed = props.min;
+    }
+
+    if (trimmed >= props.max) {
+      trimmed = props.max;
+    }
+
+    return trimmed;
+  };
+
+  _proto.alignValue = function alignValue(val, props) {
+    if (props === void 0) {
+      props = this.props;
+    }
+
+    var valModStep = (val - props.min) % props.step;
+    var alignValue = val - valModStep;
+
+    if (Math.abs(valModStep) * 2 >= props.step) {
+      alignValue += valModStep > 0 ? props.step : -props.step;
+    }
+
+    return parseFloat(alignValue.toFixed(5));
+  };
+
   _proto.fireChangeEvent = function fireChangeEvent(event) {
@@ -840,3 +854,3 @@ if (this.props[event]) {
     var length = offset.length;
-    var styles = this.state.tempArray;
+    var styles = this.tempArray;
 
@@ -872,3 +886,3 @@ for (var i = 0; i < length; i += 1) {
 
-    var offset = this.state.tempArray;
+    var offset = this.tempArray;
     var value = this.state.value;
@@ -924,3 +938,3 @@ var l = value.length;
         fileName: _jsxFileName,
-        lineNumber: 311,
+        lineNumber: 284,
         columnNumber: 31
@@ -935,3 +949,3 @@ }
         fileName: _jsxFileName,
-        lineNumber: 312,
+        lineNumber: 285,
         columnNumber: 31
@@ -938,0 +952,0 @@ }

lib/components/ReactSlider/__tests__/ReactSlider.test.js

@@ -220,31 +220,2 @@ "use strict";
   });
-  it('should replace state value when props value changes', function () {
-    var mockRenderThumb = jest.fn();
-    var mockFirstValue = 40;
-    var mockSecondValue = 80;
-
-    var testRenderer = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_ReactSlider.default, {
-      thumbClassName: "test-thumb",
-      renderThumb: mockRenderThumb,
-      value: mockFirstValue,
-      min: 0,
-      step: 1
-    }));
-
-    expect(mockRenderThumb).toHaveBeenCalledTimes(1);
-    expect(mockRenderThumb.mock.calls[0][1].value).toBe(mockFirstValue);
-
-    _reactTestRenderer.default.act(function () {
-      testRenderer.update( /*#__PURE__*/_react.default.createElement(_ReactSlider.default, {
-        thumbClassName: "test-thumb",
-        renderThumb: mockRenderThumb,
-        value: mockSecondValue,
-        min: 0,
-        step: 1
-      }));
-    });
-
-    expect(mockRenderThumb).toHaveBeenCalledTimes(2);
-    expect(mockRenderThumb.mock.calls[1][1].value).toBe(mockSecondValue);
-  });
 });

lib/components/ReactSlider/ReactSlider.js

@@ -88,31 +88,2 @@ "use strict";
 
-function trimAlignValue(val, props) {
-  return alignValue(trimValue(val, props), props);
-}
-
-function alignValue(val, props) {
-  var valModStep = (val - props.min) % props.step;
-  var alignedValue = val - valModStep;
-
-  if (Math.abs(valModStep) * 2 >= props.step) {
-    alignedValue += valModStep > 0 ? props.step : -props.step;
-  }
-
-  return parseFloat(alignedValue.toFixed(5));
-}
-
-function trimValue(val, props) {
-  var trimmed = val;
-
-  if (trimmed <= props.min) {
-    trimmed = props.min;
-  }
-
-  if (trimmed >= props.max) {
-    trimmed = props.max;
-  }
-
-  return trimmed;
-}
-
 var ReactSlider = /*#__PURE__*/function (_React$Component) {
@@ -267,3 +238,3 @@ _inheritsLoose(ReactSlider, _React$Component);
 
-        var valueAtPos = trimAlignValue(_this.calcValue(_this.calcOffsetFromPosition(position[0])), _this.props);
+        var valueAtPos = _this.trimAlignValue(_this.calcValue(_this.calcOffsetFromPosition(position[0])));
 
@@ -385,5 +356,7 @@ _this.props.onSliderClick(valueAtPos);
       value = sanitizeInValue(_props.defaultValue);
-    } // array for storing resize timeouts ids
+    } // reused throughout the component to store results of iterations over `value`
 
 
+    _this.tempArray = value.slice(); // array for storing resize timeouts ids
+
     _this.pendingResizeTimeouts = [];
@@ -393,3 +366,3 @@ var zIndices = [];
     for (var i = 0; i < value.length; i += 1) {
-      value[i] = trimAlignValue(value[i], _props);
+      value[i] = _this.trimAlignValue(value[i], _props);
       zIndices.push(i);
@@ -403,4 +376,3 @@ }
       value: value,
-      zIndices: zIndices,
-      tempArray: value.slice()
+      zIndices: zIndices
     };
@@ -421,15 +393,20 @@ return _this;
 
-  ReactSlider.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    var value = sanitizeInValue(props.value);
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(newProps) {
+    var value = sanitizeInValue(newProps.value);
 
     if (!value.length) {
-      return null;
+      // eslint-disable-next-line prefer-destructuring
+      value = this.state.value;
+    } // ensure the array keeps the same size as `value`
+
+
+    this.tempArray = value.slice();
+
+    for (var i = 0; i < value.length; i += 1) {
+      this.state.value[i] = this.trimAlignValue(value[i], newProps);
     }
 
-    return Object.assign({}, state, {
-      value: value.map(function (item) {
-        return trimAlignValue(item, props);
-      }),
-      tempArray: value.slice()
-    });
+    if (this.state.value.length > value.length) {
+      this.state.value.length = value.length;
+    }
   };
@@ -521,3 +498,3 @@
     var diffValue = position / (this.state.sliderLength - this.state.thumbSize) * (this.props.max - this.props.min);
-    return trimAlignValue(this.state.startValue + diffValue, this.props);
+    return this.trimAlignValue(this.state.startValue + diffValue);
   };
@@ -610,3 +587,3 @@
     var closestIndex = this.getClosestIndex(pixelOffset);
-    var nextValue = trimAlignValue(this.calcValue(pixelOffset), this.props); // Clone this.state.value since we'll modify it temporarily
+    var nextValue = this.trimAlignValue(this.calcValue(pixelOffset)); // Clone this.state.value since we'll modify it temporarily
     // eslint-disable-next-line zillow/react/no-access-state-in-setstate
@@ -670,3 +647,3 @@
     var oldValue = this.state.value[this.state.index];
-    var newValue = trimAlignValue(oldValue + step, this.props);
+    var newValue = this.trimAlignValue(oldValue + step);
     this.move(Math.min(newValue, this.props.max));
@@ -681,3 +658,3 @@ };
     var oldValue = this.state.value[this.state.index];
-    var newValue = trimAlignValue(oldValue - step, this.props);
+    var newValue = this.trimAlignValue(oldValue - step);
     this.move(Math.max(newValue, this.props.min));
@@ -758,3 +735,3 @@ };
       // eslint-disable-next-line no-param-reassign
-      value[i + 1] = alignValue(padding, this.props);
+      value[i + 1] = this.alignValue(padding);
     }
@@ -766,3 +743,3 @@ };
       // eslint-disable-next-line no-param-reassign
-      value[i - 1] = alignValue(padding, this.props);
+      value[i - 1] = this.alignValue(padding);
     }
@@ -816,2 +793,39 @@ };
 
+  _proto.trimAlignValue = function trimAlignValue(val, props) {
+    return this.alignValue(this.trimValue(val, props), props);
+  };
+
+  _proto.trimValue = function trimValue(val, props) {
+    if (props === void 0) {
+      props = this.props;
+    }
+
+    var trimmed = val;
+
+    if (trimmed <= props.min) {
+      trimmed = props.min;
+    }
+
+    if (trimmed >= props.max) {
+      trimmed = props.max;
+    }
+
+    return trimmed;
+  };
+
+  _proto.alignValue = function alignValue(val, props) {
+    if (props === void 0) {
+      props = this.props;
+    }
+
+    var valModStep = (val - props.min) % props.step;
+    var alignValue = val - valModStep;
+
+    if (Math.abs(valModStep) * 2 >= props.step) {
+      alignValue += valModStep > 0 ? props.step : -props.step;
+    }
+
+    return parseFloat(alignValue.toFixed(5));
+  };
+
   _proto.fireChangeEvent = function fireChangeEvent(event) {
@@ -846,3 +860,3 @@ if (this.props[event]) {
     var length = offset.length;
-    var styles = this.state.tempArray;
+    var styles = this.tempArray;
 
@@ -878,3 +892,3 @@ for (var i = 0; i < length; i += 1) {
 
-    var offset = this.state.tempArray;
+    var offset = this.tempArray;
     var value = this.state.value;
@@ -881,0 +895,0 @@ var l = value.length;

package.json

 {
   "name": "react-slider",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Slider component for React",
@@ -5,0 +5,0 @@ "main": "lib/components/ReactSlider/ReactSlider.js",

No alert changes

Worsened metrics

Total package byte prevSize

110711

decreased by-0.73%

Lines of code

2263

decreased by-1.99%

No dependency changes