react-range-slider - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

Cursor.js

+var React = require('react');
+var PropTypes = React.PropTypes;
+var emptyFunction = require('react/lib/emptyFunction');
+
+var Cursor = React.createClass({
+
+  displayName: 'RangeSliderCursor',
+
+  propTypes: {
+    axis: PropTypes.oneOf(['X', 'Y']),
+    offset: PropTypes.number,
+    onDragStart: PropTypes.func,
+    onDragEnd: PropTypes.func
+  },
+
+  getDefaultProps: function () {
+    return {
+      axis: 'X',
+      offset: 0,
+      onDragStart: emptyFunction,
+      onDragEnd: emptyFunction
+    };
+  },
+
+  getStyle: function () {
+    var transform = 'translate' + this.props.axis + '(' + this.props.offset + 'px)';
+    return {
+      WebkitTransform: transform,
+      MozTransform: transform,
+      msTransform: transform,
+      OTransform: transform,
+      transform: transform,
+      position: 'absolute'
+    }
+  },
+
+  render: function () {
+    var props = this.props;
+    props.style = this.getStyle();
+    props.onMouseDown = this.props.onDragStart;
+    props.onTouchStart = function (e) {
+      e.preventDefault(); // prevent for scroll
+      return this.props.onDragStart.apply(null, arguments);
+    }.bind(this);
+    props.onMouseUp = this.props.onDragEnd;
+    props.onTouchEnd = this.props.onDragEnd;
+    return (
+      React.createElement('div', props, this.props.children)
+    );
+  }
+
+});
+
+module.exports = Cursor;

README.md

+# React-Range-Slider
+
+> A flexible slider for reactjs
+
+[Live Demo](http://xeodou.github.io/react-range-slider)
+
+## Getting Started
+
+Install via [npm](http://npmjs.org/react-range-slider)
+
+```shell
+   npm i react-range-slider --save-dev
+```
+
+## Usage
+
+```Javascript
+var RangeSlider = require('react-range-slider')
+
+<RangeSlider
+    value={[20]}
+    withBars />
+
+```
+
+## Options
+coming soon...
+
+## License
+
+MIT

example/app.js

@@ -20,3 +20,3 @@ var React = window.React = require('react');
         <div id='main'>
-          <RangeSlider value={[ '#42c6da','#3cb9ec','#42a5f5','#4a80df','#5c6bc0']} withBars/>
+          <RangeSlider value={[ '#42c6da','#3cb9ec','#42a5f5','#4a80df','#5c6bc0']} withBars withCursor range={[true]}/>
         </div>
@@ -23,0 +23,0 @@ </div>

example/style.scss

@@ -108,6 +108,6 @@ $green: #31D2B1;
     height: inherit;
+    padding: 8px;
     background-color: #FFA52F;
     &.header {
       height: inherit;
-      padding: 0 0;
     }
@@ -122,3 +122,3 @@ & span {
   .bars {
-    height: 4px;
+    height: 24px;
     background-color: #BDBDBD;
@@ -125,0 +125,0 @@ position: absolute;

index.js

@@ -6,3 +6,3 @@ var React = require('react/addons');
 var event = require('./event');
-var Handler = React.createFactory(require('./Handler'));
+var Cursor = React.createFactory(require('./Cursor'));
 
@@ -243,7 +243,2 @@ /**
     this.handleResize();
-
-    // var value = map(this.state.value, this._trimAlignValue);
-    // this.setState({
-    //   value: value
-    // });
   },
@@ -294,3 +289,3 @@
 
-    this.props.onBeforeChange(e);
+    this.props.onBeforeChange(e, i - 1);
 
@@ -312,2 +307,4 @@ // Add event handlers
       l = this.state.value.length;
+    // Cursor position after moved
+    var _v = this.state.startValue + diffValue;
     if (i === 0) {
@@ -317,3 +314,2 @@ // Move header
       var v = l > 0 ? finder(Math.min, this.state.value, 'value') : this.state.max;
-      var _v = diffValue + this.state.startValue;
       this.setState({
@@ -324,8 +320,15 @@ min: parseInt(Math.max(_v <= v ? (_v < 0 ? 0 : _v) : v, this.props.min), 10)
       // Move cursor
-
-
+      // The cursor postion must smaller than the next cursor or this.state.max
+      // bigger than the previous cursor or this.state.min
+      var value = this.state.value;
+      // var v = value[i - 1].value;
+      var min = (value[i - 2] ? value[i- 2].value : this.state.min);
+      var max = value[i] ? value[i].value : this.state.max;
+      value[i - 1].value = parseInt(Math.max(Math.min(_v, max), min), 10);
+      this.setState({
+        value: value
+      });
     } else if (i === l + 1) {
       // Move tailer
       var v = l > 0 ? finder(Math.max, this.state.value, 'value') : this.state.min;
-      var _v = this.state.startValue + diffValue;
       this.setState({
@@ -336,3 +339,3 @@ max: parseInt(Math.min(_v >= v ? _v : v, this.props.max))
 
-    this.props.onChange(this.state.value);
+    this.props.onChange(e, i - 1, this.state.value);
   },
@@ -345,3 +348,3 @@
 
-    this.props.onAfterChange(this.state.value);
+    this.props.onAfterChange(e, this.state.value);
 
@@ -368,3 +371,3 @@ // Remove event handlers
     }
-    return Handler({
+    return Cursor({
       axis: this.state.axis,
@@ -382,5 +385,5 @@ offset: offset,
   renderCursors: function (offsets) {
-    var handlers = [];
+    var cursors = [];
     if (this.props.withCursor) {
-      handlers = offsets.map(function (offset, i) {
+      cursors = offsets.map(function (offset, i) {
         return this.renderCursor(offset, i + 1)
@@ -390,11 +393,11 @@ }, this);
     if (this.state.header) {
-      handlers.splice(0, 0, this.renderCursor(this.calcOffset(this.state.min), 0,
+      cursors.splice(0, 0, this.renderCursor(this.calcOffset(this.state.min), 0,
         React.createElement('span', null, this.state.min)));
     }
     if (this.state.tailer) {
-      var l = handlers.length;
-      handlers.push(this.renderCursor(this.calcOffset(this.state.max), l,
+      var l = cursors.length;
+      cursors.push(this.renderCursor(this.calcOffset(this.state.max), l,
         React.createElement('span', null, this.state.max)));
     }
-    return handlers;
+    return cursors;
   },
@@ -401,0 +404,0 @@

package.json

 {
   "name": "react-range-slider",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A flexible slider for reactjs.",
@@ -5,0 +5,0 @@ "main": "index.js",

Handler.js

-var React = require('react');
-var PropTypes = React.PropTypes;
-var emptyFunction = require('react/lib/emptyFunction');
-
-var Handler = React.createClass({
-
-  displayName: 'RangeSliderHandler',
-
-  propTypes: {
-    axis: PropTypes.oneOf(['X', 'Y']),
-    offset: PropTypes.number,
-    onDragStart: PropTypes.func,
-    onDragEnd: PropTypes.func
-  },
-
-  getDefaultProps: function () {
-    return {
-      axis: 'X',
-      offset: 0,
-      onDragStart: emptyFunction,
-      onDragEnd: emptyFunction
-    };
-  },
-
-  getStyle: function () {
-    var transform = 'translate' + this.props.axis + '(' + this.props.offset + 'px)';
-    return {
-      WebkitTransform: transform,
-      MozTransform: transform,
-      msTransform: transform,
-      OTransform: transform,
-      transform: transform,
-      position: 'absolute'
-    }
-  },
-
-  render: function () {
-    var props = this.props;
-    props.style = this.getStyle();
-    props.onMouseDown = this.props.onDragStart;
-    props.onTouchStart = function (e) {
-      e.preventDefault(); // prevent for scroll
-      return this.props.onDragStart.apply(null, arguments);
-    }.bind(this);
-    props.onMouseUp = this.props.onDragEnd;
-    props.onTouchEnd = this.props.onDragEnd;
-    return (
-      React.createElement('div', props, this.props.children)
-    );
-  }
-
-});
-
-module.exports = Handler;

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22036

3.63%

Number of package files

10

11.11%

Lines of code

589

1.03%

Number of medium quality alerts

1

-50%

Number of lines in readme file

32

Infinity%

No dependency changes