react-range - npm Package Compare versions

Comparing version 1.8.7 to 1.8.8

lib/index.d.ts

 import Range from './Range';
-import { getTrackBackground, useThumbOverlap, relativeValue } from './utils';
+import { getTrackBackground, useThumbOverlap, relativeValue, checkValuesAgainstBoundaries } from './utils';
 import { Direction } from './types';
-export { Range, getTrackBackground, Direction, useThumbOverlap, relativeValue };
+export { Range, getTrackBackground, Direction, useThumbOverlap, relativeValue, checkValuesAgainstBoundaries };

lib/index.js

@@ -6,9 +6,11 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkValuesAgainstBoundaries = exports.relativeValue = exports.useThumbOverlap = exports.Direction = exports.getTrackBackground = exports.Range = void 0;
 var Range_1 = __importDefault(require("./Range"));
 exports.Range = Range_1.default;
 var utils_1 = require("./utils");
-exports.getTrackBackground = utils_1.getTrackBackground;
-exports.useThumbOverlap = utils_1.useThumbOverlap;
-exports.relativeValue = utils_1.relativeValue;
+Object.defineProperty(exports, "getTrackBackground", { enumerable: true, get: function () { return utils_1.getTrackBackground; } });
+Object.defineProperty(exports, "useThumbOverlap", { enumerable: true, get: function () { return utils_1.useThumbOverlap; } });
+Object.defineProperty(exports, "relativeValue", { enumerable: true, get: function () { return utils_1.relativeValue; } });
+Object.defineProperty(exports, "checkValuesAgainstBoundaries", { enumerable: true, get: function () { return utils_1.checkValuesAgainstBoundaries; } });
 var types_1 = require("./types");
-exports.Direction = types_1.Direction;
+Object.defineProperty(exports, "Direction", { enumerable: true, get: function () { return types_1.Direction; } });

lib/Range.d.ts

@@ -31,3 +31,3 @@ import * as React from 'react';
     componentDidMount(): void;
-    componentDidUpdate(prevProps: IProps): void;
+    componentDidUpdate(prevProps: IProps, prevState: any): void;
     componentWillUnmount(): void;
@@ -42,10 +42,10 @@ getOffsets: () => {
     addMouseEvents: (e: MouseEvent) => void;
-    onMouseDownTrack: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    onMouseDownTrack: (e: React.MouseEvent) => void;
     onResize: () => void;
-    onTouchStartTrack: (e: React.TouchEvent<Element>) => void;
+    onTouchStartTrack: (e: React.TouchEvent) => void;
     onMouseOrTouchStart: (e: MouseEvent & TouchEvent) => void;
     onMouseMove: (e: MouseEvent) => void;
     onTouchMove: (e: TouchEvent) => void;
-    onKeyDown: (e: React.KeyboardEvent<Element>) => void;
-    onKeyUp: (e: React.KeyboardEvent<Element>) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onKeyUp: (e: React.KeyboardEvent) => void;
     onMove: (clientX: number, clientY: number) => null | undefined;
@@ -52,0 +52,0 @@ normalizeValue: (value: number, index: number) => number;

lib/Range.js

@@ -6,3 +6,3 @@ "use strict";
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
@@ -16,2 +16,21 @@ };
 })();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __spreadArrays = (this && this.__spreadArrays) || function () {
@@ -24,9 +43,2 @@ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -269,3 +281,5 @@ var React = __importStar(require("react"));
             var _b = _this.props, direction = _b.direction, min = _b.min, max = _b.max, onChange = _b.onChange, values = _b.values, step = _b.step, rtl = _b.rtl;
-            if (draggedThumbIndex === -1 && draggedTrackPos[0] === -1 && draggedTrackPos[1] === -1)
+            if (draggedThumbIndex === -1 &&
+                draggedTrackPos[0] === -1 &&
+                draggedTrackPos[1] === -1)
                 return null;
@@ -289,7 +303,7 @@ var trackElement = _this.trackRef.current;
                     case types_1.Direction.Left:
-                        deltaValue = (dX / trackLength) * (max - min) + min;
+                        deltaValue = (dX / trackLength) * (max - min);
                         break;
                     case types_1.Direction.Down:
                     case types_1.Direction.Up:
-                        deltaValue = (dY / trackLength) * (max - min) + min;
+                        deltaValue = (dY / trackLength) * (max - min);
                         break;
@@ -306,3 +320,4 @@ default:
                     for (var i = 0; i < _this.thumbRefs.length; i++) {
-                        if ((values[i] === max && Math.sign(deltaValue) === 1) || (values[i] === min && Math.sign(deltaValue) === -1))
+                        if ((values[i] === max && Math.sign(deltaValue) === 1) ||
+                            (values[i] === min && Math.sign(deltaValue) === -1))
                             return;
@@ -321,3 +336,3 @@ var thumbValue = values[i] + deltaValue;
                     _this.setState({
-                        draggedTrackPos: [clientX, clientY],
+                        draggedTrackPos: [clientX, clientY]
                     });
@@ -373,3 +388,5 @@ onChange(newValues);
             document.removeEventListener('touchcancel', _this.schdOnEnd);
-            if (_this.state.draggedThumbIndex === -1 && _this.state.draggedTrackPos[0] === -1 && _this.state.draggedTrackPos[1] === -1)
+            if (_this.state.draggedThumbIndex === -1 &&
+                _this.state.draggedTrackPos[0] === -1 &&
+                _this.state.draggedTrackPos[1] === -1)
                 return null;
@@ -430,5 +447,2 @@ _this.setState({ draggedThumbIndex: -1, draggedTrackPos: [-1, -1] }, function () {
         }
-        if (!utils_1.isStepDivisible(props.min, props.max, props.step)) {
-            console.warn('The difference of `max` and `min` must be divisible by `step`');
-        }
         if (props.step === 0) {
@@ -446,5 +460,3 @@ throw new Error('"step" property should be a positive number');
                 observe: function () { return window.addEventListener('resize', _this.onResize); },
-                unobserve: function () {
-                    return window.removeEventListener('resize', _this.onResize);
-                }
+                unobserve: function () { return window.removeEventListener('resize', _this.onResize); }
             };
@@ -470,4 +482,28 @@ document.addEventListener('touchstart', this.onMouseOrTouchStart, {
     };
-    Range.prototype.componentDidUpdate = function (prevProps) {
-        utils_1.translateThumbs(this.getThumbs(), this.getOffsets(), this.props.rtl);
+    Range.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a = this.props, max = _a.max, min = _a.min, step = _a.step, values = _a.values, rtl = _a.rtl;
+        if (prevProps.max !== max ||
+            prevProps.min !== min ||
+            prevProps.step !== step) {
+            this.markRefs = [];
+            this.numOfMarks = (max - min) / step;
+            for (var i = 0; i < this.numOfMarks + 1; i++) {
+                this.markRefs[i] = React.createRef();
+            }
+        }
+        utils_1.translateThumbs(this.getThumbs(), this.getOffsets(), rtl);
+        // ensure offsets are calculated when the refs for the marks have been created
+        // and those refs have been mounted to the dom
+        // on the state update in calculateOffsets with new markOffsets are calculated
+        if (prevProps.max !== max ||
+            prevProps.min !== min ||
+            prevProps.step !== step ||
+            prevState.markOffsets.length !== this.state.markOffsets.length) {
+            this.calculateMarkOffsets();
+            values.forEach(function (value) {
+                if (!utils_1.isStepDivisible(min, value, step)) {
+                    console.warn('The `values` property is in conflict with the current `step`, `min`, and `max` properties. Please provide values that are accessible using the min, max, and step values.');
+                }
+            });
+        }
     };
@@ -513,3 +549,3 @@ Range.prototype.componentWillUnmount = function () {
             disabled: disabled,
-            children: __spreadArrays(markOffsets.map(function (offset, index) {
+            children: __spreadArrays(markOffsets.map(function (offset, index, arr) {
                 return renderMark({
@@ -516,0 +552,0 @@ props: {

lib/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Direction = void 0;
 var Direction;
@@ -4,0 +5,0 @@ (function (Direction) {

lib/utils.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
 export declare function checkBoundaries(value: number, min: number, max: number): void;
+export declare function checkValuesAgainstBoundaries(value: number, min: number, max: number): number;
 export declare function checkInitialOverlap(values: number[]): void;
@@ -13,0 +14,0 @@ export declare function getMargin(element: Element): {

lib/utils.js

@@ -10,8 +10,10 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThumbOverlap = exports.assertUnreachable = exports.voidFn = exports.getTrackBackground = exports.replaceAt = exports.schd = exports.translate = exports.getClosestThumbIndex = exports.translateThumbs = exports.getPaddingAndBorder = exports.getMargin = exports.checkInitialOverlap = exports.checkValuesAgainstBoundaries = exports.checkBoundaries = exports.isVertical = exports.relativeValue = exports.normalizeValue = exports.isStepDivisible = exports.isTouchEvent = exports.getStepDecimals = void 0;
 var react_1 = require("react");
 var types_1 = require("./types");
-exports.getStepDecimals = function (step) {
+var getStepDecimals = function (step) {
     var decimals = step.toString().split('.')[1];
     return decimals ? decimals.length : 0;
 };
+exports.getStepDecimals = getStepDecimals;
 function isTouchEvent(event) {
@@ -78,2 +80,16 @@ return ((event.touches && event.touches.length) ||
 exports.checkBoundaries = checkBoundaries;
+function checkValuesAgainstBoundaries(value, min, max) {
+    if (value < min) {
+        // set selectedValue to min
+        return min;
+    }
+    if (value > max) {
+        // set selectedValue to max
+        return max;
+    }
+    else {
+        return value;
+    }
+}
+exports.checkValuesAgainstBoundaries = checkValuesAgainstBoundaries;
 function checkInitialOverlap(values) {
@@ -139,3 +155,3 @@ if (values.length < 2)
 // adapted from https://github.com/alexreardon/raf-schd
-exports.schd = function (fn) {
+var schd = function (fn) {
     var lastArgs = [];
@@ -159,2 +175,3 @@ var frameId = null;
 };
+exports.schd = schd;
 function replaceAt(values, index, value) {
@@ -280,3 +297,3 @@ var ret = values.slice(0);
  */
-exports.useThumbOverlap = function (rangeRef, values, index, step, separator, valueToLabel) {
+var useThumbOverlap = function (rangeRef, values, index, step, separator, valueToLabel) {
     if (step === void 0) { step = 0.1; }
@@ -366,2 +383,3 @@ if (separator === void 0) { separator = ' - '; }
 };
+exports.useThumbOverlap = useThumbOverlap;
 /**
@@ -368,0 +386,0 @@ * Util function for calculating the distance of the center of a thumb

package.json

 {
   "name": "react-range",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Range input. Slides in all directions.",
@@ -17,12 +17,10 @@ "main": "lib/index.js",
   "scripts": {
-    "build": "rm -rf lib && tsc --outDir lib && cp flowtypes/* lib && rm lib/*.test.*",
-    "build-storybook": "build-storybook -s public && rm ./examples/*.d.ts && rm ./src/*.d.ts",
+    "build": "rm -rf lib && tsc --outDir lib && cp flowtypes/* lib && rm -rf lib/examples && mv lib/src/* lib && rm -rf lib/src && rm lib/*.test.* && rm lib/*.stories.*",
     "jest:e2e": "jest --runInBand e2e",
     "jest:e2e:update": "jest --runInBand -u e2e",
-    "storybook": "start-storybook -p 9010 -s public",
-    "storybook:ci": "start-storybook -p 9011 -s public --ci --quiet",
+    "ladle:ci": "ladle serve --output stream --open none",
     "test": "yarn test:e2e && yarn test:unit",
-    "test:e2e": "start-server-and-test storybook:ci http-get://localhost:9011 jest:e2e",
+    "test:e2e": "start-server-and-test ladle:ci http-get://localhost:61000 jest:e2e",
     "test:e2e:dev": "E2E=dev yarn jest:e2e",
-    "test:e2e:update": "start-server-and-test storybook:ci http-get://localhost:9011 jest:e2e:update",
+    "test:e2e:update": "start-server-and-test ladle:ci http-get://localhost:61000 jest:e2e:update",
     "test:unit": "jest src",
@@ -43,26 +41,24 @@ "typecheck": "tsc --noEmit"
   "devDependencies": {
-    "@storybook/addon-options": "5.2.8",
-    "@storybook/addons": "5.2.8",
-    "@storybook/react": "5.2.8",
-    "@types/expect-puppeteer": "^3.3.0",
-    "@types/jest": "^24.0.23",
-    "@types/jest-environment-puppeteer": "^4.3.1",
-    "@types/jest-image-snapshot": "^2.4.0",
-    "@types/node": "^12.12.17",
-    "@types/puppeteer": "^2.0.0",
-    "@types/react": "^16.8.6",
-    "@types/react-dom": "^16.8.4",
+    "@ladle/react": "^0.0.11",
+    "@types/expect-puppeteer": "^4.4.5",
+    "@types/jest": "^26.0.20",
+    "@types/jest-environment-puppeteer": "^4.4.1",
+    "@types/jest-image-snapshot": "^4.1.3",
+    "@types/node": "^14.14.22",
+    "@types/puppeteer": "^5.4.2",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
-    "focus-visible": "^5.0.2",
-    "fork-ts-checker-webpack-plugin": "^3.1.1",
+    "babel-loader": "^8.2.2",
+    "fork-ts-checker-webpack-plugin": "^6.1.0",
     "imgur": "^0.3.1",
-    "jest": "^24.9.0",
-    "jest-image-snapshot": "^2.7.0",
-    "jest-puppeteer": "^4.3.0",
-    "puppeteer": "^2.0.0",
-    "start-server-and-test": "^1.7.11",
-    "storybook-addon-rtl": "^0.2.2",
-    "ts-jest": "^24.2.0",
-    "typescript": "^3.2.4"
+    "jest": "^26.6.3",
+    "jest-image-snapshot": "^4.3.0",
+    "jest-puppeteer": "^4.4.0",
+    "puppeteer": "^5.5.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "start-server-and-test": "^1.12.0",
+    "ts-jest": "^26.5.0",
+    "typescript": "^4.1.3"
   },
@@ -98,3 +94,7 @@ "peerDependencies": {
     "preset": "jest-puppeteer"
+  },
+  "volta": {
+    "node": "14.15.4",
+    "yarn": "1.22.10"
   }
 }

README.md

@@ -157,3 +157,3 @@ # react-range
 
-`renderMark` is an optional prop so you can render an element at each step. See this [example](https://react-range.netlify.app/?path=/story/range--marks). **Your function gets 2 parameters and should return a React component**:
+`renderMark` is an optional prop so you can render an element at each step. See this [example](https://react-range.netlify.app/?story=range--marks). **Your function gets 2 parameters and should return a React component**:
 
@@ -322,7 +322,7 @@ - `props` - this needs to be spread over the root track element, it adds a ref, key and some necessary styling
 ```bash
-yarn storybook #start the storybook server
+yarn ladle serve #start the ladle server
 yarn test:e2e:dev #run the e2e tests
 ```
 
-`CI` mode (storybook started on the background, quick, headless)
+`CI` mode (ladle started on the background, quick, headless)
 
@@ -333,6 +333,2 @@ ```bash
 
-### Focus-visible style
-
-For the Storybook purposes and E2E tests, the example [stories](https://github.com/tajo/react-range/blob/master/.storybook/example.stories.js#L20) use `focus-visible` polyfill package, which applies focus ring only when input is initiated by keyboard. In the future, all browsers will support this CSS pseudo-class. The polyfill is not part of the library and you can use your own solution or setup the polyfill in a different manner (this mostly concerns you when using css class generating frameworks like Styled-components, Emotion and so on).
-
 ## Browser support
@@ -344,3 +340,2 @@
 - **Edge** (latest, windows)
-- **MSIE 11** (windows)
 
@@ -355,3 +350,3 @@ ## Contributing
 yarn
-yarn storybook
+yarn ladle serve
 ```
@@ -358,0 +353,0 @@

No alert changes

Improved metrics

Total package byte prevSize

72954

increased by3.9%

Dev dependency count

22

decreased by-8.33%

Lines of code

1200

increased by5.17%

Worsened metrics

Number of lines in readme file

362

decreased by-1.36%

No dependency changes