react-switch - npm Package Compare versions

Comparing version 3.0.0-beta.0 to 3.0.0

CHANGELOG.md

@@ -8,2 +8,12 @@ # Changelog
 
+## [3.0.0 - 2018-06-07]
+
+### Changed
+
+- Shave off some extra bytes by setting interop: false in rollup config.
+
+### Fixed
+
+- Fix peculiar glitch when used with preact-compat.
+
 ## [3.0.0-beta.0 - 2018-06-06]
@@ -10,0 +20,0 @@

dist/react-switch.dev.js

 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
 
@@ -34,5 +31,5 @@ /*
 var uncheckedIcon = (
-  React__default.createElement( 'svg', {
+  React.createElement( 'svg', {
     viewBox: "-2 -5 14 20", height: "100%", width: "100%", style: { position: "absolute", top: 0 } },
-    React__default.createElement( 'path', {
+    React.createElement( 'path', {
       /* eslint-disable max-len */
@@ -44,5 +41,5 @@ 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__default.createElement( 'svg', {
+  React.createElement( 'svg', {
     height: "100%", width: "100%", viewBox: "-2 -5 17 21", style: { position: "absolute", top: 0 } },
-    React__default.createElement( 'path', {
+    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" })
@@ -415,11 +412,11 @@ )
     return (
-      React__default.createElement( 'div', { className: className, style: rootStyle },
-        React__default.createElement( 'div', {
+      React.createElement( 'div', { className: className, style: rootStyle },
+        React.createElement( 'div', {
           className: "react-switch-bg", style: backgroundStyle, onClick: disabled ? null : this.$onClick },
-          checkedIcon$$1 && React__default.createElement( 'div', { style: checkedIconStyle }, checkedIcon$$1),
+          checkedIcon$$1 && React.createElement( 'div', { style: checkedIconStyle }, checkedIcon$$1),
           uncheckedIcon$$1 && (
-            React__default.createElement( 'div', { style: uncheckedIconStyle }, uncheckedIcon$$1)
+            React.createElement( 'div', { style: uncheckedIconStyle }, uncheckedIcon$$1)
           )
         ),
-        React__default.createElement( 'div', {
+        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 })
@@ -461,2 +458,3 @@ )
   checkedIcon: checkedIcon,
+  boxShadow: null,
   activeBoxShadow: "0 0 2px 3px #3bf",
@@ -463,0 +461,0 @@ height: 28,

dist/react-switch.min.js

@@ -1,1 +0,1 @@
-"use strict";function _interopDefault(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var React=require("react"),React__default=_interopDefault(React),uncheckedIcon=React__default.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},React__default.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__default.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},React__default.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 e=(t-s)/(i-s);if(0===e)return o;if(1===e)return n;for(var h="#",a=1;a<6;a+=2){var r=parseInt(o.substr(a,2),16),l=parseInt(n.substr(a,2),16),c=Math.round((1-e)*r+e*l).toString(16);1===c.length&&(c="0"+c),h+=c}return h}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=this.n.bind(this),this.e=this.e.bind(this),this.h=this.h.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),this.p=this.p.bind(this),this.g=this.g.bind(this),this.b=this.b.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.n=function(t){this.setState({v:t,k:!0})},t.prototype.e=function(t){var i=Math.min(this.i,Math.max(this.s,(this.props.checked?this.i:this.s)+t-this.state.v));this.setState({o:i,w:!0})},t.prototype.h=function(t){var i=this.state,s=i.o,o=this.props,n=o.checked,e=o.onChange,h=o.id;return i.w?n?(this.i+this.s)/2<s?void this.setState({o:this.i,w:!1,k:!1}):(this.setState({w:!1,k:!1}),void e(!1,t,h)):void(s<(this.i+this.s)/2?this.setState({o:this.s,w:!1,k:!1}):(this.setState({w:!1,k:!1}),e(!0,t,h))):(this.setState({k:!1}),void e(!n,t,h))},t.prototype.a=function(t){"number"==typeof t.button&&0!==t.button||(this.n(t.clientX),window.addEventListener("mousemove",this.r),window.addEventListener("mouseup",this.l))},t.prototype.r=function(t){t.preventDefault(),this.e(t.clientX)},t.prototype.l=function(t){this.h(t),window.removeEventListener("mousemove",this.r),window.removeEventListener("mouseup",this.l)},t.prototype.c=function(t){this.n(t.touches[0].clientX)},t.prototype.u=function(t){this.e(t.touches[0].clientX)},t.prototype.f=function(t){t.preventDefault(),this.h(t)},t.prototype.p=function(){this.setState({k:!1})},t.prototype.g=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},t.prototype.b=function(t){var i=this.props,s=i.checked,o=i.onChange,n=i.id;32!==t.keyCode&&13!==t.keyCode||this.state.w||(t.preventDefault(),o(!s,t,n))},t.prototype.render=function(){var t=this,i=this.props,s=i.checked,o=i.disabled,n=i.className,e=i.offColor,h=i.onColor,a=i.offHandleColor,r=i.onHandleColor,l=i.checkedIcon,c=i.uncheckedIcon,u=i.boxShadow,d=i.activeBoxShadow,f=i.height,p=i.width,g=i.id,b=i["aria-labelledby"],v=i["aria-label"],k=this.state,w=k.o,y=k.w,_=k.k,R={position:"relative",display:"inline-block",opacity:o?.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"},$={height:f,width:p,margin:Math.max(0,(this.t-f)/2),position:"relative",background:getBackgroundColor(w,this.i,this.s,e,h),borderRadius:f/2,cursor:o?"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,p-(this.t+f)/2+1),position:"relative",opacity:(w-this.s)/(this.i-this.s),pointerEvents:"none",WebkitTransition:y?null:"opacity 0.25s",MozTransition:y?null:"opacity 0.25s",transition:y?null:"opacity 0.25s"},m={height:f,width:Math.min(1.5*f,p-(this.t+f)/2+1),position:"absolute",opacity:1-(w-this.s)/(this.i-this.s),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.s,a,r),cursor:o?"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__default.createElement("div",{className:n,style:R},React__default.createElement("div",{className:"react-switch-bg",style:$,onClick:o?null:this.g},l&&React__default.createElement("div",{style:M},l),c&&React__default.createElement("div",{style:m},c)),React__default.createElement("div",{className:"react-switch-handle",role:"checkbox",tabIndex:o?null:0,onMouseDown:o?null:this.a,onTouchStart:o?null:this.c,onTouchMove:o?null:this.u,onTouchEnd:o?null:this.f,onTouchCancel:o?null:this.p,onKeyDown:this.b,onFocus:function(){return t.setState({k:!0})},onBlur:function(){return t.setState({k:!1})},style:C,id:g,"aria-checked":s,"aria-disabled":o,"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,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56},module.exports=ReactSwitch;
+"use strict";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),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="#",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=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),this.g=this.g.bind(this),this.p=this.p.bind(this),this.b=this.b.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.n=function(t){this.setState({v:t,k:!0})},t.prototype.h=function(t){var i=Math.min(this.i,Math.max(this.s,(this.props.checked?this.i:this.s)+t-this.state.v));this.setState({o:i,w:!0})},t.prototype.e=function(t){var i=this.state,s=i.o,o=this.props,n=o.checked,h=o.onChange,e=o.id;return i.w?n?(this.i+this.s)/2<s?void this.setState({o:this.i,w:!1,k:!1}):(this.setState({w:!1,k:!1}),void h(!1,t,e)):void(s<(this.i+this.s)/2?this.setState({o:this.s,w:!1,k:!1}):(this.setState({w:!1,k:!1}),h(!0,t,e))):(this.setState({k:!1}),void h(!n,t,e))},t.prototype.a=function(t){"number"==typeof t.button&&0!==t.button||(this.n(t.clientX),window.addEventListener("mousemove",this.r),window.addEventListener("mouseup",this.l))},t.prototype.r=function(t){t.preventDefault(),this.h(t.clientX)},t.prototype.l=function(t){this.e(t),window.removeEventListener("mousemove",this.r),window.removeEventListener("mouseup",this.l)},t.prototype.c=function(t){this.n(t.touches[0].clientX)},t.prototype.u=function(t){this.h(t.touches[0].clientX)},t.prototype.f=function(t){t.preventDefault(),this.e(t)},t.prototype.g=function(){this.setState({k:!1})},t.prototype.p=function(t){var i=this.props;(0,i.onChange)(!i.checked,t,i.id)},t.prototype.b=function(t){var i=this.props,s=i.checked,o=i.onChange,n=i.id;32!==t.keyCode&&13!==t.keyCode||this.state.w||(t.preventDefault(),o(!s,t,n))},t.prototype.render=function(){var t=this,i=this.props,s=i.checked,o=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.o,y=k.w,$=k.k,M={position:"relative",display:"inline-block",opacity:o?.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.s,h,e),borderRadius:f/2,cursor:o?"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.s)/(this.i-this.s),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.s)/(this.i-this.s),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.s,a,r),cursor:o?"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:o?null:this.p},l&&React.createElement("div",{style:m},l),c&&React.createElement("div",{style:C},c)),React.createElement("div",{className:"react-switch-handle",role:"checkbox",tabIndex:o?null:0,onMouseDown:o?null:this.a,onTouchStart:o?null:this.c,onTouchMove:o?null:this.u,onTouchEnd:o?null:this.f,onTouchCancel:o?null:this.g,onKeyDown:this.b,onFocus:function(){return t.setState({k:!0})},onBlur:function(){return t.setState({k:!1})},style:T,id:p,"aria-checked":s,"aria-disabled":o,"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.0-beta.0",
+  "version": "3.0.0",
   "description": "Draggable toggle-switch component for react",
@@ -9,12 +9,13 @@ "main": "index.js",
     "build": "npm run lib:prod && npm run demo:prod",
-    "lib:dev": "rollup -c -w -f cjs -o dist/react-switch.dev.js",
-    "lib:prod": "NODE_ENV=production rollup -c -f cjs -o dist/react-switch.min.js",
+    "lib:dev": "rollup -c -w -o dist/react-switch.dev.js",
+    "lib:prod": "NODE_ENV=production rollup -c -o dist/react-switch.min.js",
     "demo:dev": "webpack-dev-server --mode development",
     "demo:prod": "webpack --mode production",
-    "deploy-demo": "npm run test && npm run build && git subtree push --prefix examples/dist origin gh-pages",
+    "deploy-demo": "npm run test && npm run build && git subtree push --prefix demo/dist origin gh-pages",
     "format": "prettier --write '**/*.{js,jsx,json}'",
-    "lint": "eslint --ext .js,.jsx src/ examples/src",
+    "lint": "eslint --ext .js,.jsx src/ demo/src",
     "test": "jest",
     "test:watch": "jest --watch",
-    "analyze-bundle": "webpack --mode production --profile --json > stats.json && webpack-bundle-analyzer stats.json examples/dist -s gzip"
+    "gzip-size": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size dist/react-switch.min.js",
+    "analyze-bundle": "webpack --mode production --profile --json > stats.json && webpack-bundle-analyzer stats.json demo/dist -s gzip"
   },
@@ -56,2 +57,3 @@ "repository": {
     "eslint-plugin-react": "^7.9.1",
+    "gzip-size-cli": "^2.1.0",
     "html-webpack-plugin": "^3.2.0",
@@ -58,0 +60,0 @@ "jest": "^23.1.0",

rollup.config.js

@@ -7,2 +7,6 @@ import babel from "rollup-plugin-babel";
   input: "src/index.jsx",
+  output: {
+    format: "cjs",
+    interop: false
+  },
   plugins: [buble()],
@@ -9,0 +13,0 @@ external: ["react", "prop-types"]

Fixed alerts

Major refactor

Supply chain risk

Package 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

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

598

increased by0.5%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

46100

decreased by-0.19%

Dev dependency count

37

increased by2.78%

No dependency changes