@meadow/react-slider - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-alpha.0

components/Slider.jsx

@@ -100,2 +100,25 @@ 'use strict';
 
+  handleTouchStart: function (event) {
+    event.preventDefault();
+    window.addEventListener('touchmove', this.handleTouchMove);
+    window.addEventListener('touchend', this.handleTouchEnd);
+    this.calculatePositionAndSetValue(event.touches[0].pageX);
+    this.setState({
+      active: true
+    });
+  },
+
+  handleTouchMove: function (event) {
+    event.preventDefault();
+    this.calculatePositionAndSetValue(event.touches[0].pageX);
+  },
+
+  handleTouchEnd: function (event) {
+    window.removeEventListener('touchmove', this.handleTouchMove);
+    window.removeEventListener('touchend', this.handleTouchEnd);
+    this.setState({
+      active: false
+    });
+  },
+
   renderSteps: function () {
@@ -132,3 +155,7 @@ var stepsJSX = [];
     return (
-      <div className={sliderClassName} onMouseDown={this.handleSliderMouseDown}>
+      <div
+        className={sliderClassName}
+        onMouseDown={this.handleSliderMouseDown}
+        onTouchStart={this.handleTouchStart}
+      >
         <div className="slider__track" ref="track">
@@ -135,0 +162,0 @@ {stepsJSX}

package.json

 {
   "name": "@meadow/react-slider",
-  "version": "1.0.0",
+  "version": "1.0.1-alpha.0",
   "description": "Clean and simple Slider component. For when <input type=\"range\" /> just won't do.",
-  "main": "components/Slider.jsx",
+  "main": "lib/components/Slider.js",
   "scripts": {
-    "build": "stylus < styles/Slider.styl > styles/Slider.css",
+    "prepublish": "npm run build",
+    "build": "mkdirp lib/styles && stylus styles --out lib/styles && mkdirp lib/components && babel components --out-dir lib/components",
     "test": "zuul -- test/**/*.{js,jsx}",
@@ -31,5 +32,7 @@ "test:browser": "zuul --local 55555 -- test/**/*.{js,jsx}"
   "devDependencies": {
+    "babel": "^5.8.23",
     "babelify": "^6.3.0",
     "browserify": "^11.1.0",
     "dom-classes": "0.0.1",
+    "mkdirp": "^0.5.1",
     "react": "^0.13.3",
@@ -36,0 +39,0 @@ "simple-mock": "^0.3.1",

test/components/Slider.jsx

@@ -6,4 +6,24 @@ var test = require('tape');
 
-var Slider = require('../../components/Slider.jsx');
+var Slider = require('../../components/Slider.js');
 
+var triggerEvent = function (target, name, properties) {
+  var event;
+  switch (name) {
+    case 'mousedown':
+    case 'mousemove':
+    case 'mouseup':
+      event = new MouseEvent(name, properties);
+    break;
+    case 'touchstart':
+    case 'touchmove':
+    case 'touchend':
+      event = new TouchEvent(name, properties);
+    break;
+    default:
+      event = new Event(name, properties);
+    break;
+  }
+  target.dispatchEvent(event);
+};
+
 var TestApp = React.createClass({
@@ -85,15 +105,12 @@ getInitialState: () => new Object(),
   });
-  slider.handleMouseMove({
-    pageX: trackLeft + (sliderWidth / 2),
-    preventDefault: () => {}
+  triggerEvent(window, 'mousemove', {
+    clientX: trackLeft + (sliderWidth / 2)
   });
   t.equal(slider.state.value, 50, 'sets slider value to 50 when mousemove is in middle of slider element');
-  slider.handleMouseMove({
-    pageX: trackLeft + (sliderWidth * 2),
-    preventDefault: () => {}
+  triggerEvent(window, 'mousemove', {
+    clientX: trackLeft + (sliderWidth * 2)
   });
   t.equal(slider.state.value, slider.props.max, 'sets slider value to max when mousemove is outside right bound of slider element');
-  slider.handleMouseMove({
-    pageX: trackLeft - sliderWidth,
-    preventDefault: () => {}
+  triggerEvent(window, 'mousemove', {
+    clientX: trackLeft - sliderWidth
   });
@@ -110,13 +127,21 @@ t.equal(slider.state.value, slider.props.min, 'sets slider value to min when mousemove is outside left bound of slider element');
   });
-  slider.handleMouseUp({
-    pageX: trackLeft + (sliderWidth / 2)
+  triggerEvent(window, 'mouseup', {
+    clientX: trackLeft + (sliderWidth / 2)
   });
   t.equal(slider.state.value, 50, 'sets slider value to 50 when mouseup is in middle of slider element');
-  slider.handleMouseUp({
-    pageX: trackLeft + (sliderWidth * 2)
+  TestUtils.Simulate.mouseDown(sliderElement, {
+    pageX: trackLeft,
+    button: 0
   });
+  triggerEvent(window, 'mouseup', {
+    clientX: trackLeft + (sliderWidth * 2)
+  });
   t.equal(slider.state.value, slider.props.max, 'sets slider value to max when mouseup is outside right bound of slider element');
-  slider.handleMouseUp({
-    pageX: trackLeft - sliderWidth
+  TestUtils.Simulate.mouseDown(sliderElement, {
+    pageX: trackLeft,
+    button: 0
   });
+  triggerEvent(window, 'mouseup', {
+    clientX: trackLeft - sliderWidth
+  });
   t.equal(slider.state.value, slider.props.min, 'sets slider value to min when mouseup is outside left bound of slider element');
@@ -126,2 +151,44 @@ reset();
 
+test('Slider value set according to touchstart location', function (t) {
+  t.plan(1);
+  TestUtils.Simulate.touchStart(sliderElement, {
+    touches: [{
+      pageX: trackLeft + (sliderWidth / 2)
+    }]
+  });
+  t.equal(slider.state.value, 50, 'sets slider value to 50 when touchstart is in middle of slider element');
+  reset();
+});
+
+test('Slider value set according to touchmove location', function (t) {
+  t.plan(3);
+  TestUtils.Simulate.touchStart(sliderElement, {
+    touches: [{
+      pageX: trackLeft
+    }]
+  });
+  slider.handleTouchMove({
+    touches: [{
+      pageX: trackLeft + (sliderWidth / 2)
+    }],
+    preventDefault: () => {}
+  });
+  t.equal(slider.state.value, 50, 'sets slider value to 50 when touchmove is in middle of slider element');
+  slider.handleTouchMove({
+    touches: [{
+      pageX: trackLeft + (sliderWidth * 2)
+    }],
+    preventDefault: () => {}
+  });
+  t.equal(slider.state.value, slider.props.max, 'sets slider value to max when touchmove is outside right bound of slider element');
+  slider.handleTouchMove({
+    touches: [{
+      pageX: trackLeft - sliderWidth
+    }],
+    preventDefault: () => {}
+  });
+  t.equal(slider.state.value, slider.props.min, 'sets slider value to min when touchmove is outside left bound of slider element');
+  reset();
+});
+
 test('Slider value can be locked to steps', function (t) {
@@ -164,2 +231,2 @@ t.plan(2);
   t.pass('// iframe removed');
-});
+});

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

192817

increased by0.35%

Worsened metrics

Dev dependency count

11

increased by22.22%

Number of package files

8

decreased by-11.11%

Lines of code

363

decreased by-4.72%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes