New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-switch
Advanced tools
react-switch - npm Package Compare versions
Comparing version 7.0.0-experimental.0 to 7.0.0
@@ -8,2 +8,18 @@ # Changelog | ||
| ## [7.0.0 - 2022-06-09] | ||
| ### Changed | ||
| - Export package as ESM, fixes incompatibility with Rollup/Vite and makes output slightly smaller ([@Niputi](https://github.com/Niputi)) | ||
| ## [6.1.0 - 2022-06-08] | ||
| ### Added | ||
| - Add react@18 as a peerDependency ([@smhg](https://github.com/smhg)) | ||
| ### Changed | ||
| - Replace Enzyme with React testing library ([@smhg](https://github.com/smhg)) | ||
| ## [6.0.0 - 2021-01-06] | ||
@@ -10,0 +26,0 @@ |
@@ -7,3 +7,3 @@ Object.defineProperty(exports, '__esModule', { value: true }); | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
@@ -21,3 +21,2 @@ var source = arguments[i]; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
@@ -24,0 +23,0 @@ } |
@@ -1,1 +0,1 @@ | ||
| Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function i(){return i=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var s=arguments[i];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(t[n]=s[n])}return t},i.apply(this,arguments)}var s=t.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},t.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"})),n=t.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},t.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 o(t){if(7===t.length)return t;for(var i="#",s=1;s<4;s+=1)i+=t[s]+t[s];return i}function h(t,i,s,n,h){return function(t,i,s,n,o){var h=(t-s)/(i-s);if(0===h)return n;if(1===h)return o;for(var e="#",a=1;a<6;a+=2){var r=parseInt(n.substr(a,2),16),l=parseInt(o.substr(a,2),16),u=Math.round((1-h)*r+h*l).toString(16);1===u.length&&(u="0"+u),e+=u}return e}(t,i,s,o(n),o(h))}var e=function(s){function n(t){s.call(this,t);var i=t.height,n=t.width,o=t.checked;this.t=t.handleDiameter||i-2,this.i=Math.max(n-i,n-(i+this.t)/2),this.o=Math.max(0,(i-this.t)/2),this.state={h:o?this.i:this.o},this.l=0,this.u=0,this.p=this.p.bind(this),this.v=this.v.bind(this),this.g=this.g.bind(this),this.k=this.k.bind(this),this.M=this.M.bind(this),this.m=this.m.bind(this),this.T=this.T.bind(this),this.$=this.$.bind(this),this.C=this.C.bind(this),this.D=this.D.bind(this),this.O=this.O.bind(this),this.S=this.S.bind(this)}return s&&(n.__proto__=s),(n.prototype=Object.create(s&&s.prototype)).constructor=n,n.prototype.componentDidMount=function(){this.W=!0},n.prototype.componentDidUpdate=function(t){t.checked!==this.props.checked&&this.setState({h:this.props.checked?this.i:this.o})},n.prototype.componentWillUnmount=function(){this.W=!1},n.prototype.I=function(t){this.H.focus(),this.setState({R:t,j:!0,B:Date.now()})},n.prototype.L=function(t){var i=this.state,s=i.R,n=i.h,o=(this.props.checked?this.i:this.o)+t-s;i.N||t===s||this.setState({N:!0});var h=Math.min(this.i,Math.max(this.o,o));h!==n&&this.setState({h:h})},n.prototype.U=function(t){var i=this.state,s=i.h,n=i.N,o=i.B,h=this.props.checked,e=(this.i+this.o)/2;this.setState({h:this.props.checked?this.i:this.o});var a=Date.now()-o;(!n||a<250||(h&&s<=e||!h&&s>=e))&&this.A(t),this.W&&this.setState({N:!1,j:!1}),this.l=Date.now()},n.prototype.p=function(t){t.preventDefault(),"number"==typeof t.button&&0!==t.button||(this.I(t.clientX),window.addEventListener("mousemove",this.v),window.addEventListener("mouseup",this.g))},n.prototype.v=function(t){t.preventDefault(),this.L(t.clientX)},n.prototype.g=function(t){this.U(t),window.removeEventListener("mousemove",this.v),window.removeEventListener("mouseup",this.g)},n.prototype.k=function(t){this.X=null,this.I(t.touches[0].clientX)},n.prototype.M=function(t){this.L(t.touches[0].clientX)},n.prototype.m=function(t){t.preventDefault(),this.U(t)},n.prototype.$=function(t){Date.now()-this.l>50&&(this.A(t),Date.now()-this.u>50&&this.W&&this.setState({j:!1}))},n.prototype.C=function(){this.u=Date.now()},n.prototype.D=function(){this.setState({j:!0})},n.prototype.O=function(){this.setState({j:!1})},n.prototype.S=function(t){this.H=t},n.prototype.T=function(t){t.preventDefault(),this.H.focus(),this.A(t),this.W&&this.setState({j:!1})},n.prototype.A=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},n.prototype.render=function(){var s=this.props,n=s.checked,o=s.disabled,e=s.className,a=s.offColor,r=s.onColor,l=s.offHandleColor,u=s.onHandleColor,c=s.checkedIcon,d=s.uncheckedIcon,f=s.checkedHandleIcon,p=s.uncheckedHandleIcon,b=s.boxShadow,v=s.activeBoxShadow,g=s.height,y=s.width,w=s.borderRadius,k=function(t,i){var s={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&-1===i.indexOf(n)&&(s[n]=t[n]);return s}(s,["checked","disabled","className","offColor","onColor","offHandleColor","onHandleColor","checkedIcon","uncheckedIcon","checkedHandleIcon","uncheckedHandleIcon","boxShadow","activeBoxShadow","height","width","borderRadius","handleDiameter"]),M=this.state,m=M.h,T=M.N,x=M.j,$={position:"relative",display:"inline-block",textAlign:"left",opacity:o?.5:1,direction:"ltr",borderRadius:g/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"},C={height:g,width:y,margin:Math.max(0,(this.t-g)/2),position:"relative",background:h(m,this.i,this.o,a,r),borderRadius:"number"==typeof w?w:g/2,cursor:o?"default":"pointer",WebkitTransition:T?null:"background 0.25s",MozTransition:T?null:"background 0.25s",transition:T?null:"background 0.25s"},D={height:g,width:Math.min(1.5*g,y-(this.t+g)/2+1),position:"relative",opacity:(m-this.o)/(this.i-this.o),pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},O={height:g,width:Math.min(1.5*g,y-(this.t+g)/2+1),position:"absolute",opacity:1-(m-this.o)/(this.i-this.o),right:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},S={height:this.t,width:this.t,background:h(m,this.i,this.o,l,u),display:"inline-block",cursor:o?"default":"pointer",borderRadius:"number"==typeof w?w-1:"50%",position:"absolute",transform:"translateX("+m+"px)",top:Math.max(0,(g-this.t)/2),outline:0,boxShadow:x?v:b,border:0,WebkitTransition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"},W={height:this.t,width:this.t,opacity:Math.max(2*(1-(m-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},z={height:this.t,width:this.t,opacity:Math.max(2*((m-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"};return t.createElement("div",{className:e,style:$},t.createElement("div",{className:"react-switch-bg",style:C,onClick:o?null:this.T,onMouseDown:function(t){return t.preventDefault()}},c&&t.createElement("div",{style:D},c),d&&t.createElement("div",{style:O},d)),t.createElement("div",{className:"react-switch-handle",style:S,onClick:function(t){return t.preventDefault()},onMouseDown:o?null:this.p,onTouchStart:o?null:this.k,onTouchMove:o?null:this.M,onTouchEnd:o?null:this.m,onTouchCancel:o?null:this.O},p&&t.createElement("div",{style:W},p),f&&t.createElement("div",{style:z},f)),t.createElement("input",i({},{type:"checkbox",role:"switch","aria-checked":n,checked:n,disabled:o,style:{border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}},k,{ref:this.S,onFocus:this.D,onBlur:this.O,onKeyUp:this.C,onChange:this.$})))},n}(t.Component);e.defaultProps={disabled:!1,offColor:"#888",onColor:"#080",offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:s,checkedIcon:n,boxShadow:null,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56},exports.default=e; | ||
| Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function i(){return i=Object.assign?Object.assign.bind():function(t){for(var i=1;i<arguments.length;i++){var s=arguments[i];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(t[n]=s[n])}return t},i.apply(this,arguments)}var s=t.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},t.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"})),n=t.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},t.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 o(t){if(7===t.length)return t;for(var i="#",s=1;s<4;s+=1)i+=t[s]+t[s];return i}function h(t,i,s,n,h){return function(t,i,s,n,o){var h=(t-s)/(i-s);if(0===h)return n;if(1===h)return o;for(var e="#",a=1;a<6;a+=2){var r=parseInt(n.substr(a,2),16),l=parseInt(o.substr(a,2),16),u=Math.round((1-h)*r+h*l).toString(16);1===u.length&&(u="0"+u),e+=u}return e}(t,i,s,o(n),o(h))}var e=function(s){function n(t){s.call(this,t);var i=t.height,n=t.width,o=t.checked;this.t=t.handleDiameter||i-2,this.i=Math.max(n-i,n-(i+this.t)/2),this.o=Math.max(0,(i-this.t)/2),this.state={h:o?this.i:this.o},this.l=0,this.u=0,this.p=this.p.bind(this),this.v=this.v.bind(this),this.g=this.g.bind(this),this.k=this.k.bind(this),this.M=this.M.bind(this),this.m=this.m.bind(this),this.T=this.T.bind(this),this.$=this.$.bind(this),this.C=this.C.bind(this),this.O=this.O.bind(this),this.D=this.D.bind(this),this.S=this.S.bind(this)}return s&&(n.__proto__=s),(n.prototype=Object.create(s&&s.prototype)).constructor=n,n.prototype.componentDidMount=function(){this.W=!0},n.prototype.componentDidUpdate=function(t){t.checked!==this.props.checked&&this.setState({h:this.props.checked?this.i:this.o})},n.prototype.componentWillUnmount=function(){this.W=!1},n.prototype.I=function(t){this.H.focus(),this.setState({j:t,R:!0,B:Date.now()})},n.prototype.L=function(t){var i=this.state,s=i.j,n=i.h,o=(this.props.checked?this.i:this.o)+t-s;i.N||t===s||this.setState({N:!0});var h=Math.min(this.i,Math.max(this.o,o));h!==n&&this.setState({h:h})},n.prototype.U=function(t){var i=this.state,s=i.h,n=i.N,o=i.B,h=this.props.checked,e=(this.i+this.o)/2;this.setState({h:this.props.checked?this.i:this.o});var a=Date.now()-o;(!n||a<250||(h&&s<=e||!h&&s>=e))&&this.A(t),this.W&&this.setState({N:!1,R:!1}),this.l=Date.now()},n.prototype.p=function(t){t.preventDefault(),"number"==typeof t.button&&0!==t.button||(this.I(t.clientX),window.addEventListener("mousemove",this.v),window.addEventListener("mouseup",this.g))},n.prototype.v=function(t){t.preventDefault(),this.L(t.clientX)},n.prototype.g=function(t){this.U(t),window.removeEventListener("mousemove",this.v),window.removeEventListener("mouseup",this.g)},n.prototype.k=function(t){this.X=null,this.I(t.touches[0].clientX)},n.prototype.M=function(t){this.L(t.touches[0].clientX)},n.prototype.m=function(t){t.preventDefault(),this.U(t)},n.prototype.$=function(t){Date.now()-this.l>50&&(this.A(t),Date.now()-this.u>50&&this.W&&this.setState({R:!1}))},n.prototype.C=function(){this.u=Date.now()},n.prototype.O=function(){this.setState({R:!0})},n.prototype.D=function(){this.setState({R:!1})},n.prototype.S=function(t){this.H=t},n.prototype.T=function(t){t.preventDefault(),this.H.focus(),this.A(t),this.W&&this.setState({R:!1})},n.prototype.A=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},n.prototype.render=function(){var s=this.props,n=s.checked,o=s.disabled,e=s.className,a=s.offColor,r=s.onColor,l=s.offHandleColor,u=s.onHandleColor,c=s.checkedIcon,d=s.uncheckedIcon,f=s.checkedHandleIcon,p=s.uncheckedHandleIcon,b=s.boxShadow,v=s.activeBoxShadow,g=s.height,y=s.width,w=s.borderRadius,k=function(t,i){var s={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&-1===i.indexOf(n)&&(s[n]=t[n]);return s}(s,["checked","disabled","className","offColor","onColor","offHandleColor","onHandleColor","checkedIcon","uncheckedIcon","checkedHandleIcon","uncheckedHandleIcon","boxShadow","activeBoxShadow","height","width","borderRadius","handleDiameter"]),M=this.state,m=M.h,T=M.N,x=M.R,$={position:"relative",display:"inline-block",textAlign:"left",opacity:o?.5:1,direction:"ltr",borderRadius:g/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"},C={height:g,width:y,margin:Math.max(0,(this.t-g)/2),position:"relative",background:h(m,this.i,this.o,a,r),borderRadius:"number"==typeof w?w:g/2,cursor:o?"default":"pointer",WebkitTransition:T?null:"background 0.25s",MozTransition:T?null:"background 0.25s",transition:T?null:"background 0.25s"},O={height:g,width:Math.min(1.5*g,y-(this.t+g)/2+1),position:"relative",opacity:(m-this.o)/(this.i-this.o),pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},D={height:g,width:Math.min(1.5*g,y-(this.t+g)/2+1),position:"absolute",opacity:1-(m-this.o)/(this.i-this.o),right:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},S={height:this.t,width:this.t,background:h(m,this.i,this.o,l,u),display:"inline-block",cursor:o?"default":"pointer",borderRadius:"number"==typeof w?w-1:"50%",position:"absolute",transform:"translateX("+m+"px)",top:Math.max(0,(g-this.t)/2),outline:0,boxShadow:x?v:b,border:0,WebkitTransition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"},W={height:this.t,width:this.t,opacity:Math.max(2*(1-(m-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},z={height:this.t,width:this.t,opacity:Math.max(2*((m-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"};return t.createElement("div",{className:e,style:$},t.createElement("div",{className:"react-switch-bg",style:C,onClick:o?null:this.T,onMouseDown:function(t){return t.preventDefault()}},c&&t.createElement("div",{style:O},c),d&&t.createElement("div",{style:D},d)),t.createElement("div",{className:"react-switch-handle",style:S,onClick:function(t){return t.preventDefault()},onMouseDown:o?null:this.p,onTouchStart:o?null:this.k,onTouchMove:o?null:this.M,onTouchEnd:o?null:this.m,onTouchCancel:o?null:this.D},p&&t.createElement("div",{style:W},p),f&&t.createElement("div",{style:z},f)),t.createElement("input",i({},{type:"checkbox",role:"switch","aria-checked":n,checked:n,disabled:o,style:{border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}},k,{ref:this.S,onFocus:this.O,onBlur:this.D,onKeyUp:this.C,onChange:this.$})))},n}(t.Component);e.defaultProps={disabled:!1,offColor:"#888",onColor:"#080",offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:s,checkedIcon:n,boxShadow:null,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56},exports.default=e; |
@@ -1,1 +0,567 @@ | ||
| import t,{Component as i}from"react";function s(){return s=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var s=arguments[i];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(t[n]=s[n])}return t},s.apply(this,arguments)}var n=t.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},t.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"})),o=t.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},t.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 h(t){if(7===t.length)return t;for(var i="#",s=1;s<4;s+=1)i+=t[s]+t[s];return i}function e(t,i,s,n,o){return function(t,i,s,n,o){var h=(t-s)/(i-s);if(0===h)return n;if(1===h)return o;for(var e="#",a=1;a<6;a+=2){var r=parseInt(n.substr(a,2),16),l=parseInt(o.substr(a,2),16),u=Math.round((1-h)*r+h*l).toString(16);1===u.length&&(u="0"+u),e+=u}return e}(t,i,s,h(n),h(o))}var a=function(i){function n(t){i.call(this,t);var s=t.height,n=t.width,o=t.checked;this.t=t.handleDiameter||s-2,this.i=Math.max(n-s,n-(s+this.t)/2),this.o=Math.max(0,(s-this.t)/2),this.state={h:o?this.i:this.o},this.l=0,this.u=0,this.p=this.p.bind(this),this.v=this.v.bind(this),this.g=this.g.bind(this),this.k=this.k.bind(this),this.m=this.m.bind(this),this.M=this.M.bind(this),this.T=this.T.bind(this),this.$=this.$.bind(this),this.C=this.C.bind(this),this.D=this.D.bind(this),this.S=this.S.bind(this),this.O=this.O.bind(this)}return i&&(n.__proto__=i),(n.prototype=Object.create(i&&i.prototype)).constructor=n,n.prototype.componentDidMount=function(){this.W=!0},n.prototype.componentDidUpdate=function(t){t.checked!==this.props.checked&&this.setState({h:this.props.checked?this.i:this.o})},n.prototype.componentWillUnmount=function(){this.W=!1},n.prototype.I=function(t){this.H.focus(),this.setState({R:t,B:!0,j:Date.now()})},n.prototype.L=function(t){var i=this.state,s=i.R,n=i.h,o=(this.props.checked?this.i:this.o)+t-s;i.N||t===s||this.setState({N:!0});var h=Math.min(this.i,Math.max(this.o,o));h!==n&&this.setState({h:h})},n.prototype.U=function(t){var i=this.state,s=i.h,n=i.N,o=i.j,h=this.props.checked,e=(this.i+this.o)/2;this.setState({h:this.props.checked?this.i:this.o});var a=Date.now()-o;(!n||a<250||(h&&s<=e||!h&&s>=e))&&this.A(t),this.W&&this.setState({N:!1,B:!1}),this.l=Date.now()},n.prototype.p=function(t){t.preventDefault(),"number"==typeof t.button&&0!==t.button||(this.I(t.clientX),window.addEventListener("mousemove",this.v),window.addEventListener("mouseup",this.g))},n.prototype.v=function(t){t.preventDefault(),this.L(t.clientX)},n.prototype.g=function(t){this.U(t),window.removeEventListener("mousemove",this.v),window.removeEventListener("mouseup",this.g)},n.prototype.k=function(t){this.X=null,this.I(t.touches[0].clientX)},n.prototype.m=function(t){this.L(t.touches[0].clientX)},n.prototype.M=function(t){t.preventDefault(),this.U(t)},n.prototype.$=function(t){Date.now()-this.l>50&&(this.A(t),Date.now()-this.u>50&&this.W&&this.setState({B:!1}))},n.prototype.C=function(){this.u=Date.now()},n.prototype.D=function(){this.setState({B:!0})},n.prototype.S=function(){this.setState({B:!1})},n.prototype.O=function(t){this.H=t},n.prototype.T=function(t){t.preventDefault(),this.H.focus(),this.A(t),this.W&&this.setState({B:!1})},n.prototype.A=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},n.prototype.render=function(){var i=this.props,n=i.checked,o=i.disabled,h=i.className,a=i.offColor,r=i.onColor,l=i.offHandleColor,u=i.onHandleColor,c=i.checkedIcon,d=i.uncheckedIcon,f=i.checkedHandleIcon,p=i.uncheckedHandleIcon,b=i.boxShadow,v=i.activeBoxShadow,g=i.height,y=i.width,w=i.borderRadius,k=function(t,i){var s={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&-1===i.indexOf(n)&&(s[n]=t[n]);return s}(i,["checked","disabled","className","offColor","onColor","offHandleColor","onHandleColor","checkedIcon","uncheckedIcon","checkedHandleIcon","uncheckedHandleIcon","boxShadow","activeBoxShadow","height","width","borderRadius","handleDiameter"]),m=this.state,M=m.h,T=m.N,x=m.B,$={position:"relative",display:"inline-block",textAlign:"left",opacity:o?.5:1,direction:"ltr",borderRadius:g/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"},C={height:g,width:y,margin:Math.max(0,(this.t-g)/2),position:"relative",background:e(M,this.i,this.o,a,r),borderRadius:"number"==typeof w?w:g/2,cursor:o?"default":"pointer",WebkitTransition:T?null:"background 0.25s",MozTransition:T?null:"background 0.25s",transition:T?null:"background 0.25s"},D={height:g,width:Math.min(1.5*g,y-(this.t+g)/2+1),position:"relative",opacity:(M-this.o)/(this.i-this.o),pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},S={height:g,width:Math.min(1.5*g,y-(this.t+g)/2+1),position:"absolute",opacity:1-(M-this.o)/(this.i-this.o),right:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},O={height:this.t,width:this.t,background:e(M,this.i,this.o,l,u),display:"inline-block",cursor:o?"default":"pointer",borderRadius:"number"==typeof w?w-1:"50%",position:"absolute",transform:"translateX("+M+"px)",top:Math.max(0,(g-this.t)/2),outline:0,boxShadow:x?v:b,border:0,WebkitTransition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:T?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"},W={height:this.t,width:this.t,opacity:Math.max(2*(1-(M-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"},z={height:this.t,width:this.t,opacity:Math.max(2*((M-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:T?null:"opacity 0.25s",MozTransition:T?null:"opacity 0.25s",transition:T?null:"opacity 0.25s"};return t.createElement("div",{className:h,style:$},t.createElement("div",{className:"react-switch-bg",style:C,onClick:o?null:this.T,onMouseDown:function(t){return t.preventDefault()}},c&&t.createElement("div",{style:D},c),d&&t.createElement("div",{style:S},d)),t.createElement("div",{className:"react-switch-handle",style:O,onClick:function(t){return t.preventDefault()},onMouseDown:o?null:this.p,onTouchStart:o?null:this.k,onTouchMove:o?null:this.m,onTouchEnd:o?null:this.M,onTouchCancel:o?null:this.S},p&&t.createElement("div",{style:W},p),f&&t.createElement("div",{style:z},f)),t.createElement("input",s({},{type:"checkbox",role:"switch","aria-checked":n,checked:n,disabled:o,style:{border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}},k,{ref:this.O,onFocus:this.D,onBlur:this.S,onKeyUp:this.C,onChange:this.$})))},n}(i);a.defaultProps={disabled:!1,offColor:"#888",onColor:"#080",offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:n,checkedIcon:o,boxShadow:null,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56};export{a as default}; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var React = require('react'); | ||
| var PropTypes = require('prop-types'); | ||
| function _extends() { | ||
| _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| /* | ||
| The MIT License (MIT) | ||
| Copyright (c) 2015 instructure-react | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. | ||
| */ | ||
| var 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" | ||
| })); | ||
| var 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(pos, checkedPos, uncheckedPos, offColor, onColor) { | ||
| var relativePos = (pos - uncheckedPos) / (checkedPos - uncheckedPos); | ||
| if (relativePos === 0) { | ||
| return offColor; | ||
| } | ||
| if (relativePos === 1) { | ||
| return onColor; | ||
| } | ||
| var newColor = "#"; | ||
| for (var i = 1; i < 6; i += 2) { | ||
| var offComponent = parseInt(offColor.substr(i, 2), 16); | ||
| var onComponent = parseInt(onColor.substr(i, 2), 16); | ||
| var weightedValue = Math.round((1 - relativePos) * offComponent + relativePos * onComponent); | ||
| var newComponent = weightedValue.toString(16); | ||
| if (newComponent.length === 1) { | ||
| newComponent = "0" + newComponent; | ||
| } | ||
| newColor += newComponent; | ||
| } | ||
| return newColor; | ||
| } | ||
| function convertShorthandColor(color) { | ||
| if (color.length === 7) { | ||
| return color; | ||
| } | ||
| var sixDigitColor = "#"; | ||
| for (var i = 1; i < 4; i += 1) { | ||
| sixDigitColor += color[i] + color[i]; | ||
| } | ||
| return sixDigitColor; | ||
| } | ||
| function getBackgroundColor(pos, checkedPos, uncheckedPos, offColor, onColor) { | ||
| var sixDigitOffColor = convertShorthandColor(offColor); | ||
| var sixDigitOnColor = convertShorthandColor(onColor); | ||
| return createBackgroundColor(pos, checkedPos, uncheckedPos, sixDigitOffColor, sixDigitOnColor); | ||
| } | ||
| // Make sure color props are strings that start with "#" since other ways to write colors are not supported. | ||
| var hexColorPropType = function (props, propName, componentName) { | ||
| var prop = props[propName]; | ||
| if (typeof prop !== "string" || prop[0] !== "#" || prop.length !== 4 && prop.length !== 7) { | ||
| return new Error("Invalid prop '" + propName + "' supplied to '" + componentName + "'. '" + propName + "' has to be either a 3-digit or 6-digit hex-color string. Valid examples: '#abc', '#123456'"); | ||
| } | ||
| return null; | ||
| }; | ||
| function objectWithoutProperties(obj, exclude) { | ||
| var target = {}; | ||
| for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; | ||
| return target; | ||
| } | ||
| var ReactSwitch = /*@__PURE__*/function (Component) { | ||
| function ReactSwitch(props) { | ||
| Component.call(this, props); | ||
| var height = props.height; | ||
| var width = props.width; | ||
| var handleDiameter = props.handleDiameter; | ||
| var checked = props.checked; | ||
| this.$handleDiameter = handleDiameter || height - 2; | ||
| this.$checkedPos = Math.max(width - height, width - (height + this.$handleDiameter) / 2); | ||
| this.$uncheckedPos = Math.max(0, (height - this.$handleDiameter) / 2); | ||
| this.state = { | ||
| $pos: checked ? this.$checkedPos : this.$uncheckedPos | ||
| }; | ||
| this.$lastDragAt = 0; | ||
| this.$lastKeyUpAt = 0; | ||
| this.$onMouseDown = this.$onMouseDown.bind(this); | ||
| this.$onMouseMove = this.$onMouseMove.bind(this); | ||
| this.$onMouseUp = this.$onMouseUp.bind(this); | ||
| this.$onTouchStart = this.$onTouchStart.bind(this); | ||
| this.$onTouchMove = this.$onTouchMove.bind(this); | ||
| this.$onTouchEnd = this.$onTouchEnd.bind(this); | ||
| this.$onClick = this.$onClick.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); | ||
| } | ||
| if (Component) ReactSwitch.__proto__ = Component; | ||
| ReactSwitch.prototype = Object.create(Component && Component.prototype); | ||
| ReactSwitch.prototype.constructor = ReactSwitch; | ||
| ReactSwitch.prototype.componentDidMount = function componentDidMount() { | ||
| this.$isMounted = true; | ||
| }; | ||
| ReactSwitch.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
| if (prevProps.checked === this.props.checked) { | ||
| return; | ||
| } | ||
| var $pos = this.props.checked ? this.$checkedPos : this.$uncheckedPos; | ||
| this.setState({ | ||
| $pos: $pos | ||
| }); | ||
| }; | ||
| ReactSwitch.prototype.componentWillUnmount = function componentWillUnmount() { | ||
| this.$isMounted = false; | ||
| }; | ||
| ReactSwitch.prototype.$onDragStart = function $onDragStart(clientX) { | ||
| this.$inputRef.focus(); | ||
| this.setState({ | ||
| $startX: clientX, | ||
| $hasOutline: true, | ||
| $dragStartingTime: Date.now() | ||
| }); | ||
| }; | ||
| ReactSwitch.prototype.$onDrag = function $onDrag(clientX) { | ||
| var ref = this.state; | ||
| 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 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, mousePos)); // Prevent unnecessary rerenders | ||
| if (newPos !== $pos) { | ||
| this.setState({ | ||
| $pos: newPos | ||
| }); | ||
| } | ||
| }; | ||
| ReactSwitch.prototype.$onDragStop = function $onDragStop(event) { | ||
| var ref = this.state; | ||
| var $pos = ref.$pos; | ||
| var $isDragging = ref.$isDragging; | ||
| var $dragStartingTime = ref.$dragStartingTime; | ||
| var ref$1 = this.props; | ||
| var checked = ref$1.checked; | ||
| var halfwayCheckpoint = (this.$checkedPos + this.$uncheckedPos) / 2; | ||
| /* | ||
| Set position state back to the previous position even if user drags the switch with intention to change the state. | ||
| This is to prevent the switch from getting stuck in the middle if the event isn't handled in the onChange callback. | ||
| */ | ||
| var prevPos = this.props.checked ? this.$checkedPos : this.$uncheckedPos; | ||
| this.setState({ | ||
| $pos: prevPos | ||
| }); // Act as if the user clicked the handle if they didn't drag it _or_ the dragged it for less than 250ms | ||
| var timeSinceStart = Date.now() - $dragStartingTime; | ||
| var isSimulatedClick = !$isDragging || timeSinceStart < 250; // Handle when the user has dragged the switch more than halfway from either side | ||
| var isDraggedHalfway = checked && $pos <= halfwayCheckpoint || !checked && $pos >= halfwayCheckpoint; | ||
| if (isSimulatedClick || isDraggedHalfway) { | ||
| this.$onChange(event); | ||
| } | ||
| if (this.$isMounted) { | ||
| this.setState({ | ||
| $isDragging: false, | ||
| $hasOutline: false | ||
| }); | ||
| } | ||
| this.$lastDragAt = Date.now(); | ||
| }; | ||
| ReactSwitch.prototype.$onMouseDown = function $onMouseDown(event) { | ||
| event.preventDefault(); // Ignore right click and scroll | ||
| if (typeof event.button === "number" && event.button !== 0) { | ||
| return; | ||
| } | ||
| this.$onDragStart(event.clientX); | ||
| window.addEventListener("mousemove", this.$onMouseMove); | ||
| window.addEventListener("mouseup", this.$onMouseUp); | ||
| }; | ||
| ReactSwitch.prototype.$onMouseMove = function $onMouseMove(event) { | ||
| event.preventDefault(); | ||
| this.$onDrag(event.clientX); | ||
| }; | ||
| ReactSwitch.prototype.$onMouseUp = function $onMouseUp(event) { | ||
| this.$onDragStop(event); | ||
| window.removeEventListener("mousemove", this.$onMouseMove); | ||
| window.removeEventListener("mouseup", this.$onMouseUp); | ||
| }; | ||
| ReactSwitch.prototype.$onTouchStart = function $onTouchStart(event) { | ||
| this.$checkedStateFromDragging = null; | ||
| this.$onDragStart(event.touches[0].clientX); | ||
| }; | ||
| ReactSwitch.prototype.$onTouchMove = function $onTouchMove(event) { | ||
| this.$onDrag(event.touches[0].clientX); | ||
| }; | ||
| ReactSwitch.prototype.$onTouchEnd = function $onTouchEnd(event) { | ||
| event.preventDefault(); | ||
| this.$onDragStop(event); | ||
| }; | ||
| 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) { | ||
| if (this.$isMounted) { | ||
| 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) { | ||
| event.preventDefault(); | ||
| this.$inputRef.focus(); | ||
| this.$onChange(event); | ||
| if (this.$isMounted) { | ||
| this.setState({ | ||
| $hasOutline: false | ||
| }); | ||
| } | ||
| }; | ||
| ReactSwitch.prototype.$onChange = function $onChange(event) { | ||
| var ref = this.props; | ||
| var checked = ref.checked; | ||
| var onChange = ref.onChange; | ||
| var id = ref.id; | ||
| onChange(!checked, event, id); | ||
| }; | ||
| ReactSwitch.prototype.render = function render() { | ||
| var ref = this.props; | ||
| var checked = ref.checked; | ||
| var disabled = ref.disabled; | ||
| var className = ref.className; | ||
| var offColor = ref.offColor; | ||
| var onColor = ref.onColor; | ||
| var offHandleColor = ref.offHandleColor; | ||
| var onHandleColor = ref.onHandleColor; | ||
| var checkedIcon = ref.checkedIcon; | ||
| var uncheckedIcon = ref.uncheckedIcon; | ||
| var checkedHandleIcon = ref.checkedHandleIcon; | ||
| var uncheckedHandleIcon = ref.uncheckedHandleIcon; | ||
| var boxShadow = ref.boxShadow; | ||
| var activeBoxShadow = ref.activeBoxShadow; | ||
| var height = ref.height; | ||
| var width = ref.width; | ||
| var borderRadius = ref.borderRadius; | ||
| ref.handleDiameter; | ||
| var rest$1 = objectWithoutProperties(ref, ["checked", "disabled", "className", "offColor", "onColor", "offHandleColor", "onHandleColor", "checkedIcon", "uncheckedIcon", "checkedHandleIcon", "uncheckedHandleIcon", "boxShadow", "activeBoxShadow", "height", "width", "borderRadius", "handleDiameter"]); | ||
| var rest = rest$1; | ||
| var ref$1 = this.state; | ||
| var $pos = ref$1.$pos; | ||
| var $isDragging = ref$1.$isDragging; | ||
| var $hasOutline = ref$1.$hasOutline; | ||
| var rootStyle = { | ||
| position: "relative", | ||
| display: "inline-block", | ||
| textAlign: "left", | ||
| opacity: disabled ? 0.5 : 1, | ||
| direction: "ltr", | ||
| borderRadius: height / 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" | ||
| }; | ||
| var backgroundStyle = { | ||
| height: height, | ||
| width: width, | ||
| margin: Math.max(0, (this.$handleDiameter - height) / 2), | ||
| position: "relative", | ||
| background: getBackgroundColor($pos, this.$checkedPos, this.$uncheckedPos, offColor, onColor), | ||
| borderRadius: typeof borderRadius === "number" ? borderRadius : height / 2, | ||
| cursor: disabled ? "default" : "pointer", | ||
| WebkitTransition: $isDragging ? null : "background 0.25s", | ||
| MozTransition: $isDragging ? null : "background 0.25s", | ||
| transition: $isDragging ? null : "background 0.25s" | ||
| }; | ||
| var checkedIconStyle = { | ||
| height: height, | ||
| width: Math.min(height * 1.5, width - (this.$handleDiameter + height) / 2 + 1), | ||
| position: "relative", | ||
| opacity: ($pos - this.$uncheckedPos) / (this.$checkedPos - this.$uncheckedPos), | ||
| pointerEvents: "none", | ||
| WebkitTransition: $isDragging ? null : "opacity 0.25s", | ||
| MozTransition: $isDragging ? null : "opacity 0.25s", | ||
| transition: $isDragging ? null : "opacity 0.25s" | ||
| }; | ||
| var uncheckedIconStyle = { | ||
| height: height, | ||
| width: Math.min(height * 1.5, width - (this.$handleDiameter + height) / 2 + 1), | ||
| position: "absolute", | ||
| opacity: 1 - ($pos - this.$uncheckedPos) / (this.$checkedPos - this.$uncheckedPos), | ||
| right: 0, | ||
| top: 0, | ||
| pointerEvents: "none", | ||
| WebkitTransition: $isDragging ? null : "opacity 0.25s", | ||
| MozTransition: $isDragging ? null : "opacity 0.25s", | ||
| transition: $isDragging ? null : "opacity 0.25s" | ||
| }; | ||
| var handleStyle = { | ||
| height: this.$handleDiameter, | ||
| width: this.$handleDiameter, | ||
| background: getBackgroundColor($pos, this.$checkedPos, this.$uncheckedPos, offHandleColor, onHandleColor), | ||
| display: "inline-block", | ||
| cursor: disabled ? "default" : "pointer", | ||
| borderRadius: typeof borderRadius === "number" ? borderRadius - 1 : "50%", | ||
| position: "absolute", | ||
| transform: "translateX(" + $pos + "px)", | ||
| top: Math.max(0, (height - this.$handleDiameter) / 2), | ||
| outline: 0, | ||
| boxShadow: $hasOutline ? activeBoxShadow : boxShadow, | ||
| border: 0, | ||
| WebkitTransition: $isDragging ? null : "background-color 0.25s, transform 0.25s, box-shadow 0.15s", | ||
| MozTransition: $isDragging ? null : "background-color 0.25s, transform 0.25s, box-shadow 0.15s", | ||
| transition: $isDragging ? null : "background-color 0.25s, transform 0.25s, box-shadow 0.15s" | ||
| }; | ||
| var uncheckedHandleIconStyle = { | ||
| height: this.$handleDiameter, | ||
| width: this.$handleDiameter, | ||
| opacity: Math.max((1 - ($pos - this.$uncheckedPos) / (this.$checkedPos - this.$uncheckedPos) - 0.5) * 2, 0), | ||
| position: "absolute", | ||
| left: 0, | ||
| top: 0, | ||
| pointerEvents: "none", | ||
| WebkitTransition: $isDragging ? null : "opacity 0.25s", | ||
| MozTransition: $isDragging ? null : "opacity 0.25s", | ||
| transition: $isDragging ? null : "opacity 0.25s" | ||
| }; | ||
| var checkedHandleIconStyle = { | ||
| height: this.$handleDiameter, | ||
| width: this.$handleDiameter, | ||
| opacity: Math.max((($pos - this.$uncheckedPos) / (this.$checkedPos - this.$uncheckedPos) - 0.5) * 2, 0), | ||
| position: "absolute", | ||
| left: 0, | ||
| top: 0, | ||
| pointerEvents: "none", | ||
| WebkitTransition: $isDragging ? null : "opacity 0.25s", | ||
| MozTransition: $isDragging ? null : "opacity 0.25s", | ||
| transition: $isDragging ? null : "opacity 0.25s" | ||
| }; | ||
| 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, | ||
| onMouseDown: function (e) { | ||
| return e.preventDefault(); | ||
| } | ||
| }, checkedIcon && React.createElement('div', { | ||
| style: checkedIconStyle | ||
| }, checkedIcon), uncheckedIcon && React.createElement('div', { | ||
| style: uncheckedIconStyle | ||
| }, uncheckedIcon)), React.createElement('div', { | ||
| 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 | ||
| }, uncheckedHandleIcon && React.createElement('div', { | ||
| style: uncheckedHandleIconStyle | ||
| }, uncheckedHandleIcon), checkedHandleIcon && React.createElement('div', { | ||
| style: checkedHandleIconStyle | ||
| }, checkedHandleIcon)), React.createElement('input', _extends({}, { | ||
| type: "checkbox", | ||
| role: "switch", | ||
| 'aria-checked': checked, | ||
| checked: checked, | ||
| disabled: disabled, | ||
| style: inputStyle | ||
| }, rest, { | ||
| ref: this.$getInputRef, | ||
| onFocus: this.$setHasOutline, | ||
| onBlur: this.$unsetHasOutline, | ||
| onKeyUp: this.$onKeyUp, | ||
| onChange: this.$onInputChange | ||
| }))); | ||
| }; | ||
| return ReactSwitch; | ||
| }(React.Component); | ||
| ReactSwitch.propTypes = { | ||
| checked: PropTypes.bool.isRequired, | ||
| onChange: PropTypes.func.isRequired, | ||
| disabled: PropTypes.bool, | ||
| offColor: hexColorPropType, | ||
| onColor: hexColorPropType, | ||
| offHandleColor: hexColorPropType, | ||
| onHandleColor: hexColorPropType, | ||
| handleDiameter: PropTypes.number, | ||
| uncheckedIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]), | ||
| checkedIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]), | ||
| boxShadow: PropTypes.string, | ||
| borderRadius: PropTypes.number, | ||
| activeBoxShadow: PropTypes.string, | ||
| uncheckedHandleIcon: PropTypes.element, | ||
| checkedHandleIcon: PropTypes.element, | ||
| height: PropTypes.number, | ||
| width: PropTypes.number, | ||
| id: PropTypes.string, | ||
| className: PropTypes.string | ||
| }; | ||
| ReactSwitch.defaultProps = { | ||
| disabled: false, | ||
| offColor: "#888", | ||
| onColor: "#080", | ||
| offHandleColor: "#fff", | ||
| onHandleColor: "#fff", | ||
| uncheckedIcon: uncheckedIcon, | ||
| checkedIcon: checkedIcon, | ||
| boxShadow: null, | ||
| activeBoxShadow: "0 0 2px 3px #3bf", | ||
| height: 28, | ||
| width: 56 | ||
| }; | ||
| exports["default"] = ReactSwitch; |
| { | ||
| "name": "react-switch", | ||
| "version": "7.0.0-experimental.0", | ||
| "version": "7.0.0", | ||
| "description": "Draggable toggle-switch component for react", | ||
@@ -32,4 +32,4 @@ "main": "index.js", | ||
| "peerDependencies": { | ||
| "react": "^15.3.0 || ^16.0.0 || ^17.0.0", | ||
| "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0" | ||
| "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", | ||
| "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" | ||
| }, | ||
@@ -42,2 +42,3 @@ "devDependencies": { | ||
| "@babel/preset-react": "^7.12.10", | ||
| "@testing-library/react": "^13.3.0", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
@@ -50,6 +51,3 @@ "babel-eslint": "^10.1.0", | ||
| "cross-env": "^7.0.3", | ||
| "css-loader": "^6.6.0", | ||
| "enzyme": "^3.11.0", | ||
| "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6", | ||
| "enzyme-to-json": "^3.6.1", | ||
| "css-loader": "^5.0.1", | ||
| "eslint": "^7.15.0", | ||
@@ -62,9 +60,9 @@ "eslint-config-airbnb": "^18.2.1", | ||
| "gzip-size-cli": "^4.0.0", | ||
| "html-webpack-plugin": "^5.5.0", | ||
| "html-webpack-plugin": "^4.5.0", | ||
| "jest": "^26.6.3", | ||
| "prettier": "^2.2.1", | ||
| "raf": "^3.4.1", | ||
| "react": "^17.0.1", | ||
| "react-dom": "^17.0.1", | ||
| "react-test-renderer": "^17.0.1", | ||
| "react": "^18.1.0", | ||
| "react-dom": "^18.1.0", | ||
| "react-test-renderer": "^18.1.0", | ||
| "rollup": "^2.34.2", | ||
@@ -74,7 +72,7 @@ "rollup-plugin-babel": "^4.2.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "style-loader": "^3.3.1", | ||
| "webpack": "^5.69.1", | ||
| "webpack-bundle-analyzer": "^4.5.0", | ||
| "webpack-cli": "^4.9.2", | ||
| "webpack-dev-server": "^4.7.4" | ||
| "style-loader": "^2.0.0", | ||
| "webpack": "^4.44.2", | ||
| "webpack-bundle-analyzer": "^4.2.0", | ||
| "webpack-cli": "^3.3.12", | ||
| "webpack-dev-server": "^3.11.0" | ||
| }, | ||
@@ -81,0 +79,0 @@ "keywords": [ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage 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
- increased by9.08%
147447
- Dev dependency count
- decreased by-5.13%
37
- Lines of code
- increased by20.88%
2738
- Number of low quality alerts
- decreased by-33.33%
2
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes