react-bootstrap-slider - npm Package Compare versions

Comparing version 2.2.3 to 3.0.0

dist/react-bootstrap-slider.js

@@ -26,4 +26,2 @@ (function (global, factory) {
 
-  function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -33,50 +31,19 @@
 
-  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
   function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  var ReactBootstrapSlider =
-  /*#__PURE__*/
-  function (_React$Component) {
-    _inherits(ReactBootstrapSlider, _React$Component);
+  class ReactBootstrapSlider extends _react.default.Component {
+    constructor(...args) {
+      super(...args);
 
-    function ReactBootstrapSlider() {
-      var _getPrototypeOf2;
+      _defineProperty(this, "checkAndDoDisabled", () => {
+        const sliderEnable = this.props.disabled !== "disabled";
+        const currentlyEnabled = this.mySlider.isEnabled();
 
-      var _this;
-
-      _classCallCheck(this, ReactBootstrapSlider);
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ReactBootstrapSlider)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-      _defineProperty(_assertThisInitialized(_this), "checkAndDoDisabled", function () {
-        var sliderEnable = _this.props.disabled !== "disabled";
-
-        var currentlyEnabled = _this.mySlider.isEnabled();
-
         if (sliderEnable) {
           if (!currentlyEnabled) {
-            _this.mySlider.enable();
+            this.mySlider.enable();
           }
         } else {
           if (currentlyEnabled) {
-            _this.mySlider.disable();
+            this.mySlider.disable();
           }
@@ -86,88 +53,74 @@ }
 
-      _defineProperty(_assertThisInitialized(_this), "updateSliderValues", function () {
-        if (typeof _this.props.min !== "undefined" && (typeof _this.mySlider.min !== "undefined" || typeof _this.mySlider.options.min !== "undefined")) {
-          _this.mySlider.setAttribute("min", _this.props.min);
+      _defineProperty(this, "updateSliderValues", () => {
+        if (typeof this.props.min !== "undefined" && (typeof this.mySlider.min !== "undefined" || typeof this.mySlider.options.min !== "undefined")) {
+          this.mySlider.setAttribute("min", this.props.min);
         }
 
-        if (typeof _this.props.max !== "undefined" && (typeof _this.mySlider.max !== "undefined" || typeof _this.mySlider.options.max !== "undefined")) {
-          _this.mySlider.setAttribute("max", _this.props.max);
+        if (typeof this.props.max !== "undefined" && (typeof this.mySlider.max !== "undefined" || typeof this.mySlider.options.max !== "undefined")) {
+          this.mySlider.setAttribute("max", this.props.max);
         }
 
-        if (typeof _this.props.step !== "undefined" && (typeof _this.mySlider.step !== "undefined" || typeof _this.mySlider.options.step !== "undefined")) {
-          _this.mySlider.setAttribute("step", _this.props.step);
+        if (typeof this.props.step !== "undefined" && (typeof this.mySlider.step !== "undefined" || typeof this.mySlider.options.step !== "undefined")) {
+          this.mySlider.setAttribute("step", this.props.step);
         }
 
-        _this.mySlider.setValue(_this.props.value);
-
-        _this.checkAndDoDisabled();
+        this.mySlider.setValue(this.props.value);
+        this.checkAndDoDisabled();
       });
-
-      return _this;
     }
 
-    _createClass(ReactBootstrapSlider, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var that = this;
+    componentDidMount() {
+      const that = this;
 
-        var sliderAttributes = _objectSpread({}, this.props, {
-          tooltip: this.props.tooltip || "show"
-        }); // console.log("sliderAttributes = " + JSON.stringify(sliderAttributes, null, 4));
+      const sliderAttributes = _objectSpread(_objectSpread({}, this.props), {}, {
+        tooltip: this.props.tooltip || "show"
+      }); // console.log("sliderAttributes = " + JSON.stringify(sliderAttributes, null, 4));
 
 
-        this.mySlider = new _bootstrapSlider.default(this.node, sliderAttributes); //     this.updateSliderValues();
+      this.mySlider = new _bootstrapSlider.default(this.node, sliderAttributes); //     this.updateSliderValues();
 
-        if (this.props.change || this.props.handleChange) {
-          var changeEvent = this.props.change || this.props.handleChange;
-          this.mySlider.on("change", function (e) {
-            var fakeEvent = {
-              target: {
-                value: e.newValue
-              }
-            };
-            changeEvent(fakeEvent);
-          });
-        }
-
-        if (this.props.slideStop) {
-          this.mySlider.on("slideStop", function (e) {
-            var fakeEvent = {
-              target: {
-                value: e
-              }
-            };
-            that.props.slideStop(fakeEvent);
-          });
-        }
-
-        this.checkAndDoDisabled();
+      if (this.props.change || this.props.handleChange) {
+        const changeEvent = this.props.change || this.props.handleChange;
+        this.mySlider.on("change", e => {
+          const fakeEvent = {
+            target: {
+              value: e.newValue
+            }
+          };
+          changeEvent(fakeEvent);
+        });
       }
-    }, {
-      key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        this.updateSliderValues();
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        this.mySlider.destroy();
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this2 = this;
 
-        // The slider"s an input.  That"s all we need.  We"ll do the rest in
-        // the componentDidMount() method.
-        return _react.default.createElement("div", {
-          ref: function ref(node) {
-            return _this2.node = node;
-          }
+      if (this.props.slideStop) {
+        this.mySlider.on("slideStop", e => {
+          const fakeEvent = {
+            target: {
+              value: e
+            }
+          };
+          that.props.slideStop(fakeEvent);
         });
       }
-    }]);
 
-    return ReactBootstrapSlider;
-  }(_react.default.Component);
+      this.checkAndDoDisabled();
+    }
 
+    componentDidUpdate() {
+      this.updateSliderValues();
+    }
+
+    componentWillUnmount() {
+      this.mySlider.destroy();
+    }
+
+    render() {
+      // The slider"s an input.  That"s all we need.  We"ll do the rest in
+      // the componentDidMount() method.
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: node => this.node = node
+      });
+    }
+
+  }
+
   _exports.ReactBootstrapSlider = ReactBootstrapSlider;
@@ -174,0 +127,0 @@ ReactBootstrapSlider.propTypes = {

package.json

 {
   "name": "react-bootstrap-slider",
-  "version": "2.2.3",
+  "version": "3.0.0",
   "main": "dist/react-bootstrap-slider.js",
@@ -23,24 +23,24 @@ "description": "Bootstrap Slider component for React",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/plugin-transform-modules-umd": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
+    "@babel/cli": "^7.10.1",
+    "@babel/core": "7.10.2",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.1",
+    "@babel/plugin-transform-modules-umd": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/register": "^7.10.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-preset-es3": "^1.0.1",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "dependencies": {
-    "bootstrap-slider": "^10.6.1"
+    "bootstrap-slider": "^11.0.2"
   },
   "peerDependencies": {
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.5.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
@@ -47,0 +47,0 @@ "scripts": {

README.md

@@ -7,10 +7,5 @@ # React Bootstrap Slider
 
-A ReactJS wrapper for [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider) using Bootstrap 3.
+A ReactJS wrapper for [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider) using Bootstrap.  From version 3.0.0, we are supporting Bootstrap 4 only.  Please use version 2.2.3 if you are still using Bootstrap 3.
 
 
-### Bootstrap 4 Support
-
-Bootstrap 4 is not currently supported, but is under investigation.  I am dependent on upstream issues to be resolved first, see [#689](https://github.com/seiyria/bootstrap-slider/issues/689) and [#856](https://github.com/seiyria/bootstrap-slider/pull/856) on the Bootstrap Slider Github repository.
-
-
 ## How to install
@@ -38,6 +33,6 @@
 
-    npm install react react-dom prop-types bootstrap@^3 --save
+    npm install react react-dom prop-types bootstrap@^4 --save
 or
 
-    yarn add react react-dom prop-types bootstrap@^3
+    yarn add react react-dom prop-types bootstrap@^4
 
@@ -60,4 +55,4 @@ #### jQuery
 ```HTML
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
-    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
+<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
 ```
@@ -100,208 +95,2 @@
 ticks_snap_bounds = { 30 }
-```
-
-
-## Development
-
-### Component Source
-
-After cloning [the repository from Github](https://www.npmjs.com/package/react-bootstrap-slider), run either:
-
-    yarn
-or
-
-    npm install
-
-in the project's root folder to install the dependencies.  Note: React, React Dom, Prop Types and Bootstrap _will_ all be installed this time because they are listed as development dependencies as well as peer dependencies for the project.  (Please see [discussion on PR43](https://github.com/brownieboy/react-bootstrap-slider/pull/43) for why I've listed these packages under both peerDependencies and devDependencies.)
-
-The source code for the component is the /src/react-bootstrap-slider.js file.  You'll probably find it easiest to run the example demo (see next section) in order to see any changes that you make to the component's source.
-
-To build a distribution version of the component, it's:
-
-    yarn build
-or
-
-    npm run build
-
-The built version wil be put in the /dist folder.
-
-
-### The Example Demo
-
-The Demo is based on [Create React App](https://facebook.github.io/create-react-app/).  I had to eject from Create React App though in order to work around the bootstrap-slider component's requirement for either jQuery or a stub of it to be present in the build system (see the **jQuery** section above).  
-
-You need to edit the code in the /examples/src/slider-app-demo.js is the source code for the host Demo page.  The /examples folder has its own NPM build steps (i.e. its own package.json file), so you'll have to install the dependencies separately here.  So make sure your terminal is in the /examples folder this time, then run either:
-
-    yarn
-or
-
-    npm install
-
-again.
-
-To run the demo in Development mode, from the /examples folder it's:
-
-    yarn start
-or
-
-    npm run start
-
-This should launch your browser and load <https://localhost:3000> with the demo running.  This version takes its react-bootstrap-slider code from development source code in the /src folder of the project's root folder.  So any change that you make to that source code will hotload straight into the demo.  
-
-You may notice that the demo source code that it's actually imported via a symlink.  This to work around an issue with how the Webpack build treats packages imported from outside of current project's hierarchy.  (Note: this will probably not work on Windows.  I haven't tested it there.)
-
-To build a Production version of the demo, from the /examples folder again, it's:
-
-    yarn build
-or
-
-    npm run build
-
-This will put a production ready version of the demo in the /examples/build folder.  Note: this version will import its react-bootstrap-slider component from the /dist folder of the project's root folder - i.e., the built version of the component.  So make sure that you've actually built the component (see above) before building the demo!  You must also have installed all the packages (`yarn` or `npm i`) in the root folder of the project, so that the slider component can find its local version of React itelf.
-
-Once you've built the Production version of the Demo, you can open it with the local web server of your choice.  Because the demo project was created with Create React App, you'll see a prompt telling you how to do this with Server, i.e. `serve -s build`.  If you don't have Serve, you can install it globally via `npm i serve -g`.
-
-
-## Tests
-
-There are is only one unit tests, which was installed by Create React App.  All it does is test that the demo app loads, so probably not worth running.
-
-End to end (E2E) tests are handled by Protractor with Selenium Web Driver.
-
-
-### Installing E2E Tests Dependencies
-
-Before running the E2E tests, you'll need to install the web driver first by running:
-
-        npm run updateWebDriver
-
-Again, you need to be in that /examples folder before running this command.  You should only have to do this once though, although beware that Selenium can be picky about which web browser versions that it will run against.
-
-
-### Running Tests Against Dev Version
-
-The same set of tests can be run against either the Dev version or the built version of the Demo.  To run run tests against the Development version of the Demo, you need to run:
-
-        npm run e2eDev
-
-This assumes that you already have the Demo running on port 3000 via an `npm run start` or `yarn start` in the project's /examples folder (see above).
-
-To run run tests against the Production version of the Demo, you need to run:
-
-        npm run e2eProd
-
-This assumes that you have already have built the demo (and source component), and have serve running on port 5000 (see above).
-
-### Test Results & Reports
-
-Test results will be displayed in whichever terminal you ran your test commands.
-
-The tests will also generate HTML reports in the /examples/reports folder, courtesy of the [protractor-jasmine2-screenshot-reporter](https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter) package.  Open the /examples/reports/index.html file in a browser to see them.  (I use the Open in Browser extension for VSCode for this.)
-
-When you open the reports, note how each test result is a URL.  If you click on the URL, it will take you to a screen shot of how the browser looked when that particular test ran, which is pretty neat, IMHO!
-
-### Editing Tests
-The tests themselves are in the file /examples/tests/e2e/slidertest1.js.  The tests check:
-
-1. The page loads with the correct default values set for both the vertical and horizontal versions of the Demo.
-1. Dragging the horizontal slider to the right increases its value correctly
-1. Dragging the vertical slider upwards increases its value correctly
-1. Clicking on the Change Axes button for both demos changes each one's respective default value correctly.
-
-For more information on writing tests, checkout [the Protractor Tutorial](http://www.protractortest.org/#/tutorial), and [the Protractor API](http://www.protractortest.org/#/api).
-
-### Further Test Configs
-
-Protractor defaults to using the Firefox browser, but I've overridden the config so that it uses Chrome instead, so make sure that you have Chrome installed!  If you want to use Firefox or even IE, then you'll need to make some modifications to the protractor.local.conf.js file.  Google for how to do that.
-
-Whatever other changes you make to protractor.local.conf.js, you _must_ _not_ remove this line:
-
-        browser.ignoreSynchronization = true;
-
-Protractor is actually a testing tool designed for AngularJS and Angular, but hey, nobody's perfect! :wink:  By default, Protractor will wait for Angular models to send their update messages before proceeding onto the next test.  This line tells Protractor not to wait for any such messages, which, of course, won't be coming because you're not using Angular.
-
-## Update History
-
-Version 2.2.3: 25 Jan 2020
-* Control now transpiled to ES5.  Should fix errors on IE 11 etc.
-
-Version 2.2.2: 25 Feb 2019
-
-* Fixed absolute require bug regression in 2.2.0/2.2.1.  (It's @babel/react preset, not @babel/react-app !)
-
-Version 2.2.0 and 2.2.1: 23 Feb 2019
-
-* Update to bootstrap-slider 10.
-* Major overhaul of Demo vs Component source code.  They're now split into separate folders with separate built steps and package.json files.
-* 2.2.1 is a Readme correctly only.  No actual code changes.
-
-Version 2.1.5: 2 May 2018
-
-* Fixed issue where control was permanently disabled if initial `max` value was set to zero.
-
-Version 2.1.4: 13 Apr 2018
-
-* Explicitly allow labelledby to be passed into the control 
-
-Version 2.1.2 & 2.1.3: 21 Oct 2017
-
-* 2.1.2 Fixed issue where setting the "disabled" prop did not disable the component on load.
-* 2.1.3 Removed a debugging console.log that I introduced in 2.1.2 (doh!).
-
-Version 2.1.1: 3 Oct 2017
-
-* Fixed missing peerDependencies and devDependencies issue.
-
-Version 2.1.0: 30 Sep 2017
-* Updated for React 16 (Fiber).
-* Updated dev dependencies to latest versions too.
-* Removed React and Bootstrap from dependencies list.  They are now in devDependencies and peerDependencies.
-
-Version 2.0.1: 19 Aug 2017
-
-* Module is now destroyed correctly via componentWillUnmount method (thanks to KevBelisle for the PR).
-
-Version 2.0.0: 30 Apr 2017
-
-* Updated for React 15.5.x and 16 (Fiber) compatibility by using prop-types package.  This version will not work with older versions of React, hence the major version bump.
-
-Version 1.1.7: 2 Apr 2017
-* Removed jQuery as any kind of dependency.  It's not actually needed, but it is used by bootstrap-slider if present.
-
-Version 1.1.6: 28 Mar 2017
-* Moved bootstrap, jquery, react and react-dom from dependencies to peerDependencies and devDependencies. (They need to in both because neither yarn or npm install command actually installs peerDependencies.)
-
-Version 1.1.5: 7 Mar 2017
-* Remove unnecessary console.log() calls (thanks to saevarom for the PR).
-* Fixed path to testBuild script in package.json
-
-Version 1.1.4: 11 Feb 2017
-
-* Removed es6bindall as a dependency.  This allows using react-bootstrap-slider with Require.JS.  (PR merge from TalAter.)
-* Fixed readme.md error: `reverse` parameter should actually be `reversed`.  (Thanks to chunkiat82 for the pick up.)
-
-Version 1.1.3: 19 Nov 2016
-
-* Fixed bug where min, max and step values were not updating correctly when component received new props for them.
-* Updated dependencies to latest versions.
-
-Version 1.1.2: 24 Sep 2016
-
-* Reverted change of slider trigger event from `change` to `slideStop` in v1.1.1.  This was a dumb way of doing it, and was a borderline breaking change to boot.
-* Added new `slideStop` event, which maps to the bootstrap-slider event of the same name
-* Added new `change` event, which maps to the bootstrap-slider event of the same name.  Note: this is in _addition_ to the previous `handleChange` event, which will continue to work and is _not_ being deprecated here.
-
-Version 1.1.1: 23 Sep 2016 (NB: Bad version.  Do not use!  See 1.12 comments above.)
-* Changed main slider trigger event from `change` to `slideStop`.  Component should now be less chatty with improved performance.
-
-Version 1.1.0: 21 Sep 2016.
-* Updated to seiyria's 9.2 version.  This includes the rangeHighlights feature.
-* Updated readme to specify inclusion of bootstrap-slider's CSS file.
-* Removed reports folder from NPM package
-
-Version 1.0.6: 1 August 2016.
-* Fixed issue where ticks props were not being rendered.  This is because the code was assuming that there would always be min and max props, but the ticks props actually override these.
-
-Version 1.0.5: 13 June 2016.
-* Explained how use dual slider controls.  Added test for same.
-* Cleaned up demo to code to have one Demo class instead of three.
+```

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

Number of package files

6

increased by50%

Worsened metrics

Total package byte prevSize

27010

decreased by-8.99%

Lines of code

222

decreased by-13.62%

Number of lines in readme file

92

decreased by-69.74%

Dependency changes

• + Addedbootstrap@4.6.2(transitive)

• + Addedbootstrap-slider@11.0.2(transitive)

• + Addedjquery@3.7.1(transitive)

• + Addedpopper.js@1.16.1(transitive)

• - Removedbootstrap@3.4.1(transitive)

• - Removedbootstrap-slider@10.6.2(transitive)

• Updatedbootstrap-slider@^11.0.2