react-switch - npm Package Compare versions

Comparing version 4.0.0-beta.0 to 4.0.0

CHANGELOG.md

@@ -8,3 +8,3 @@ # Changelog
 
-## [4.0.0-beta.0 - 2019-01-29]
+## [4.0.0 - 2019-01-30]
 
@@ -18,2 +18,6 @@ ### Changed
 
+### Added
+
+- Add new tabIndex prop
+
 ### Fixed
@@ -20,0 +24,0 @@

dist/react-switch.dev.js

@@ -327,2 +327,3 @@ var React = require('react');
     var ariaLabel = ref["aria-label"];
+    var tabIndex = ref.tabIndex;
 
@@ -456,3 +457,3 @@ var ref$1 = this.state;
         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 })
+          type: "checkbox", role: "switch", id: id, checked: checked, disabled: disabled, tabIndex: tabIndex, onFocus: this.$setHasOutline, onBlur: this.$unsetHasOutline, onKeyUp: this.$onKeyUp, onChange: this.$onInputChange, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, style: inputStyle, ref: this.$getInputRef })
       )
@@ -481,2 +482,3 @@ );
   id: PropTypes.string,
+  tabIndex: PropTypes.number,
   "aria-labelledby": PropTypes.string,
@@ -483,0 +485,0 @@ "aria-label": PropTypes.string

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,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;
+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.b=this.b.bind(this),this.g=this.g.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.b=function(){this.h=Date.now()},t.prototype.g=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,b=t["aria-labelledby"],g=t["aria-label"],v=t.tabIndex,w=this.state,k=w.o,y=w.T,M=w.R,R={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"},m={height:d,width:f,margin:Math.max(0,(this.t-d)/2),position:"relative",background:getBackgroundColor(k,this.i,this.s,n,h),borderRadius:d/2,cursor:s?"default":"pointer",WebkitTransition:y?null:"background 0.25s",MozTransition:y?null:"background 0.25s",transition:y?null:"background 0.25s"},C={height:d,width:Math.min(1.5*d,f-(this.t+d)/2+1),position:"relative",opacity:(k-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"},T={height:d,width:Math.min(1.5*d,f-(this.t+d)/2+1),position:"absolute",opacity:1-(k-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"},S={height:this.t,width:this.t,background:getBackgroundColor(k,this.i,this.s,e,a),display:"inline-block",cursor:s?"default":"pointer",borderRadius:"50%",position:"absolute",transform:"translateX("+k+"px)",top:Math.max(0,(d-this.t)/2),outline:0,boxShadow:M?u:l,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:o,style:R},React.createElement("div",{className:"react-switch-bg",style:m,onClick:s?null:this.f,onMouseDown:function(t){return t.preventDefault()}},r&&React.createElement("div",{style:C},r),c&&React.createElement("div",{style:T},c)),React.createElement("div",{className:"react-switch-handle",style:S,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,tabIndex:v,onFocus:this.g,onBlur:this.v,onKeyUp:this.b,onChange:this.p,"aria-labelledby":b,"aria-label":g,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;

index.d.ts

@@ -9,11 +9,11 @@ import * as React from "react";
 
-  /** 
-   * Invoked when the user clicks or drags the switch. 
-   * 
+  /**
+   * Invoked when the user clicks or drags the switch.
+   *
    * **checked** describes the presumed future state of the checked prop.
-   * 
+   *
    * **event** is a native MouseEvent when the handle is clicked or dragged, and a SyntheticEvent at all other times.
-   * 
+   *
    *  **id** is the ID prop of the switch.
-   * 
+   *
    * @param {boolean} checked
@@ -23,115 +23,126 @@ * @param {object} event
    */
-  onChange: (checked: boolean, event:  React.SyntheticEvent<MouseEvent | KeyboardEvent> | MouseEvent, id: string) => void;
+  onChange: (
+    checked: boolean,
+    event: React.SyntheticEvent<MouseEvent | KeyboardEvent> | MouseEvent,
+    id: string
+  ) => void;
 
-  /** 
+  /**
    * When true, the switch will no longer be interactive and its colors will be greyed out.
    */
-  disabled?: boolean
+  disabled?: boolean;
 
   /**
    * The switch will take on this color when it is **not** checked. Only accepts 3 or 6 digit hex colors, e.g., #888, #45abcd.
-   * 
-   * Defaults to #888. 
+   *
+   * Defaults to #888.
    */
-  offColor?: string
+  offColor?: string;
 
   /** The switch will take on this color when it is checked. Only accepts 3 or 6 digit hex colors, e.g., #080, #45abcd.
-   * 
+   *
    * Defaults to #080.
    */
-  onColor?: string
+  onColor?: string;
 
-  /** 
+  /**
    * The color of the handle of the switch when **not** checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd.
-   * 
+   *
    * Defaults to #fff.
    */
-  offHandleColor?: string
+  offHandleColor?: string;
 
-  /** 
+  /**
    * The color of the handle of the switch when checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd.
-   *  
-   * Defaults to #fff. 
+   *
+   * Defaults to #fff.
    */
-  onHandleColor?: string
+  onHandleColor?: string;
 
-  /** 
+  /**
    * The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch.
-   * 
+   *
    * Defaults to undefined.
    */
-  handleDiameter?: number
+  handleDiameter?: number;
 
-  /** 
+  /**
    * An icon that will be shown on the switch when it is **not** checked. Set to false to show no icon.
-   * 
+   *
    * Defaults to an x icon.
    */
-  uncheckedIcon?: JSX.Element | boolean
+  uncheckedIcon?: JSX.Element | boolean;
 
-  /** 
+  /**
    * An icon that will be shown on the switch when it is checked. Set to false to show no icon.
-   * 
+   *
    * Defaults to a checked icon.
    */
-  checkedIcon?: JSX.Element | boolean
+  checkedIcon?: JSX.Element | boolean;
 
-  /** 
+  /**
    * The box-shadow of the handle of the switch.
-   * 
-   * Defaults to undefined. 
+   *
+   * Defaults to undefined.
    * */
-  boxShadow?: string
+  boxShadow?: string;
 
   /** The box-shadow of the handle of the switch when it is active or focused. **Do not set this to null as it is important for accessibility.**
-   * 
+   *
    * Defaults to '0px 0px 2px 3px #33bbff'.
    */
-  activeBoxShadow?: string
+  activeBoxShadow?: string;
 
-  /** 
-   * The height of the background of the switch, measured in pixels. 
-   * 
+  /**
+   * The height of the background of the switch, measured in pixels.
+   *
    * Defaults to 28.
    */
-  height?: number
+  height?: number;
 
-  /** 
+  /**
    * The width of the background of the switch, measured in pixels.
-   * 
+   *
    * Defaults to 56.
    */
-  width?: number
+  width?: number;
 
-  /** 
+  /**
    * The className of the outer shell of the switch.
-   * 
+   *
    * Defaults to undefined.
    */
-  className?: string
+  className?: string;
 
-  /** 
+  /**
    * The id of the embedded checkbox.
-   * 
-   * Defaults to undefined. 
+   *
+   * Defaults to undefined.
    */
-  id?: string
+  id?: string;
 
-  /** 
+  /**
    * The aria-labelledby attribute of the embedded checkbox. This should be the same as the id of the switch's label.
-   * 
-   * Defaults to undefined. 
+   *
+   * Defaults to undefined.
    */
-  ariaLabelledby?: string
+  ariaLabelledby?: string;
 
-  /** 
+  /**
    * The aria-label attribute of the embedded checkbox.
-   * 
+   *
    * Defaults to undefined.
    */
-  ariaLabel?: string
+  ariaLabel?: string;
+
+  /**
+   * The components place in the tab order.
+   *
+   * Defaults to 0.
+   */
+  tabIndex?: number;
 }
 
-declare class ReactSwitch extends React.Component<ReactSwitchProps>{ }
+declare class ReactSwitch extends React.Component<ReactSwitchProps> {}
 
-export default ReactSwitch
+export default ReactSwitch;

package.json

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

README.md

@@ -89,2 +89,3 @@ A draggable toggle-switch component for React.
 | aria-label                            | string            | _undefined_                                                                              | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers.                                                                                                                              |
+| tabIndex                              | number            | 0                                                                                        | Controls the components place in the tab order. Set it to _-1_ if you want the switch to be removed from the tab flow.                                                                                                    |
 
@@ -91,0 +92,0 @@ The following props have to be either 3-digit or 6-digit hex-colors:

Fixed alerts

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

Total package byte prevSize

411941

increased by0.14%

Lines of code

643

increased by1.9%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

132

increased by0.76%

No dependency changes