react-slider - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

CHANGELOG.md

@@ -1,5 +0,18 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.0.10](https://github.com/zillow/react-slider/compare/v1.0.9...v1.0.10) (2020-09-21)
+
+
+### Build System
+
+* update create-react-styleguide@^6 ([222ea5f](https://github.com/zillow/react-slider/commit/222ea5f53500d3319b2eed401e2e50ffc432b4ab))
+* update standard-version and add a versionrc to include more config types during releases ([5deae9a](https://github.com/zillow/react-slider/commit/5deae9a8b5cd9f6f304597fca96117c81e86fdc1))
+
+
+### Code Refactoring
+
+* UNSAFE_componentWillReceiveProps replaced in favor of getDerivedStateFromProps ([904e927](https://github.com/zillow/react-slider/commit/904e927bba111820f87726ee09f4890fc4004ba9)), closes [#193](https://github.com/zillow/react-slider/issues/193)
+
 ## [1.0.9](https://github.com/zillow/react-slider/compare/v1.0.8...v1.0.9) (2020-09-08)
@@ -6,0 +19,0 @@

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

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

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

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

package.json

 {
   "name": "react-slider",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Slider component for React",
@@ -49,3 +49,3 @@ "main": "lib/components/ReactSlider/ReactSlider.js",
     "babel-preset-zillow": "^4.3.0",
-    "create-react-styleguide": "^5.2.0",
+    "create-react-styleguide": "^6.0.0",
     "eslint-plugin-jest": "^24.0.0",
@@ -60,3 +60,3 @@ "eslint-plugin-zillow": "^3.7.8",
     "react-test-renderer": "^16.13.1",
-    "standard-version": "^5.0.2",
+    "standard-version": "^9.0.0",
     "styled-components": "^5.2.0"
@@ -63,0 +63,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111528

increased by1.76%

Lines of code

2309

increased by2.03%

No dependency changes