react-switch - npm Package Compare versions

Comparing version 3.0.4 to 4.0.0-alpha.0

dist/react-switch.dev.js

@@ -162,3 +162,7 @@ var React = require('react');
   ReactSwitch.prototype.$onDragStart = function $onDragStart (clientX) {
-    this.setState({ $startX: clientX, $hasOutline: true });
+    this.setState({
+      $startX: clientX,
+      $hasOutline: true,
+      $dragStartingTime: Date.now()
+    });
   };
@@ -184,2 +188,3 @@
     var $isDragging = ref.$isDragging;
+    var $dragStartingTime = ref.$dragStartingTime;
     var ref$1 = this.props;
@@ -196,2 +201,8 @@ var checked = ref$1.checked;
     }
+    var timeSinceStart = Date.now() - $dragStartingTime;
+    if (timeSinceStart < 250) {
+      this.setState({ $isDragging: false, $hasOutline: false });
+      onChange(!checked, event, id);
+      return;
+    }
     if (checked) {
@@ -198,0 +209,0 @@ if ($pos > (this.$checkedPos + this.$uncheckedPos) / 2) {

dist/react-switch.min.js

@@ -1,1 +0,1 @@
-var React=require("react"),uncheckedIcon=React.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},React.createElement("path",{d:"M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12",fill:"#fff",fillRule:"evenodd"})),checkedIcon=React.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},React.createElement("path",{d:"M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",fill:"#fff",fillRule:"evenodd"}));function createBackgroundColor(t,i,o,s,n){var h=(t-o)/(i-o);if(0===h)return s;if(1===h)return n;for(var e="#",a=1;a<6;a+=2){var r=parseInt(s.substr(a,2),16),l=parseInt(n.substr(a,2),16),c=Math.round((1-h)*r+h*l).toString(16);1===c.length&&(c="0"+c),e+=c}return e}function convertShorthandColor(t){if(7===t.length)return t;for(var i="#",o=1;o<4;o+=1)i+=t[o]+t[o];return i}function getBackgroundColor(t,i,o,s,n){return createBackgroundColor(t,i,o,convertShorthandColor(s),convertShorthandColor(n))}var ReactSwitch=function(n){function t(t){n.call(this,t);var i=t.height,o=t.width,s=t.checked;this.t=t.handleDiameter||i-2,this.i=Math.max(o-i,o-(i+this.t)/2),this.o=Math.max(0,(i-this.t)/2),this.state={s:s?this.i:this.o},this.n=this.n.bind(this),this.h=this.h.bind(this),this.e=this.e.bind(this),this.a=this.a.bind(this),this.r=this.r.bind(this),this.l=this.l.bind(this),this.c=this.c.bind(this),this.u=this.u.bind(this),this.f=this.f.bind(this)}return n&&(t.__proto__=n),((t.prototype=Object.create(n&&n.prototype)).constructor=t).prototype.componentWillReceiveProps=function(t){this.setState({s:t.checked?this.i:this.o})},t.prototype.g=function(t){this.setState({p:t,b:!0})},t.prototype.v=function(t){var i=Math.min(this.i,Math.max(this.o,(this.props.checked?this.i:this.o)+t-this.state.p));this.setState({s:i,k:!0})},t.prototype.w=function(t){var i=this.state,o=i.s,s=this.props,n=s.checked,h=s.onChange,e=s.id;return i.k?n?(this.i+this.o)/2<o?void this.setState({s:this.i,k:!1,b:!1}):(this.setState({k:!1,b:!1}),void h(!1,t,e)):void(o<(this.i+this.o)/2?this.setState({s:this.o,k:!1,b:!1}):(this.setState({k:!1,b:!1}),h(!0,t,e))):(this.setState({b:!1}),void h(!n,t,e))},t.prototype.n=function(t){"number"==typeof t.button&&0!==t.button||(this.g(t.clientX),window.addEventListener("mousemove",this.h),window.addEventListener("mouseup",this.e))},t.prototype.h=function(t){t.preventDefault(),this.v(t.clientX)},t.prototype.e=function(t){this.w(t),window.removeEventListener("mousemove",this.h),window.removeEventListener("mouseup",this.e)},t.prototype.a=function(t){this.g(t.touches[0].clientX)},t.prototype.r=function(t){this.v(t.touches[0].clientX)},t.prototype.l=function(t){t.preventDefault(),this.w(t)},t.prototype.c=function(){this.setState({b:!1})},t.prototype.u=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},t.prototype.f=function(t){var i=this.props,o=i.checked,s=i.onChange,n=i.id;32!==t.keyCode&&13!==t.keyCode||this.state.k||(t.preventDefault(),s(!o,t,n))},t.prototype.render=function(){var t=this,i=this.props,o=i.checked,s=i.disabled,n=i.className,h=i.offColor,e=i.onColor,a=i.offHandleColor,r=i.onHandleColor,l=i.checkedIcon,c=i.uncheckedIcon,u=i.boxShadow,d=i.activeBoxShadow,f=i.height,g=i.width,p=i.id,b=i["aria-labelledby"],v=i["aria-label"],k=this.state,w=k.s,y=k.k,$=k.b,M={position:"relative",display:"inline-block",textAlign:"left",opacity:s?.5:1,borderRadius:f/2,WebkitTransition:"opacity 0.25s",MozTransition:"opacity 0.25s",transition:"opacity 0.25s",touchAction:"none",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},R={height:f,width:g,margin:Math.max(0,(this.t-f)/2),position:"relative",background:getBackgroundColor(w,this.i,this.o,h,e),borderRadius:f/2,cursor:s?"default":"pointer",WebkitTransition:y?null:"background 0.25s",MozTransition:y?null:"background 0.25s",transition:y?null:"background 0.25s"},m={height:f,width:Math.min(1.5*f,g-(this.t+f)/2+1),position:"relative",opacity:(w-this.o)/(this.i-this.o),pointerEvents:"none",WebkitTransition:y?null:"opacity 0.25s",MozTransition:y?null:"opacity 0.25s",transition:y?null:"opacity 0.25s"},C={height:f,width:Math.min(1.5*f,g-(this.t+f)/2+1),position:"absolute",opacity:1-(w-this.o)/(this.i-this.o),right:0,top:0,pointerEvents:"none",WebkitTransition:y?null:"opacity 0.25s",MozTransition:y?null:"opacity 0.25s",transition:y?null:"opacity 0.25s"},T={height:this.t,width:this.t,background:getBackgroundColor(w,this.i,this.o,a,r),cursor:s?"default":"pointer",display:"inline-block",borderRadius:"50%",position:"absolute",transform:"translateX("+w+"px)",top:Math.max(0,(f-this.t)/2),outline:0,boxShadow:$?d:u,border:0,WebkitTransition:y?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:y?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:y?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"};return React.createElement("div",{className:n,style:M},React.createElement("div",{className:"react-switch-bg",style:R,onClick:s?null:this.u},l&&React.createElement("div",{style:m},l),c&&React.createElement("div",{style:C},c)),React.createElement("div",{className:"react-switch-handle",role:"checkbox",tabIndex:s?null:0,onMouseDown:s?null:this.n,onTouchStart:s?null:this.a,onTouchMove:s?null:this.r,onTouchEnd:s?null:this.l,onTouchCancel:s?null:this.c,onKeyDown:this.f,onFocus:function(){return t.setState({b:!0})},onBlur:function(){return t.setState({b:!1})},style:T,id:p,"aria-checked":o,"aria-disabled":s,"aria-labelledby":b,"aria-label":v}))},t}(React.Component);ReactSwitch.defaultProps={disabled:!1,offColor:"#888",onColor:"#080",offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:uncheckedIcon,checkedIcon:checkedIcon,boxShadow:null,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56},module.exports=ReactSwitch;
+var React=require("react"),uncheckedIcon=React.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},React.createElement("path",{d:"M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12",fill:"#fff",fillRule:"evenodd"})),checkedIcon=React.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},React.createElement("path",{d:"M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",fill:"#fff",fillRule:"evenodd"}));function createBackgroundColor(t,i,o,s,n){var h=(t-o)/(i-o);if(0===h)return s;if(1===h)return n;for(var e="#",a=1;a<6;a+=2){var r=parseInt(s.substr(a,2),16),l=parseInt(n.substr(a,2),16),c=Math.round((1-h)*r+h*l).toString(16);1===c.length&&(c="0"+c),e+=c}return e}function convertShorthandColor(t){if(7===t.length)return t;for(var i="#",o=1;o<4;o+=1)i+=t[o]+t[o];return i}function getBackgroundColor(t,i,o,s,n){return createBackgroundColor(t,i,o,convertShorthandColor(s),convertShorthandColor(n))}var ReactSwitch=function(n){function t(t){n.call(this,t);var i=t.height,o=t.width,s=t.checked;this.t=t.handleDiameter||i-2,this.i=Math.max(o-i,o-(i+this.t)/2),this.o=Math.max(0,(i-this.t)/2),this.state={s:s?this.i:this.o},this.n=this.n.bind(this),this.h=this.h.bind(this),this.e=this.e.bind(this),this.a=this.a.bind(this),this.r=this.r.bind(this),this.l=this.l.bind(this),this.c=this.c.bind(this),this.u=this.u.bind(this),this.f=this.f.bind(this)}return n&&(t.__proto__=n),((t.prototype=Object.create(n&&n.prototype)).constructor=t).prototype.componentWillReceiveProps=function(t){this.setState({s:t.checked?this.i:this.o})},t.prototype.g=function(t){this.setState({p:t,b:!0,v:Date.now()})},t.prototype.k=function(t){var i=Math.min(this.i,Math.max(this.o,(this.props.checked?this.i:this.o)+t-this.state.p));this.setState({s:i,w:!0})},t.prototype.y=function(t){var i=this.state,o=i.s,s=i.v,n=this.props,h=n.checked,e=n.onChange,a=n.id;return i.w?Date.now()-s<250?(this.setState({w:!1,b:!1}),void e(!h,t,a)):h?(this.i+this.o)/2<o?void this.setState({s:this.i,w:!1,b:!1}):(this.setState({w:!1,b:!1}),void e(!1,t,a)):void(o<(this.i+this.o)/2?this.setState({s:this.o,w:!1,b:!1}):(this.setState({w:!1,b:!1}),e(!0,t,a))):(this.setState({b:!1}),void e(!h,t,a))},t.prototype.n=function(t){"number"==typeof t.button&&0!==t.button||(this.g(t.clientX),window.addEventListener("mousemove",this.h),window.addEventListener("mouseup",this.e))},t.prototype.h=function(t){t.preventDefault(),this.k(t.clientX)},t.prototype.e=function(t){this.y(t),window.removeEventListener("mousemove",this.h),window.removeEventListener("mouseup",this.e)},t.prototype.a=function(t){this.g(t.touches[0].clientX)},t.prototype.r=function(t){this.k(t.touches[0].clientX)},t.prototype.l=function(t){t.preventDefault(),this.y(t)},t.prototype.c=function(){this.setState({b:!1})},t.prototype.u=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},t.prototype.f=function(t){var i=this.props,o=i.checked,s=i.onChange,n=i.id;32!==t.keyCode&&13!==t.keyCode||this.state.w||(t.preventDefault(),s(!o,t,n))},t.prototype.render=function(){var t=this,i=this.props,o=i.checked,s=i.disabled,n=i.className,h=i.offColor,e=i.onColor,a=i.offHandleColor,r=i.onHandleColor,l=i.checkedIcon,c=i.uncheckedIcon,u=i.boxShadow,d=i.activeBoxShadow,f=i.height,g=i.width,p=i.id,b=i["aria-labelledby"],v=i["aria-label"],k=this.state,w=k.s,y=k.w,$=k.b,M={position:"relative",display:"inline-block",textAlign:"left",opacity:s?.5:1,borderRadius:f/2,WebkitTransition:"opacity 0.25s",MozTransition:"opacity 0.25s",transition:"opacity 0.25s",touchAction:"none",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},R={height:f,width:g,margin:Math.max(0,(this.t-f)/2),position:"relative",background:getBackgroundColor(w,this.i,this.o,h,e),borderRadius:f/2,cursor:s?"default":"pointer",WebkitTransition:y?null:"background 0.25s",MozTransition:y?null:"background 0.25s",transition:y?null:"background 0.25s"},m={height:f,width:Math.min(1.5*f,g-(this.t+f)/2+1),position:"relative",opacity:(w-this.o)/(this.i-this.o),pointerEvents:"none",WebkitTransition:y?null:"opacity 0.25s",MozTransition:y?null:"opacity 0.25s",transition:y?null:"opacity 0.25s"},T={height:f,width:Math.min(1.5*f,g-(this.t+f)/2+1),position:"absolute",opacity:1-(w-this.o)/(this.i-this.o),right:0,top:0,pointerEvents:"none",WebkitTransition:y?null:"opacity 0.25s",MozTransition:y?null:"opacity 0.25s",transition:y?null:"opacity 0.25s"},C={height:this.t,width:this.t,background:getBackgroundColor(w,this.i,this.o,a,r),cursor:s?"default":"pointer",display:"inline-block",borderRadius:"50%",position:"absolute",transform:"translateX("+w+"px)",top:Math.max(0,(f-this.t)/2),outline:0,boxShadow:$?d:u,border:0,WebkitTransition:y?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:y?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:y?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"};return React.createElement("div",{className:n,style:M},React.createElement("div",{className:"react-switch-bg",style:R,onClick:s?null:this.u},l&&React.createElement("div",{style:m},l),c&&React.createElement("div",{style:T},c)),React.createElement("div",{className:"react-switch-handle",role:"checkbox",tabIndex:s?null:0,onMouseDown:s?null:this.n,onTouchStart:s?null:this.a,onTouchMove:s?null:this.r,onTouchEnd:s?null:this.l,onTouchCancel:s?null:this.c,onKeyDown:this.f,onFocus:function(){return t.setState({b:!0})},onBlur:function(){return t.setState({b:!1})},style:C,id:p,"aria-checked":o,"aria-disabled":s,"aria-labelledby":b,"aria-label":v}))},t}(React.Component);ReactSwitch.defaultProps={disabled:!1,offColor:"#888",onColor:"#080",offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:uncheckedIcon,checkedIcon:checkedIcon,boxShadow:null,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56},module.exports=ReactSwitch;

package.json

 {
   "name": "react-switch",
-  "version": "3.0.4",
+  "version": "4.0.0-alpha.0",
   "description": "Draggable toggle-switch component for react",
@@ -5,0 +5,0 @@ "main": "index.js",

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

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

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

Total package byte prevSize

46603

increased by0.87%

Lines of code

607

increased by2.02%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes