Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-switch

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-switch - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

16

dist/react-switch.dev.js

@@ -1,3 +0,3 @@

import React, { Component } from 'react';
import PropTypes from 'prop-types';
var React = require('react');
var PropTypes = require('prop-types');

@@ -120,5 +120,5 @@ /*

var ReactSwitch = (function (Component$$1) {
var ReactSwitch = (function (Component) {
function ReactSwitch(props) {
Component$$1.call(this, props);
Component.call(this, props);
var height = props.height;

@@ -151,4 +151,4 @@ var width = props.width;

if ( Component$$1 ) ReactSwitch.__proto__ = Component$$1;
ReactSwitch.prototype = Object.create( Component$$1 && Component$$1.prototype );
if ( Component ) ReactSwitch.__proto__ = Component;
ReactSwitch.prototype = Object.create( Component && Component.prototype );
ReactSwitch.prototype.constructor = ReactSwitch;

@@ -423,3 +423,3 @@

return ReactSwitch;
}(Component));
}(React.Component));
ReactSwitch.propTypes = {

@@ -460,2 +460,2 @@ checked: PropTypes.bool.isRequired,

export default ReactSwitch;
module.exports = ReactSwitch;

@@ -1,1 +0,1 @@

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

@@ -5,0 +5,0 @@ "main": "index.js",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc