react-switch - npm Package Compare versions

Comparing version 4.0.0-alpha.0 to 4.0.0-beta.0

CHANGELOG.md

@@ -8,2 +8,15 @@ # Changelog
 
+## [4.0.0-beta.0 - 2019-01-29]
+
+### Changed
+
+- The switch now includes a hidden nested checkbox input, which creates an expience more akin to a normal checkbox - clicking on the label will now cause a toggle, and the VoiceOver screen reader will now reliably read the label.
+- The switch will now always fire the onChange event if the dragStop event occurs <250ms after the dragStart event since that feels like a click.
+- Aria role changed from "checkbox" to "switch".
+- Pressing enter no longer activates the switch (spacebar still does)
+
+### Fixed
+
+- Fix glitch where the clicking the handle wouldn't trigger onChange event when browser window was out of focus on Windows.
+
 ## [3.0.3 - 2018-06-15]
@@ -46,3 +59,3 @@
 3.  Remove prop-types from production mode. Prop-types are still there in development mode so developer experience is unchanged.
-4.  Mangle property names with uglify by putting a $-sign at the start of the properties that are safe to mangle.
+4.  Mangle property names with uglify by putting a \$-sign at the start of the properties that are safe to mangle.
 
@@ -49,0 +62,0 @@ ### Fixed

dist/react-switch.dev.js

@@ -32,3 +32,2 @@ var React = require('react');
     React.createElement( 'path', {
-      /* eslint-disable max-len */
       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" })
@@ -121,3 +120,3 @@ )
 
-var ReactSwitch = (function (Component) {
+var ReactSwitch = /*@__PURE__*/(function (Component) {
   function ReactSwitch(props) {
@@ -138,2 +137,4 @@ Component.call(this, props);
     };
+    this.$lastDragAt = 0;
+    this.$lastKeyUpAt = 0;
 
@@ -147,6 +148,9 @@ this.$onMouseDown = this.$onMouseDown.bind(this);
     this.$onTouchEnd = this.$onTouchEnd.bind(this);
-    this.$onTouchCancel = this.$onTouchCancel.bind(this);
+    this.$onClick = this.$onClick.bind(this);
 
-    this.$onClick = this.$onClick.bind(this);
-    this.$onKeyDown = this.$onKeyDown.bind(this);
+    this.$onInputChange = this.$onInputChange.bind(this);
+    this.$onKeyUp = this.$onKeyUp.bind(this);
+    this.$setHasOutline = this.$setHasOutline.bind(this);
+    this.$unsetHasOutline = this.$unsetHasOutline.bind(this);
+    this.$getInputRef = this.$getInputRef.bind(this);
   }
@@ -166,2 +170,3 @@
   ReactSwitch.prototype.$onDragStart = function $onDragStart (clientX) {
+    this.$inputRef.focus();
     this.setState({
@@ -177,11 +182,20 @@ $startX: clientX,
     var $startX = ref.$startX;
+    var $isDragging = ref.$isDragging;
+    var $pos = ref.$pos;
     var ref$1 = this.props;
     var checked = ref$1.checked;
     var startPos = checked ? this.$checkedPos : this.$uncheckedPos;
-    var newPos = startPos + clientX - $startX;
-    var $pos = Math.min(
+    var mousePos = startPos + clientX - $startX;
+    // We need this check to fix a windows glitch where onDrag is triggered onMouseDown in some cases
+    if (!$isDragging && clientX !== $startX) {
+      this.setState({ $isDragging: true });
+    }
+    var newPos = Math.min(
       this.$checkedPos,
-      Math.max(this.$uncheckedPos, newPos)
+      Math.max(this.$uncheckedPos, mousePos)
     );
-    this.setState({ $pos: $pos, $isDragging: true });
+    // Prevent unnecessary rerenders
+    if (newPos !== $pos) {
+      this.setState({ $pos: newPos });
+    }
   };
@@ -196,43 +210,29 @@
     var checked = ref$1.checked;
-    var onChange = ref$1.onChange;
-    var id = ref$1.id;
+    var halfwayCheckpoint = (this.$checkedPos + this.$uncheckedPos) / 2;
 
     // Simulate clicking the handle
-    if (!$isDragging) {
-      this.setState({ $hasOutline: false });
-      onChange(!checked, event, id);
-      return;
-    }
     var timeSinceStart = Date.now() - $dragStartingTime;
-    if (timeSinceStart < 250) {
-      this.setState({ $isDragging: false, $hasOutline: false });
-      onChange(!checked, event, id);
-      return;
-    }
-    if (checked) {
-      if ($pos > (this.$checkedPos + this.$uncheckedPos) / 2) {
-        this.setState({
-          $pos: this.$checkedPos,
-          $isDragging: false,
-          $hasOutline: false
-        });
-        return;
+    if (!$isDragging || timeSinceStart < 250) {
+      this.$onChange(event);
+
+      // Handle dragging from checked position
+    } else if (checked) {
+      if ($pos > halfwayCheckpoint) {
+        this.setState({ $pos: this.$checkedPos });
+      } else {
+        this.$onChange(event);
       }
-      this.setState({ $isDragging: false, $hasOutline: false });
-      onChange(false, event, id);
-      return;
+      // Handle dragging from unchecked position
+    } else if ($pos < halfwayCheckpoint) {
+      this.setState({ $pos: this.$uncheckedPos });
+    } else {
+      this.$onChange(event);
     }
-    if ($pos < (this.$checkedPos + this.$uncheckedPos) / 2) {
-      this.setState({
-        $pos: this.$uncheckedPos,
-        $isDragging: false,
-        $hasOutline: false
-      });
-      return;
-    }
+
     this.setState({ $isDragging: false, $hasOutline: false });
-    onChange(true, event, id);
+    this.$lastDragAt = Date.now();
   };
 
   ReactSwitch.prototype.$onMouseDown = function $onMouseDown (event) {
+    event.preventDefault();
     // Ignore right click and scroll
@@ -260,2 +260,3 @@ if (typeof event.button === "number" && event.button !== 0) {
   ReactSwitch.prototype.$onTouchStart = function $onTouchStart (event) {
+    this.$checkedStateFromDragging = null;
     this.$onDragStart(event.touches[0].clientX);
@@ -273,15 +274,38 @@ };
 
-  ReactSwitch.prototype.$onTouchCancel = function $onTouchCancel () {
+  ReactSwitch.prototype.$onInputChange = function $onInputChange (event) {
+    // This condition is unfortunately needed in some browsers where the input's change event might get triggered
+    // right after the dragstop event is triggered (occurs when dropping over a label element)
+    if (Date.now() - this.$lastDragAt > 50) {
+      this.$onChange(event);
+      // Prevent clicking label, but not key activation from setting outline to true - yes, this is absurd
+      if (Date.now() - this.$lastKeyUpAt > 50) {
+        this.setState({ $hasOutline: false });
+      }
+    }
+  };
+
+  ReactSwitch.prototype.$onKeyUp = function $onKeyUp () {
+    this.$lastKeyUpAt = Date.now();
+  };
+
+  ReactSwitch.prototype.$setHasOutline = function $setHasOutline () {
+    this.setState({ $hasOutline: true });
+  };
+
+  ReactSwitch.prototype.$unsetHasOutline = function $unsetHasOutline () {
     this.setState({ $hasOutline: false });
   };
 
+  ReactSwitch.prototype.$getInputRef = function $getInputRef (el) {
+    this.$inputRef = el;
+  };
+
   ReactSwitch.prototype.$onClick = function $onClick (event) {
-    var ref = this.props;
-    var checked = ref.checked;
-    var onChange = ref.onChange;
-    var id = ref.id;
-    onChange(!checked, event, id);
+    event.preventDefault();
+    this.$inputRef.focus();
+    this.$onChange(event);
+    this.setState({ $hasOutline: false });
   };
 
-  ReactSwitch.prototype.$onKeyDown = function $onKeyDown (event) {
+  ReactSwitch.prototype.$onChange = function $onChange (event) {
     var ref = this.props;
@@ -291,14 +315,6 @@ var checked = ref.checked;
     var id = ref.id;
-    var ref$1 = this.state;
-    var $isDragging = ref$1.$isDragging;
-    // Trigger change on spacebar and enter keys (in violation of wai-aria spec).
-    if ((event.keyCode === 32 || event.keyCode === 13) && !$isDragging) {
-      event.preventDefault();
-      onChange(!checked, event, id);
-    }
+    onChange(!checked, event, id);
   };
 
   ReactSwitch.prototype.render = function render () {
-    var this$1 = this;
-
     var ref = this.props;
@@ -406,4 +422,4 @@ var checked = ref.checked;
       ),
+      display: "inline-block",
       cursor: disabled ? "default" : "pointer",
-      display: "inline-block",
       borderRadius: "50%",
@@ -427,6 +443,17 @@ position: "absolute",
 
+    var inputStyle = {
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      height: 1,
+      margin: -1,
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      width: 1
+    };
+
     return (
       React.createElement( 'div', { className: className, style: rootStyle },
         React.createElement( 'div', {
-          className: "react-switch-bg", style: backgroundStyle, onClick: disabled ? null : this.$onClick },
+          className: "react-switch-bg", style: backgroundStyle, onClick: disabled ? null : this.$onClick, onMouseDown: function (e) { return e.preventDefault(); } },
           checkedIcon$$1 && React.createElement( 'div', { style: checkedIconStyle }, checkedIcon$$1),
@@ -438,3 +465,5 @@ uncheckedIcon$$1 && (
         React.createElement( 'div', {
-          className: "react-switch-handle", role: "checkbox", tabIndex: disabled ? null : 0, onMouseDown: disabled ? null : this.$onMouseDown, onTouchStart: disabled ? null : this.$onTouchStart, onTouchMove: disabled ? null : this.$onTouchMove, onTouchEnd: disabled ? null : this.$onTouchEnd, onTouchCancel: disabled ? null : this.$onTouchCancel, onKeyDown: this.$onKeyDown, onFocus: function () { return this$1.setState({ $hasOutline: true }); }, onBlur: function () { return this$1.setState({ $hasOutline: false }); }, style: handleStyle, id: id, 'aria-checked': checked, 'aria-disabled': disabled, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel })
+          className: "react-switch-handle", style: handleStyle, onClick: function (e) { return e.preventDefault(); }, onMouseDown: disabled ? null : this.$onMouseDown, onTouchStart: disabled ? null : this.$onTouchStart, onTouchMove: disabled ? null : this.$onTouchMove, onTouchEnd: disabled ? null : this.$onTouchEnd, onTouchCancel: disabled ? null : this.$unsetHasOutline }),
+        React.createElement( 'input', {
+          type: "checkbox", role: "switch", id: id, checked: checked, disabled: disabled, onFocus: this.$setHasOutline, onBlur: this.$unsetHasOutline, onKeyUp: this.$onKeyUp, onChange: this.$onInputChange, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, style: inputStyle, ref: this.$getInputRef })
       )
@@ -441,0 +470,0 @@ );

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,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;
+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,s,o,n){var h=(t-s)/(i-s);if(0===h)return o;if(1===h)return n;for(var e="#",a=1;a<6;a+=2){var r=parseInt(o.substr(a,2),16),c=parseInt(n.substr(a,2),16),l=Math.round((1-h)*r+h*c).toString(16);1===l.length&&(l="0"+l),e+=l}return e}function convertShorthandColor(t){if(7===t.length)return t;for(var i="#",s=1;s<4;s+=1)i+=t[s]+t[s];return i}function getBackgroundColor(t,i,s,o,n){return createBackgroundColor(t,i,s,convertShorthandColor(o),convertShorthandColor(n))}var ReactSwitch=function(n){function t(t){n.call(this,t);var i=t.height,s=t.width,o=t.checked;this.t=t.handleDiameter||i-2,this.i=Math.max(s-i,s-(i+this.t)/2),this.s=Math.max(0,(i-this.t)/2),this.state={o:o?this.i:this.s},this.n=0,this.h=0,this.e=this.e.bind(this),this.a=this.a.bind(this),this.r=this.r.bind(this),this.c=this.c.bind(this),this.l=this.l.bind(this),this.u=this.u.bind(this),this.f=this.f.bind(this),this.p=this.p.bind(this),this.g=this.g.bind(this),this.b=this.b.bind(this),this.v=this.v.bind(this),this.w=this.w.bind(this)}return n&&(t.__proto__=n),((t.prototype=Object.create(n&&n.prototype)).constructor=t).prototype.componentWillReceiveProps=function(t){this.setState({o:t.checked?this.i:this.s})},t.prototype.k=function(t){this.y.focus(),this.setState({M:t,R:!0,m:Date.now()})},t.prototype.C=function(t){var i=this.state,s=i.M,o=i.o,n=(this.props.checked?this.i:this.s)+t-s;i.T||t===s||this.setState({T:!0});var h=Math.min(this.i,Math.max(this.s,n));h!==o&&this.setState({o:h})},t.prototype.S=function(t){var i=this.state,s=i.o,o=i.T,n=i.m,h=this.props.checked,e=(this.i+this.s)/2,a=Date.now()-n;!o||a<250?this.$(t):h?e<s?this.setState({o:this.i}):this.$(t):s<e?this.setState({o:this.s}):this.$(t),this.setState({T:!1,R:!1}),this.n=Date.now()},t.prototype.e=function(t){t.preventDefault(),"number"==typeof t.button&&0!==t.button||(this.k(t.clientX),window.addEventListener("mousemove",this.a),window.addEventListener("mouseup",this.r))},t.prototype.a=function(t){t.preventDefault(),this.C(t.clientX)},t.prototype.r=function(t){this.S(t),window.removeEventListener("mousemove",this.a),window.removeEventListener("mouseup",this.r)},t.prototype.c=function(t){this.x=null,this.k(t.touches[0].clientX)},t.prototype.l=function(t){this.C(t.touches[0].clientX)},t.prototype.u=function(t){t.preventDefault(),this.S(t)},t.prototype.p=function(t){50<Date.now()-this.n&&(this.$(t),50<Date.now()-this.h&&this.setState({R:!1}))},t.prototype.g=function(){this.h=Date.now()},t.prototype.b=function(){this.setState({R:!0})},t.prototype.v=function(){this.setState({R:!1})},t.prototype.w=function(t){this.y=t},t.prototype.f=function(t){t.preventDefault(),this.y.focus(),this.$(t),this.setState({R:!1})},t.prototype.$=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},t.prototype.render=function(){var t=this.props,i=t.checked,s=t.disabled,o=t.className,n=t.offColor,h=t.onColor,e=t.offHandleColor,a=t.onHandleColor,r=t.checkedIcon,c=t.uncheckedIcon,l=t.boxShadow,u=t.activeBoxShadow,d=t.height,f=t.width,p=t.id,g=t["aria-labelledby"],b=t["aria-label"],v=this.state,w=v.o,k=v.T,y=v.R,M={position:"relative",display:"inline-block",textAlign:"left",opacity:s?.5:1,borderRadius:d/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:d,width:f,margin:Math.max(0,(this.t-d)/2),position:"relative",background:getBackgroundColor(w,this.i,this.s,n,h),borderRadius:d/2,cursor:s?"default":"pointer",WebkitTransition:k?null:"background 0.25s",MozTransition:k?null:"background 0.25s",transition:k?null:"background 0.25s"},m={height:d,width:Math.min(1.5*d,f-(this.t+d)/2+1),position:"relative",opacity:(w-this.s)/(this.i-this.s),pointerEvents:"none",WebkitTransition:k?null:"opacity 0.25s",MozTransition:k?null:"opacity 0.25s",transition:k?null:"opacity 0.25s"},C={height:d,width:Math.min(1.5*d,f-(this.t+d)/2+1),position:"absolute",opacity:1-(w-this.s)/(this.i-this.s),right:0,top:0,pointerEvents:"none",WebkitTransition:k?null:"opacity 0.25s",MozTransition:k?null:"opacity 0.25s",transition:k?null:"opacity 0.25s"},T={height:this.t,width:this.t,background:getBackgroundColor(w,this.i,this.s,e,a),display:"inline-block",cursor:s?"default":"pointer",borderRadius:"50%",position:"absolute",transform:"translateX("+w+"px)",top:Math.max(0,(d-this.t)/2),outline:0,boxShadow:y?u:l,border:0,WebkitTransition:k?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:k?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:k?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"};return React.createElement("div",{className:o,style:M},React.createElement("div",{className:"react-switch-bg",style:R,onClick:s?null:this.f,onMouseDown:function(t){return t.preventDefault()}},r&&React.createElement("div",{style:m},r),c&&React.createElement("div",{style:C},c)),React.createElement("div",{className:"react-switch-handle",style:T,onClick:function(t){return t.preventDefault()},onMouseDown:s?null:this.e,onTouchStart:s?null:this.c,onTouchMove:s?null:this.l,onTouchEnd:s?null:this.u,onTouchCancel:s?null:this.v}),React.createElement("input",{type:"checkbox",role:"switch",id:p,checked:i,disabled:s,onFocus:this.b,onBlur:this.v,onKeyUp:this.g,onChange:this.p,"aria-labelledby":g,"aria-label":b,style:{border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1},ref:this.w}))},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": "4.0.0-alpha.0",
+  "version": "4.0.0-beta.0",
   "description": "Draggable toggle-switch component for react",
   "main": "index.js",
   "scripts": {
-    "dev": "concurrently \"npm run lib:dev\" \"npm run demo:dev\"",
-    "build": "npm run lib:prod && npm run demo:prod",
-    "lib:dev": "rollup -c -w -o dist/react-switch.dev.js",
+    "dev": "concurrently \"npm run lib:watch\" \"npm run demo:dev\"",
+    "build": "npm run lib:prod && npm run lib:dev && npm run demo:prod",
+    "lib:watch": "rollup -c -w -o dist/react-switch.dev.js",
+    "lib:dev": "rollup -c -o dist/react-switch.dev.js",
     "lib:prod": "NODE_ENV=production rollup -c -o dist/react-switch.min.js",
@@ -36,39 +37,39 @@ "demo:dev": "webpack-dev-server --mode development",
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.49",
-    "@babel/core": "^7.0.0-beta.49",
-    "@babel/preset-env": "^7.0.0-beta.49",
-    "@babel/preset-react": "^7.0.0-beta.49",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^8.2.3",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^8.0.0-beta.3",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
-    "concurrently": "^3.5.1",
-    "css-loader": "^0.28.11",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.4",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.9.1",
-    "gzip-size-cli": "^2.1.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
+    "concurrently": "^4.1.0",
+    "css-loader": "^2.1.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.11.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.12.0",
+    "gzip-size-cli": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.1.0",
-    "prettier": "^1.13.4",
-    "raf": "^3.4.0",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
-    "react-test-renderer": "^16.4.0",
-    "rollup": "^0.59.4",
-    "rollup-plugin-babel": "^4.0.0-beta.4",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-uglify": "^4.0.0",
-    "style-loader": "^0.21.0",
-    "webpack": "^4.12.0",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.0.1",
-    "webpack-dev-server": "^3.1.4"
+    "jest": "^23.6.0",
+    "prettier": "^1.15.3",
+    "raf": "^3.4.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-test-renderer": "^16.7.0",
+    "rollup": "^1.0.0",
+    "rollup-plugin-babel": "^4.2.0",
+    "rollup-plugin-buble": "^0.19.6",
+    "rollup-plugin-uglify": "^6.0.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.3",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14"
   },
@@ -85,4 +86,4 @@ "keywords": [
   "dependencies": {
-    "prop-types": "^15.6.1"
+    "prop-types": "^15.6.2"
   }
 }

README.md

@@ -12,4 +12,4 @@ A draggable toggle-switch component for React.
 - **Draggable** with the mouse or with a touch screen.
+- **Customizable** - Easy to customize size, color and more.
 - **Accessible** to visually impaired users and those who can't use a mouse.
-- **Customizable** - Easy to customize size, color and more.
 - **Small package size** - 2 kB gzipped.
@@ -62,4 +62,3 @@ - **It Just Works** - Sensible default styling. Uses inline styles, so no need to import a separate css file.
 
-The Switch component in the above example is nested inside a label tag. The label tag has an htmlFor-value that is identical to the id-value that is passed to the Switch ("normal-switch").
-These features are there to make the toggle-switch accessible to people with reduced sight who use screen readers. It will make screen readers read out the label text when the toggle-switch is selected. If you instead just put some text next to the switch, the screen reader will just read out "checkbox - not checked" or something like that and the user will have no idea what it is for. (The switch is actually a checkbox under the hood.)
+The Switch component in the above example is nested inside a label tag. The label tag has an htmlFor-value that is identical to the id-value that is passed to the Switch ("normal-switch"). This is to make sure that users can click the label to toggle the switch, and that the label text is read out to people with reduced sight who use screen readers. If one would theoretically just put some text next to the switch, the screen reader will just read out "switch off" or something like that and the user will have no idea what it is for.
 
@@ -102,3 +101,3 @@ It's not strictly necessary to both nest the switch inside the label AND use the htmlFor prop to link the label and the switch. It should be enough to do just one. However, using both will ["cover 100% of assistive devices"](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md) and free you from annoying eslint errors.
 
-You're welcome to contribute to react-switch.
+You're welcome to contribute to react-switch. Keep in mind that big changes have to be thoroughly tested on lots of different browsers and devices before they can be merged.
 
@@ -105,0 +104,0 @@ To set up the project:

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

Total package byte prevSize

411345

increased by782.66%

Number of package files

10

increased by11.11%

Lines of code

631

increased by3.95%

Worsened metrics

Number of lines in readme file

131

decreased by-0.76%

Dependency changes

• Updatedprop-types@^15.6.2