react-switch - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [4.1.0 - 2019-02-17]
+
+### Added
+
+- Add support for name attribute
+
 ## [4.0.0 - 2019-01-30]
@@ -10,0 +16,0 @@

dist/react-switch.dev.js

@@ -325,2 +325,3 @@ var React = require('react');
     var id = ref.id;
+    var name = ref.name;
     var ariaLabelledby = ref["aria-labelledby"];
@@ -457,3 +458,3 @@ var ariaLabel = ref["aria-label"];
         React.createElement( 'input', {
-          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 })
+          type: "checkbox", role: "switch", id: id, name: name, 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 })
       )
@@ -482,2 +483,3 @@ );
   id: PropTypes.string,
+  name: PropTypes.string,
   tabIndex: PropTypes.number,
@@ -484,0 +486,0 @@ "aria-labelledby": 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.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;
+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,M:!0,R: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.R,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,M:!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({M:!1}))},t.prototype.b=function(){this.h=Date.now()},t.prototype.g=function(){this.setState({M:!0})},t.prototype.v=function(){this.setState({M:!1})},t.prototype.w=function(t){this.y=t},t.prototype.f=function(t){t.preventDefault(),this.y.focus(),this.$(t),this.setState({M:!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.name,g=t["aria-labelledby"],v=t["aria-label"],w=t.tabIndex,k=this.state,y=k.o,m=k.T,M=k.M,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"},C={height:d,width:f,margin:Math.max(0,(this.t-d)/2),position:"relative",background:getBackgroundColor(y,this.i,this.s,n,h),borderRadius:d/2,cursor:s?"default":"pointer",WebkitTransition:m?null:"background 0.25s",MozTransition:m?null:"background 0.25s",transition:m?null:"background 0.25s"},T={height:d,width:Math.min(1.5*d,f-(this.t+d)/2+1),position:"relative",opacity:(y-this.s)/(this.i-this.s),pointerEvents:"none",WebkitTransition:m?null:"opacity 0.25s",MozTransition:m?null:"opacity 0.25s",transition:m?null:"opacity 0.25s"},S={height:d,width:Math.min(1.5*d,f-(this.t+d)/2+1),position:"absolute",opacity:1-(y-this.s)/(this.i-this.s),right:0,top:0,pointerEvents:"none",WebkitTransition:m?null:"opacity 0.25s",MozTransition:m?null:"opacity 0.25s",transition:m?null:"opacity 0.25s"},$={height:this.t,width:this.t,background:getBackgroundColor(y,this.i,this.s,e,a),display:"inline-block",cursor:s?"default":"pointer",borderRadius:"50%",position:"absolute",transform:"translateX("+y+"px)",top:Math.max(0,(d-this.t)/2),outline:0,boxShadow:M?u:l,border:0,WebkitTransition:m?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:m?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:m?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:C,onClick:s?null:this.f,onMouseDown:function(t){return t.preventDefault()}},r&&React.createElement("div",{style:T},r),c&&React.createElement("div",{style:S},c)),React.createElement("div",{className:"react-switch-handle",style:$,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,name:b,checked:i,disabled:s,tabIndex:w,onFocus:this.g,onBlur:this.v,onKeyUp:this.b,onChange:this.p,"aria-labelledby":g,"aria-label":v,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

@@ -123,2 +123,16 @@ import * as React from "react";
   /**
+   * The name of the embedded checkbox.
+   *
+   * Defaults to undefined.
+   */
+  name?: string;
+
+  /**
+   * The components place in the tab order.
+   *
+   * Defaults to 0.
+   */
+  tabIndex?: number;
+
+  /**
    * The aria-labelledby attribute of the embedded checkbox. This should be the same as the id of the switch's label.
@@ -136,9 +150,2 @@ *
   ariaLabel?: string;
-
-  /**
-   * The components place in the tab order.
-   *
-   * Defaults to 0.
-   */
-  tabIndex?: number;
 }
@@ -145,0 +152,0 @@

package.json

 {
   "name": "react-switch",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Draggable toggle-switch component for react",
@@ -14,3 +14,2 @@ "main": "index.js",
     "demo:prod": "webpack --mode production",
-    "deploy-demo": "npm run test && npm run build && git subtree push --prefix demo/dist origin gh-pages",
     "format": "prettier --write '**/*.{js,jsx,json}'",
@@ -17,0 +16,0 @@ "lint": "eslint --ext .js,.jsx src/ demo/src",

README.md

@@ -46,9 +46,5 @@ A draggable toggle-switch component for React.
     return (
-      <label htmlFor="normal-switch">
+      <label>
         <span>Switch with default style</span>
-        <Switch
-          onChange={this.handleChange}
-          checked={this.state.checked}
-          id="normal-switch"
-        />
+        <Switch onChange={this.handleChange} checked={this.state.checked} />
       </label>
@@ -62,8 +58,6 @@ );
 
-The Switch component in the above example is nested inside a label tag. The label tag has an htmlFor-value that is identical to the id-value that is passed to the Switch ("normal-switch"). This is to make sure that users can click the label to toggle the switch, and that the label text is read out to people with reduced sight who use screen readers. If one would theoretically just put some text next to the switch, the screen reader will just read out "switch off" or something like that and the user will have no idea what it is for.
+The Switch component in the above example is nested inside a label tag. This makes sure that the label text is read out to people with reduced sight who use screen readers and enables users to click on the text to toggle the switch. If you would only put some text next to the switch but not inside a `label` element, the screen reader will just read out "switch off" and the user will have no idea what it is for.
 
-It's not strictly necessary to both nest the switch inside the label AND use the htmlFor prop to link the label and the switch. It should be enough to do just one. However, using both will ["cover 100% of assistive devices"](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md) and free you from annoying eslint errors.
+If you don't want to nest the switch inside a label, you can use the `htmlFor` attribute on the label-element and set it to the same value as the `id` of the switch. Alternatively, you can use the `aria-labelledby` or `aria-label` props to give the switch a label. You can see examples of this at the bottom of the [demo page](https://react-switch.netlify.com/).
 
-Alternatively, you can use the aria-labelledby or aria-label props to give the switch a label. You can see examples of this at the bottom of the [demo page](https://markusenglund.github.io/react-switch/).
-
 ## API
@@ -89,5 +83,6 @@
 | id                                    | string            | _undefined_                                                                              | Set as an attribute to the embedded checkbox. This is useful for the associated label, which can point to the id in its htmlFor attribute.                                                                                |
+| name                                  | string            | _undefined_                                                                              | Set as an attribute to the embedded checkbox. Not usually needed.                                                                                                                                                         |
+| 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.                                                                                                    |
 | aria-labelledby                       | string            | _undefined_                                                                              | Set as an attribute of the embedded checkbox. This should be the same as the id of a label. You should use this if you don't want your label to be a \<label> element                                                     |
 | 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.                                                                                                    |
 
@@ -94,0 +89,0 @@ The following props have to be either 3-digit or 6-digit hex-colors:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

412042

increased by0.03%

Lines of code

651

increased by1.24%

Worsened metrics

Number of lines in readme file

127

decreased by-3.79%

No dependency changes