material-ui-slider - npm Package Compare versions

Comparing version 0.0.16 to 0.1.0

dist/npm/es5/src/slider/Slider.js

@@ -107,24 +107,12 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 
-    var range = props.range,
+    var min = props.min,
+        max = props.max,
         defaultValue = props.defaultValue,
-        min = props.min,
-        max = props.max;
+        value = props.value;
 
-    var value = [min, max];
-    if (range) {
-      if (_.isArray(defaultValue)) {
-        var value1 = defaultValue[0] || min;
-        var value2 = defaultValue[1] || max;
-        var valueMin = Math.min(value1, value2);
-        var valueMax = Math.max(value1, value2);
-        value[0] = _this.calcValue(valueMin >= min && valueMin <= max ? valueMin : min);
-        value[1] = _this.calcValue(valueMax >= min && valueMax <= max ? valueMax : max);
-      } else if (_.isNumber(defaultValue)) {
-        value[0] = _this.calcValue(defaultValue);
-      }
-    } else {
-      value = _this.calcValue(_.isNumber(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
-    }
+    _this.min = Math.min(min, max);
+    _this.max = Math.max(min, max);
+
     _this.state = {
-      value: value,
+      value: _this.calcDefaultValue(value || defaultValue),
       hover: false,
@@ -146,2 +134,11 @@ pressed: false
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!_.isUndefined(nextProps.value) && !_.isEqual(nextProps.value, this.props.value)) {
+        this.setState({
+          value: this.calcDefaultValue(nextProps.value)
+        });
+      }
+    }
+  }, {
     key: 'unbindEventListeners',
@@ -161,4 +158,2 @@ value: function unbindEventListeners() {
           theme = _props.theme,
-          min = _props.min,
-          max = _props.max,
           range = _props.range,
@@ -173,2 +168,4 @@ scaleLength = _props.scaleLength,
           pressed = _state.pressed;
+      var min = this.min,
+          max = this.max;
 
@@ -304,3 +301,2 @@ var trackColor = disabled ? theme.palette.grey[700] : color || theme.palette.primary[theme.palette.type];
         var offset = Math.round((value - min) / (max - min) * 100);
-
         var _trackActiveStyle = Object.assign({
@@ -441,8 +437,32 @@ backgroundColor: trackColor
 
-  this.calcValue = function (value) {
-    var _props2 = _this3.props,
-        min = _props2.min,
-        max = _props2.max,
-        scaleLength = _props2.scaleLength;
+  this.calcDefaultValue = function (defaultValue) {
+    var range = _this3.props.range;
+    var min = _this3.min,
+        max = _this3.max;
 
+    if (range) {
+      var value = !!_this3.state ? _this3.state.value : [min, max];
+      if (_.isArray(defaultValue)) {
+        var value1 = _.isNumber(defaultValue[0]) ? defaultValue[0] : min;
+        var value2 = _.isNumber(defaultValue[1]) ? defaultValue[1] : max;
+        var valueMin = Math.min(value1, value2);
+        var valueMax = Math.max(value1, value2);
+        value[0] = _this3.calcScaleValue(valueMin >= min && valueMin <= max ? valueMin : min);
+        value[1] = _this3.calcScaleValue(valueMax >= min && valueMax <= max ? valueMax : max);
+      } else if (_.isNumber(defaultValue)) {
+        var _valueMin = _this3.calcScaleValue(defaultValue);
+        if (_valueMin <= value[1]) value[0] = _valueMin;else value[1] = _valueMin;
+        console.log(_valueMin, value);
+      }
+      return value;
+    } else {
+      return _this3.calcScaleValue(_.isNumber(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
+    }
+  };
+
+  this.calcScaleValue = function (value) {
+    var scaleLength = _this3.props.scaleLength;
+    var min = _this3.min,
+        max = _this3.max;
+
     if (scaleLength > 0) {
@@ -469,7 +489,7 @@ value -= min;
   this.handleChange = function (e, skip) {
-    var _props3 = _this3.props,
-        range = _props3.range,
-        min = _props3.min,
-        max = _props3.max,
-        disabled = _props3.disabled;
+    var _props2 = _this3.props,
+        range = _props2.range,
+        disabled = _props2.disabled;
+    var min = _this3.min,
+        max = _this3.max;
 
@@ -480,3 +500,3 @@ if (disabled) return;
     var oldValue = _this3.state.value;
-    var newValue = _this3.calcValue(Math.round(offset / 100 * (max - min)) + min);
+    var newValue = _this3.calcScaleValue(Math.round(offset / 100 * (max - min)) + min);
     if (range) {
@@ -550,2 +570,3 @@ if (_this3.activePointer === 'left' && oldValue[0] !== newValue && newValue < oldValue[1] || newValue <= oldValue[0]) {
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
   range: PropTypes.bool,
@@ -552,0 +573,0 @@ scaleLength: PropTypes.number,

dist/npm/es6/src/slider/Slider.js

@@ -107,24 +107,12 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 
-    var range = props.range,
+    var min = props.min,
+        max = props.max,
         defaultValue = props.defaultValue,
-        min = props.min,
-        max = props.max;
+        value = props.value;
 
-    var value = [min, max];
-    if (range) {
-      if (_.isArray(defaultValue)) {
-        var value1 = defaultValue[0] || min;
-        var value2 = defaultValue[1] || max;
-        var valueMin = Math.min(value1, value2);
-        var valueMax = Math.max(value1, value2);
-        value[0] = _this.calcValue(valueMin >= min && valueMin <= max ? valueMin : min);
-        value[1] = _this.calcValue(valueMax >= min && valueMax <= max ? valueMax : max);
-      } else if (_.isNumber(defaultValue)) {
-        value[0] = _this.calcValue(defaultValue);
-      }
-    } else {
-      value = _this.calcValue(_.isNumber(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
-    }
+    _this.min = Math.min(min, max);
+    _this.max = Math.max(min, max);
+
     _this.state = {
-      value: value,
+      value: _this.calcDefaultValue(value || defaultValue),
       hover: false,
@@ -146,2 +134,11 @@ pressed: false
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!_.isUndefined(nextProps.value) && !_.isEqual(nextProps.value, this.props.value)) {
+        this.setState({
+          value: this.calcDefaultValue(nextProps.value)
+        });
+      }
+    }
+  }, {
     key: 'unbindEventListeners',
@@ -161,4 +158,2 @@ value: function unbindEventListeners() {
           theme = _props.theme,
-          min = _props.min,
-          max = _props.max,
           range = _props.range,
@@ -173,2 +168,4 @@ scaleLength = _props.scaleLength,
           pressed = _state.pressed;
+      var min = this.min,
+          max = this.max;
 
@@ -304,3 +301,2 @@ var trackColor = disabled ? theme.palette.grey[700] : color || theme.palette.primary[theme.palette.type];
         var offset = Math.round((value - min) / (max - min) * 100);
-
         var _trackActiveStyle = Object.assign({
@@ -441,8 +437,32 @@ backgroundColor: trackColor
 
-  this.calcValue = function (value) {
-    var _props2 = _this3.props,
-        min = _props2.min,
-        max = _props2.max,
-        scaleLength = _props2.scaleLength;
+  this.calcDefaultValue = function (defaultValue) {
+    var range = _this3.props.range;
+    var min = _this3.min,
+        max = _this3.max;
 
+    if (range) {
+      var value = !!_this3.state ? _this3.state.value : [min, max];
+      if (_.isArray(defaultValue)) {
+        var value1 = _.isNumber(defaultValue[0]) ? defaultValue[0] : min;
+        var value2 = _.isNumber(defaultValue[1]) ? defaultValue[1] : max;
+        var valueMin = Math.min(value1, value2);
+        var valueMax = Math.max(value1, value2);
+        value[0] = _this3.calcScaleValue(valueMin >= min && valueMin <= max ? valueMin : min);
+        value[1] = _this3.calcScaleValue(valueMax >= min && valueMax <= max ? valueMax : max);
+      } else if (_.isNumber(defaultValue)) {
+        var _valueMin = _this3.calcScaleValue(defaultValue);
+        if (_valueMin <= value[1]) value[0] = _valueMin;else value[1] = _valueMin;
+        console.log(_valueMin, value);
+      }
+      return value;
+    } else {
+      return _this3.calcScaleValue(_.isNumber(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
+    }
+  };
+
+  this.calcScaleValue = function (value) {
+    var scaleLength = _this3.props.scaleLength;
+    var min = _this3.min,
+        max = _this3.max;
+
     if (scaleLength > 0) {
@@ -469,7 +489,7 @@ value -= min;
   this.handleChange = function (e, skip) {
-    var _props3 = _this3.props,
-        range = _props3.range,
-        min = _props3.min,
-        max = _props3.max,
-        disabled = _props3.disabled;
+    var _props2 = _this3.props,
+        range = _props2.range,
+        disabled = _props2.disabled;
+    var min = _this3.min,
+        max = _this3.max;
 
@@ -480,3 +500,3 @@ if (disabled) return;
     var oldValue = _this3.state.value;
-    var newValue = _this3.calcValue(Math.round(offset / 100 * (max - min)) + min);
+    var newValue = _this3.calcScaleValue(Math.round(offset / 100 * (max - min)) + min);
     if (range) {
@@ -550,2 +570,3 @@ if (_this3.activePointer === 'left' && oldValue[0] !== newValue && newValue < oldValue[1] || newValue <= oldValue[0]) {
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
   range: PropTypes.bool,
@@ -552,0 +573,0 @@ scaleLength: PropTypes.number,

package.json

 {
   "name": "material-ui-slider",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "slider fro Material-UI 1.0.0",
@@ -32,3 +32,4 @@ "private": false,
     "lodash": "^4.17.10",
-    "prop-types": "^15.6.1"
+    "prop-types": "^15.6.1",
+    "raf": "^3.4.0"
   },
@@ -35,0 +36,0 @@ "devDependencies": {

README.md

@@ -37,11 +37,18 @@ # Slider for Material-UI 1.0.0
  defaultValue | number/array[number,number] | 0/[0,100] | default value, value must be between min and max.
+ value | number/array[number,number] | / | value in process bar.
  range | bool | false |  range choose, "defaultValue" must be an array
  scaleLength | number | 0 | scale choose, value "0" means "no scale", "defaultValue" must be a multiple of "scaleLength".
-direction | horizontal/vertical | horizontal | 
-color | string |  | custom color for process bar, support HEX, RGB(RGBA), HSL
-disabled | bool | false |
-onChange | func |  | Callback fired when the value is changed.<br>__Signature:__ <br> function(value: number/array[number,number]) => void
-onChangeComplete | func |  | Callback fired when the value is changed completely.<br>__Signature:__ <br> function(value: number/array[number,number]) => void
+ direction | horizontal/vertical | horizontal | 
+ color | string |  | custom color for process bar, support HEX, RGB(RGBA), HSL
+ disabled | bool | false |
+ onChange | func |  | Callback fired when the value is changed.<br>__Signature:__ <br> function(value: number/array[number,number]) => void
+ onChangeComplete | func |  | Callback fired when the value is changed completely.<br>__Signature:__ <br> function(value: number/array[number,number]) => void
 
+## Update 
+
+> 0.1.0
+* Added prop "value".
+
+
 ## LICENSE
 [MIT](https://choosealicense.com/licenses/mit/)

src/slider/Slider.jsx

@@ -105,26 +105,13 @@ import React from 'react'
 
+  min;
+  max;
   activePointer = 'left';
   constructor(props){
     super(props)
-   
-    const {range, defaultValue, min, max} = props;
-    let value =[min,max];
-    if(range)
-    {
-      if(_.isArray(defaultValue)){
-        const value1 = defaultValue[0]||min;
-        const value2 = defaultValue[1]||max;
-        const valueMin = Math.min(value1,value2);
-        const valueMax = Math.max(value1,value2);
-        value[0] = this.calcValue(valueMin >= min && valueMin <= max ? valueMin : min);
-        value[1] = this.calcValue(valueMax >= min && valueMax <= max ? valueMax : max);
-      }else if(_.isNumber(defaultValue))
-      {
-        value[0] = this.calcValue(defaultValue);
-      }
-    }else{
-      value = this.calcValue(_.isNumber(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
-    }
+    const {min, max, defaultValue, value} = props;
+    this.min = Math.min(min,max);
+    this.max = Math.max(min, max);
+  
     this.state={
-      value,
+      value: this.calcDefaultValue(value||defaultValue),
       hover: false,
@@ -143,4 +130,41 @@ pressed: false
 
-  calcValue = (value)=>{
-    const {min, max, scaleLength} = this.props;    
+  componentWillReceiveProps(nextProps){    
+    if(!_.isUndefined(nextProps.value) && !_.isEqual(nextProps.value,this.props.value)){
+      this.setState({
+        value: this.calcDefaultValue(nextProps.value)
+      })
+    }
+  }
+
+  calcDefaultValue = (defaultValue)=>{
+    const {range} = this.props;
+    const {min, max} = this;   
+    if(range)
+    {
+      let value =!!this.state ? this.state.value : [min, max];
+      if(_.isArray(defaultValue)){
+        const value1 = _.isNumber(defaultValue[0])? defaultValue[0] : min;
+        const value2 = _.isNumber(defaultValue[1])? defaultValue[1] : max;
+        const valueMin = Math.min(value1,value2);
+        const valueMax = Math.max(value1,value2);
+        value[0] = this.calcScaleValue(valueMin >= min && valueMin <= max ? valueMin : min);
+        value[1] = this.calcScaleValue(valueMax >= min && valueMax <= max ? valueMax : max);
+      }else if(_.isNumber(defaultValue))
+      {
+        const valueMin = this.calcScaleValue(defaultValue);
+        if(valueMin <= value[1])
+          value[0] = valueMin
+        else 
+          value[1] = valueMin
+          console.log(valueMin, value)
+      }
+      return value;
+    }else{
+      return this.calcScaleValue(_.isNumber(defaultValue) && defaultValue >= min && defaultValue <= max ? defaultValue : min);
+    }
+  }
+
+  calcScaleValue = (value)=>{
+    const {scaleLength} = this.props; 
+    const {min, max} = this;   
     if(scaleLength> 0){
@@ -170,3 +194,4 @@ value -= min;
   handleChange = (e, skip)=>{
-    const {range, min, max, disabled} = this.props;
+    const {range, disabled} = this.props;
+    const {min, max} = this;
     if(disabled) return;
@@ -176,3 +201,3 @@
     const oldValue = this.state.value;
-    const newValue = this.calcValue(Math.round(offset/100*((max-min)))+min);    
+    const newValue = this.calcScaleValue(Math.round(offset/100*((max-min)))+min);    
     if(range){
@@ -244,4 +269,5 @@ if((this.activePointer==='left' && oldValue[0] !== newValue && newValue < oldValue[1]) || newValue <= oldValue[0] ){
   render(){
-    const {classes, theme, min, max, range, scaleLength, direction, color, disabled} = this.props;
+    const {classes, theme, range, scaleLength, direction, color, disabled} = this.props;
     const {value, hover, pressed}=this.state;
+    const {min, max} = this;
     const trackColor = disabled ?  theme.palette.grey[700] : (color || theme.palette.primary[theme.palette.type]);
@@ -375,3 +401,2 @@ const vertical = direction==='vertical';
       let offset = Math.round((value-min)/(max-min)*100);
-
       const trackActiveStyle=Object.assign({      
@@ -491,2 +516,3 @@ backgroundColor: trackColor
   defaultValue: PropTypes.oneOfType([PropTypes.number,PropTypes.arrayOf(PropTypes.number)]),
+  value: PropTypes.oneOfType([PropTypes.number,PropTypes.arrayOf(PropTypes.number)]),
   range: PropTypes.bool,
@@ -493,0 +519,0 @@ scaleLength: PropTypes.number,

No alert changes

Improved metrics

Total package byte prevSize

218229

increased by1.33%

Lines of code

6320

increased by1.01%

Number of lines in readme file

53

increased by15.22%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedraf@^3.4.0

• + Addedperformance-now@2.1.0(transitive)

• + Addedraf@3.4.1(transitive)